DW_08使用AP Div

1、主讲：主讲：韩维良韩维良2022年年5月月网站建设网站建设第8章使用AP Div2022年5月9日星期一教育学院第一节第一节 认识认识AP DivAP Div元素元素APAP是Absolutely Positioned的缩写，意为绝对定位；DIV是指Div标签，Ap Div元素用Div标签实现。在以前的版本中称为层，所以又称为Ap Div层。如果用户想在网页上实现多个元素重叠的效果，可以使用层。层是网页中的一个区域，并且游离在网页之上。利用层可精确定位精确定位和重叠网页元素重叠网页元素。通过设置不同层的显示或隐藏，实现特殊的效果。3网站建设网站建设第8章使用AP Div2022年5月9日星期一

2、教育学院Ap DivAp Div层层，全名叫图层图层，是网页中的一种容器，它可定位在页面上的任意位置，并且其中可包含文本、图像、表单等所有可直接用于文档的元素。 Ap DivAp Div层最大的优点层最大的优点在于使网页元素位于网页中的任意位置。（实际上也是一种页面布局的工具）Ap Div层的出现使网页从二维平面拓展到三维。可以使页面上元素进行重叠和复杂的布局。 4网站建设网站建设第8章使用AP Div2022年5月9日星期一教育学院Ap Div层在网页中主要有两个方面的应用： 1 、制作动态效果 层可以自由地移动，层可以根据需要显示或者隐藏，这是应用层创建动态效果的重要原因。 2 、排版 因

3、为层比表格有更大的自由度，可以自由地放置，同时还可以相互嵌套、叠加，所以很大程度上弥补了表格排版的不足。 5网站建设网站建设第8章使用AP Div2022年5月9日星期一教育学院6网站建设网站建设第8章使用AP Div2022年5月9日星期一教育学院第二节第二节 定义定义AP DivAP Div元素元素一、可视化定义一、可视化定义AP DivAP Div元素元素方法：单击插入栏上“布局”标签下的“绘制AP Div”层图标。在文档窗口的设计视图中拖动鼠标绘制出层。或者：将插入点置于欲插入处，执行“插入”菜单的“布局对象”中“AP Div”命令，创建默认大小的层。默认大小可以在首先参数中设置。7网

4、站建设网站建设第8章使用AP Div2022年5月9日星期一教育学院查看或设置层参数：选择“编辑/首选参数”菜单。从“分类”列表中选择“AP元素”。 可指定新建层的默认设置。8网站建设网站建设第8章使用AP Div2022年5月9日星期一教育学院二 、 使 用 代 码 定 义二 、 使 用 代 码 定 义 A P A P DivDiv元素元素在网页的head部分,定义一个Ap Div元素的代码如左。在Body部分，Div标签如右下。9#apDiv1 position:absolute;left:208px;top:108px;width:190px;height:172px;z-index:1

5、;网站建设网站建设第8章使用AP Div2022年5月9日星期一教育学院第三节第三节 AP DivAP Div元素嵌套元素嵌套AP Div元素可以嵌套，在一个AP Div元素中可以嵌套另一个AP Div元素，从而继承父AP Div元素的一些属性。嵌套的AP元素会随着父AP元素的移动而移动，继承父AP元素的可见性。一、识别嵌套的一、识别嵌套的AP DivAP Div元素元素要注意识别AP Div元素的嵌套与重叠：可以用拖动法识别，也可以在代码中查看（代码嵌套），或者用Ap Div锚点识别。Ap Div锚点在首选参数的不可见元素中设置。10网站建设网站建设第8章使用AP Div2022年5月9日星

6、期一教育学院11选中了显示选中了显示网站建设网站建设第8章使用AP Div2022年5月9日星期一教育学院二、设置二、设置APDivAPDiv元素相互嵌套元素相互嵌套1、插入嵌套ApDiv元素方法：在欲插入的ApDiv元素中单击，“插入”“布局对象”“ApDiv”。12网站建设网站建设第8章使用AP Div2022年5月9日星期一教育学院2、绘制嵌套ApDiv元素设置嵌套参数：选中“首选参数”中“Ap元素”的“在Ap Div中创建以后嵌套”选项。绘制：单击插入栏上“布局”面板中的“绘制AP Div”，拖动鼠标到欲嵌套ApDiv元素上拖动绘制出新的ApDiv元素，即会嵌套在里面。按下Alt键的方

7、法没有操作成功。13网站建设网站建设第8章使用AP Div2022年5月9日星期一教育学院3、拖动嵌套ApDiv元素方法：从插入栏上“布局”面板中拖动“绘制AP Div”按钮到欲嵌套ApDiv元素上，即可创建一个嵌套在内的ApDiv元素。14网站建设网站建设第8章使用AP Div2022年5月9日星期一教育学院第四节第四节 选择选择AP DivAP Div元素元素方法：单击欲选AP Div层的边框或者AP Div层左上角标签。按下SHIFT的同时，单击欲选AP Div层内任意区域，或者单击多个层。在“AP元素”面板中单击该欲选层的名称。若要选择多个层，可按住Shift键并单击“AP元素”面板上

8、的两个或更多个名称或在两个或更多个层的边框内（或边框上）按住Shift键并单击。 15网站建设网站建设第8章使用AP Div2022年5月9日星期一教育学院第五节第五节 设置设置AP DivAP Div元素的属性元素的属性一、单个一、单个AP DivAP Div元素的属性元素的属性选择一个层，在属性面板中设置层的属性。左、上左、上：分别表示其左上角在上一级容器中的显示坐标。16网站建设网站建设第8章使用AP Div2022年5月9日星期一教育学院宽、高宽、高：分别表示Ap Div层的宽度、高度。溢出溢出表示，当层的内容超出层的大小时，如何在浏览器中显示。如：添加滚动条、隐藏、可见等。还可以设置

9、Ap Div层的背景颜色和背景图案。可见性可见性：设置Ap Div层的显示与否。nDefault：不指明层的可见性,大多浏览器会继承该层的父级层的可见性nInherit：表示新建层继承父级层的可见性nVisible：显示层及其中的内容,不管其父级层是否可见nHidden：隐藏层及其中的内容,不管其父级层是否可见 17网站建设网站建设第8章使用AP Div2022年5月9日星期一教育学院二、多个二、多个AP DivAP Div元素的属性元素的属性选中欲设置属性的多个AP Div层，再在属性面板中设置相应属性。18网站建设网站建设第8章使用AP Div2022年5月9日星期一教育学院第六节第六节

10、使用使用AP DivAP Div元素面板元素面板通过“AP元素”面板可以管理文档中的AP Div层。打开方法打开方法：选择“窗口/ AP元素”菜单，打开“AP元素”层面板，层显示为按z轴顺序排列的名称列表。19可视性名称Z轴网站建设网站建设第8章使用AP Div2022年5月9日星期一教育学院一、显示隐藏一、显示隐藏AP DivAP Div元素元素方法：在“AP元素”面板中，眼睛睁开表示该层是可见的。眼睛闭合表示该层是不可见的。如果没有眼形图标，该层通常会继承其父级的可见性。在层面板中选中层后，可再看属性面板，“可见性”改为：hidden20网站建设网站建设第8章使用AP Div2022年5月

11、9日星期一教育学院二、防止二、防止AP DivAP Div元素重叠元素重叠方法：在“AP元素”面板中，选择“防止重叠”选项。 因为表格单元格不能重叠，所以Dreamweaver CS5无法从重叠层创建表格。如果要将一个文档中的层转换为表格以兼容IE 3.0浏览器，则选择“防止重叠”选项来约束层的移动和定位，使层不会重叠。21网站建设网站建设第8章使用AP Div2022年5月9日星期一教育学院三、更改三、更改AP DivAP Div元素名称元素名称方法：在“AP元素”面板中，双击欲更名的Div元素名称处，编辑输入新的名称。22网站建设网站建设第8章使用AP Div2022年5月9日星期一教育学

12、院四、改变四、改变AP DivAP Div元素顺序元素顺序排版时常需要控制叠放在一起的不同网页元素的显示顺序，以实现特殊的效果；在属性面板中“Z轴”表示图层在网页中顺序号；层的显示顺序与Z轴值的顺序一致。Z值越大，层的位置越靠上面。其中号位于最下面，编号较大的层出现在编号较小的层上面，编号也可以是负值。 方法：在“AP元素”面板中，双击欲改变顺序的Div元素Z轴值进行编辑，或者在属性面板中编辑选定层的“Z轴”属性值。23网站建设网站建设第8章使用AP Div2022年5月9日星期一教育学院第七节第七节 操作操作AP DivAP Div元素元素一、激活一、激活AP DivAP Div元素元素方法

13、：在AP Div元素内的任意位置，单击鼠标。激活以后，插入点出现在其内部，可以插入内容。二、在二、在AP DivAP Div元素中插入对象元素中插入对象激活AP Div元素后，可以在其中插入各种网页对象。内容要与层的大小匹配（如图片太大），可以加入文本、图片、表格、插件，也可以在里面再嵌套层。 24网站建设网站建设第8章使用AP Div2022年5月9日星期一教育学院三、调整三、调整AP DivAP Div元素的大小元素的大小可以调整单个AP DivAP Div层的大小，也可以同时调整多个AP DivAP Div层的大小以使其具有相同的宽度和高度。如果已启用“AP元素”面板选项，那么在调整层的

14、大小时将无法使该层与另一个层重叠。方法方法：选中层，拖动该层的任一大小调整柄，或者在属性面板中输入宽、高值。微调法：微调法： （一次调整10个像素的大小）Ctrl+SHift+ 或 （一次调整一个像素的大小）Ctrl + 或 25网站建设网站建设第8章使用AP Div2022年5月9日星期一教育学院四、移动四、移动AP DivAP Div元素元素选定AP Div层，用鼠标拖动至新的位置，或者用光标移动键移动至新的位置。26演示：用层绘制一个常见的网页布局：（半圆形链接分布）、（图片的堆叠分布)。网站建设网站建设第8章使用AP Div2022年5月9日星期一教育学院五、对齐五、对齐AP DivA

15、P Div元素元素当有多个AP层时，可以对它们进行对齐操作，包括左对齐、右对齐、上对齐与对齐下缘，以最后一个选定AP层的边框位置为标准对齐。方法：选中创建好的多个AP层，单击“修改”“排列顺序”中的对齐方式（左、右、上、下）；如“对齐下缘”命令菜单，将所有选中的AP层以最后选中的AP层的下边框为标准对齐27网站建设网站建设第8章使用AP Div2022年5月9日星期一教育学院六、对齐六、对齐AP DivAP Div元素到网格元素到网格显示网络显示网络：选中“查看” “网格设置”“显示网格”选项。网络设置网络设置：执行“查看” “网格设置”“网格设置”命令。开户对齐网格功能后，通过鼠标拖动改变A

16、p Div层的位置时，在靠近网格时，会自动吸附到网格的某一条边上对齐。28开启对齐网格功能网站建设网站建设第8章使用AP Div2022年5月9日星期一教育学院七、七、AP DivAP Div元素的定位方式元素的定位方式绝对定位绝对定位：是指定Ap Div元素以最近的上级包含块的左上角为参考点进行定位，可用拖动法移动Ap Div元素的位置。但相近的其它内容位置改变时，不会影响Ap Div元素的位置。相对定位相对定位：是指定Ap Div元素以相对于自身位置的左上角为参考点进行定位，不能用拖动法移动Ap Div元素的位置。其位置不固定，相近的其它内容位置改变时，Ap Div元素的位置会相应地发生变化（如其上方增加或者减少行，会相应变化）。29网站建设网站建设第8章使用AP Div2022年5月9日星期一教育学院默认的定位为绝对定位；改变定位方式改变定位方式：在Ap Div元素定义代码中将position属性值由absolute改为relative，区别：相对定位的Ap Div元素没有左上角的层选择标记。30#apDiv7 position:relative;left:123px;top:50px;width:206px;height:177px;z-index:2;background-color: #990000;网站建设网站建设第8章使用AP Div