Примечание.

Новые функции больше не добавляются в Adobe Muse. Поддержка этого приложения будет прекращена 26 марта 2020 г. Для получения подробной информации и поддержки посетите страницу прекращения обслуживания Adobe Muse.

Адаптивный дизайн поддерживается в версии Adobe Muse за февраль 2016 г. и выше. Если веб-сайты созданы в версиях, вышедших до февраля 2016 г., их можно преобразовать в адаптивные макеты.

Почему мне следует переносить веб-сайты в адаптивный макет?

Если у вас есть существующий проект Adobe Muse с альтернативным макетом, вы можете перенести этот проект в адаптивный макет. Однако при необходимости вы также можете продолжить работу над альтернативными макетами.  

Адаптивные веб-сайты обычно требуют длительного кодирования и составления сложных макетов. Впервые Adobe Muse позволяет создавать адаптивные веб-сайты без кодирования, составления таблиц или шаблонов. Кроме того, с помощью одного файла можно создавать полностью адаптивные веб-сайты, которые корректно отображаются на любом устройстве независимо от размера экрана. Отдельные макеты теперь ушли в прошлое!

Обновлять текст и изображения также стало очень удобно благодаря адаптивному дизайну Adobe Muse. Вам не потребуется тратить несколько часов на внесение одинаковых изменений в несколько макетов. Кроме того, приложение In-Browser Editing, которое позволяет редактировать содержимое веб-сайта в веб-браузерах,также поддерживает адаптивные макеты.

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

Читайте статью дальше, чтобы узнать, как перенести существующие веб-сайты Adobe Muse в адаптивный макет. Перенесите свои веб-сайты в адаптивный макет — уже сейчас подготовьте их к стандартам, которые будут введены в будущем.

Как перенести альтернативные макеты в адаптивный макет?

Перед началом переноса веб-сайта в адаптивный макет может потребоваться просмотреть обзор адаптивного веб-дизайна в Adobe Muse.

Для запуска переноса веб-сайта в адаптивный макет:

  1. Откройте существующий веб-сайт.

  2. Откройте каждую страницу веб-сайта и выберите «Страница» > «Свойства страницы».

    Нажмите «Свойства страницы»
  3. На вкладке «Макет» измените «Фиксированная ширина» на «Гибкое значение ширины». Также можно установить минимальную и максимальную ширину страницы, поля и отступы для данного окна.

    Нажмите кнопку «ОК».

    Измените фиксированную ширину на гибкую ширину
    Измените фиксированную ширину на гибкую ширину в окне «Свойства страницы».

  4. Чтобы все новые добавленные страницы также были гибкими, выберите Файл > Свойства сайта. В этом окне измените параметр «Фиксированная ширина» на «Гибкое значение ширины».

  5. Выберите для макета максимальную ширину страницы, минимальную ширину и минимальную высоту.

  6. Нажмите кнопку «ОК».

  7. Перейдите к странице-шаблону или к отдельным страницам, чтобы открыть страницы в режиме «Гибкая ширина».

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

    При открытии страниц в режиме «Гибкая ширина» для объектов на странице по умолчанию установлены параметры «Постоянная ширина». Объекты также будут закреплены слева.

  8. Сделайте объекты гибкими, чтобы их размеры изменялись пропорционально ширине браузера. Нажмите правой кнопкой мыши каждый объект, который необходимо сделать гибкими, и выберите параметр «Адаптивный».

    Удалите закрепление, чтобы объекты стали гибкими. Чтобы удалить закрепление, нажмите на объект правой кнопкой мыши и выберите правой кнопкой мыши «Закрепить на странице» > «Гибкий».

  9. Используйте указатель, чтобы просмотреть макет страницы с другим значением ширины браузера.

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

    По умолчанию панель точек остановки при работе с веб-сайтом, созданным в предыдущих версиях, не отображается. Чтобы отобразить точки остановки, нажмите «Просмотр» > «Показать точки остановки».

    Отображение точек остановки через меню «Просмотр»
    Нажмите «Просмотр» > «Показать точки остановки».

    Примечание.

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

    Как правило, добавлять точки остановки следует на основе макета сайта, а не на основе размера экрана пользовательских устройств.

  10. Настройте размер и расположение объектов, а затем отформатируйте текст так, чтобы они отображались с корректным размещением в браузере любой ширины. Для получения дополнительной информации о расположении объектов в адаптивном формате см. раздел Расположение объектов в адаптивном веб-дизайне.

    Примечание.

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

  11. Проверьте выравнивание и разборчивость текста во всех точках остановки. Если требуется изменить выравнивание текстового поля или отформатировать текст для определенной ширины страниц, см. раздел Форматирование текста в адаптивных макетах.

  12. Откройте предварительный просмотр изменений, перетащив указатель к определенным точкам остановки, или выполните предварительный просмотр изменений в веб-браузере.

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

Адаптивный веб-сайт готов к публикации!

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет