1、通过本章学习，应该掌握以下内容：认识AP Div AP Div的基本操作 AP Div的管理 AP Div与表格的相互转换,第9章 利用AP Div技术制作网页,9.1 认识AP Div,AP Div又称层，是Dreamweaver CS5中最有价值的对象之一，它是由层叠式表发展过来的，它提供了一种对网页对象进行有效控制的手段，层可以包含文本、图像、表单、插件，甚至层内还可以包含其它层。即在HTML文档的正文部分可以放置的元素都可以放入层内。由于层可以放置在网页的任何位置，从而能有效地控制网页中的对象。,层是在制作网页中经常用到的对象，元素的定位就是一个简单的应用。用表格来对网页进行排版非常方
2、便，但有时需要在文字上放一些图片之类的元素，表格就不能胜任了，这时就可以利用层来排版。层可以重叠地放置，制作出层叠的效果。也可以控制层的显示或隐藏，实现交互技术。配合时间显的使用，还可以同时移动一个或多个层，轻松制作出动态效果。,9.2 AP Div的基本操作,9.2.1 创建AP Div,1插入AP Div,Dreamweaver CS5创建AP Div，可执行以下操作之一： （1）将光标放置在文档窗口中需要插入层的位置，然后选择“插入” “布局对象”“AP Div”命令。 （2）打开插入“布局”面板，单击“绘制AP Div”图标，然后释放鼠标，鼠标会变成十字形状，用鼠标在页面中绘制一个矩形
3、来创建层。 （3）如果需要画多个层，在单击“绘制AP Div”图标的同时，按住Ctrl键，在文档窗口中画一个层，只要不释放Ctrl键，就可以连续化多个层。,创建完AP Div之后，在页面中会出现一个层的标志，并且有一个矩形的层出现。单击层标志，其属性面板显示如图所示，在属性面板上可以设定层的属性。,2创建嵌套AP Div,AP Div嵌套指的是在一个AP Div的内部创建另一个AP Div，可以用嵌套的方法将多个AP Div组合在一起。使用嵌套层的目的通常是为了将多个AP Div组成群组，这样一来，只要移动父层，其中的子层也会一起移动，而且子层还会继承父层的显示隐藏状态，其可见性与父层保持一致
4、。这在制作动态网页是十分有用。,创建嵌套层通常有两种方法： （1）直接创建嵌套层先创建一个层为父层，后在父层内创建的层成为子层，在AP Div面板中也可以看出层2是层1的子层。 （2）将已有的多个层变为嵌套层打开AP Div面板，在层列表中将需要作为子层的层选中，按住Ctrl键将该层拖动到父层上，释放鼠标即可。,9.2.2 选择AP Div,1选择一个AP Div,选择AP Div的目的是便于层的对齐、重定位和缩放，还可以为AP Div添加背景图像和背景颜色。在Dreamweaver CS5中要选择一个层，可使用如下方法之一： （1）单击AP Div的任意边框线。 （2）选择“窗口”“AP 元
5、素”命令，打开“AP 元素”面板，单击该面板中需要选择的AP Div的名称。,2选择多个AP Div,如果要同时选择多个AP Div，可以按住Shift键，再执行上述操作之一。 注意：当选择了多个AP Div后，最后选择的AP Div标记高亮显示，同时调控点显示为黑色，其他AP Div的调控点显示为白色。,9.2.3 激活AP Div,如果需要在AP Div中插入对象，必须激活AP Div。把鼠标指针移动到层内任何地方单击，即可激活该层。此时，插入点位于AP Div内，被激活AP Div的边界突出显示，选中手柄也同时显示出来。注意：激活AP Div的操作不同于选择AP Div。,9.2.4 移
6、动AP Div,在文档中要移动一个AP Div，可以执行以下操作之一： （1）先选择AP Div，然后在该AP Div的选择手柄上按住鼠标左键并拖动鼠标，则可移动。 （2）将鼠标指针移动到需要移动层的边框位置，当鼠标指针形状为四个箭头时，按住鼠标左键并拖动鼠标，则可移动层。 （3）在属性面板中直接设置“左”、“上”的数值，也可以移动层。 （4）利用键盘，每按一次方向键，则移动一个像素单位；若按Shift键的同时按一次方向键，则移动一个网格单位。,9.2.5 复制AP Div,在Dreamweaver CS5中要复制一个AP Div，可执行以下： （1）按住Ctrl键，将鼠标指针移到需要复制AP
7、 Div的标志上，按住鼠标左键并拖动，移动一定距离后，释放鼠标，则该AP Div被复制。 （2）先选择一个AP Div，执行“编辑”“拷贝”命令，取消被选AP Div，执行“编辑”“粘贴”命令，则该AP Div被复制。,9.2.6 调整AP Div的大小,要调整一个AP Div的大小，可执行如下操作之一：（1）拖曳法：选择层，拖曳AP Div的调控点。上/下调控点只能调整层的高度，左/右调控点只能调整层的宽度，四角的调控点能同时调整层的高度和宽度。 （2）在层属性面板中设置“宽”和“高”的数值。（3）利用键盘来调整AP Div的大小：选择要调整的AP Div，按Ctrl+方向键，每次调整一个像
8、素单位。按Ctrl+Shift+方向键，每次调整一个网格单位。,1调整单个AP Div的大小,2调整多个AP Div的大小,在文档中要调整多个AP Div的大小，可执行如下操作之一： （1）在设计视图中按Shift键选择多个AP Div，单击“修改”“排列顺序”“设成宽度相同”或“设成高度相同”命令。 （2）选择要调整的AP Div，打开其属性面板。在属性面板的多个层“高”和“宽”文本框中修改所有选中的层的宽度值和高度值。,9.2.7 对齐AP Div,在文档窗口中有多个AP Div，可以选择这些AP Div，然后使用AP Div对齐命令使被选择的多个AP Div与最后被选择的AP Div边框
9、对齐。对齐多个层的方法如下：在文档窗口中选中需要对齐的AP Div，执行“修改”“排列顺序”命令，选择下列对齐方式中的一种：左对齐、右对齐、对齐上缘、对齐下缘、设成宽度相同、设成高度相同。 注意：在对齐AP Div时，没有选择的子AP Div会因为其父AP Div的移动而移动。,如果启用吸附功能，在移动和调整AP Div的大小时，该AP Div被自动定位到最近的网格位置。不论网格是否可见，吸附功能都起作用。,9.2.8 吸附AP Div到网格,要显示网格线，可选择“查看”“网格设置”“显示网格”菜单命令。,1显示网格,2吸附AP Div到网格,要吸附AP Div到网格，可选择“查看”“网格设置
10、”“靠齐到网格”菜单命令。,3改变网格和吸附设置,设置网格和吸附设置的步骤如下： （1）选择“查看”“网格设置”“网格设置”命令，打开“网格设置”对话框。 （2）在对话框中，用户可以根据需要进行选项设置。 （3）单击“确定”按钮完成设置。,9.3 AP Div的管理,命名AP Div可以执行以下操作之一： （1）选择AP Div，在其属性面板的“CSS-P元素”文本框中输入AP Div名称。（2）选择“窗口”“AP元素”命令，打开AP Div面板。双击要命名AP Div的“名称”栏，使之处于可编辑状态，输入AP Div名称。,9.3.1 AP Div的命名,若要更改单个层的可见性，可执行以下操
11、作之一：（1）打开AP Div面板，单击AP Div面板中一个层的眼睛图标以更改其可见性。眼睛睁开表示该层是可见的。眼睛闭合表示该层是不可见的。 （2）选择AP Div，在其属性面板的“可见性”栏中设置AP Div的可见性。,9.3.2 改变AP Div的可见性,1改变单个层的可见性,2改变所有层的可见性,若要同时更改所有层的可见性，单击AP Div面板标题栏的眼睛图标，所有AP Div为可见或不可见。 注意：改变所有层的可见性时，可以将所有层设置为“可见”或“隐藏”，但不能设置为“继承”。,9.3.3 改变AP Div的叠放次序,1利用AP Div面板来调整AP Div的叠放次序,利用“AP
12、 元素”面板来调整AP Div的叠放次序的操作步骤是：打开“AP 元素”面板，双击要更改其z值的大小。键入一个较大的数字可将 AP 元素在堆叠顺序中上移，反之将下移AP 元素。,2利用层属性面板来调整AP Div的叠放次序,在层属性面板中直接修改层的“Z轴”值，可以改变AP Div的叠放次序。可以在文本框中输入数值，当输入的数值比当前值大时，表示AP Div的叠放次序提高；当输入的数值比当前值小时，表示AP Div的叠放次序降低。,AP Div和表格都可以用来进行页面定位，但AP Div是可以随意移动的，应用AP Div来进行页面设计更快捷、方便、灵活。但AP Div只有在较高版本的浏览器中才
13、能够正确显示，如果要使设计的网页在较低版本的浏览器中也正确显示，则不能使用AP Div来控制版面。 为了避免显示错误，可以先用AP Div来快速创建复杂的页面布局，然后再把AP Div布局转换为表格布局。需要时，也可以进行AP Div和表格的相互转换，以调整布局和优化页面设计。,9.4 AP Div与表格,在Dreamweaver CS5中，先用AP Div来制作一个页面，选择“修改”“转换”“将AP Div转换为表格”命令，弹出 “将AP Div转换为表格”对话框，根据需要对以上各项进行设置，设置完毕单击“确定”按钮。,9.4.1 将AP Div转换为表格,注意：1隐藏的AP Div不能转换
14、为表格。2重叠的AP Div不允许转换为表格，因为表格的单元格是不能重叠的。 3在模板文档或已应用模板的文档中，不能将AP Div转换为表格或将表格转换为AP Div。即应该在非模板文档中创建布局，然后再将该文档另存为模板之前进行转换。,将表格转换为AP Div的步骤如下：选择需要转换的表格，执行“修改”“转换”“将表格转换为AP Div”命令，弹出 “将表格转换为AP Div”对话框；在对话框中选择所需要的选项，单击“确定”按钮，文档中的表格转换为层，但空表格单元不转换，表格之外的内容也被置于AP Div中。 注意：如果文档应用了模板或模板文档，就不能把把表格转换为AP Div。如果确实需要转换，可在存为模板之前先进行转换。,9.4.2 将表格转换为AP Div,E N D,
