Adobe Dreamweaver

Работа в окне документа
Элементы интерфейса
Настройка интерфейса
Сочетания клавиш

Макет страниц с использованием CSS
Разметка страниц с помощью HTML

Текст
Изображения
Карта ссылок
Панели навигации (меню)
Таблицы
Объекты мультимедиа
Java-апплеты
Элементы Spry

Смарт-объекты

Меню переходов

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

1 В окне редактирования установите курсор вставки там, где необходим тег Div.
2 Выполните одно из следующих действий.
• Выберите меню «Вставка» > «Объекты макета» > «Тег Div»
• Выберите категорию «Макет» на панели «Вставка», затем нажмите на кнопку «Вставить тег Div».



Или: используйте строку вкладок (вверху) - вкладка Общий - Вставить тег Div (значок - на рисунке кнопка 6)

3. В окне Вставить тег Div определите:

Задайте любой из следующих параметров:

Вставка Позволяет выбрать местоположение для тега div и имя тега, если он не является новым тегом.
Класс Отображает класс стиля, примененного к тегу. При присоединении таблицы стилей классы, определенные в ней, появятся в списке. Используйте это всплывающее меню для выбора стиля, который нужно применить к тегу.
Идентификатор Позволяет изменять название, используемое для идентификации тега Div. ID, определенные в таблице стилей, появятся в списке при присоединении таблицы стилей. Коды тегов для блоков, содержащихся в документе, не входят в список.

Примечание. Dreamweaver предупреждает о введении кода тега, имеющегося в документе.
Создать правило CSS Открывает диалоговое окно создания правила CSS.
4 Нажмите кнопку «ОК».
Тег Div появляется в документе в качестве окна с текстом местозаполнителя. При наведении курсора на это окно Dreamweaver подсвечивает его.
Если тег Div абсолютно позиционирован, он становится элементом АР. (Можно редактировать те теги Div, которые не являются абсолютно позиционированными.)

Дополнительно:
Создание страницы с макетом CSS


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

После вставки тега Div можно управлять им и добавлять к нему содержимое.
Примечание: Абсолютно позиционированные теги Div становятся элементами AP.

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

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


Отображение и изменение правил, применяемых к тегу Div

Выделите тэг Div, для этого:

• Нажмите на границу тега Div. Следите за подсветкой (границы рамки становятся красного цвета), чтобы найти границу.
• или: Щелкните внутри тега Div и дважды нажмите клавиши «Ctrl»+«A» (Windows) или «Command»+«A» (Macintosh).
• или: Щелкните внутри тега Div, затем выделите тег Div из селектора тегов, расположенного внизу окна редактирования - .

Если панель стилей CSS не открыта, откройте ее (меню «Окно» > «Стили CSS»).
На панели появятся правила, применимые к тегам Div. Внесите необходимые изменения.

Для добавления содержимого поместите курсор вставки в тег Div, внесите свой текст. Добавлять содержимое к тегу Div можно точно таким же образом, как к странице.

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