4.2 创建与编辑Div对象
在网页中，Div通常用来确定对象在浏览器中的起止位置。Div可以包含文本、图像、表格甚至是其他的Div，而且Div对于制作页面的部分更是有特殊的效果。Div在网页的定位中使用非常广泛，但用Div设计的网页在不同分辨率的显示器上显示时会出现错误现象，不能准确定位，因此Div常配合表格、框架等技术来对网页进行设计。本节主要向读者介绍创建与编辑Div对象的操作方法，希望读者熟练掌握本节内容。
4.2.1 Div的含义
网页布局是网页中比较重要的技术，使用表格、Div标签和AP Div元素都可以进行网页布局。表格曾经是比较流行的布局方式，但由于其局限性，现在逐渐退居幕后，取而代之的是Div标签布局方式。AP Div主要用于实现一些特殊效果。图4-35所示为Dreamweaver CS6中创建的Div标签及AP Div标签。
Div是网页布局中一个非常重要的对象，Div标签与AP Div严格意义上说是相同的对象，即都是＜div＞标签，但由于采用了不同的CSS样式定义，两者在外观及属性上有不同的表现。
图4-35 建的Div标签及AP Div标签
说明
Div和AP Div是可以进行相互转换的，但由于AP Div比较特殊，Div与AP Div的使用方法有所区别。AP Div是灵活性最大的网页元素，具有可移动性，可以在设计中的文档上任意移动，也可以在任意位置创建，可重叠或设置是否显示，因此在网页中常用AP Div来实现一些特殊的功能，如制作弹出菜单和浮标图像等。
4.2.2 创建Div标签
Div标签是用来定义网页内容中的逻辑区域的标签，可以通过手动插入Div标签并对它们应用CSS定位样式来创建页面布局。
素材文件 光盘\素材\第4章\4.2.2\index.html
效果文件 光盘\效果\第4章\4.2.2\index.html
视频文件 光盘\视频\第4章\4.2.2 创建Div标签.mp4
步骤01 单击“文件”|“打开”命令，打开一个网页文档，将光标定位到要插入Div标签的相应位置，如图4-36所示。
步骤02 单击“插入”|“布局对象”|“Div标签”命令，如图4-37所示。
图4-36 定位光标的位置
图4-37 单击“Div标签”命令
步骤03 弹出“插入Div标签”对话框，如图4-38所示。
步骤04 单击“确定”按钮，即可在网页编辑窗口的相应位置处插入一个Div标签，如图4-39所示。
图4-38 “插入Div标签”对话框
图4-39 插入一个Div标签
步骤05 在新插入的“Div标签”中输入相应的内容，按【F12】键保存后，在弹出的IE浏览器中可以查看网页效果，如图4-40所示。
图4-40 在IE浏览器中查看网页效果
4.2.3 创建AP Div标签
Dreamweaver可在页面上轻松地创建和定位AP Div，还可以创建嵌套的AP Div。下面介绍创建嵌套AP Div的操作方法。
素材文件 光盘\素材\第4章\4.2.3\index.html
效果文件 光盘\效果\第4章\4.2.3\index.html
视频文件 光盘\视频\第4章\4.2.3 创建AP Div标签.mp4
步骤01 单击“文件”|“打开”命令，打开一个网页文档，如图4-41所示。
步骤02 单击“插入”|“布局对象”｜“AP Div”命令，如图4-42所示。
图4-41 打开一个网页文档
图4-42 单击“AP Div”命令
步骤03 执行上述操作后，即可在相应位置插入一个AP Div，如图4-43所示。
步骤04 将光标定位于AP Div标签内，在其中插入一个素材图片，并将其拖动到合适的位置处，如图4-44所示。
图4-43 插入一个AP Div
图4-44 拖动到合适的位置
步骤05 按【F12】键保存网页后，即可在弹出的IE浏览器中查看制作的网页AP Div效果，如图4-45所示。
图4-45 查看网页效果
说明
AP元素（绝对定位元素）是分配有绝对位置的HTML页面元素，具体而言就是Div标签或其他任何标签。AP元素可以包含文本、图像或其他任何可放置到HTML文档正文中的内容。通过Dreamweaver CS6，用户可以使用AP元素来设计页面的布局。可以将AP元素放置到其他AP元素的前后，隐藏某些AP元素而显示其他AP元素，以及在屏幕上移动AP元素。用户也可以在一个AP元素中放置背景图像，然后在该AP元素的前面放置另一个包含带有透明背景的文本的AP元素。
AP元素通常是绝对定位的Div标签，它们是Dreamweaver默认插入的AP元素类型。可以将任何HTML元素作为AP元素进行分类，方法是为其分配一个绝对位置。另外，所有AP元素都将在“AP元素”面板中显示。
当插入AP Div时，Dreamweaver默认情况下将在“设计”视图中显示AP Div的外框，且将指针移动到块上面时还会高亮显示该块。可以通过“查看”|“可视化助理”|“AP元素外框”和“CSS布局外框”命令，禁用显示AP Div（或任何AP元素）外框的可视化助理。
4.2.4 互换AP Div与表格
可以在AP元素和表格之间来回转换，以调整布局并优化网页设计（将表格转换回AP元素时，Dreamweaver会将此表格转换回AP Div，此操作与对表格进行转换之前页面上可能已具有的AP元素的类型无关）。不能转换页面上的特定表格或AP元素，必须将整个页面上的AP元素转换为表格或将表格转换为AP Div。在模板文档或已应用模板的文档中，不能将AP元素转换为表格或将表格转换为AP Div。相反，应该在非模板文档中创建布局，然后在将该文档另存为模板之前进行转换。
可以使用AP元素创建布局，然后将AP元素转换为表格，以使布局可以在早期的浏览器中进行查看。在转换为表格之前，应确保AP元素没有重叠，还要确保位于标准模式中。
1.将AP Div转换为表格
选择相应的AP Div，单击“修改”|“转换”|“将AP Div转换为表格”命令，弹出“将AP Div转换为表格”对话框，如图4-46所示。单击“确定”按钮，即可将AP Div转换为表格，如图4-47所示。
图4-46 “将AP Div转换为表格”对话框
图4-47 将AP Div转换为表格
说明
可在“将AP Div转换为表格”对话框中设置以下选项：
（1）“最精确”：为每个AP元素创建一个单元格以及保留AP元素之间的空间所必需的附加单元格。
（2）“最小：合并空白单元”：若AP元素位于指定的像素数内，则应对齐AP元素的边缘。如果选中该单选按钮，结果表将包含较少的空行和空列，但可能不与布局精确匹配。
（3）“使用透明GIFs”：使用透明的GIF填充表格的最后一行。
（4）“置于页面中央”：将结果表放置在页面的中央。
2.将表格转换为AP Div
选择相应的表格，单击“修改”|“转换”|“将表格转换为AP Div”命令，弹出“将表格转换为AP Div”对话框，如图4-48所示。
单击“确定”按钮，所选表格即可转换为AP Div。空白单元将不会转换为AP元素，除非它们具有背景颜色，位于表格外的页面元素也会放入AP Div中。
图4-48 “将表格转换为AP Div”对话框
说明
可在“将表格转换为AP Div”对话框中设置以下选项：
（1）防止重叠：在创建、移动和调整AP元素大小时约束AP元素的位置，使AP元素不会重叠。
（2）显示AP元素面板：选中该复选框后，即可显示“AP元素”面板。
（3）显示网格和靠齐到网格：选中这两个复选框后，可使用网格来帮助定位AP元素。
可以在AP元素和表格之间来回转换，以调整布局并优化网页设计。单击“修改”|“转换”|“将表格转换为AP Div”命令，在弹出的“将表格转换为AP Div”对话框中进行相应设置，即可将表格转换为AP Div。