Adobe Muse уроки | 12.Создание мобильной версии сайта

Автор Maksim Inshakov
Adobe Muse уроки | 12.Создание мобильной версии сайта

Всем привет дорогие друзья.

В этом видео уроке. Я покажу как сделать мобиль и планшетной версии сайта в программе Adobe Muse работать мы будем в программе Adobe Muse CC 2015 должен сказать, что — это у меня самая последняя версия стоит, но скоро должна выйти. Еще одна версия который будет позволять создавать резиновые сайты — это будет очень интересно.

Так, что будем ждать обновлений для того чтобы сильно не затягивать начала.

Давайте сразу начинать. Я подготовил макет сайта на английском языке чтобы не отвлекал сам текст или контент который расположен на этой страничке. Так, что давайте начинать. Я открываю свой файл до нас есть вот такая небольшая страничка подписная которую вы хотели бы или создать мобильную версию этой странице в принципе создавать мобильную версию сайта или странички не так-то сложно для этого. Давайте режим плана сайта и здесь мы увидим три кнопки кнопка компьютер кнопка + планшет и плюс телефон сама программа подсказывает нам, что нужно сделать — это нужно сохнуть по данной кнопки чтобы добавить оформление телефон на сайт давайте мы сразу — это и сделаем перед нами выскочило окошко добавить макет телефон здесь мы можем план сайт атрибуты страницы заливку браузера в новый макет я обычно выбираю здесь эту версию которая у меня уже существует. У нас существует версия компьютер поэтому я убираюсь версию и оставлять галочки копировать план сайта и копировать атрибуты страницы заливку браузера можно поскольку у нас там заливки то особое нету на этой странице и заливка привезёт ну-ка. Немного больше скорости загрузки страницы несущественно здесь мы-то можем почитать об этой функции. Немного больше если нажмем значок вопросика этот перекинет нас на сайт. Одоевский чтобы узнать больше копировать заливку браузер я обычно не ставлю нажимаю. О'кей происходит некоторые трансформация и у нас появляется еще одна версия ещё один план. Сайта только уже мобильный 22 раза щелкни на ней мы попадаем вот такой макет макет представляет собой. Давайте посмотрим сразу нажмем страница свойства страницы. Увидим, что вам макет наш представляет собой прямоугольник размером 308 570 всё остальное скопирована у нас все настройки скопированы из нашего макета для. Что же делать дальше. Давайте зайдем в наш. Макет с компьютера вот он нажимаю клавишу контрл чтобы выделить все элементы на странице нажимая клавиши контрл C чтобы скопировать в буфер обмена в страницу перехожу снова на дизайн для мобильного телефона на закладку вот эту домашний телефон нажимаю контроль чтобы вставить всё, что у меня находится в буфер обмена сейчас мы видим, что у нас тут полнейший разброд и шатания я поставлю немножко меньше масштаб чтобы видели то есть вот наша ширина макета для телефона нашей элементы гораздо больше чем нам бы хотелось ничего не снимая никаких выделений всё — это вместе перетаскиваем перетаскивали британским чтобы наши картинка совпало с левом верхнем углу вот так вот здесь и теперь всё, что нам остаётся делать — это подровнять все элементы под макет телефона. Я выделяю первые два текста подгоняя их. Примерно вот так надпись. Напомни устраивать. Я немножко уменьшать размер текстового блока эта надпись необходимо уменьшить в размерах сделай ей 36 и также уменьшить размер текстового блока на же так поздравляю. Немного — это название нашего сайта текст. Можно даже уменьшить немного 24 так чтобы профессионально берём нашу форму перетаскиваем её сюда же расположен где-нибудь вот так можно немного уменьшить размер картинки поскольку у меня просто сверху затемняющий слой я его тоже уменьшил меньше затемняющие свой потом уменьшить размер картинки доля переношу в следующую надпись также уменьшает её под размер нашего макета для телефона и тебе, что же нам делать вот этими текстовыми блоками мы можем немного размер размер нашего шаблона размер макета можем растянуть увеличить взять перенести — это пониже эти слои. Так у нас 2010 экстрим был этот сразу его чтобы он не потерялся я сразу меньше так можно теперь немного увеличить чтобы вам было лучше видно так перед поэлементно каждый из элементов центрировать посередине и под ним оставляем текст делаем. Это для каждого элемента мешаю нас осталось свободное поле давай снова все эти элементы и подъем вверх так и немножко нас съехала сейчас я вернулся назад переносим надпись последнего нашего блока и форму подписки вот принципе и всё наш макет для телефона уже готов. Теперь если мы сохраним или опубликуем сайт на сервере. Например я обычно публикуется Business Catalyst для быстрого просмотра. Вот нажимаю происходит публикация на сервер Business Catalyst — это сервер предлагает samus для быстрого просмотра опубликованных уже сайтов как бы прежде чем где-нибудь на своем хостинге можно опубликовать здесь мы видим, что у меня названием a09 бизнес когда — это у нас компьютерная версия как вы видите для того чтобы посмотреть на мобильнике я сейчас включу свой мобильный телефон загружу этот сайт и вы увидите, что версия сайт отключается при запуске сайта на телефоне. Вот вы видите, что я набрал сверху тот же самый момент 09 Business Catalyst ком и сайт просматривается на мобильном точно также как мы видели его в макете. Давайте пойдем дальше я расскажу вам как создать планшетной версии сайта для этого мы должны точно также вернуться в режим план это. Например в режим планы компьютер или в режим планшет-телефон нажимаем точно также создать планшетную версию уже можем выбрать либо с компьютера или с телефона мы можем экспортировать телефона нажимаю. О'кей создаётся.

0 комментариев
0

Читайте также