第 12 章 ap div

第 12 章 AP Div 对于有 Dreamweaver 基础的读者来说，初识 APDiv 或许

会感到即熟悉又陌生。熟悉于它的 Div 标识符，陌生于它在CS3 版本中的含义及作用。其实， AP Div 在 Dreamweaver CS4 中仍等同于前期版本的层，又称为 AP 元素或 CSS-P 元素，本文以下简称 AP 层。

然而对于初学者来说又会产生这样的疑问：什么是层？有什么作用？前面我们学习过了表格，知道了表格可以作为页面布局的容器。 AP 层也是作为网页布局的容器， AP 层内可以包含文本、图形图像、动画、音频、视频、表格等一切可以放置到 HTML 中的元素，甚至可以在 AP 层内放置 AP 层。本章我们就为大家详细的介绍一下 AP 层的相关内容。

12.1 AP 层的创建与属性

12.1.1 创建 AP 层12.1.2 AP 层的属性

12.1.1 创建 AP 层 创建普通 AP 层 方法 1 ：“插入”面板 |“ 布局”选项组 |“ 绘制 AP Div” ，光

标变成十字光标时，按下鼠标左键拖动绘制出 AP Div 。 方法 2 ：菜单“插入” |“ 布局对象” |“AP Div” 命令

12.1.1 创建 AP 层 创建嵌套 AP 层。

方法：

在“ AP 元素”面板中选择一个 AP元素，按住 Ctrl 键拖动，将此 AP 元素拖到面板中的目标 AP 元素位置，使该 AP元素成为目标 AP 元素的嵌套 AP 层。

如果单击“绘制AP Div” 后，无法在AP Div 中绘制嵌套 AP Div ，那就取消“ AP 元素”上的“防止重叠”前的选择

12.1.2 AP 层的属性 利用“属性检查器”对 AP 层属性进行设置，可

以调整创建好的 AP 层，达到预期的网页布局效果。 AP 层的属性包括 ID 、位置、大小、 Z 轴、可见性、背景、类、溢出、剪辑等基本属性，如图 12.9 所示。

12.1.2 AP 层的属性

“左” /“上”：设置 AP 层相对于页面或父 AP 层的左上角的位置。“宽” /“高”： AP 元素的宽度和高度。“Z轴”：设置 AP 元素的层次属性值。（数值越大，该 AP 层离用户越近。）“可见性”：控制 AP 元素的动态显示和隐藏。 4 个值：

default （默认）：不指明 AP 元素可见性。大多数浏览器会继承 AP 元素的父级 AP 元素的可见性。inherit （继承）：继承其父级 AP 层的可见性。visible （显示）：显示 AP 元素及其内部的内容。hidden （隐藏）：隐藏 AP 元素及其内部的内容。

12.1.2 AP 层的属性

“溢出”：设置当 AP 元素内部的内容超出 AP 元素的尺寸时如何处理。 4 个值：visible （显示）： AP 层的内容超出 AP 层的范围时 ,自动增加 AP 层的尺寸。hidden （隐藏）： AP 层的内容超出 AP 层的范围时 ,保持 AP 层原有的尺寸，隐藏超出部分内容。scroll （滚动）： AP 层的内容无论是否超出层的范围，都添加滚动条。auto（自动）： AP 层的内容超出 AP 层的范围时，自动添加滚动条；若没超出范围则不添加滚动条。（默认）

“剪辑”：“左”、“右”、“上”、“下”文本框中，分别设置 AP 层的可视区域与层的左、右、上、下边界之间的距离的像素值。

12.2 AP 层的基本操作 上一节学习了 AP 层的创建及其属性，这一节我

们为大家介绍一下 AP 层的基本操作，包括 AP 层的激活与选择，插入内容，调整 AP 层的位置、大小、层叠顺序、可见性、背景、对齐方式等。

12.2.1 AP 层的激活与选择 若要对层进行操作与编辑，首先得激活或选择 A

P 层。激活 AP 层是为了编辑 AP 层内的内容，而选择 AP 层是为了对 AP 层的属性进行操作。

1．激活 AP 层即插入光标 （光标只能插入到没有嵌套层的 AP 层中）

2．选择 AP 层 （选中多个 AP 层用 shift 键）

12.2.2 在 AP 层内插入内容

激活 AP 层之后，就可以在 AP 层内输入或从其他文件中复制粘贴相应文本内容，也可单击“插入”工具栏“常用”类别中的各种按钮，插入表格、图像、媒体、脚本等内容。

12.2.3 调整 AP 层的位置 很多情况下 AP 层的创建位置不是期望的位置，这时可

以通过以下操作，精确调整 AP 层的位置。

方法 1 ：选中一个 AP 层，光标移动到 AP 层的边框，变成十字箭头时拖动鼠标进行移动。

方法 2 ：选中该 AP 元素，在“属性”面板中修改“左”、“上”两个文本框

方法 3 ：选中该 AP 元素，按键盘上的上下左右方向键，每次只移动一个像素。

12.2.4 调整 AP 层的大小 与 AP 层的位置一样， AP 层的大小有时也不理想，就要

对其进行精确调整，调整步骤如下：

方法 1 ：选中一个 AP 层，光标放到控制节点上，变成双向箭头时进行拖动。

方法 2 ：选中该 AP 元素，在“属性”面板中修改“宽”、“高”两个文本框

12.2.5 改变 AP 层的层叠顺序 使用“ AP 元素”面板或使用“属性

检查器”都改变 AP 层的层叠顺序。具体操作步骤如下：

方法 1 ：在“ AP 元素”面板的第 3栏（ Z ）中修改。

方法 2 ：选中该 AP 元素，在“属性”面板中修改“ Z轴”文本框

12.2.6 改变 AP 层的可见性 AP 层可见性的改变也可通过 “ AP 元素”面板与“属性”面板来实现。 （ 1 ）单击“窗口” |“AP 元素”打开“ AP 元素”面板，如图 12.25所示。 （ 2 ）用鼠标单击要更改 AP 层名称前面的眼睛图标即可改变 AP 层的可见

性。闭上的眼睛图标表示 AP 层被隐藏，处于不可见状态；睁开的眼睛图标表示 AP 层被显示，处于可见状态；没有眼睛图标表示该 AP 层继承其父 AP层（即被嵌套 AP 层）的可见性属性。

注意：若想统一更改所有 AP 层的可见性，可用鼠标单击列顶端的眼睛图标。 （ 3 ）在“属性”面板中更改。选中要设置可见性的 AP 层，在“属性”面

板中“可见性”下拉列表框中选择相应可见性选项即可，如图 12.26所示。

12.2.7 设置 AP 层的背景 设置 AP 层的背景包括添加背景颜色和

插入背景图片。 方法：选中该 AP 层后，利用“属性”

面板

12.2.8 对齐 AP 层 当有多个 AP层时，可以对它们进行对齐操作，包括左对齐、右对齐、上对齐与对齐下缘，以最后一个选定 AP层的边框位置为标准对齐。具体操作步骤如下：

（ 1 ）选中创建好的多个 AP 层，如图 12.32 所示。最右端的 AP层为最后选中的 AP 层。

（ 2 ）单击“修改” |“排列顺序” |“ 对齐下缘”命令菜单，将所有选中的 AP 层以最后选中的 AP 层的下边框为标准对齐，效果如图12.33 所示。其他对齐操作与其类似，就不再重复讲解。

12.2.9 AP 层与表格间的转换 在 Dreamweaver CS4 中，可以实现 AP 层与表格之间

的相互转换。具体操作步骤如下：

方法：

菜单“修改” |“转换” |“ 将表格转换为 AP Div”

菜单“修改” |“转换” |“ 将 AP Div转换为表格”

实训 1 AP 元素基本应用 新建 html 文档，利用素材中的图片、娃哈哈 .txt ，结合

AP 元素、表格（用于文章的布局）、 CSS 的基础知识等完成以下网页（如下图所示）。

要求：设置 AP 层分别距离浏览器左边缘 500px 和距离上边缘 85px 。AP 层宽高分别为 300px 和 320px 。背景颜色为粉红。在 AP 层中插入一个 1行 1 列的表格，使其居中。在表格中插入 txt 文件中的内容，并设置其格式。使 AP 层出现滚动条。

实训 2 用 AP 元素制作购物袋 利用素材中的 10-5.htm 文件及 images 文件夹中的图片，制作如下

图所示的购物袋，通过添加行为和调整相应 AP 层的 Z 轴层次，做出使用鼠标拖动货物使各种货物能够放置到购物篮中的效果。

实训 3 使用 AP 元素制作下拉菜单 素材中的 mainframeset.html 是一个框架集文件，里面

包含上下两个框架（ topframe(07_1.html) 、 mainframe(main.html))

要求：1) 使用 AP 层在 07_1.html 文件上制作如右图所示的下拉菜单 ;2 ）主框架 (mainframe) 中默认显示 main.html 文件；3) 光标移动到栏目上时显示栏目对应的下拉菜单，光标移开栏目时隐藏对应的下拉菜单，光标能够从栏目上移动到下拉菜单上以对菜单项进行点击；4)点击“移民政策”下拉菜单第 1 项——“最新动态”时，在主框架 (mainframe) 中打开 zxdt.html 文件；5 ）点击“移民政策”下拉菜单第 2 项——“技术移民”时，在主框架 (mainframe) 中打开main.html 文件；6 ）其余下拉菜单各项均设置为空链接。