Download
1 / 20
200 likes | 367 Views
第 12 章 AP Div. 对于有 Dreamweaver 基础的读者来说，初识 APDiv 或许会感到即熟悉又陌生。熟悉于它的 Div 标识符，陌生于它在 CS3 版本中的含义及作用。其实， AP Div 在 Dreamweaver CS4 中仍等同于前期版本的层，又称为 AP 元素 或 CSS-P 元素 ，本文以下简称 AP 层 。
E N D
第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 Div”后，无法在AP Div中绘制嵌套AP Div，那就取消“AP元素”上的“防止重叠”前的选择 • 创建嵌套AP层。 方法： 在“AP元素”面板中选择一个AP元素，按住Ctrl键拖动，将此AP元素拖到面板中的目标AP元素位置，使该AP元素成为目标AP元素的嵌套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层的激活与选择 • 若要对层进行操作与编辑，首先得激活或选择AP层。激活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）其余下拉菜单各项均设置为空链接。
