第6章 布局对象AP Div的使用.pptx

网页设计与制作;6.1APDiv简介

6.2APDiv和表格的转换

6.3使用Spry布局对象

6.4使用CSS和Div布局页面;APDiv是一种网页元素定位技术，使用APDiv可以以像素为单位精确定位页面元素，并且可以将其放置在页面的任意位置。

6.1APDiv简介

（1）利用APDiv技术，可以将许多元素置于Div中，因为Div可以重叠，可以产生许多重叠效果。

（2）可以利用Div来精确定位网页元素。它可以包含文本、图像、甚至其它Div，凡是HTML文件可包含的元素均可包含在Div中。

（3）Div可以转换成表格，为不支持Div的浏览器提供了解决方法。

（4）Div可以显示和隐藏，利用这一功能可以实现网站导航中下拉菜单的制作。;6.1APDiv简介

6.1.1设置APDiv的属性

在Dreamweaver中插入APDiv的方法有两种：选择“插入”→“布局对象”→“APDiv”命令或“布局”面板插入栏中单击按钮即可插入APDiv。

APDiv属性面板

（1）CSS-P元素：用于设置APDiv的名称，以便在AP元素面板和JavaScript代码中标识该APDiv。

（2）左：用于设置APDiv的左边界距离测览器窗口左边界的距离。

（3）上：用于设置APDiv的上边界距离测览器窗口上边界的距离。

（4）宽：:用于设置APDiv的宽。;6.1APDiv简介

6.1.1设置APDiv的属性

（5）高：用于设置APDiv的高。

（6）Z轴：设置APDiv在AP元素面板Z轴的顺序，即设置APDiv的层叠顺序。

（7）可见性：用于设置APDiv的显示状态，包括default（默认值）、inherit（继承）、visible（显示）和hidden（隐藏）4个选项。其中：

●default(默认)：表示不指定可见性属性，当未指定可见性时，多数测览器都会默认为继承。

●inherit（继承）：表示使用该APDiv父级的可见性属性。

●visible（显示）：表示显示该APDiv的内容，而不管父APDiv的可见性属性。

●hidden（隐藏）：表示隐藏APDiv的内容，而不管父APDiv的可见性属性。;6.1APDiv简介

6.1.1设置APDiv的属性

（8）背景图像：用于设置APDiv的背景图像。

（9）背景颜色：用于设置APDiv的背景颜色。

（10）溢出：用于控制当APDiv的内容超过APDiv大小时如何在测览器中显示APDiv。包括visible（可见）、hidden（隐藏）、scroll（滚动条）和auto（自动）4个???项。其中：

●visible（可见）：APDiv将自动适应APDiv中内容的宽度与高度；

●hidden（隐藏）：超出APDiv范围的内容不会显示；

●scroll（滚动条）：在APDiv中将出现滚动条，而不管APDiv中是否需要滚动条；

●auto（自动）：当APDiv中的内容超出APDiv范围时将显示滚动条。

（11）剪辑：用于设置APDiv的可见区域的大小。在其左、上、右和下文本框中直接输入数值即可。;6.1APDiv简介

6.1.2AP元素面板的使用

AP元素的面板可以方便地处理Div的操作、

设置层的属性。APDiv名称按创建的顺序依

次命名为apDiv1、apDiv2。并且Z-index值

也是从1开始逐渐变大。在AP元素面板中单击

APDiv名称，就可以随意选择当前文档中的任何APDiv。在文档窗口中选择APDiv，就会在APDiv周围出现8个黑色的正方形尺寸调节点。拖动该尺寸的调节点，就可以扩大或缩小APDiv的宽度或高度。调节APDiv四角处的尺寸调节点，就可以同时调节上下左右的大小。

在AP元素面板的左边是眼睛标记，用鼠标点击左侧的眼睛标记，可以显示或隐藏所选的Div。;6.1APDiv简介

6.1.3实践技能训练-使用APDiv布局网页

使用布局对象APDiv布局页面，具体操作如下：

（1）新建一个HTML文档，执行“插入”→“布局对象”→“APDiv”命令，在“属性”面板中设置“宽”为782像素，“高”为200像素，并将名称设置为Div1；

（2）将插入点置于Div1内，执行“插入”→“图像”命令，再弹出的对话框中选择wysjsc06\

0601中的top.jpg文件，单击“确定”按钮，插入后的效果如图6-5所示。

（3）执行“插入”→“布局对象”→“APDiv”命令，插入一个Div，在“属性”面板中设置名称为Div2，“宽”为182px，“上”为200px