Руководство пользователя Отмена

Гибкий дизайн с использованием «резиновых» макетов

Поиск

Последнее обновление 18 февр. 2022 г.

Хотите создавать сайты с гибким дизайном для экранов различных устройств? Узнайте, как создавать веб-сайты для мобильных устройств и настольных компьютеров в Dreamweaver на основе «резиновых макетов».

Макет веб-сайта должен реагировать на изменение размеров устройства, на котором он отображается, и адаптироваться к ним (гибкий или отзывчивый дизайн). «Резиновый» макет предоставляет визуальный способ для создания разных макетов, соответствующих устройствам, на которых отображается веб-сайт.

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

Дополнительные сведения: адаптивные макеты и гибкие макеты

Режим проверки недоступен для документов c «резиновыми» макетами.

Создание «резинового» макета

Можно отредактировать существующие «резиновые» макеты в Dreamweaver 2017. Однако нельзя создавать «резиновые» макеты.

Вместо этого используйте Bootstrap для создания гибких макетов в Dreamweaver 2017. Дополнительные сведения о Bootstrap см. в разделе Работа с файлами Bootstrap.

Выберите Файл > «Резиновый» макет (устаревший).
Значение по умолчанию для количества столбцов в сетке отображается в центре носителя. Чтобы настроить количество столбцов для устройств, измените это значение.
Чтобы задать ширину страницы по отношению к размеру экрана, задайте значение в процентах.
Можно также изменить ширину внутреннего поля. Внутреннее поле — это пространство между 2 столбцами.
Укажите параметры CSS для страницы.

Если нажать кнопку «Создать», появится запрос на указание CSS-файла. Можно выполнить одно из следующих действий.
- Создать новый файл CSS.
- Открыть существующий файл CSS.
- Указать открываемый файл CSS как файл CSS «Резиновый» макет.
«Резиновый» макет для мобильных телефонов отображается по умолчанию. Кроме того, отображается панель «Вставка» для «резинового» макета. Используйте параметры на панели «Вставка» для создания макета.

Чтобы переключиться в режим создания макета для других устройств, щелкните соответствующий значок в параметрах в представлении «Дизайн».
Сохраните файл. При сохранении HTML-файла отображается запрос на сохранение зависимых файлов, таких как boilerplate.css и respond.min.js, в папке на компьютере. Укажите расположение и нажмите кнопку «Копировать».

Файл Boilerplate.css основан на HTML5 boilerplate. Это набор стилей CSS, который обеспечивает согласованное отображение веб-страницы на разных устройствах. Файл respond.min.js является библиотекой JavaScript, помогающей обеспечивать поддержку медиазапросов в прежних версиях браузера.

Редактирование документов с «резиновым» макетом

Можно редактировать документы с «резиновым» макетом непосредственно в режиме интерактивного просмотра в следующих целях.

Чтобы связывать классы HTML и идентификаторы с элементами. Дополнительные сведения см. в разделе Отображение элемента.
Чтобы редактировать атрибуты изображения и текст. Дополнительные сведения см. в разделах Быстрый инспектор свойств и Редактирование текста в режиме интерактивного просмотра.
Чтобы вставить новые элементы. Дополнительные сведения см. в разделе Вставка элементов «резинового» макета.

Для визуализации структуры HTML DOM на основе «резинового» макета также можно использовать Быстрый просмотр элемента.

Вставка элементов «резинового» макета

Панель «Вставка» («Окно» > «Вставка») отображает список элементов, которые можно использовать в «резиновом» макете. При вставке элементов их можно вставить их как «резиновые» элементы.

На панели «Вставка» щелкните элемент, который необходимо вставить.
Чтобы выбрать расположение элемента относительно опорного элемента, выделенного в документе, выберите «До», «После» или «Вложить» в открывшемся диалоговом окне.
Выберите класс или введите значение идентификатора. В меню «Класс» отображаются классы из CSS-файла, заданного при создании страницы.
Выберите «Вставить как "резиновый" элемент».

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

Параметр	Описание
Заменить Div	Меняет текущий выбранный элемент на элемент выше или ниже.
Скрыть	Скрывает элемент. Чтобы отменить скрытие элемента, выполните одно из следующих действий: Чтобы отменить скрытие селекторов идентификаторов, измените свойство display в файле CSS на block. (display:block) Чтобы отменить скрытие селекторов классов, удалите примененный класс (hide_<MediaType>) в исходном коде.
Переместить на строку вверх	Перемещает элемент на строку вверх.
Дублировать	Дублирует текущий выбранный элемент. Стиль CSS, подключенный к элементу, также дублируется.
Удалить	Селекторы идентификаторов: удаляется и HTML и CSS. Чтобы удалить только HTML, нажмите клавишу Delete. У селекторов классов удаляется только HTML.
Выравнивание	Селекторы классов: параметр «Выравнивание» действует как кнопка отсутствия отступа. У селекторов идентификаторов кнопка выравнивания выравнивает элементы по сетке.

Примечание.

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

Вложенные элементы

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

Дублирование вложенных элементов также поддерживается. Функция вложенного дублирования копирует HTML (выбранного элемента) и создает соответствующий CSS «резинового» элемента. Абсолютные элементы, содержащиеся в выбранном элементе, позиционируются соответствующим образом. Вложенные элементы можно также создать с помощью кнопки «Дублировать».

При удалении родительского элемента удаляются CSS, соответствующий элементу, его дочерние элементы и связанный HTML. Вложенные элементы также можно удалить с помощью кнопки «Удалить» (сочетание клавиш: Ctrl+Delete).