6.2 AP Div的使用(课件）-高二《网页设计与制作》同步教学（中国人民大学出版社）

6.2 AP Div的使用 AP Div（绝对定位元素）是分配有绝对位置的一种页面元素。在网页制作过程中，AP Div让页面元素向三维空间扩展，层与层之间可相互叠加，可放在网页的任一位置，在层内可放置各种网页元素。AP Div对于初学者来说可能有些陌生，其实它在Dreamweaver CS4中等同于早期版本的层，仍然是用div来做标识符。AP Div又称为AP元素，以下简称AP层。 在Dreamweaver CS4中，AP层可以用来设计网页的布局，可以进行隐藏和显示的控制，也可以在文档设计视图中移动AP层，也可以在利用两个AP层中设置层的背景图像。利用AP层可以让位置更加灵活和机动，同时AP层也可以实现和表格的相互转换。 6.2.1 创建AP Div和创建嵌套AP层 AP Div可以手工绘制，根据需要创建AP层，位置更加灵活。 1.创建AP Div 用此功能可以在网页的任意位置绘制AP Div层，在代码中也是以<div>开始，</div>结束。具体步骤如下： (1)打开【文件】面板，双击文件名，打开文件6-21-2.htm。 (2)打开【插入】面板，选择【布局】模式，并切换至【标准】类别，单击【绘制AP Div】图标按钮，此时鼠标变成十字形，在文档中按住鼠标并拖动，即可以绘制出一个透明的矩形区。 或者在菜单栏中选择【插入】→【布局对象】→【AP Div】命令，即可插入AP层。 (3)松开鼠标，AP层即创建完成。   提示：在菜单栏中选择【编辑】→【首选参数】命令，打开【首选参数】对话框。切换到“不可见元素”面板，选中“AP元素的锚点”复选框，即能在页面编辑状态显示AP锚点。 AP层可以像表格一样嵌套，并且根据嵌套关系互为影响。嵌套AP层是指创建在已有AP层之内的AP层，嵌套的子AP层可以与父AP层一起移动、隐藏、可见，即可完全继承父AP的可见性。 2.创建嵌套AP层 (1)打开【文件】面板，双击文件名，打开文件6-21-3.htm。 (2)将光标定位于要插入AP层的位置，单击【插入】面板的【常用】模式中的【插入Div标签】按钮。 (3)弹出【插入Div标签】对话框，在“插入”下拉列表中选择“在开始标签之后”选项，默认选择<div id=“mianContent”>，如下图所示。 (4)单击【确定】按钮，将光标定位于这个新建AP层的左上角。 (5)在菜单栏中选择【插入】→【布局】→【AP Div】命令，插入一个默认大小的AP层，如下图所示。 用同样的方法，在id=AP2的AP层再创建一个AP层 切换到代码视图，可以看到嵌套AP层的源码如下： <div id=”AP1”> 此处显示 id“AP1“的内容 <div id=”AP2”> 此处显示 id“AP2“的内容 <div id=”AP3”> 此处显示 id“AP3“的内容</div> </div> </div>   6.2.2 AP层的属性 AP层除了可以用【AP元素】面板来进行一些设置，更多的属性仍然要借助于【属性】面板。 选中层（单击层的外边框，即可选中层），可以在层的【属性】面板中设置层的属性，如图所示。 【属性】面板中各项参数详细设置如下： 层编号：设置层的名称。在一个页面可以插入多个层，因此要为每一个层命名一个不同的名字，以便进行标识识别，在此命名为“AP2”。 “左”、“上”：用以设置层距离页面左上角的距离，在层中位置的控制均为绝对位置，会随浏览器显示分辨率的不同而位置有所变化，在此设置左“545px”、设置上“59px”。 “宽”、“高”：宽和高指定层的宽度和高度，默认插入层的宽和高为“200px”、“115px”，在此可以先不用设置具体的数值，在插入别的网页元素后根据插入元素的宽和高再来重新定义。 Z轴：用来设置层的Z轴，可以为负值，此设置在一个页面有多个层时，并重叠时，根据Z轴值的大小来决定层的显示顺序，Z轴值最大的最前面显示，将覆盖Z轴值小的层。 可见性：在下拉列表中设置层的可视属性，层的可视属性如下表所示。 层的可视属性 可视属性 含义 Default 默认值，默认层为可见 Inherit 继承父层的可视属性 Visible 设置层为显示，不随父层属性的影响 Hidden 设置层为隐藏，不受父层属性的影响 背景图像：用来设置层的背景图像。 背景颜色：用来设置层的背景颜色。 溢出：当层中插入元素的内容超过层的设置大小时，显示层中的内容的显示方式如下表所示。 剪辑：用来设置层的可见区域，经过剪辑的层，只有指定的区域才可见，左、右、上、下后面的文本框用来设置可见区域的左边界距离层左、右、上、下的距离。 溢出方式 含义 Visible 当层中的内容超过层的大小时，层自动将大小扩展，直到可以容纳当前内