В окне «Документ» поместите курсор
туда, где должен появиться тег div.
Последнее обновление
25 сент. 2023 г.
Узнайте, как можно использовать теги div для центрирования блоков содержимого, создания эффектов столбцов, создания различных областей цвета и многого другого.
Вы можете создавать макеты страниц, вручную вставляя теги div и применяя к ним стили позиционирования CSS.Тег div определяет логические разделы в содержимом веб-страницы.Вы можете использовать теги div для выравнивания блоков контента по центру, создания эффектов столбцов, создания различных цветовых областей и многого другого.
Если вы не знакомы с использованием тегов div и каскадных таблиц стилей (CSS) для создания веб-страниц, вы можете создать макет CSS на основе одного из готовых макетов, поставляемых с Dreamweaver.Если вам неудобно работать с CSS, но вы знакомы с использованием таблиц, вы также можете попробовать использовать таблицы.
Вставка тегов div
Вы можете использовать теги div для создания блоков макета CSS и позиционирования их в документе.Это полезно, если у вас есть существующая таблица стилей CSS со стилями позиционирования, прикрепленная к документу.Dreamweaver позволяет быстро вставить тег div и применить к нему существующие стили.
Выполните одно из действий, описанных ниже.
Выберите «Вставка» > «HTML» > «Div».
В категории HTML панели «Вставка» нажмите Div.
Задайте любой из следующих параметров.
Вставка
Позволяет выбрать расположение тега 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 Designer, чтобы открыть панель CSS Designer, если она еще не открыта.
Правила, применяемые к тегу 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. Ниже приведено несколько примеров элементов, которые считаются блоками макета CSS в 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».
Создание красивых веб-сайтов в Dreamweaver
Создавайте дизайн, пишите код и управляйте динамическими веб-сайтами с помощью многофункционального инструмента.
