（仅限 Creative Cloud 用户）：当您选择“插入”>“布局”时，有七个新的语义标签可用。 新标签是：文章、侧边、HGroup、导航、部分、页眉和脚注。
插入和编辑 div 标签
您可以通过手动插入 div 标签并对它们应用 CSS 定位样式来创建页面布局。div 标签是用来定义网页面的内容中的逻辑区域的标签。可以使用 div 标签将内容块居中，创建列效果以及创建不同的颜色区域等。
如果您对使用 div 标签和层叠样式表 (CSS) 创建网页面不熟悉，则可以基于 Dreamweaver 附带的预设计布局之一来创建 CSS 布局。如果您不习惯使用 CSS，但能够熟练使用表格，则也可以尝试使用表格。
注：Dreamweaver 将带有绝对位置的所有 div 标签视为 AP 元素（分配有绝对位置的元素），即使您未使用 AP Div 绘制工具创建那些 div 标签也是如此。
插入div标签
可以使用 div 标签创建 CSS 布局块并在文档中对它们进行定位。如果将包含定位样式的现有 CSS 样式表附加到文档，这将很有用。Dreamweaver 使您能够快速插入 div 标签并对它应用现有样式。
执行下列操作之一：
选择“插入”>“布局对象”>“Div 标签”。
在“插入”面板的“布局”类别中，单击“插入 Div 标签”按钮
。
编辑 div 标签
插入 div 标签之后，可以对它进行操作或向它添加内容。
注：已绝对定位的 div 标签将变成 AP 元素。
在为 div 标签分配边框时，或者在选定了“CSS 布局外框”时，它们便具有可视边框。（默认情况下，“查看”>“可视化助理”菜单中选定“CSS 布局外框”。） 将指针移到 div 标签上时，Dreamweaver 将高亮显示此标签。可以更改高亮颜色或禁用高亮显示。
在选择 div 标签时，可以在“CSS 样式”面板中查看和编辑它的规则。您也可以向 div 标签中添加内容，方法是：将插入点放在 div 标签中，然后就像在页面中添加内容那样添加内容。
查看和编辑应用于 div 标签的规则
在 div 标签中放置插入点以添加内容
在该标签边框内的任意位置单击。
更改 div 标签中的占位符文本
选择该文本，然后在它上面键入内容或按 Delete 键。
注：就像在页面中添加内容那样，可以将内容添加到 div 标签中。
更改 div 标签的高亮颜色
在“设计”视图中将指针移到 div 标签的边缘上时，Dreamweaver 将高亮显示标签的边框。如果需要，可以启用或禁用高亮显示功能，或者在“首选参数”对话框中更改高亮颜色。
选择“编辑”>“首选参数”(Windows) 或“Dreamweaver”>“首选参数”(Macintosh)。
从左侧的“分类”列表中选择“高亮颜色”。
请进行以下的任一更改，然后单击“确定”：
若要更改 div 标签的高亮颜色，请单击“鼠标滑过”颜色框并使用颜色选择器来选择一种高亮颜色（或在文本框中输入高亮颜色的十六进制值）。
若要对 div 标签启用或禁用高亮显示功能，请选中或取消选中“鼠标滑过”的“显示”复选框。
注：这些选项会影响当指针滑过时 Dreamweaver 会高亮显示的所有对象，例如表格。
CSS 布局块
可视化 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 布局背景”。
查看 CSS 布局块框模型
选择“查看”>“可视化助理”>“CSS 布局框模型”。
通过单击“文档”工具栏上的“可视化助理”按钮，也可以使用 CSS 布局块可视化助理选项。
将可视化助理与非 CSS 布局块元素配合使用
可以使用设计时间样式表来显示通常未被视为 CSS 布局块的元素的背景、边框或框模型。为此，必须首先创建设计时间样式表，此表会将 display:block 属性分配给相应页面元素。
使用 AP 元素
关于 Dreamweaver 中的 AP 元素
AP 元素（绝对定位元素）是分配有绝对位置的 HTML 页面元素，具体而言，就是 div 标签或其它任何标签。AP 元素可以包含文本、图像或其它任何可放置到 HTML 文档正文中的内容。
通过 Dreamweaver，您可以使用 AP 元素来设计页面的布局。您可以将 AP 元素放置到其它 AP 元素的前后，隐藏某些 AP 元素而显示其它 AP 元素，以及在屏幕上移动 AP 元素。您可以在一个 AP 元素中放置背景图像，然后在该 AP 元素的前面放置另一个包含带有透明背景的文本的 AP 元素。
AP 元素通常是绝对定位的 div 标签。（它们是 Dreamweaver 默认插入的 AP 元素类型。）但是请记住，可以将任何 HTML 元素（例如，一个图像）作为 AP 元素进行分类，方法是为其分配一个绝对位置。所有 AP 元素（不仅仅是绝对定位的 div 标签）都将在“AP 元素”面板中显示。
AP Div 元素的 HTML 代码
Dreamweaver 使用 div 标签创建 AP 元素。当您使用“绘制 AP Div”工具绘制 AP 元素时，Dreamweaver 在文档中插入一个 div 标签，并为该 div 指定一个 ID 值（默认情况下为您绘制的第一个 div 指定 apDiv1，为您绘制的第二个 div 分配 apDiv2，依此类推）。稍后，可以使用“AP 元素”面板或属性检查器将 AP Div 重新命名为想要的任何名称。Dreamweaver 还使用文档头中的嵌入式 CSS 来定位 AP Div 以及向 AP Div 指定其确切尺寸。
以下是 AP Div 的示例 HTML 代码：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sample AP Div Page</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:62px;
top:67px;
width:421px;
height:188px;
z-index:1;
}
-->
</style>
</head>
<body>
<div id="apDiv1">
</div>
</body>
</html>可以更改页面上的 AP Div（或任何 AP 元素）的属性，包括 x 坐标和 y 坐标、z 轴（也称作堆叠顺序）和可见性。
插入 AP Div
Dreamweaver 可让您在页面上轻松地创建和定位 AP Div。您还可以创建嵌套的 AP Div。
当您插入 AP Div 时，Dreamweaver 默认情况下将在“设计”视图中显示 AP Div 的外框，并且，当您将指针移到块上面时还会高亮显示该块。可以通过在“查看”>“可视化助理”菜单中禁用“AP 元素外框”和“CSS 布局外框”，来禁用显示 AP Div（或任何 AP 元素）外框的可视化助理。在设计时，还可以启用 AP 元素的背景和框模型作为可视化助理。
创建 AP Div 后，只需将插入点放置于该 AP Div 中，然后就可以像在页面中添加内容一样，将内容添加到 AP Div 中。
连续绘制一个或多个 AP Div
在“插入”面板的“布局”类别中，单击“绘制 AP Div”按钮
。在“文档”窗口的“设计”视图中，执行下列操作之一：
拖动以绘制一个 AP Div。
通过按住 Ctrl 拖动 (Windows) 或按住 Command 拖动 (Macintosh) 来连续绘制多个 AP Div。
只要不松开 Ctrl 或 Command，就可以继续绘制新的 AP Div。
在文档中的特定位置插入 AP Div
将插入点放置在“文档”窗口中，然后选择“插入”>“布局对象”>“AP Div”。
注：此过程会将 AP Div 标签放置到您在“文档”窗口中单击的任何位置。因此 AP Div 的可视化呈现可能会影响其周围的其它页面元素（如文本）。
在 AP Div 中放置一个插入点
在 AP Div 边框内的任意位置单击。
将高亮显示 AP Div 的边框并显示选择柄，但是 AP Div 自身未选定。
显示 AP Div 边框
选择“查看”>“可视化助理”，然后选择“AP Div 外框”或“CSS 布局外框”。
注：同时选择这两个选项可获得同样的效果。
隐藏 AP Div 边框
选择“查看”>“可视化助理”，然后取消选择“AP Div 外框”和“CSS 布局外框”。
使用嵌套的 AP Div
嵌套的 AP Div 是其代码包含在另一个 AP Div 的标签内的 AP Div。例如，以下代码显示了两个未 嵌套的 AP Div 和两个嵌套的 AP Div：
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3">
<div id="apDiv4"></div>
</div>每组 AP Div 的图形描述可能如下所示：
在第一组 div 标签中，一个 div 位于页面上另一个 div 的上方。在第二组中，apDiv4 div 实际上位于 apDiv3 div 的内部。（可以在“AP 元素”面板中更改 AP Div 堆叠顺序。）
嵌套通常用于将 AP Div 组合在一起。嵌套 AP Div 随其父 AP Div 一起移动，并且可以设置为继承其父级的可见性。
可以启用“嵌套”选项，这样，当您从另一个 AP Div 内部开始绘制 AP Div 时将实现 AP Div 的自动嵌套。若要在另一个 AP Div 的内部或上方进行绘制，还必须取消选择“防止重叠”选项。
绘制嵌套的 AP Div
在“插入”面板的“布局”类别中，单击“绘制 AP Div”按钮
。
插入嵌套 AP Div
确保已取消选择“防止重叠”。
在“文档”窗口的“设计”视图中，将插入点放置在一个现有 AP Div 的内部，然后选择“插入”>“布局对象”>“AP Div”。
在另一个 AP Div 的内部绘制 AP Div 时将自动嵌套 AP Div
选择“AP 元素”首选参数中的“嵌套”选项。
查看或设置 AP 元素首选参数
使用“首选参数”对话框中的“AP 元素”类别可指定新建 AP 元素的默认设置。
查看或设置单个AP元素的属性
当选择一个 AP 元素时，属性检查器将显示 AP 元素的属性。
在属性检查器（“窗口”>“属性”）中，单击右下角的展开箭头查看所有属性（如果这些属性尚未展开）。
查看或设置多个 AP 元素的属性
当您选择两个或更多个 AP 元素时，属性检查器会显示文本属性以及全部 AP 元素属性的一个子集，从而允许您同时修改多个 AP 元素。
选择多个 AP 元素
选择 AP 元素时请按住 Shift 键。
查看并设置多个 AP 元素的属性
在属性检查器（“窗口”>“属性”）中，单击右下角的展开箭头查看所有属性（如果这些属性尚未展开）。
AP 元素面板概述
您可以使用“AP 元素”面板（“窗口”>“AP 元素”）来管理文档中的 AP 元素。使用“AP 元素”面板可防止重叠，更改 AP 元素的可见性，嵌套或堆叠 AP 元素，以及选择一个或多个 AP 元素。
注：Dreamweaver 中的 AP 元素是指分配有绝对位置的 HTML 页面元素，具体而言，就是 div 标签或其它任何标签。“AP 元素”面板不会显示相对定位的元素。
AP 元素将按照 z 轴的顺序显示为一列名称；默认情况下，第一个创建的 AP 元素（z 轴为 1）显示在列表底部，最新创建的 AP 元素显示在列表顶部。不过，您可以通过更改 AP 元素在堆叠顺序中的位置来更改它的 z 轴。例如，如果您创建了八个 AP 元素并想将第四个 AP 元素移至顶部，则您应为其分配一个高于其它 AP 元素的 z 轴。
选择 AP 元素
您可以选择一个或多个 AP 元素进行操作或更改它们的属性。
在 AP 元素面板中选择 AP 元素
在“AP 元素”面板（“窗口”>“AP 元素”）中，单击该 AP 元素的名称。
在文档窗口中选择 AP 元素
执行下列操作之一：
单击 AP 元素的选择柄。
如果选择柄不可见，请在 AP 元素内部的任意位置单击以显示该选项柄。
单击 AP 元素的边框。
按住 Ctrl-Shift (Windows) 或 Command-Shift (Macintosh) 在 AP 元素内部单击。
在 AP 元素内部单击，并按 Ctrl+A (Windows) 或 Command+A (Macintosh) 以选择 AP 元素的内容。再次按 Ctrl+A 或 Command+A 以选择 AP 元素。
在 AP 元素内部单击并在标签选择器中选择其标签。
选择多个 AP 元素
执行下列操作之一：
在“AP 元素”面板（“窗口”>“AP 元素”）中，按住 Shift 单击两个或更多个 AP 元素名称。
在“文档”窗口中，按住 Shift 键并在两个或更多个 AP 元素的边框内（或边框上）单击。
更改 AP 元素的堆叠顺序
使用属性检查器或“AP 元素”面板可更改 AP 元素的堆叠顺序。“AP 元素”面板列表顶部的 AP 元素位于堆叠顺序的顶部，并出现在其它 AP 元素之前。
在 HTML 代码中，AP 元素的堆叠顺序或 z 轴决定了 AP 元素在浏览器中的绘制顺序。AP 元素的 z 轴值越高，该 AP 元素在堆叠顺序中的位置就越高。（例如，z 轴值为 4 的元素显示在 z 轴值为 3 的元素上方；1 始终是堆叠顺序中最小的数字。）可以使用“AP 元素”面板或属性检查器来更改每个 AP 元素的 z 轴。
使用 AP 元素面板更改 AP 元素的堆叠顺序
使用属性检查器更改 AP 元素的堆叠顺序
选择“窗口”>“AP 元素”打开“AP 元素”面板以查看当前的堆叠顺序。
在“AP 元素”面板中或在“文档”窗口中，选择要更改其 z 轴值的 AP 元素。
在属性检查器（“窗口”>“属性”）中，在“Z 轴”文本框中键入一个数字。
键入一个较大的数字可将 AP 元素在堆叠顺序中上移。
键入一个较小的数字可将 AP 元素在堆叠顺序中下移。
显示和隐藏 AP 元素
当处理文档时，可以使用“AP 元素”面板手动显示和隐藏 AP 元素，以查看页面在不同条件下的显示方式。
注：当前选定 AP 元素始终会变为可见，并在选定时将出现在其它 AP 元素的前面。
更改 AP 元素的可见性
选择“窗口”>“AP 元素”打开“AP 元素”面板。
在 AP 元素的眼形图标列内单击可以更改其可见性。
眼睛睁开表示 AP 元素是可见的。
眼睛闭合表示 AP 元素是不可见的。
如果没有眼形图标，AP 元素通常会继承其父级的可见性。（如果 AP 元素没有嵌套，父级就是文档正文，而文档正文始终是可见的。）
另外，如果未指定可见性，则不会显示眼形图标（这在“属性”检查器中表示为“default”可见性）。
同时更改所有 AP 元素的可见性
在“AP 元素”面板（“窗口”>“AP 元素”）中，单击列顶部的标题眼形图标。
注：此过程可以将所有 AP 元素设置为“可见”或“隐藏”，但不能设置为“继承”。
调整 AP 元素大小
您可以调整单个 AP 元素的大小，也可以同时调整多个 AP 元素的大小以使其具有相同的宽度和高度
如果已启用“防止重叠”选项，那么在调整 AP 元素的大小时将无法使该 AP 元素与另一个 AP 元素重叠。
调整 AP 元素的大小
在“设计”视图中，选择一个 AP 元素。
执行以下操作之一以调整 AP 元素的大小：
若要通过拖动来调整大小，请拖动 AP 元素的任一调整大小手柄。
若要一次调整一个像素的大小，请在按箭头键时按住 Ctrl 键 (Windows) 或 Option 键 (Macintosh)。
箭头键可移动 AP 元素的右边框和下边框；对于此方法，不能使用上边框和左边框来调整大小。
若要按网格靠齐增量来调整大小，请在按箭头键时按住 Shift-Ctrl 键 (Windows) 或 Shift-Option (Macintosh) 键。
在属性检查器（“窗口”>“属性”）中，键入宽度 (W) 和高度 (H) 的值。
调整 AP 元素的大小会更改 AP 元素的宽度和高度。它并不定义 AP 元素有多少内容是可见的。可以在首选参数中定义 AP 元素内的可见区域。
同时调整多个 AP 元素的大小
在“设计”视图中，选择两个或更多个 AP 元素。
执行下列操作之一：
选择“修改”>“排列顺序”>“设成宽度相同”或“修改”>“排列顺序”>“设成高度相同”。
最先选定的 AP 元素将与最后选定的一个 AP 元素的宽度或高度一致。
在属性检查器（“窗口”>“属性”）中的“多个 CSS-P 元素”下输入宽度和高度值。
这些值将应用于所有选定的 AP 元素。
移动 AP 元素
您可以按照在最基本的图形应用程序中移动对象的相同方法在“设计”视图中移动 AP 元素。
如果已启用“防止重叠”选项，那么在移动 AP 元素时将无法使该 AP 元素与另一个 AP 元素重叠。
在“设计”视图中，选择一个或多个 AP 元素。
执行下列操作之一：
若要通过拖动来移动，请拖动最后一个选定的 AP 元素（以黑色高亮显示）的选择控点。
若要一次移动一个像素，请使用箭头键。
按箭头键时按住 Shift 键可按当前网格靠齐增量来移动 AP 元素。
对齐 AP 元素
使用 AP 元素对齐命令可将一个或多个 AP 元素与最后一个选定的 AP 元素的边框对齐。
对齐 AP 元素时，未选定的子 AP 元素可能会因为其父 AP 元素已被选定并移动而发生移动。若要避免这种情况，请不要使用嵌套的 AP 元素。
将 AP 元素转换为表格
一些 Web 设计人员更喜欢通过 AP 元素来进行设计，而不是使用表格来创建自己的布局。Dreamweaver 使您可以使用 AP 元素来创建自己的布局，然后将它们转换为表格（如果愿意的话）。例如，如果您需要支持 4.0 版之前的浏览器，您可能需要将 AP 元素转换为表格。不过，强烈建议不要将 AP 元素转换为表格，因为这样做会产生带有大量空白单元格的表格，更不用说急剧增加的代码了。如果需要一个使用表格的页面布局，最好使用 Dreamweaver 中可用的标准表格布局工具来创建该页面布局。
您可以在 AP 元素和表格之间来回转换，以调整布局并优化网页设计。（然而，当您将表格转换回 AP 元素时，Dreamweaver 会将此表格转换回 AP Div，此操作与对表格进行转换之前页面上可能已具有的 AP 元素的类型无关。） 不能转换页面上的特定表格或 AP 元素，必须将整个页面上的 AP 元素转换为表格或将表格转换为 AP Div。
注： 在模板文档或已应用模板的文档中，不能将 AP 元素转换为表格或将表格转换为 AP Div。相反，应该在非模板文档中创建布局，然后在将该文档另存为模板之前进行转换。
在 AP 元素和表格之间转换
您可以使用 AP 元素创建布局，然后将 AP 元素转换为表格，以使您的布局可以在早期的浏览器中进行查看。
在转换为表格之前，请确保 AP 元素没有重叠。还要确保您位于标准模式（“视图”>“表格模式”>“标准模式”）中。
将 AP 元素转换为表格
将表格转换为 AP Div
防止 AP 元素重叠
由于表格单元格不能重叠，因此 Dreamweaver 无法基于重叠的 AP 元素创建表格。如果您要将文档中的 AP 元素转换为表格，请使用“防止重叠”选项来约束 AP 元素的移动和定位，使 AP 元素不会重叠。
当启用此选项时，不能在现有 AP 元素前面创建一个 AP 元素，或将 AP 元素移动到或通过调整大小扩展到现有 AP 元素的上方，或在现有 AP 元素内嵌套一个 AP 元素。如果在创建重叠的 AP 元素之后启用此选项，则应拖动每个重叠的 AP 元素以使其远离其它 AP 元素。如果启用“防止 AP 元素重叠”，Dreamweaver 不会自动固定页面中现有的重叠 AP 元素。
在启用此选项和靠齐选项后，如果靠齐会使两个 AP 元素重叠，则 AP 元素将不会靠齐到网格。该元素将改为靠齐到最接近的 AP 元素的边缘。
注： 即使在启用“防止重叠”选项后，仍可以执行某些操作来重叠 AP 元素。如果您使用“插入”菜单插入一个 AP 元素，在属性检查器中输入数字或者通过编辑 HTML 源代码来重定位 AP 元素，则可以在已启用此选项的情况下使 AP 元素重叠或嵌套。如果出现重叠，请在“设计”视图中拖动各重叠 AP 元素以使其分离。
在“AP 元素”面板（“窗口”>“AP 元素”）中，选择“防止重叠”选项。
在“文档”窗口中，选择“修改”>“排列顺序”>“防止 AP 元素重叠”。
