Создание мобильной версии сайта в Adobe Muse.
В уроке рассказывается о создании мобильной и планшетной версии сайта в программе Adobe Muse. Создание мобильной версии сайта, а также планшетной версии не такая уж сложная задача, просто нужно быть особенно внимательным, иметь усидчивость и выполнять некоторые простые действия в программе.
Создание мобильной версии сайта. Вступление.
В этом видеоуроке я покажу, как сделать мобильную и планшетную версии сайта в программе Adobe Muse. Работать мы будем в программе Adobe Muse версии. Должен сказать, это у меня самая последняя версия стоит, но скоро должна выйти еще одна версия, которая будет позволять создавать резиновые сайты. Это будет очень интересно, так что будем ждать обновлений. Для того, чтобы сильно не затягивать начало, давайте сразу начинать. Я подготовил небольшой макет сайта на английском языке, чтобы вас не отвлекал сам текст или контент, который расположен на этой страничке.
Создание мобильной версии сайта. Добавление макета.
Я открываю свой файл. Допустим, у нас есть вот такая небольшая страничка, подписная, которую мы хотели бы перевести или создать из нее мобильную версию этой страницы. В принципе, создавать мобильную версию сайта или странички не так сложно. Для этого давайте перейдем в режим плана сайта и здесь мы увидим три кнопки: кнопка “Компьютер”, кнопка “+планшет” и “+телефон”. Сама программа подсказывает нам, что нужно сделать: нужно щелкнуть по данной кнопке, чтобы добавить оформление телефона на сайт. Давайте мы сразу это и сделаем.
Добавление макета Телефон и настройки.
Перед нами выскочило окошко “Добавить макет – телефон”. Здесь мы можем скопировать план сайта, атрибуты страницы, заливку браузера в новый макет. Я обычно выбираю здесь ту версию, которая у меня обычно существует. У нас существует версия “Компьютер”. Поэтому я выбираю здесь версию “Компьютер” и оставляю галочки “Копировать план сайта” и “Копировать атрибуты страницы”. Заливку браузера можно не ставить, поскольку у нас там заливки особо и нет на этой странице и заливка приведет к немного большей скорости загрузки страницы (несущественно).
Здесь мы так же можем почитать об этой функции немного больше, если нажмем на значок вопросика. Это перекинет нас на сайт Adobe, чтобы узнать больше. “Копировать заливку браузера” я обычно не ставлю, я нажимаю “Окей”, происходит некоторая трансформация и у нас появляется еще одна версия, еще один план сайта, только уже мобильный. Давайте 2 раза щелкнем на ней. мы попадаем вот в такой вот макет. Что макет представляет собой давайте посмотрим сразу. Нажмём Страница -> Свойства страницы и видим, что макет наш представляет собой прямоугольник размерами 380х570, все остальное скопировано у нас. Все настройки скопированы у нас из нашего макета для компьютера. Что же делать дальше?
Создание мобильной версии сайта. Копирование контента в макет “Телефон”
Давайте зайдем в наш макет с компьютера. Вот он. Нажимаю клавишу Ctrl+A, чтобы выделить все элементы на странице. Нажимаю клавиши Ctrl+C, чтобы скопировать в буфер обмена страницу, перехожу снова на дизайн для мобильного телефона, на закладку Домашняя -> Телефон. Нажимаю Ctrl+V, чтобы вставить все, что у меня находится в буфере обмена. Сейчас мы видим, что у нас тут полнейший разброд и шатание, я поставлю немножко меньше масштаб, чтобы вы увидели.
Редактирование контента в макете “Телефон”
То есть вот наша ширина макета для телефона, а наши элементы гораздо больше, чем нам бы хотелось. Не снимая никаких выделений, все это вместе перетаскиваем, чтобы наша картинка совпала с левым верхним углом. Вот так. Вот здесь. И теперь все, что нам остается делать – это подравнять все элементы под макет телефона. Я выделяю первые два текста, подгоняю их примерно вот так. Эта надпись нас вполне устраивает. Я немножко уменьшаю размер текстового блока. Эту надпись необходимо уменьшить в размерах, сделаю ее 36, и так же уменьшу размер текстового блока, подровняю немного. Это название нашего сайта, текст можно даже уменьшить немного (24, чтобы было пропорционально).
Берем нашу форму, перетаскиваем ее сюда же, расположим где-нибудь, вот так. Можем немного уменьшить размер картинки, поскольку у меня здесь сверху был затемняющий слой, я его тоже уменьшил. Уменьшил затемняющий слой, потом размер самой картинки. Далее переношу следующую надпись, так же уменьшаю ее под размер нашего макета для телефона. Теперь что же нам делать с этими текстовыми блоками?
Мы можем немного увеличить размер нашего шаблона, размер макета можем растянуть и увеличить, взять перенести это пониже, эти слои. Так, у нас где-то еще надпись «экстрим» – сразу его сюда переместим, чтобы он не потерялся. Сразу уменьшу. Можно теперь немного увеличить, чтобы вам было лучше видно. Перетаскиваем поэлементно каждый из элементов, центрируем его посередине и под ним оставляем текст, делаем это для каждого элемента. Уменьшаю. У нас осталось свободное поле. Давайте выделим снова все эти элементы и подвинем вверх. Немножко у нас съехало, сейчас верну все назад. Центрируем, переносим надпись последнего нашего блока и форму подписки. Вот, в принципе, и все. Наш макет для телефона уже готов.
Публикация и просмотр мобильной версии сайта.
Теперь если мы сохраним или опубликуем сайт на сервере, например, я обычно публикую на businesscatalyst для быстрого просмотра. Нажимаю “Окей”, происходит публикация на сервер businesscatalyst. Этот сервер предлагает сам Muse для быстрого просмотра опубликованных уже сайтов. Прежде чем опубликовать где-нибудь на своем хостинге, можно опубликовать здесь. Мы видим, что у меня название mount09.businesscatalyst.com. Это у нас компьютерная версия, как вы видите.
Для того, чтобы посмотреть на мобильнике, я сейчас включу свой мобильный телефон, загружу этот сайт, и вы увидите, что мобильная версия сайта включается при загрузке сайта на телефоне. Вот вы видите, что я набрал сверху тот же самый mount09.businesscatalyst.com и сайт просматривается на мобильном телефоне точно так же, как мы видели его в макете.
Создание мобильной версии сайта. Макет “Планшет”.
Давайте пойдем дальше, я расскажу вам, как создать планшетную версию сайта. Для этого мы должны точно так же вернуться в режим плана сайта, например, в режим плана “Компьютер” или в режим плана “Телефон». Нажимаем точно так же “Создать планшетную версию”, уже можем выбрать либо с компьютера, либо с телефона мы можем экспортировать.
Давайте выберем, например, с телефона, нажимаем “Окей”, создается макет сайта, и здесь уже свойства страницы мы видим 768х1024 предлагает программа. Это свойства страницы для домашней для макета планшетного, для планшета. Нажимаем “Окей” и точно так же берем копируем, например, из версии сайта для телефона. Нажимаем Ctrl+A, Ctrl+C, переходим в режим дизайна для планшета и нажимаем Ctrl+V. Видим, что все блоки перенеслись. Я сейчас уменьшу масштаб. Подровняю по центру. Все должно совпадать. Вот так мы создали и планшетную версию сайта.
Публикация и просмотр планшетной версии сайта.
К сожалению, планшета у меня нет, чтобы проверить, но думаю, что вы опубликуете сайт на businesscatalyst точно так же. Здесь можете выбирать совершенно любое имя. Я просто уже публиковал, поэтому имя у меня выбралось автоматически. Можно выбрать новый сайт либо публиковать тот же самый. Нажимаю “Окей” и для предварительного просмотра вся моя эта страничка грузится в трех вариантах на сервер Adobe businesscatalyst для того, чтобы просмотреть сайт. Мы опять же видим нашу компьютерную версию сайта, но если мы залезем в планшет, то мы увидим планшетную версию. Если залезем в телефон, то у нас запустится версия сайта для телефона.
Создание мобильной версии сайта. Экспорт в HTML и просмотр структуры сайта.
Еще один интересный момент давайте я экспортирую из программы нашу страничку, как html. Заходим в меню File -> Экспортировать как html или нажимаем клавиши Ctrl+E. Здесь указываем доменное имя, выбираем путь, куда мы хотим сохранить на своем компьютере. Я создам здесь дополнительную папку, назову ее “Mount” и в эту папку у меня сохранится html-версия моей странички. Нажимаю “Окей”.
И давайте посмотрим, что же у нас теперь в этой папке. Вот эта папка, захожу в нее и здесь вы видите, что здесь есть папка “CSS” (здесь прописанные наши стили лежат, файлы css), здесь у нас лежат картинки, которые используются на сайте, здесь у нас скрипты в папке scripts и еще мы видим 2 папки: “Font” и “Tablet”, в которых сохранены стили и файл индекса html для телефона и здесь точно так же сохранены стили и файл html для планшетной версии сайта. Файл-индекс и файлы стилей скриптов и индекс-html находятся в папке для компьютерной версии сайта. И еще папки для мобильной и телефонной версии. Теперь, если вы загрузите эти файлы на ваш хостинг, ваша страничка будет адекватно открываться на всех трех устройствах: на компьютере, на планшете и на телефоне.
Вот так просто, дорогие друзья осуществляется создание мобильной версии сайта и планшетной версии сайта в программе Adobe Muse. На этом все. Я с вами прощаюсь. Смотрите мои видеоуроки по Adobe Muse, подписывайтесь на мой канал, оставляйте комментарии внизу. До встречи в следующих уроках.
Автор видеоурока
Дмитрий Шаповалов
Здравствуйте Дмитрий. Перевожу сайт в режим телефон. Всё адаптировал, а при просмотре отображается только вторая половина сайта. Что это может быть?
Здравствуйте! Трудно сказать, посмотрите внимательно верстку в мобильной версии, в частности расположение Вашего контента сайта относительно рабочей области. Весь контент сайта должен быть в пределах этой области.
Здравствуйте у меня вопрос.
При открытии сайта на телефоне сайт открывается нормально, Но когда в настройках браузера хром выбираешь показать полную версию, то просто отдаляется экран и не открывается компьютерная версия, все так же показывает мобильную версию.
В чем может быть проблема. Только начал разрабатывать мобильную версию. лишних элементов нет. На главной странице мобильной версии есть только один блок и все.
Заранее спасибо.
Добрый день!
Создавая страницы в макете Компьютер – можно ли настроить автоматическую генерацию этих же в макете Телефон?
День добрый! Скопировать план сайта из готового макета Компьютер в макет Телефон можно только при создании нового макета Телефон. Контент сайта из макета в макет переносится вручную. В дальнейшем можно добавлять страницы в каждом из макетов отдельно, автоматической генерации отдельных страниц сразу в двух макетах в программе не предусмотрено.
Здравствуйте, Дмитрий!
Очень люблю смотреть ваши уроки по Muse. Часто пользуюсь вашими приемами.
Сейчас создаю сайт, что указываю, в приложении. Проблема такая. Сайт делается адаптивным через версию Muse 2017.0.0.149 Возникает проблема с отображением на мобильных устройствах. Разрешения пока взяты два: 480 и 768 пикселей. Проверку делал на Lumia 925 (Windows Phone 8.1, IE), Meizu M3 Note (Android 6.0, Chrome), LG G3 (Android, Chrome)
На Lumia 925 более-менее корректно отображается (просто 480 не совсем подходит)
А вот на андроид устройствах отображается коряво. Не могу уловить суть проблемы такого некорректного отображения. Заказчику важны именно мобильные версии сайта. А при просмотре на ПК, браузер отображает все корректно (причем любой). Прошу помочь.
Здравствуйте! Благодарю за Ваш отзыв, очень приятно.
В браузере Google Chrome на моем Lenovo P1M (Android 5.1) тоже Ваш сайт выглядит криво. И даже на компьютере все отображается не так как Вы думаете (попробуйте уменьшить ширину браузера до минимума – увидите сами). Проблема у вас в гибкой верстке, в настройках гибкости каждого элемента сайта при переходе от одной точки остановки к другой, нужно все правильно и грамотно настраивать, каждый элемент.
Если нужны дополнительные обучающие материалы на эту тему – есть специальный платный мини-курс по работе с инструментами гибкой верстки и точками остановки смотрите здесь. При покупке совместно с Большим базовым курсом – выйдет дешевле, нажимайте кнопку “Приобрести курс” внизу страницы.
С уважением, Дмитрий Шаповалов.
Спасибо, Дмитрий, за оперативный ответ!
Буду пробовать корректировать самостоятельно, если уж совсем ничего не получится, прибегну к вашему предложению )) Спасибо!
Пожалуйста. Успехов Вам!
Уважаемый Дмитрий!
Вот такой вопрос. Ок. Есть версия сайта для смартфона, есть для планшета. Но версия для смартфона имеет 320 пикселей по ширине по умолчанию. Если же ты поворачиваешь смартфон в горизонтальное положение, то с левой стороны экрана остается макет, который выглядит корректно в вертикальном положении смартфона, а справа – белый экран. Это как-то лечится? Спасибо!
Здравствуйте. Смотрите элементы расположенные за пределами области контента в проекте при верстке, часто это является причиной неправильного отображения в версиях сайта для планшета и телефона и появления дополнительных белых областей.
Т.к. прайс-лист в excel, в нем гиперссылка на сайт.
Проверьте правильность размещенных ссылок в прайс-листе.
Проверьте нормально ли открывается сайт по прямой ссылке в браузере (не из прайс-листа) или ситуация такая же?
Далее можно проверить переход по ссылкам из прайс-листа на другом компьютере или ноутбуке.
Вообще при создании планшетной и мобильной версии в код сайта добавляется скрипт, который определяет с какого вида устройства зашел пользователь и выдает ему соответствующую версию сайта.
Если все ссылки правильные, значит Ваш ноутбук по какой-то причине (через раз) определяется как мобильное устройство, возможно проблема единична и зависит от конкретной модели ноутбука. Это мои предположения.
Доброй ночи, Дмитрий! Подскажите пожалуйста, Сделал 2 сайта, мобильный и компьютерный вариант, и получается, что при переходе по ссылке из excel, word на ноутбуке открывается, то компьютерная версия, то мобильная. не могу разобраться:( Смотрел Ваши видео, спасибо!!!
Здравствуйте. Затрудняюсь ответить. Непонятно причем тут word и excel? Нормально ли открывается сайт по прямой ссылке в браузере?
Спасибо вам огромное, буду проверят другие хосты и огромное Спасибо за ваши видео уроки, помогли очень!
Пожалуйста, Всеволод.
Смотрите мои видео на youtube-канале и на этом сайте, не забывайте делиться ими c друзьями через социальные кнопки. Особенно если очень понравилось.
Здравствуйте, у меня такой вопрос: сделал сайт в Adobe, компьютерная версия, планшетная версия и мобильная. Залил это всё на хостинг, проверяю с компа всё отлично так как мне надо, а с мобильными версиями всё печально, загрузка страниц происходит как для компьютера.
Хост не businesscatalyst.
Здравствуйте.
Если Вы имеете ввиду свой сайт про кузнецкий уголь, который у Вас указан в аккаунте, я его проверил, там все работает: на компьютере – компьютерная версия, на мобильном – мобильная. И даже на бизнескаталисте все должно работать как надо, сам неоднократно проверял созданные мной странички на бизнескаталисте. Возможно дело не в muse, а в Вашем мобильном устройстве и его браузере, на котором Вы тестируете свой сайт.
На компьютере всё нормально отображается, размеры и пропорции которые я выставлял всё нормально. С планшета смотрел NEXUS, выдается компьютерная версия, с мобильного фирмы Lenovo точно так же отображается компьютерная версия.
Может быть такое что это зависит от хостинга? Что хостинг как то не правильно выдает запрос?
Hosting….ru
А, кстати форма reCAPTCHA почему то тоже не работает под этим хостом. Нету картинки с цифрами!
P.S. на бизнескаталист не заливал т.к. дорого для тестов!
Я тоже смотрел Ваш сайт через смартфон Lenovo, через мобильный Яндекс-браузер последней версии. Все работает.
На счет хостинга, который Вы используете ничего не могу сказать, однако на разных хостингах иногда появляются разные глюки.
На хостинге, который использую я – слава богу, все отлично работало и работает.
P.S. Публикация на временный поддомен бизнескаталиста, напрямую через программу Adobe Muse – бесплатная.