Начало работы с адаптивным дизайном в Adobe Muse

В этой статье рассказывается о работе с адаптивным дизайном в Adobe Muse. Узнайте, как создавать адаптивные веб-сайты для любых типов устройств.

Примечание.

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

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

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

Создайте сайт. Выберите «Гибкая ширина» в диалоговом окне «Новый сайт».

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

В диалоговом окне «Новый сайт» выберите «Гибкая ширина».
В диалоговом окне «Новый сайт» выберите «Гибкая ширина».

 

 

 

Откройте страницу-шаблон или отдельную страницу. Обратите внимание на точку остановки по умолчанию — 960 пикселей.

Обратите внимание на точку остановки по умолчанию — 960 пикселей.
Обратите внимание на точку остановки по умолчанию — 960 пикселей.

 

 

 

Начните компоновку элементов страницы, таких как тест, изображения, слайд-шоу и виджеты, с учетом этой точки остановки.

Оформление веб-страницы.
Оформление веб-страницы.

 

 

 

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

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

 

 

 

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

Добавляйте точку остановки там, где дизайн прерывается.
Добавляйте точку остановки там, где дизайн прерывается.

 

 

 

Настройте макет по новой точке остановки для корректного отображения веб-сайта.

Изменение макета в точке остановки.
Изменение макета в точке остановки.

 

 

 

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

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

Логотип Adobe

Вход в учетную запись