第7章 AP元素的使用1

1、第第1篇篇 网页设计与制作基础网页设计与制作基础12022-2-7第第7章章 AP元素的使用元素的使用 学习目标学习目标:第第1篇篇 网页设计与制作基础网页设计与制作基础22022-2-77.1AP元素概述元素概述 Dreamweaver 中，中，AP 元素通常是指具有绝对定位的元素通常是指具有绝对定位的 div 标签，习惯称标签，习惯称AP Div（它是（它是 Dreamweaver 默认插入的默认插入的 AP 元素类型）。但是请记住，我们可以将元素类型）。但是请记住，我们可以将任何任何 HTML 元素（例如，一个图像或一个表格）作为元素（例如，一个图像或一个表格）作为 AP 元素进行分类，

2、方法是元素进行分类，方法是为其分配一个绝对位置。所有为其分配一个绝对位置。所有 AP 元素（不仅仅是绝对定位的元素（不仅仅是绝对定位的 div 标签）都将在标签）都将在“AP 元素元素”面板中显示。面板中显示。 通过通过 Dreamweaver，您可以使用，您可以使用 AP 元素来设计页面的布局。您可以将元素来设计页面的布局。您可以将 AP 元素放置到其它元素放置到其它 AP 元素的前后，隐藏某些元素的前后，隐藏某些 AP 元素而显示其它元素而显示其它 AP 元素，以及元素，以及在屏幕上移动在屏幕上移动 AP 元素。您可以在一个元素。您可以在一个 AP 元素中放置背景图像，然后在该元素中放置背

3、景图像，然后在该 AP 元素的前面放置另一个包含带有透明背景的文本的元素的前面放置另一个包含带有透明背景的文本的 AP 元素。元素。第第1篇篇 网页设计与制作基础网页设计与制作基础32022-2-7AP Div主要有以下几方面的功能： AP Div是绝对定位的，游离在文档之上，利用它可以浮动定位网页元素。 AP Div的Z轴属性可以使多个AP Div进行重叠，产生多重叠加的效果。 AP Div的显示和隐藏可以控制，从而使网页的内容变得更加丰富多彩。第第1篇篇 网页设计与制作基础网页设计与制作基础42022-2-77.1AP元素概述元素概述 层的属性包括名称（）、位置、大小、层的属性包括名称（）

4、、位置、大小、 轴、可见性、轴、可见性、背景、类、溢出、剪辑等基本属性，如图所示背景、类、溢出、剪辑等基本属性，如图所示第第1篇篇 网页设计与制作基础网页设计与制作基础52022-2-77.2AP Div的创建及属性设置的创建及属性设置 div 标签是用来定义标签是用来定义 Web 页面的内容中的逻辑区域的标签。通过菜页面的内容中的逻辑区域的标签。通过菜单单“插入插入” “布局对象布局对象” “Div标签标签”命令，插入命令，插入Div标签。标签。第第1篇篇 网页设计与制作基础网页设计与制作基础62022-2-7 除了利用上述的向导方式插入AP Div外，我们还可以直接创建AP Div，目前主

5、要有以下几种方式：在Dreamweaver右侧的“插入”面板的“布局”类别中，选中“绘制 AP Div”并拖动至文档以绘制一个 AP Div。 在“插入”菜单中选择“布局对象”，单击“AP Div”，即绘制一个 AP Div。在Dreamweaver右侧的“插入”面板的“布局”类别中，选中“绘制 AP Div”，将鼠标移动至文档中时，鼠标指针会变成一个“+”图标，此时可以利用鼠标绘制一个自定义大小的AP Div。第第1篇篇 网页设计与制作基础网页设计与制作基础72022-2-7创建嵌套创建嵌套AP层层方法一，直接在已经创建的AP层内再创建一个层，创建的步骤如下： 在“插入”面板的“布局”类别中

6、，单击“绘制 AP Div”按钮 。 在“文档”窗口的“设计”视图中，拖动以在现有 AP Div 的内部绘制 AP Div。 方法二，利用“AP元素”面板来建立嵌套关系。在编辑窗口随意创建两个或多个层。以图所示的效果为例，假设apDiv5和apDiv2开始不具有嵌套关系，我们只需要在AP元素面板中单击选取层apDiv5，按住Ctrl键并拖动鼠标至层apDiv2，即可实现apDiv5嵌套于apDiv2，apDiv5成为子层，而apDiv2成为母层。第第1篇篇 网页设计与制作基础网页设计与制作基础82022-2-72.AP层的属性设置层的属性设置常见“属性”，设置方法如下：1CSS-P 元素：为选

7、定的 AP 元素指定一个 ID。此 ID 用于在“AP 元素”面板和 JavaScript 代码中标识 AP 元素。只应使用标准的字母数字字符，而不要使用空格、连字符、斜杠或句号等特殊字符。每个 AP 元素都必须有各自的唯一 ID。2左和上：指定 AP 元素的左上角相对于页面（如果嵌套，则为父 AP 元素）左上角的位置，从而实现层内元素在网页中的精确定位。3宽和高：指定 AP 元素的宽度和高度。4Z 轴：确定 AP 元素的 Z 轴或堆叠顺序。5可见性：指定 AP 元素最初是否是可见的。从以下选项中选择：“default”不指定可见性属性。当未指定可见性时，大多数浏览器都会默认为“继承”。“继承

8、”将使用 AP 元素的父级的可见性属性。 “可见”将显示 AP 元素的内容，而与父级的值无关。“隐藏”将隐藏 AP 元素的内容，而与父级的值无关。 6背景图像：指定 AP 元素的背景图像。 7背景颜色：指定 AP 元素的背景颜色。 8类：指定用于设置 AP 元素的样式的 CSS 类。 第第1篇篇 网页设计与制作基础网页设计与制作基础92022-2-77.3AP Div的基本操作的基本操作 通过以下方式选择通过以下方式选择AP层：层：单击单击 AP 元素的选择柄。元素的选择柄。 单击单击 AP 元素的边框。元素的边框。 按住按住 Ctrl-Shift (Windows) 或或 Command-S

9、hift (Macintosh) 在在 AP 元素内部单击。元素内部单击。在在 AP 元素内部单击并在标签选择器中选择其标签。元素内部单击并在标签选择器中选择其标签。通过通过“AP 元素元素”面板选择面板选择AP元素。元素。第第1篇篇 网页设计与制作基础网页设计与制作基础102022-2-72.在在AP层内插入内容层内插入内容选择选择AP层之后，就可以在层之后，就可以在AP层内输入或从其他文件中复制粘贴相应层内输入或从其他文件中复制粘贴相应文本内容，也可单击文本内容，也可单击“插入插入”工具栏工具栏“常用常用”类别中的各种按钮，插类别中的各种按钮，插入图像、媒体、脚本等内容入图像、媒体、脚本等

10、内容第第1篇篇 网页设计与制作基础网页设计与制作基础112022-2-73.调整调整AP层的位置层的位置方法一：通过选择方法一：通过选择AP层，拖动其到适当位置，改变前层，拖动其到适当位置，改变前apDiv1和和apDiv2的位置。的位置。方法二：使用方法二：使用“属性属性”面板对面板对AP层进行精确定位，选择目标层，在层进行精确定位，选择目标层，在属性面板中的属性面板中的“左左”栏及栏及“上上”栏输入层所在位置坐标。用这种方法可以栏输入层所在位置坐标。用这种方法可以迅速实现层的精确定位。迅速实现层的精确定位。方法三：选取目标层，按键盘上的方向键，可使选取层作方法三：选取目标层，按键盘上的方向

11、键，可使选取层作1个像素的个像素的位移；按住位移；按住Shift键按方向键，可使选取层作键按方向键，可使选取层作10个像素的位移。个像素的位移。第第1篇篇 网页设计与制作基础网页设计与制作基础122022-2-74.调整调整AP层的大小层的大小通过选择通过选择AP层，通过拖曳使其大小得当，移动鼠标指针到层的边框变形层，通过拖曳使其大小得当，移动鼠标指针到层的边框变形点，当鼠标指针变为双箭头形状时，按住鼠标左键拖动调整即可，调整结点，当鼠标指针变为双箭头形状时，按住鼠标左键拖动调整即可，调整结束后释放鼠标。如图束后释放鼠标。如图7-12所示。所示。使用使用”属性属性”面板对面板对AP层进行大小的

12、精确调整，在宽和高栏中直接输入层进行大小的精确调整，在宽和高栏中直接输入层的宽和高的值。层的宽和高的值。第第1篇篇 网页设计与制作基础网页设计与制作基础132022-2-75.改变改变AP层的层叠顺序层的层叠顺序使用使用 AP 元素面板更改元素面板更改 AP 元素的堆叠顺序元素的堆叠顺序选择选择“窗口窗口” “AP 元素元素”打开打开“AP 元素元素”面板。面板。 将将 AP 元素向上或向下拖元素向上或向下拖至所需的堆叠顺序。至所需的堆叠顺序。 使用属性检查器更改使用属性检查器更改 AP 元素的堆叠顺序元素的堆叠顺序 在在“AP 元素元素”面板或面板或“文档文档”窗口中选择窗口中选择 AP 元

13、素。元素。 在在“属性属性”面板（面板（“窗口窗口” “属性属性”）中，在）中，在“Z 轴轴”文本框中键入一个文本框中键入一个数字。数字。 键入一个较大的数字可将键入一个较大的数字可将 AP 元素在堆叠顺序中上移。键入一个较小的数元素在堆叠顺序中上移。键入一个较小的数字可将字可将 AP 元素在堆叠顺序中下移。元素在堆叠顺序中下移。在在“AP 元素元素”面板中，单击相应层的面板中，单击相应层的Z列数值，输入新的数字。列数值，输入新的数字。第第1篇篇 网页设计与制作基础网页设计与制作基础142022-2-7AP层可见性的改变也可通过层可见性的改变也可通过 “AP元素元素”面板与面板与”属性属性”面

14、板来实现。面板来实现。l通过通过“窗口窗口” “AP元素元素”命令，打开命令，打开“AP元素元素”面板，如图面板，如图7-15所示。用鼠所示。用鼠标单击要更改标单击要更改AP层名称前面的眼睛图标即可改变层名称前面的眼睛图标即可改变AP层的可见性。闭上的眼睛图标表层的可见性。闭上的眼睛图标表示示AP层被隐藏，处于不可见状态；睁开的眼睛图标表示层被隐藏，处于不可见状态；睁开的眼睛图标表示AP层被显示，处于可见状态；层被显示，处于可见状态；没有眼睛图标表示该没有眼睛图标表示该AP层继承其父层继承其父AP层（即被嵌套层（即被嵌套AP层）的可见性属性。层）的可见性属性。l在在”属性属性”面板中更改。选中

15、要设置可见性的面板中更改。选中要设置可见性的AP层，在层，在”属性属性”面板中面板中“可见可见性性”下拉列表框中选择相应可见性选项即可，如图下拉列表框中选择相应可见性选项即可，如图6.改变改变AP层的可见性层的可见性第第1篇篇 网页设计与制作基础网页设计与制作基础152022-2-7l选中创建好的多个选中创建好的多个AP层，如图层，如图7-178所示。最左端的所示。最左端的AP层为最层为最后选中的后选中的AP层。层。l单击单击“修改修改” “排列顺序排列顺序” “对齐下缘对齐下缘”命令菜单，将所命令菜单，将所有选中的有选中的AP层以最后选中的层以最后选中的AP层的下边框为标准对齐层的下边框为标

16、准对齐7.对齐对齐AP层层第第1篇篇 网页设计与制作基础网页设计与制作基础162022-2-7l将将 AP 元素转换为表格元素转换为表格选择选择“修改修改” “转换转换” “将将 AP Div 转换为表转换为表格格”。 转换即可完成，各个选项的含义如下：转换即可完成，各个选项的含义如下： （1）最精确：为每个）最精确：为每个 AP 元素创建一个单元格以及保元素创建一个单元格以及保留留 AP 元素之间的空间所必需的任何附加单元格。元素之间的空间所必需的任何附加单元格。（2）最小）最小:折叠空白单元格折叠空白单元格 指定若指定若 AP 元素位于指定元素位于指定的像素数内则应对齐的像素数内则应对齐

17、AP 元素的边缘。元素的边缘。 （3）使用透明）使用透明 GIFs：使用透明的：使用透明的 GIF 填充表格的最填充表格的最后一行。这将确保该表在所有浏览器中以相同的列宽显示。后一行。这将确保该表在所有浏览器中以相同的列宽显示。（4）置于页面中央：将结果表放置在页面的中央。如）置于页面中央：将结果表放置在页面的中央。如果禁用此选项，表将在页面的左边缘开始。果禁用此选项，表将在页面的左边缘开始。 8.AP层与表格间的转换层与表格间的转换第第1篇篇 网页设计与制作基础网页设计与制作基础172022-2-78.AP层与表格间的转换层与表格间的转换l将表格转换为将表格转换为 AP Div选择选择“修改修改” “转换转换” “将表格转换为将表格转换为 AP Div”。 如图如图7-20所示，指定任一选项，然后单击所示，指定任一选项，然后单击“