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


    2 часа назад, MB сказал:

    Почему в тестах пусто?

    Сейчас переделываем систему тестов. Скоро будет снова доступно.

    Share this comment


    Link to comment
    Share on other sites

    Скажите, пожалуйста, получается для планшетов и мобильников дизайн и верстку нужно делать отдельно? и сетку так же настраивать конкретно под каждое устройство свою? можно ли как-то автоматически адаптировать макет сайта для компьютера и на мобильник и планшет?

    Share this comment


    Link to comment
    Share on other sites
    В 08.02.2016в16:58, YanaZamkova сказал:

    Скажите, пожалуйста, получается для планшетов и мобильников дизайн и верстку нужно делать отдельно? и сетку так же настраивать конкретно под каждое устройство свою? можно ли как-то автоматически адаптировать макет сайта для компьютера и на мобильник и планшет?

    Отвечу по порядку. Есть два режима работы:

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

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

    Share this comment


    Link to comment
    Share on other sites

    Да, я теперь понимаю, что после обновления и возможности делать сайт респонсивным мои вопросы как бы уже не актуальны) спасибо!

    Share this comment


    Link to comment
    Share on other sites

    Во всех предыдущих уроках в видео на панели инструментов не было кнопок "Компьютер" "Планшет" и "Телефон". В этом уроке они появились. При создании сайта в Adobe Muse 2015 уже нет параметра где выбирается для какого типа устройства создается сайт. Вопрос: как начинать делать сайт по первому режиму работы? 

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

    Share this comment


    Link to comment
    Share on other sites
    В 03.03.2016в14:39, vipvova сказал:

    Во всех предыдущих уроках в видео на панели инструментов не было кнопок "Компьютер" "Планшет" и "Телефон". В этом уроке они появились. При создании сайта в Adobe Muse 2015 уже нет параметра где выбирается для какого типа устройства создается сайт. Вопрос: как начинать делать сайт по первому режиму работы? 

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

    Здравствуйте! 

    Создать отдельные макеты можно используя главное меню. Вот скриншот:

    2016-03-05_002956.jpg.200db45d320ef672cb

    Share this comment


    Link to comment
    Share on other sites


    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now

×