Визуализация блоков макета 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

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

1Создайте отдельную таблицу стилей CSS (для этого выберите меню ≪Файл≫ > ≪Создать≫, в столбце категорий выберите ≪Базовый≫, в столбце страницы ≪Базовый≫ выберите ≪CSS≫, затем нажмите кнопку ≪Создать≫).

2В новой таблице стилей создайте правила, присваивающие атрибут display:block тем элементам страницы, которые должны отображаться как блоки макета CSS.

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

p{

display:block;

}

li{

display:block;

}

3Сохраните файл.

4В представлении ≪Дизайн≫ откройте страницу, к которой хотите прикрепить новые стили.

5Выберите меню ≪Формат≫ > ≪Стили CSS≫ > ≪Время разработки≫.

6В диалоговом окне ≪Таблицы стилей времени разработки≫ нажмите на кнопку со знаком ≪Плюс≫ (+) над текстовым полем ≪Показывать только во время разработки≫, выберите только что созданную таблицу стилей и нажмите кнопку ≪ОК≫

7Нажмите кнопку ≪ОК≫, чтобы закрыть диалоговое окно ≪Таблицы стилей времени разработки≫.

Теперь таблица стилей прикреплена к документу. Если таблица стилей была создана с использованием

предыдущего образца, всем параграфам и элементам списка в ней будет задан атрибут display:block, что позволит включать и отключать вспомогательные элементы блока макета для параграфов и элементов списка.

Работа с элементами AP