Jump to content
  • Просмотр сайта на разных устройствах

       (82 reviews)

    Евгений Зубов
    • 13 4,25,6,20,3,26,27,28,29 4,2,31,6,20,32,3 https://creatura.club/uploads/monthly_2015_12/2.2.2_%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0_%D1%83%D1%81%D1%82%D1%80%D0%BE%D0%B9%D1%81%D1%82%D0%B2_%D0%B4%D0%BB%D1%8F_%D0%BF%D1%80%D0%BE%D1%81%D0%BC%D0%BE%D1%82%D1%80%D0%B0.mp4.f5ad82aee49e505f25ba9e6630a70527.mp4 4 До 5 минут display: none; https://creatura.club/uploads/ Низкая сложность display: none;
      1. Пройдите тестирование
      2. Задайте вопросы в обсуждениях (если есть)
      3. Сдайте задание и оцените урок

      Из этого урока вы узнаете некоторые нюансы по настройке устройств для просмотра.

      Заходим сразу файл в Adobe Muse и, допустим, у нас есть готовый сайт, который у нас сверстан в трех версиях. У нас есть компьютерная версия сайта, планшетная версия сайта и версия сайта для телефона. Давайте снова перейдем к версии компьютера. И все дело в том, что разработчики программы очень грамотно продумали свой режим просмотра. Добавили очень интересные функции, о которых пойдет речь далее.

      Используя компьютер или ноутбук для создания сайтов, естественно, мы можем просмотреть создаваемый нами сайт, двумя способами, нажав режим Просмотр для того, чтобы просмотреть сайт во встроенном браузере Adobe Muse либо нажав «Файл» - «Предварительный просмотр страницы в браузере». Тогда мы просматриваем наш сайт в стороннем браузере. Я закрываю.

      Но как же быстро просмотреть версии сайта для планшета и телефона. Разработчики Adobe Muse учли и этот момент и, например, если мы находимся сейчас в версии сайта для планшета, и нажмем режим Просмотр, то перед нами появится такое окошко просмотра и сможем просмотреть нашу страницу именно так, как она будет выглядеть на планшете.

      При том, в режиме просмотра в программе Adobe Muse, у нас есть еще некоторые настройки. Эти настройки распложены вверху, и мы можем выбрать размер окна просмотра. Сейчас у нас стоит размер, такой же, как у iPad, вот этот размер. Мы можем выбрать также различные другие устройства и посмотреть, как будет выглядеть наш сайт на самых топовых популярных устройствах.

      Далее у нас есть вот такой значок, который помогает нам перевернуть планшет либо в горизонтальное положение, либо остаться в вертикальном положении. Мы можем переключать эти режимы и смотреть, как будет выглядеть наш сайт на планшете в разных режимах.

      Далее есть кнопка «Обновить». Если вы делаете какие-то обновления в режиме «Дизайн» и потом хотите быстро просмотреть то, что у вас получилось, вы нажимаете кнопку «Обновить» для того, чтобы просто обновить данную страницу. И есть еще небольшая Справка. Если вы нажмете на нее, то вам здесь выскочит такая подсказка, что в режиме «Просмотра» не моделируется работа реальных устройств. Чтобы проверить оформление на реальных устройствах, рекомендуется опубликовать проект на временном сайте Adobe Bisiness Catalyst. Это еще одна функция, которую предоставляет компания Adobe, но о ней чуть позже.

      Давайте вернемся в режим Плана сайта и переключимся на макет сайта для мобильного телефона. Давайте снова зайдем в режим «Просмотр» и следующее, что мы увидим, в принципе, картинка у нас почти такая же, но если мы нажмем на изменение ориентации, то мы увидим, что размер окошка у нас значительно уменьшился и в верхнем меню, здесь у нас, размер окна просмотра стоит iPhone 5s. Мы видим, как наш сайт будет просматриваться на этом устройстве, на устройстве iPhone 5s.

      Если он находится в горизонтальном положении. Мы можем прокручивать колесико мышки, здесь работают все интерактивные элементы, но этот режим просмотра, опять же, не является полноценным режимом моделирования мобильного устройства. Все моделирование здесь заключается только в том, что у нас меняется размер этого окошка. Мы можем посмотреть, как будет выглядеть на iPhone 6s, iPhone 6s+, Nokia Lumia, Samsung Galaxy S5. И также можем переключаться между режимами.

      Таким образом, вы можете убедиться, что ваш сайт работает отлично на планшетах и мобильных телефонах, что версии для планшета и телефона работают и выгружают сайт из программы для публикации в Интернет.

      На этом данный урок закончен. Как всегда, вам необходимо будет выполнить домашнее задание и пройти небольшой тест, чтобы получить доступ к следующему уроку.

    Узнаете как проверять работу сайта на самых разных устройствах не имея их в наличии. Попробуете разные режимы просмотра. Увидите как оптимизировать сайт под мобильные телефоны и планшеты.


      Report Занятие


    User Feedback


    ZamokBBC

    Не вижу у себя кнопки версий сайта: компьютер, планшет, телефон. Как их отобразить в панели?

    Share this review


    Link to review
    luckyman

    Спасибо! Всё ок!

    Share this review


    Link to review
    Viktor6576

    Кнопкой просмотр раньше не пользовался, не знал про её функционал

    Share this review


    Link to review
    Genka

    +

    Share this review


    Link to review
    Guest Падалко Сергей

    Очень доступно

    Share this review


    Link to review
    Guest

    Спасибо

    Share this review


    Link to review
    Марсель Номан

    Отлично, только невидно версий для других устройств!

    Share this review


    Link to review
    Дмитрий Жуков

    Забыли добавить, как включить альтернативный макет, потому что при создании нового макета с нуля в плане сайта нет отображения макетов "планшет" и "телефон".

    Share this review


    Link to review
    IIDAPII

    Хорошо

    Share this review


    Link to review
    Сергей Круглов

    В новой версии, кнопки просмотра на других устройствах (компьютер,планшет, телефон.) нет.

    Share this review


    Link to review
    Юрий Рухлин

    Очень интересно спасибо

    Share this review


    Link to review

×