在"文档"窗口中，将插入点放置在\n您希望 div 标记显示的位置。
上次更新日期：
2023年9月25日
了解如何使用 div 标签将内容块居中、创建列效果以及创建不同的颜色区域等。
您可以通过手动插入 div 标记并对其应用 CSS 定位样式来创建页面布局。div 标记是一种在 web 页面内容中定义逻辑分区的标记。您可以使用 div 标记来居中内容块、创建分栏效果、创建不同的颜色区域等等。
如果您不熟悉使用 div 标记和级联样式表 (CSS) 来创建 web 页面，您可以基于 Dreamweaver 附带的预设计布局之一来创建 CSS 布局。如果您不习惯使用 CSS，但熟悉使用表格，您也可以尝试使用表格。
插入 div 标签
您可以使用 div 标记来创建 CSS 布局块并在文档中定位它们。如果您有一个现有的\nCSS 样式表且其中包含附加到您的文档的定位样式，则这很有用。Dreamweaver 使您可以快速插入\n一个 div 标记并对其应用现有样式。
执行下列操作之一：
选择"插入">"HTML">"Div"。
在"插入"面板的 HTML 类别中，单击 Div。
设置以下任一选项：
插入
允许您选择 div 标记的位置\n以及标记名称（如果它不是新标记）。
类
显示了当前应用于标签的类样式。 如果您附加了样式表，该样式表中定义的类会\n显示在列表中。使用此弹出菜单选择您要\n应用到标记的样式。
ID
可让您更改用于标识 div 标签的名称。 如果附加了样式表，则该样式表中定义的 ID 将出现在列表中。 文档中已有的块的 ID 不会列出。
注释
如果您输入的 ID 与文档中另一个标记的 ID 相同，Dreamweaver 会发出警报。
新建 CSS 规则
打开“新建 CSS 规则”对话框。
单击“确定”。
div 标签以一个框的形式出现文档中，并带有占位符文本。 当您将指针移动到框的边缘上方时，Dreamweaver 会将其突出显示。
如果 div 标签已绝对定位，则它将变成 AP 元素。 （您可以编辑非绝对定位的 div 标签。）
编辑 div 标签
插入 div 标记后，\n您可以操纵它或向其添加内容。
注释
绝对定位的 div 标记会变成 AP 元素。
在为 div 标签分配边框时，或者在选定了“CSS 布局外框”时，它们便具有可视边框。 （默认情况下，“查看”>“可视化助理”菜单中选定“CSS 布局外框”。） 将指针移到 div 标签上时，Dreamweaver 将高亮显示此标签。 可以更改高亮颜色或禁用高亮显示。
选择 div 标签后，您可以使用“CSS Designer”查看和编辑它的规则。 您也可以向 div 标签中添加内容，方法是：将插入点放在 div 标签中，然后就像在页面中添加内容那样添加内容。
执行以下操作之一以选择 div 标签：
- 单击 div 标记的边框。
注释
查找高亮颜色以查看边框。
在 div 标签内单击，然后按两次 Ctrl+A (Windows) 或 Command+A (Macintosh)。
在 div 标签内单击，然后从“文档”窗口底部的标签选择器中选择 div 标签。
选择"窗口">"CSS Designer"以打开 CSS Designer 面板（如果尚未打开）。
应用到 div 标记的规则显示在面板中。
根据需要进行编辑。
更改 div\n标记的突出显示颜色
在"设计"视图中将指针移动到\ndiv 标记的边缘上方时，Dreamweaver 会突出显示\n标记的边框。您可以根据需要启用或禁用突出显示，或在"偏好设置"对话框中更改突出显示颜色。
选择“编辑”>“首选项”(Windows) 或“Dreamweaver”>“偏好设置”(Macintosh)。
从左侧的“类别”列表中选择“高亮颜色”。
请进行以下的任一更改，然后单击“确定”：
若要更改 div 标签的高亮颜色，请单击“鼠标滑过”颜色框并使用颜色选择器来选择一种高亮颜色（或在文本框中输入高亮颜色的十六进制值）。
若要对 div 标签启用或禁用高亮显示功能，请选中或取消选中“鼠标滑过”的“显示”复选框。
注释
这些选项会影响所有对象（如表格），当您将指针移至其上方时，Dreamweaver 会将这些对象突出显示。
CSS 布局块
您可以在"设计"视图中工作时可视化 CSS 布局块。CSS 布局块是一个 HTML 页面元素，您可以将其放置在页面的任何位置。更具体地说，CSS 布局块要么是没有 display:inline 的 div 标记，要么是任何其他包含 display:block、position:absolute 或 position:relative CSS 声明的页面元素。以下是一些在 Dreamweaver 中被视为 CSS 布局块的元素示例：
div 标签
分配了绝对或相对位置的图像
分配了 display:block 样式的 a 标记
分配了绝对或相对位置的段落
注释
出于视觉渲染的目的，CSS 布局块不包括内联元素（即代码位于文本行内的元素）或简单的块元素（如段落）。
Dreamweaver 提供了许多用于查看 CSS 布局块的视觉辅助工具。例如，您可以在设计时为 CSS 布局块启用轮廓、背景和框模型。您还可以查看工具提示，当您将鼠标指针悬停在布局块上时，工具提示会显示所选 CSS 布局块的属性。
以下 CSS 布局块可视化辅助列表描述了\nDreamweaver 为每个项目呈现的可见内容：
CSS 布局外框
显示页面上所有 CSS 布局块的外框。
CSS 布局背景
为各个 CSS 布局块显示临时分配的背景颜色，并隐藏通常在页面上显示的任何其他背景颜色或图像。
每当您启用可视化\n辅助来查看 CSS 布局块背景时，Dreamweaver 会自动\n为每个 CSS 布局块分配不同的背景颜色。（Dreamweaver 使用算法流程选择颜色，您\n无法自行分配颜色。）分配的颜色在视觉上区别明显，旨在帮助您区分 CSS 布局块。
CSS 布局框模型
显示所选 CSS 布局块的盒模型（即内边距和外边距）。
查看 CSS 布局块
如果需要，可以启用或禁用 CSS 布局块可视化助理。 要查看所有 CSS 布局块，请选择"视图">"设计视图选项">"可视化辅助"。
您可以启用或禁用 CSS 布局背景、CSS 布局盒模型和 CSS 布局轮廓。
