在“文档”窗口中，将插入点放置在要显示 div 标签的位置。
上次更新日期：
2021年4月29日
- Dreamweaver 用户指南
- 简介
- Dreamweaver 和 Creative Cloud
- Dreamweaver 工作区和视图
- 设置站点
- 管理文件
- 布局和设计
- CSS
- 页面内容和资源
- 设置页面属性
- 设置 CSS 标题属性和 CSS 链接属性
- 使用文本
- 查找和替换文本、标签和属性
- DOM 面板
- 在实时视图中编辑
- 在 Dreamweaver 中对文档编码
- 在“文档”窗口中选择和查看元素
- 在属性检查器中设置文本属性
- 对网页进行拼写检查
- 在 Dreamweaver 中使用水平线
- 在 Dreamweaver 中添加和修改字体组合
- 使用资源
- 在 Dreamweaver 中插入和更新日期
- 在 Dreamweaver 中创建和管理收藏资源
- 在 Dreamweaver 中插入和编辑图像
- 添加媒体对象
- 在 Dreamweaver 中添加视频
- 插入 HTML5 视频
- 插入 SWF 文件
- 添加音频效果
- 在 Dreamweaver 中插入 HTML5 音频
- 使用库项目
- 在 Dreamweaver 中使用阿拉伯语和希伯来语文本
- 链接与导航
- jQuery 构件和效果
- 对网站进行编码
- 关于在 Dreamweaver 中编码
- Dreamweaver 中的编码环境
- 设置编码偏好设置
- 自定义代码颜色
- 编写和编辑代码
- 代码提示和代码完成
- 折叠和展开代码
- 使用代码片段重用代码
- 使用 linting 检查代码
- 优化代码
- 在设计视图中编辑代码
- 使用页面的头内容
- 在 Dreamweaver 中插入服务器端包含
- 在 Dreamweaver 中使用标签库
- 将自定义标签导入 Dreamweaver
- 使用 JavaScript 行为（一般说明）
- 应用内置 JavaScript 行为
- 关于 XML 和 XSLT
- 在 Dreamweaver 中执行服务器端 XSL 转换
- 在 Dreamweaver 中执行客户端 XSL 转换
- 在 Dreamweaver 中为 XSLT 添加字符实体
- 设置代码格式
- 跨产品工作流
- 模板
- 移动设备和多屏幕
- 动态网站、页面和 Web 表单
- 以可视化方式生成应用程序
- 测试、预览和发布网站
- 疑难解答
了解如何使用 div 标签将内容块居中、创建列效果以及创建不同的颜色区域等。
您可以通过手动插入 div 标签并对它们应用 CSS 定位样式来创建页面布局。div 标签是用来定义网页面的内容中的逻辑区域的标签。可以使用 div 标签将内容块居中，创建列效果以及创建不同的颜色区域等。
如果不熟悉使用 div 标签和 Cascading Style Sheets (CSS) 创建网页，则可以基于 Dreamweaver 附带的预设计布局之一来创建 CSS 布局。如果不习惯使用 CSS，但能够熟练使用表格，则也可以尝试使用表格。
插入 div 标签
可以使用 div 标签创建 CSS 布局块并在文档中对它们进行定位。如果将包含定位样式的现有 CSS 样式表附加到文档，这将很有用。Dreamweaver 使您能够快速插入 div 标签并对它应用现有样式。
-
-
执行下列操作之一：
选择“插入”>“HTML”>“Div”。
在“插入”面板的 HTML 类别中，单击“Div”。
-
设置以下任一选项：
插入
可用于选择 div 标签的位置以及标签名称（假如不是新标签）。
类
显示了当前应用于标签的类样式。如果附加了样式表，则该样式表中定义的类将出现在列表中。可以使用此弹出菜单选择要应用于标签的样式。
ID
可让您更改用于标识 div 标签的名称。如果附加了样式表，则该样式表中定义的 ID 将出现在列表中。不会列出文档中已有的块的 ID。
注意:如果在文档中输入与其他标签相同的 ID，Dreamweaver 会提醒您。
新建 CSS 规则
打开“新建 CSS 规则”对话框。
-
单击“确定”。
div 标签以一个框的形式出现文档中，并带有占位符文本。将指针移到该框的边缘上时，Dreamweaver 会高亮显示该框。
如果 div 标签已绝对定位，则它将变成 AP 元素。（您可以编辑非绝对定位的 div 标签。）
编辑 div 标签
插入 div 标签之后，可以对它进行操作或向它添加内容。
注意:
已绝对定位的 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 标签的高亮颜色
在“设计”视图中将指针移到 div 标签的边缘上时，Dreamweaver 将高亮显示标签的边框。可根据需要启用或禁用高亮显示功能，或者在“首选参数”对话框中更改高亮颜色。
-
选择“编辑”>“首选参数”(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 布局块可视化助理列表描述 Dreamweaver 为每个助理呈现的可视化内容：
CSS 布局外框
显示页面上所有 CSS 布局块的外框。
CSS 布局背景
显示各个 CSS 布局块的临时指定背景颜色，并隐藏通常会出现在页面上的任何其他背景颜色或图像。
每次启用可视化助理查看 CSS 布局块背景时，Dreamweaver 都会自动为每个 CSS 布局块分配一种不同的背景颜色。（Dreamweaver 使用一个算法过程选择颜色 — 您无法自行指定颜色。）指定的颜色在视觉上与众不同，可帮助您区分不同的 CSS 布局块。
CSS 布局框模型
显示所选 CSS 布局块的框模型（即填充和边距）。
查看 CSS 布局块
如果需要，可以启用或禁用 CSS 布局块可视化助理。要查看所有 CSS 布局块，请选择“查看”>“设计视图选项”>“可视化助理”。
您可以启用或禁用 CSS 布局背景、CSS 布局框模型和 CSS 布局外框。
