Блоки макета CSS. Adobe Dreamweaver

Визуализация блоков макета CSS

Работая в представлении «Дизайн», можно делать видимыми блоки макета CSS. Блок макета CSS — это элемент HTML-страницы, который можно расположить в любом ее месте. Точнее блок макета CSS представляет собой либо тег Div, в котором отсутствует display:inline, или любой элемент страницы, содержащий объявления CSS display:block, position:absolute или position:relative.

Далее следует несколько примеров элементов, считающихся блоками макета СSS в Dreamweaver.
• Тег Div
• Изображение с прикрепленным абсолютным или относительным положением
• Тег a с прикрепленным стилем display:block
• Параграф с прикрепленным абсолютным или относительным положением.

Примечание. В целях улучшения изображения блоки макета CSS не содержат внутренних элементов (элементов, код которых включен в текстовую строку) или простых элементов блока, таких как параграфы.

Dreamweaver предоставляет вспомогательные элементы для отображения блоков макета CSS.
Например, в процессе дизайна можно включить контуры, фон и модель окна для блоков макета CSS. Также можно отобразить подсказки, отображающие свойства выбранного блока макета CSS при наведении на него курсора.

Следующий список блоков макета CSS описывает то, что Dreamweaver отображает как вспомогательные элементы в каждом случае.
Контур макета CSS - Отображает контуры всех блоков макета CSS на странице.
Фон макета CSS - Отображает текущие цвета фона отдельных блоков макета CSS и скрывает остальные фоновые цвета и изображения, находящиеся на странице.
Всякий раз при применении наглядных пособий для отображения фона блоков макета CSS, Dreamweaver автоматически присваивает каждому блоку макета CSS собственный цвет фона. (Dreamweaver выбирает цвета с помощью алгоритма - назначить цвета самостоятельно невозможно).
Присвоенные цвета визуально различаются, они были разработаны для того, чтобы помочь дифференцировать блоки макета CSS.
Модель макета CSS - Отображает модель фрагмента (с полями) выбранного блока макета CSS.

Вспомогательные элементы блоков макета CSS можно включать и отключать по мере необходимости.

Визуализация контуров блоков макета CSS

❖ Выберите меню «Просмотр» > «Вспомогательные элементы» > «Контур макета CSS»
Отображение фона блоков макета CSS
❖ Выберите меню «Просмотр» > «Вспомогательные элементы» > «Фон макета CSS»

Отображение модели фрагмента блока макета CSS

❖ Выберите меню «Просмотр» > «Вспомогательные элементы» > «Модель макета CSS»
Также параметры вспомогательных элементов блока макета CSS можно вызвать, нажав кнопку «Вспомогательные элементы» панели инструментов документа.

Использование вспомогательных элементов с элементами блоков, не
связанных с макетом CSS

Таблицы стилей времени разработки можно использовать для отображения фона, границ или модели конфигурации для элементов, которые обычно не считаются блоками макета CSS. Для этого следует сначала создать таблицу стилей времени разработки, придающую атрибут display:block соответствующему элементу страницы.
1 Создайте отдельную таблицу стилей CSS (для этого выберите меню «Файл» > «Создать», в столбце категорий выберите «Базовый», в столбце страницы «Базовый» выберите «CSS», затем нажмите кнопку «Создать»).
2 В новой таблице стилей создайте правила, присваивающие атрибут display:block тем элементам страницы, которые должны отображаться как блоки макета CSS.
Например, для отображения цвета фона параграфов и пунктов списка можно создать таблицу стилей со следующими правилами.
p{
display:block;
}
li{
display:block;
}
3 Сохраните файл.
4 В представлении «Дизайн» откройте страницу, к которой хотите прикрепить новые стили.
5 Выберите меню «Формат» > «Стили CSS» > «Время разработки».
6 В диалоговом окне «Таблицы стилей времени разработки» нажмите на кнопку со знаком «Плюс» (+) над текстовым полем «Показывать только во время разработки», выберите только что созданную таблицу стилей и нажмите кнопку «ОК»
7 Нажмите кнопку «ОК», чтобы закрыть диалоговое окно «Таблицы стилей времени разработки».
Теперь таблица стилей прикреплена к документу. Если таблица стилей была создана с использованием предыдущего образца, всем параграфам и элементам списка в ней будет задан атрибут display:block, что позволит включать и отключать вспомогательные элементы блока макета для параграфов и элементов списка.

Изменение цвета подсветки тегов Div

При перемещении курсора за край тега Div в представлении «Дизайн» Dreamweaver выделяет границы тега . При необходимости можно включать/отключать подсветку и изменять ее цвет в диалоговом окне «Настройки» (меню Правка - Настройки).
1 Выберите Правка («Редактирование») > Настройки («Установки») (в Windows) либо Dreamweaver > «Установки» (в Macintosh).
2 Выберите меню «Выделение цветом» из списка категорий слева.
3 Внесите любые из следующих изменений и нажмите кнопку «ОК».

• Для изменения цвета подсветки тегов Div выберите поле цвета по наведению указателя мыши, затем выберите цвет выделения из палитры цветов (или введите шестнадцатеричное значение цвета в текстовом поле).
• Для включения или выключения подсветки тегов Div поставьте или уберите флажок «Наведение мыши».

Примечание. Эти параметры влияют на все объекты, например на таблицы, подсвечиваемые Dreamweaver при наведении на них курсора.

Вернуться к: Использование тэга DIV

Adobe Dreamweaver

Обзор

Содержание

Блоки макета CSS