网页制作案例教程网页APDiv和行为特效本节主要内容p一、什么是AP Divp二、AP Div属性p三丶编辑AP Divp四丶AP Div与表格之间的转换p五、实训一、什么是AP Div AP Div，也叫绝对定位元素，是组成HTML网页的一种元素，我们通常称为“层”，网页在Dreamweaver CS6中，可以利用AP Div来准确灵活的定位网页中的元素在网页中任何位置AP Div具有两种功能，即可以作为层，放置文字、图像或其它可以在HTML文档正中放入的内容，还可以灵活定位创建AP Div的方法有两种：插入APDiv元素：单击“插入”菜单”布局对象” ”AP Div”命令；如图5-1所示 绘制层：单击“插入”菜单“布局”面板”绘制AP Div”如图5-2所示二、AP Div属性在Dreamweaver CS6中，网页元素在布局过程中，可以通过“属性”面板或者“AP”面板来设置其属性，从而达到网页布局的效果1. AP Div属性面板，如图5-3所示AP Div的属性面板各属性含义如下：CSS-P元素：用来定义该AP Div的ID名，该ID名是唯一的，且只能用使用字母和数字左：输入的数值代表该AP Div的左边缘与网页左边缘之间的距离，单位一般为px。
上：输入的数值代表该AP Div的上边缘与网页上边缘之间的距离，单位一般为px宽：输入的数值代表该AP Div的宽度，单位一般为px高：输入的数值代表该AP Div的高度，单位一般为pxAP Div的属性面板各属性含义如下：Z轴：输入的数值代表该AP Div的堆叠的顺序，数值越大，该层越靠上我们可以通过设置Z轴的值，来修改各个层之间的堆叠顺序背景图像：AP Div的背景图像可以通过在文本框中直接输入背景图像的路径或者利用“浏览”按钮选择本地图像来设置类：该AP Div设置的CSS样式背景颜色：AP Div的背景颜色可见性：该AP Div的显示状态下拉列表框中有四种：如表5-1所示值描述default表示默认值 ，不指明当前的可见性属性；Inherit表示继承，继承父级AP Div的可见性属性；visible表示可见，无条件显示AP Div及其中内容；hidden表示隐藏，隐藏AP Div及其中内容剪辑：通过剪辑可以设置AP Div中可见区域的大小并可以指定AP Div可见区域上下左右侧向对于AP Div边界的距离提示：在100px*100px的AP Div中，如果想上、下、左、右各剪辑10px，得到可区域的时候，我们在剪辑的时候，需要左、上各剪辑10px,右、下各剪辑90px，才能得到。
2.AP元素面板打开“窗口”“AP元素”命令或直接按键可以打开AP元素面板如图5-5所示AP元素面板各属性含义如下：ID用来显示和编辑该AP Div的名称；ID的属性可见性有两种，如表5-3所示如图5-5所示值描述表示可见表示不可见Z和属性面板中“Z轴”的用法一致防止重叠，选择该选项，可以使各个AP Div不重叠三、编辑AP Div1.AP Div的选择将光标移动到需要选择的AP Div边框上，当光标指针变成“十字双向箭头”光标时，单击鼠标左键即可选中该AP Div；直接单击AP Div的内部，当出现显示AP Div的选择柄图标时，单击文档窗口左下角状态栏里的”“AP Div标签，也可选择AP Div；在”AP Div”面板中选择AP Div的名称，即可选择AP Div；选择多AP Div时，可按住键的同时，单击要选择的AP Div的名称即可2. AP Div大小的调整 选中要调整的AP Div，把鼠标悬放到AP Div边框的边框选择点上，当鼠标变成“双向箭头”光标时，按住鼠标左键拖动鼠标，调整到合适的大小松开鼠标即可调整AP Div的大小了利用属性面板，设置参数3. AP Div的移动选中要移动的AP Div，把鼠标悬放到AP Div的边框，当鼠标变成“十字双向箭头”光标时，按住鼠标左键把AP Div拖到合适的位置松开鼠标即可4. AP Div层的“首选”设置单击“编辑”菜单“首选参数”“AP元素”。
提示：利用“首选参数”“AP元素”调制可以绘制多个大小一致的AP Div5.对齐AP Div选择要对齐的所有AP Div，单击“修改”菜单“排列顺序”然后选择对齐选项提示：所选定的对齐方式将遵循其他AP Div与最后一个选定的那个AP Div的边进行对齐的原则6. AP Div的嵌套嵌套AP Div是在AP Div中插入子AP Div，在已有的AP Div中利用 “绘制AP Div”命令创建出的新AP Div，即为嵌套AP Div两个AP Div之间属于“父子关系”如图5-6所示子AP Div可以和父APDiv一起移动，并确保子AP Div永远嵌入父AP Div中四、AP Div与表格之间的转换在进行网页布局时，可以将AP Div布局的网页转换成表格布局；同样利用表格布局的网页也可以转换成AP Div布局通过单击“修改”菜单“转换”“AP Div到表格”，设置“转换层为表格”对话框来实现如图5-7所示五、实训实训一 AP Div制作有杯咖啡1实训目的掌握Dreamweaver CS中AP Div的使用掌握HTML中AP Div制作网页2实训要求 要求创建站点，将其以index.html为文件名进行保存，并预览页面显示效果。
