Перейти к содержимому
  • Просмотр сайта на разных устройствах

       (82 отзыва)

    Евгений Зубов
    • 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. И также можем переключаться между режимами.

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

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

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


      Жалоба


    Отзывы пользователей


    ZamokBBC

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

    Поделиться отзывом


    Ссылка на отзыв
    luckyman

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

    Поделиться отзывом


    Ссылка на отзыв
    Viktor6576

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

    Поделиться отзывом


    Ссылка на отзыв
    Genka

    +

    Поделиться отзывом


    Ссылка на отзыв
    samoylov.webmaster

    классно!

    Поделиться отзывом


    Ссылка на отзыв
    Гость Падалко Сергей

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

    Поделиться отзывом


    Ссылка на отзыв
    Гость

    Спасибо

    Поделиться отзывом


    Ссылка на отзыв
    Харин Владислав

    Спасибо,переходим дальше.

    Поделиться отзывом


    Ссылка на отзыв
    Михаил Егоров

    Все понятно Супер!!!

    Поделиться отзывом


    Ссылка на отзыв
    Марсель Номан

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

    Поделиться отзывом


    Ссылка на отзыв
    Дмитрий Жуков

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

    Поделиться отзывом


    Ссылка на отзыв
    IIDAPII

    Хорошо

    Поделиться отзывом


    Ссылка на отзыв
    Егор Чукавин

    Понятно, Отличный урок!

    Поделиться отзывом


    Ссылка на отзыв
    Сергей Круглов

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

    Поделиться отзывом


    Ссылка на отзыв
    Юрий Рухлин

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

    Поделиться отзывом


    Ссылка на отзыв

×