Выберите «Файл» > «Создать "резиновый" макет».
Последнее обновление
21 мая 2021 г.
Макет веб-сайта должен реагировать на изменение размеров устройства, на котором он отображается, и адаптироваться к ним. «Резиновые» макеты предоставляют визуальный способ для создания разных макетов, соответствующих устройствам, на которых отображается веб-сайт.
Например, веб-сайт может просматриваться на настольных компьютерах, планшетах и мобильных телефонах. Вы можете использовать «резиновые» макеты, чтобы определить макеты для каждого из этих устройств. В зависимости от того, отображается ли веб-сайт на настольном компьютере, планшете или мобильном телефоне, для его отображения используется соответствующий макет.
Дополнительные сведения: Адаптивные макеты и реагирующие макеты
Выпуск Dreamweaver 12.2 Creative Cloud отличается множеством улучшений для «резиновых» макетов, поддерживает структурные элементы HTML5 и удобное изменение вложенных элементов. Обзор полного списка улучшений см. на странице здесь.
Примечание.
Режим проверки для документов «резинового» макета недоступен в Dreamweaver 13.1 и более поздних версиях.
Использование «резиновых» макетов
Просмотрите это видеоруководство, чтобы узнать, как использовать «резиновые» макеты: Описание «резиновых» макетов.
Создание «резинового» макета
-
-
Значение по умолчанию для количества столбцов в сетке отображается в центре типа мультимедиа. Чтобы настроить количество столбцов для устройств, измените это значение.
-
Чтобы задать ширину страницы по отношению к размеру экрана, задайте значение в процентах.
-
Можно также изменить ширину внутреннего поля. Внутреннее поле — это пространство между 2 столбцами.
-
Укажите параметры CSS для страницы.
Если нажать кнопку «Создать», появится запрос на указание CSS-файла. Можно выполнить одно из следующих действий.
- Создать новый файл CSS.
- Открыть существующий файл CSS.
- Указать открываемый файл CSS как файл CSS «Резиновый» макет.
«Резиновый» макет для мобильных телефонов отображается по умолчанию. Кроме того, отображается панель «Вставка» для «резинового» макета. Используйте параметры на панели «Вставка» для создания макета.
Чтобы переключиться в режим создания макета для других устройств, щелкните соответствующий значок в параметрах в представлении «Конструктор».
-
Сохраните файл. При сохранении HTML-файла отображается запрос на сохранение зависимых файлов, таких как boilerplate.css и respond.min.js, в папке на компьютере. Укажите расположение и нажмите кнопку «Копировать».
Файл Boilerplate.css основан на HTML5 boilerplate. Это набор стилей CSS, который обеспечивает согласованное отображение веб-страницы на разных устройствах. Файл respond.min.js является библиотекой JavaScript, помогающей обеспечивать поддержку медиазапросов в прежних версиях браузера.
Вставка элементов «резинового» макета
Панель «Вставка» («Окно» > «Вставка») отображает список элементов, которые можно использовать в «резиновом» макете. При вставке элементов их можно вставить их как «резиновые» элементы.
-
На панели «Вставка» выделите элемент, который необходимо вставить.
-
В появившемся диалоговом окне выберите класс или введите значение идентификатора. В меню «Класс» отображаются классы из CSS-файла, заданного при создании страницы.
-
Выберите «Вставить как "резиновый" элемент».
-
При выборе вставляемого элемента отображаются параметры для скрытия, копирования, блокировки или удаления элемента Div. Для элементов Div, наложенных друг на друга, отображается параметр, позволяющий поменять элементы Div местами.
Параметр Метка Описание А Заменить Div Меняет текущий выбранный элемент на элемент выше или ниже.
B Скрыть Скрывает элемент.
Чтобы отменить скрытие элемента, выполните одно из следующих действий.
Чтобы отменить скрытие селекторов идентификаторов, измените свойство display в файле CSS на block. (display:block)
Чтобы отменить скрытие селекторов классов, удалите примененный класс (hide_<MediaType>) в исходном коде.
C Переместить на строку вверх Перемещает элемент на строку вверх.
D Дублировать Дублирует текущий выбранный элемент. Стиль CSS, подключенный к элементу, также дублируется.
E Удалить У селекторов идентификаторов удаляется и HTML, и CSS. Чтобы удалить только HTML, нажмите клавишу Delete.
У селекторов классов удаляется только HTML.
F Заблокировать Преобразует элемент в элемент с абсолютным позиционированием.
G Выравнивание У селекторов классов параметр «Выравнивание» действует как кнопка отсутствия отступа.
У селекторов идентификаторов кнопка выравнивания выравнивает элементы по сетке.Примечание.«Резиновые» элементы на странице можно обойти циклически с помощью клавиш со стрелками влево и вправо. Выберите границу элемента и нажмите клавишу со стрелкой.
Вложенные элементы
Чтобы вложить «резиновые» элементы в другие такие же элементы, убедитесь, что фокус находится внутри родительского элемента. Затем вставьте требуемый дочерний элемент.
Дублирование вложенных элементов также поддерживается. Функция вложенного дублирования копирует HTML (выбранного элемента) и создает соответствующий CSS «резинового» элемента. Абсолютные элементы, содержащиеся в выбранном элементе, позиционируются соответствующим образом. Вложенные элементы можно также создать с помощью кнопки «Дублировать».
При удалении родительского элемента удаляются CSS, соответствующий элементу, его дочерние элементы и связанный HTML. Вложенные элементы также можно удалить с помощью кнопки «Удалить» (сочетание клавиш: Ctrl+Delete).
