3.6 AP Div

3.6.1 AP Div简介

1．AP Div的含义

AP Div也称为层，不仅可以对网页进行布局，还可以与行为相结合来实现一些特殊效果。AP Div可以理解为浮动在网页上的一个页面，它可以准确地被定位在网页中的任何位置。

在AP Div中可以插入文字、图像、表单、表格等元素。针对AP Div，可以进行叠放、改变次序、更改大小、显示及隐藏等设置。

2．AP Div的创建

AP Div的创建有以下几种方法，图3-62所示为网页文档中创建AP Div的效果。

选择菜单“插入”→“布局对象”→“AP Div”命令，即可插入一个AP Div。

选择“插入”面板→“布局”→“绘制AP Div”按钮，将其拖曳到文档窗口中，即插入一个默认的AP Div。

选择“插入”面板→“布局”→“绘制AP Div”按钮，在文档窗口中单击鼠标并拖曳即可创建一个AP Div。若要同时绘制多个AP Div，则在按住〈Ctrl〉键的同时进行绘制。

3．AP Div基本操作

（1）选定AP Div

若要选定一个AP Div，使用鼠标在其边框上单击即可。

若要选定多个AP Div，按住〈Shift〉键逐个单击即可。

（2）在AP Div中插入元素

首先将光标定位在AP Div中，然后插入各元素。

（3）移动、更改大小、删除

移动AP Div：将鼠标指针放在AP Div边框上,呈十字符号时拖动即可。

更改大小：选定AP Div后，鼠标指针呈箭头符号时拖动即可；或在“属性”面板上更改宽和高。

删除AP Div：选定AP Div后按〈Delete〉键，或在AP Div上单击鼠标右键，选择“删除标签”命令。

（4）对齐AP Div

对齐功能可以使两个或两个以上的AP Div按照某一边界对齐，方法是先选定所有的AP Div，然后选择“修改”→“排列对齐”级联菜单中的某个菜单命令，即可实现对齐操作。在菜单中共有4种对齐方式。

左对齐：以最后选定的AP Div的左边线为标准，对齐排列AP Div。

右对齐：以最后选定的AP Div的右边线为标准，对齐排列AP Div。

上对齐：以最后选定的AP Div的顶边为标准，对齐排列AP Div。

对齐下缘：以最后选定的AP Div的底边为标准，对齐排列AP Div。

4．AP Div属性设置

AP Div属性的设置可通过“属性”面板实现，如图3-63所示。

在“属性”面板中可以命名AP Div，设置宽及高度、可见性、背景图像或颜色、溢出等。

“CSS-P元素”：AP Div的名字，目前是默认设置。

“左”和“上”：AP Div左边框、上边框距文档左边界、上边界的距离。

“宽”和“高”：AP Div的宽度和高度。

“Z轴”：垂直平面方向上的AP Div的顺序号。

“可见性”：AP Div的可见性，包括“default”（默认）“inherit”（继承）“visible”（可见）“hidden”（隐藏）4个选项。

“背景图像”：用来为AP Div设置背景图像。

“背景颜色”：用来为AP Div设置背景颜色。

“类”：添加对所选CSS样式的引用。

“溢出”：AP Div内容超过AP Div大小时的显示方式，有“visible”“hidden”“scroll”“auto”4个选项。

“剪辑”：指定AP Div的哪部分是可见的，输入的值是距离AP Div为4个边界的距离。

5．“AP元素”面板

“AP元素”面板主要用来管理网页中的AP Div。使用该面板可防止重叠，更改AP Div的可见性，嵌套或堆叠AP Div，以及选择一个或多个AP Div。

在图3-64中，图标可用于设置AP Div的可见性，“ID”下的“apDivn”表示每一个AP Div的名称，“Z”下的1、2、3等表示AP Div的堆叠顺序。

3.6.2 AP Div的应用

AP Div不但可以布局网页，还可以与行为结合应用以产生动态效果。

1．拖动AP元素

在网页中直接插入的对象在浏览器中是不能通过拖动改变位置的，但如果把对象放在AP Div中，利用拖动AP元素行为就可以实现对象在浏览时任意拖放。

例3-10 在网站“book”中为文件“game.html”中的图像设置拖动元素行为，要求网页打开后图像可拖动至相应的分类购物袋中。

素材所在位置：……\素材\课堂案例\案例素材\No3\book\……

效果所在位置：……\素材\课堂案例\案例效果\No3\book\……

步骤：

1)打开Dreamweaver CS6并创建站点，在“文件”面板中双击打开“game.html”文件。

2)将光标置于“game.html”页面内，打开“行为”面板，单击“添加行为”按钮，

在弹出的列表中选择“拖动AP元素”命令，如图3-65所示。

3)打开“拖动AP元素”对话框，在“AP元素”下拉列表中选择要拖动的AP Div名称，单击“确定”按钮，如图3-66所示。

4)事件选择“onLoad”，同理，其他AP Div设置的方法如上所示。保存文件并预览查看效果。

2．显示/隐藏元素

显示/隐藏元素可以显示、隐藏一个或多个AP Div。当用户和页面交互时，可实现相应的效果。

例3-11 在网站“book”中为文件“author.html”内的图像“rw2.jpg”设置显示/隐藏效果。要求将鼠标指针移至图像上方时，图像右侧单元格显示作者信息；鼠标指针离开图像时，显示的作者信息隐藏。相关作者信息请查看文件夹“book”内的“text.txt”。

素材所在位置：……\素材\课堂案例\案例素材\No3\book\……

效果所在位置：……\素材\课堂案例\案例效果\No3\book\……

步骤：

1)打开Dreamweaver CS6并创建站点，在“文件”面板中双击打开“author.html”文件。

2)在图像“rw2.jpg”右侧单元格内插入一个AP Div，要求大小和单元格大小一致，在AP Div内输入作者毕淑敏的信息，为文本应用CSS样式“.cb”，如图3-67所示。

3)选中图像“rw2.jpg”，打开“行为”面板，单击“添加行为”按钮，在弹出的列表中选择“显示-隐藏元素”命令。在打开的“显示-隐藏元素”对话框中将“apDiv2”设置为“显示”，单击“确定”按钮，在“行为”面板中设置事件为“onMouseOver”，如图3-68所示。

4)继续打开“行为”面板，单击“添加行为”按钮，在弹出的列表中选择“显示-隐藏元素”命令。在打开的“显示-隐藏元素”对话框中将“apDiv2”设置为“隐藏”，单击“确定”按钮，设置事件为“onMouseOut”。

5)保存文件并预览查看效果。同理，为图像“rw3.jpg”和“rw4.jpg”设置显示-隐藏元素。