1、1,2018/5/8,第7章 AP元素的使用,了解AP元素和AP Div的概念。掌握AP元素的使用方法。掌握创建和编辑APDiv的基本方法。,学习目标:,2,2018/5/8,7.1AP元素概述,1.AP元素,Dreamweaver 中，AP 元素通常是指具有绝对定位的 div 标签，习惯称AP Div（它是 Dreamweaver 默认插入的 AP 元素类型）。但是请记住，我们可以将任何 HTML 元素（例如，一个图像或一个表格）作为 AP 元素进行分类，方法是为其分配一个绝对位置。所有 AP 元素（不仅仅是绝对定位的 div 标签）都将在“AP 元素”面板中显示。 通过 Dreamweav
2、er，您可以使用 AP 元素来设计页面的布局。您可以将 AP 元素放置到其它 AP 元素的前后，隐藏某些 AP 元素而显示其它 AP 元素，以及在屏幕上移动 AP 元素。您可以在一个 AP 元素中放置背景图像，然后在该 AP 元素的前面放置另一个包含带有透明背景的文本的 AP 元素。,3,2018/5/8,AP Div主要有以下几方面的功能： AP Div是绝对定位的，游离在文档之上，利用它可以浮动定位网页元素。 AP Div的Z轴属性可以使多个AP Div进行重叠，产生多重叠加的效果。 AP Div的显示和隐藏可以控制，从而使网页的内容变得更加丰富多彩。,4,2018/5/8,7.1AP元素
3、概述,2.AP元素面板, 层的属性包括名称（）、位置、大小、 轴、可见性、背景、类、溢出、剪辑等基本属性，如图所示,5,2018/5/8,7.2AP Div的创建及属性设置,1.创建AP Div 插入Div标签,div 标签是用来定义 Web 页面的内容中的逻辑区域的标签。通过菜单“插入” “布局对象” “Div标签”命令，插入Div标签。,6,2018/5/8,直接创建AP层 除了利用上述的向导方式插入AP Div外，我们还可以直接创建AP Div，目前主要有以下几种方式：在Dreamweaver右侧的“插入”面板的“布局”类别中，选中“绘制 AP Div”并拖动至文档以绘制一个 AP Di
4、v。 在“插入”菜单中选择“布局对象”，单击“AP Div”，即绘制一个 AP Div。在Dreamweaver右侧的“插入”面板的“布局”类别中，选中“绘制 AP Div”，将鼠标移动至文档中时，鼠标指针会变成一个“+”图标，此时可以利用鼠标绘制一个自定义大小的AP Div。,7,2018/5/8,创建嵌套AP层,方法一，直接在已经创建的AP层内再创建一个层，创建的步骤如下： 在“插入”面板的“布局”类别中，单击“绘制 AP Div”按钮 。 在“文档”窗口的“设计”视图中，拖动以在现有 AP Div 的内部绘制 AP Div。,方法二，利用“AP元素”面板来建立嵌套关系。在编辑窗口随意创建
5、两个或多个层。以图所示的效果为例，假设apDiv5和apDiv2开始不具有嵌套关系，我们只需要在AP元素面板中单击选取层apDiv5，按住Ctrl键并拖动鼠标至层apDiv2，即可实现apDiv5嵌套于apDiv2，apDiv5成为子层，而apDiv2成为母层。,8,2018/5/8,2.AP层的属性设置,常见“属性”，设置方法如下：1CSS-P 元素：为选定的 AP 元素指定一个 ID。此 ID 用于在“AP 元素”面板和 JavaScript 代码中标识 AP 元素。只应使用标准的字母数字字符，而不要使用空格、连字符、斜杠或句号等特殊字符。每个 AP 元素都必须有各自的唯一 ID。2左和上
6、：指定 AP 元素的左上角相对于页面（如果嵌套，则为父 AP 元素）左上角的位置，从而实现层内元素在网页中的精确定位。3宽和高：指定 AP 元素的宽度和高度。4Z 轴：确定 AP 元素的 Z 轴或堆叠顺序。5可见性：指定 AP 元素最初是否是可见的。从以下选项中选择：“default”不指定可见性属性。当未指定可见性时，大多数浏览器都会默认为“继承”。“继承”将使用 AP 元素的父级的可见性属性。 “可见”将显示 AP 元素的内容，而与父级的值无关。“隐藏”将隐藏 AP 元素的内容，而与父级的值无关。 6背景图像：指定 AP 元素的背景图像。 7背景颜色：指定 AP 元素的背景颜色。 8类：指
7、定用于设置 AP 元素的样式的 CSS 类。,9,2018/5/8,7.3AP Div的基本操作,AP层的选择,通过以下方式选择AP层：单击 AP 元素的选择柄。 单击 AP 元素的边框。 按住 Ctrl-Shift (Windows) 或 Command-Shift (Macintosh) 在 AP 元素内部单击。在 AP 元素内部单击并在标签选择器中选择其标签。通过“AP 元素”面板选择AP元素。,10,2018/5/8,2.在AP层内插入内容,选择AP层之后，就可以在AP层内输入或从其他文件中复制粘贴相应文本内容，也可单击“插入”工具栏“常用”类别中的各种按钮，插入图像、媒体、脚本等内容
8、,11,2018/5/8,3.调整AP层的位置,方法一：通过选择AP层，拖动其到适当位置，改变前apDiv1和apDiv2的位置。方法二：使用“属性”面板对AP层进行精确定位，选择目标层，在属性面板中的“左”栏及“上”栏输入层所在位置坐标。用这种方法可以迅速实现层的精确定位。方法三：选取目标层，按键盘上的方向键，可使选取层作1个像素的位移；按住Shift键按方向键，可使选取层作10个像素的位移。,12,2018/5/8,4.调整AP层的大小,通过选择AP层，通过拖曳使其大小得当，移动鼠标指针到层的边框变形点，当鼠标指针变为双箭头形状时，按住鼠标左键拖动调整即可，调整结束后释放鼠标。如图7-12
9、所示。使用”属性”面板对AP层进行大小的精确调整，在宽和高栏中直接输入层的宽和高的值。,13,2018/5/8,5.改变AP层的层叠顺序,使用 AP 元素面板更改 AP 元素的堆叠顺序选择“窗口” “AP 元素”打开“AP 元素”面板。 将 AP 元素向上或向下拖至所需的堆叠顺序。 使用属性检查器更改 AP 元素的堆叠顺序 在“AP 元素”面板或“文档”窗口中选择 AP 元素。 在“属性”面板（“窗口” “属性”）中，在“Z 轴”文本框中键入一个数字。 键入一个较大的数字可将 AP 元素在堆叠顺序中上移。键入一个较小的数字可将 AP 元素在堆叠顺序中下移。在“AP 元素”面板中，单击相应层的Z
10、列数值，输入新的数字。,14,2018/5/8,AP层可见性的改变也可通过 “AP元素”面板与”属性”面板来实现。通过“窗口” “AP元素”命令，打开“AP元素”面板，如图7-15所示。用鼠标单击要更改AP层名称前面的眼睛图标即可改变AP层的可见性。闭上的眼睛图标表示AP层被隐藏，处于不可见状态；睁开的眼睛图标表示AP层被显示，处于可见状态；没有眼睛图标表示该AP层继承其父AP层（即被嵌套AP层）的可见性属性。在”属性”面板中更改。选中要设置可见性的AP层，在”属性”面板中“可见性”下拉列表框中选择相应可见性选项即可，如图,6.改变AP层的可见性,15,2018/5/8,选中创建好的多个AP层
11、，如图7-178所示。最左端的AP层为最后选中的AP层。单击“修改” “排列顺序” “对齐下缘”命令菜单，将所有选中的AP层以最后选中的AP层的下边框为标准对齐,7.对齐AP层,16,2018/5/8,将 AP 元素转换为表格选择“修改” “转换” “将 AP Div 转换为表格”。 转换即可完成，各个选项的含义如下： （1）最精确：为每个 AP 元素创建一个单元格以及保留 AP 元素之间的空间所必需的任何附加单元格。（2）最小:折叠空白单元格 指定若 AP 元素位于指定的像素数内则应对齐 AP 元素的边缘。 （3）使用透明 GIFs：使用透明的 GIF 填充表格的最后一行。这将确保该表在所有
12、浏览器中以相同的列宽显示。（4）置于页面中央：将结果表放置在页面的中央。如果禁用此选项，表将在页面的左边缘开始。,8.AP层与表格间的转换,17,2018/5/8,8.AP层与表格间的转换,将表格转换为 AP Div选择“修改” “转换” “将表格转换为 AP Div”。 如图7-20所示，指定任一选项，然后单击“确定”，即完成转换过程。各个选项的含义如下： （1）防止重叠：在创建、移动和调整 AP 元素大小时约束 AP 元素的位置，使 AP 元素不会重叠。（2）显示 AP 元素面板：显示“AP 元素”面板。（3）显示网格和靠齐到网格：可让您使用网格来帮助定位 AP 元素。,18,2018/5/8,本章小结,介绍了AP Div的基本操作，其内容对丰富网页的效果起着举足轻重的作用，需要读者重点学习和理解。希望通过本章的学习，读者可以做到举一反三，逐渐掌握Dreamwaver的各种高级操作。 在Dreamweaver CS4以前的版本中，对于AP层的操作还包括层可见区域设置、时间轴动画等操作。在Dreamweaver CS4考虑到网页技术的发展，已将这些功能去掉，只能对以前生成的页面进行编辑。如果读者有这方面的需求，也可以利用早期版本完成需要的效果。,
