Руководство пользователя Отмена

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

Поиск

Последнее обновление 21 мая 2021 г.

Узнайте, как можно использовать теги div для центрирования блоков содержимого, создания эффектов столбцов, создания различных областей цвета и многого другого.

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

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

Вставка тегов div

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

В области «Окно документа» установите курсор вставки там, где необходим тег Div.
Выполните одно из следующих действий.
- Выберите пункт меню «Вставка > HTML > Div».
- Щелкните Div в категории HTML на панели «Вставка».
Задайте любой из следующих параметров.

Вставка

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

Класс

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

Идентификатор

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

Примечание.

Dreamweaver выдаст предупреждение при вводе кода тега, уже имеющегося в документе.

Создать правило CSS

Открывает диалоговое окно создания правила CSS.
Нажмите кнопку «ОК».

Тег Div появляется в документе в качестве окна с текстом местозаполнителя. При наведении курсора за границу окна Dreamweaver его подсвечивает.

Если тег Div абсолютно позиционирован, он становится элементом АР. (Можно редактировать те теги Div, которые не являются абсолютно позиционированными.)

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

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

Примечание.

Абсолютно позиционированные теги div становятся элементами AP.

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

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

Выберите одно из следующих действий для выделения тега Div.
- Щелкните границу тега div.
Примечание.

Следите за подсветкой, чтобы найти границу.
- Щелкните внутри тега div и дважды нажмите Ctrl + A (Windows) или Command + A (Macintosh).
- Щелкните внутри тега div, а затем выберите тег div из селектора тегов, расположенного в нижней части окна документа.
Если панель конструктора CSS не открыта, выберите меню «Окно > Конструктор CSS» и откройте ее.

На панели появятся правила, применимые к тегам Div.
Внесите необходимые изменения.

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

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

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

Эти параметры влияют на все объекты, в том числе на таблицы, подсвечиваемые 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».

Справки по другим продуктам

Adobe

Получайте помощь быстрее и проще

Новый пользователь?