Работа с тегами div

Можно создавать макеты страниц, вставляя в них теги Div вручную и применяя к ним стили позиционирования CSS. Тег Div — тег, определяющий логическое разделение содержимого веб-cтраницы. Теги Ddiv можно использовать для центрирования блоков содержимого, создания эффектов столбцов, создания различных областей цвета и многого другого.

Если вы не знакомы с использованием тегов div и каскадных таблиц стилей (CSS) для создания веб-страниц, вы можете создать CSS-макет на основе одного из уже разработанных макетов, идущих в комплекте с Dreamweaver. Если вы не привыкли работать с CSS, но знакомы с использованием таблиц, вы можете также попробовать использовать таблицы.

Теги Div можно использовать для создания блоков макета CSS и расположения их в документе. Это удобно, если существует таблица стилей СSS со стилями позиционирования, прикрепленная к документу. Dreamweaver позволяет быстро вставлять теги div и применять к ним существующие стили.

Редактирование тегов div

После вставки тега div становится возможным изменять его или добавлять к нему содержимое.

Границы тегов Div видимы в момент их назначения и при выбранном параметре «Контур макета CSS». (Параметр «Контур макета CSS» выбран по умолчанию в меню «Просмотр» > «Вспомогательные элементы».) При наведении курсора на тег div Dreamweaver подсвечивает этот тег. Цвет подсветки можно изменить. Также можно отключить подсветку.

При выделении тега div можно просмотреть и изменить правила для него с помощью конструктора CSS. Также можно добавить содержимое к тегу Div, просто поместив курсор вставки внутрь тега div и добавив содержимое таким же образом, как добавляется содержимое в страницу.

Изменение цвета выделения для тегов div

При перемещении курсора за границу тега div в представлении «Дизайн» Dreamweaver выделяет границы тега. При необходимости можно включать или отключать подсветку и изменять ее цвет в диалоговом окне «Настройки».

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

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

• Тег div

• Изображение с назначенным ему абсолютным или относительным положением

• Тег a с назначенным стилем display:block

• Абзац с назначенным ему абсолютным или относительным положением‏

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

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

Отображает контуры всех блоков макета CSS на странице.

Отображает текущие цвета фона отдельных блоков макета CSS и скрывает остальные фоновые цвета и изображения, находящиеся на странице.

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

Отображает модель фрагмента (с полями) выбранного блока макета CSS.

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

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

Можно включить или отключить параметры «Фон макета CSS», «Модель макета CSS» и «Контур макета CSS».