如何使用 div 标签在网页上创建逻辑划分

优质

小牛编辑

127浏览

2023-12-01

了解如何使用 div 标签将内容块居中、创建列效果以及创建不同的颜色区域等。

您可以通过手动插入 div 标签并对它们应用 CSS 定位样式来创建页面布局。div 标签是用来定义网页面的内容中的逻辑区域的标签。可以使用 div 标签将内容块居中，创建列效果以及创建不同的颜色区域等。

如果不熟悉使用 div 标签和 Cascading Style Sheets (CSS) 创建网页，则可以基于 Dreamweaver 附带的预设计布局之一来创建 CSS 布局。如果不习惯使用 CSS，但能够熟练使用表格，则也可以尝试使用表格。

插入 div 标签

可以使用 div 标签创建 CSS 布局块并在文档中对它们进行定位。如果将包含定位样式的现有 CSS 样式表附加到文档，这将很有用。Dreamweaver 使您能够快速插入 div 标签并对它应用现有样式。

在“文档”窗口中，将插入点放置在要显示 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 布局外框。