第 12 章 ap div
DESCRIPTION
第 12 章 AP Div. 对于有 Dreamweaver 基础的读者来说,初识 APDiv 或许会感到即熟悉又陌生。熟悉于它的 Div 标识符,陌生于它在 CS3 版本中的含义及作用。其实, AP Div 在 Dreamweaver CS4 中仍等同于前期版本的层,又称为 AP 元素 或 CSS-P 元素 ,本文以下简称 AP 层 。 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: 第 12 章 AP Div](https://reader036.vdocuments.site/reader036/viewer/2022081418/56812ad3550346895d8eb37f/html5/thumbnails/1.jpg)
第 12 章 AP Div 对于有 Dreamweaver 基础的读者来说,初识 APDiv 或许
会感到即熟悉又陌生。熟悉于它的 Div 标识符,陌生于它在CS3 版本中的含义及作用。其实, AP Div 在 Dreamweaver CS4 中仍等同于前期版本的层,又称为 AP 元素或 CSS-P 元素,本文以下简称 AP 层。
然而对于初学者来说又会产生这样的疑问:什么是层?有什么作用?前面我们学习过了表格,知道了表格可以作为页面布局的容器。 AP 层也是作为网页布局的容器, AP 层内可以包含文本、图形图像、动画、音频、视频、表格等一切可以放置到 HTML 中的元素,甚至可以在 AP 层内放置 AP 层。本章我们就为大家详细的介绍一下 AP 层的相关内容。
![Page 2: 第 12 章 AP Div](https://reader036.vdocuments.site/reader036/viewer/2022081418/56812ad3550346895d8eb37f/html5/thumbnails/2.jpg)
12.1 AP 层的创建与属性
12.1.1 创建 AP 层12.1.2 AP 层的属性
![Page 3: 第 12 章 AP Div](https://reader036.vdocuments.site/reader036/viewer/2022081418/56812ad3550346895d8eb37f/html5/thumbnails/3.jpg)
12.1.1 创建 AP 层 创建普通 AP 层 方法 1 :“插入”面板 |“ 布局”选项组 |“ 绘制 AP Div” ,光
标变成十字光标时,按下鼠标左键拖动绘制出 AP Div 。 方法 2 :菜单“插入” |“ 布局对象” |“AP Div” 命令
![Page 4: 第 12 章 AP Div](https://reader036.vdocuments.site/reader036/viewer/2022081418/56812ad3550346895d8eb37f/html5/thumbnails/4.jpg)
12.1.1 创建 AP 层 创建嵌套 AP 层。
方法:
在“ AP 元素”面板中选择一个 AP元素,按住 Ctrl 键拖动,将此 AP 元素拖到面板中的目标 AP 元素位置,使该 AP元素成为目标 AP 元素的嵌套 AP 层。
如果单击“绘制AP Div” 后,无法在AP Div 中绘制嵌套 AP Div ,那就取消“ AP 元素”上的“防止重叠”前的选择
![Page 5: 第 12 章 AP Div](https://reader036.vdocuments.site/reader036/viewer/2022081418/56812ad3550346895d8eb37f/html5/thumbnails/5.jpg)
12.1.2 AP 层的属性 利用“属性检查器”对 AP 层属性进行设置,可
以调整创建好的 AP 层,达到预期的网页布局效果。 AP 层的属性包括 ID 、位置、大小、 Z 轴、可见性、背景、类、溢出、剪辑等基本属性,如图 12.9 所示。
![Page 6: 第 12 章 AP Div](https://reader036.vdocuments.site/reader036/viewer/2022081418/56812ad3550346895d8eb37f/html5/thumbnails/6.jpg)
12.1.2 AP 层的属性
“左” /“上”:设置 AP 层相对于页面或父 AP 层的左上角的位置。“宽” /“高”: AP 元素的宽度和高度。“Z轴”:设置 AP 元素的层次属性值。(数值越大,该 AP 层离用户越近。)“可见性”:控制 AP 元素的动态显示和隐藏。 4 个值:
default (默认):不指明 AP 元素可见性。大多数浏览器会继承 AP 元素的父级 AP 元素的可见性。inherit (继承):继承其父级 AP 层的可见性。visible (显示):显示 AP 元素及其内部的内容。hidden (隐藏):隐藏 AP 元素及其内部的内容。
![Page 7: 第 12 章 AP Div](https://reader036.vdocuments.site/reader036/viewer/2022081418/56812ad3550346895d8eb37f/html5/thumbnails/7.jpg)
12.1.2 AP 层的属性
“溢出”:设置当 AP 元素内部的内容超出 AP 元素的尺寸时如何处理。 4 个值:visible (显示): AP 层的内容超出 AP 层的范围时 ,自动增加 AP 层的尺寸。hidden (隐藏): AP 层的内容超出 AP 层的范围时 ,保持 AP 层原有的尺寸,隐藏超出部分内容。scroll (滚动): AP 层的内容无论是否超出层的范围,都添加滚动条。auto(自动): AP 层的内容超出 AP 层的范围时,自动添加滚动条;若没超出范围则不添加滚动条。(默认)
“剪辑”:“左”、“右”、“上”、“下”文本框中,分别设置 AP 层的可视区域与层的左、右、上、下边界之间的距离的像素值。
![Page 8: 第 12 章 AP Div](https://reader036.vdocuments.site/reader036/viewer/2022081418/56812ad3550346895d8eb37f/html5/thumbnails/8.jpg)
12.2 AP 层的基本操作 上一节学习了 AP 层的创建及其属性,这一节我
们为大家介绍一下 AP 层的基本操作,包括 AP 层的激活与选择,插入内容,调整 AP 层的位置、大小、层叠顺序、可见性、背景、对齐方式等。
![Page 9: 第 12 章 AP Div](https://reader036.vdocuments.site/reader036/viewer/2022081418/56812ad3550346895d8eb37f/html5/thumbnails/9.jpg)
12.2.1 AP 层的激活与选择 若要对层进行操作与编辑,首先得激活或选择 A
P 层。激活 AP 层是为了编辑 AP 层内的内容,而选择 AP 层是为了对 AP 层的属性进行操作。
1.激活 AP 层即插入光标 (光标只能插入到没有嵌套层的 AP 层中)
2.选择 AP 层 (选中多个 AP 层用 shift 键)
![Page 10: 第 12 章 AP Div](https://reader036.vdocuments.site/reader036/viewer/2022081418/56812ad3550346895d8eb37f/html5/thumbnails/10.jpg)
12.2.2 在 AP 层内插入内容
激活 AP 层之后,就可以在 AP 层内输入或从其他文件中复制粘贴相应文本内容,也可单击“插入”工具栏“常用”类别中的各种按钮,插入表格、图像、媒体、脚本等内容。
![Page 11: 第 12 章 AP Div](https://reader036.vdocuments.site/reader036/viewer/2022081418/56812ad3550346895d8eb37f/html5/thumbnails/11.jpg)
12.2.3 调整 AP 层的位置 很多情况下 AP 层的创建位置不是期望的位置,这时可
以通过以下操作,精确调整 AP 层的位置。
方法 1 :选中一个 AP 层,光标移动到 AP 层的边框,变成十字箭头时拖动鼠标进行移动。
方法 2 :选中该 AP 元素,在“属性”面板中修改“左”、“上”两个文本框
方法 3 :选中该 AP 元素,按键盘上的上下左右方向键,每次只移动一个像素。
![Page 12: 第 12 章 AP Div](https://reader036.vdocuments.site/reader036/viewer/2022081418/56812ad3550346895d8eb37f/html5/thumbnails/12.jpg)
12.2.4 调整 AP 层的大小 与 AP 层的位置一样, AP 层的大小有时也不理想,就要
对其进行精确调整,调整步骤如下:
方法 1 :选中一个 AP 层,光标放到控制节点上,变成双向箭头时进行拖动。
方法 2 :选中该 AP 元素,在“属性”面板中修改“宽”、“高”两个文本框
![Page 13: 第 12 章 AP Div](https://reader036.vdocuments.site/reader036/viewer/2022081418/56812ad3550346895d8eb37f/html5/thumbnails/13.jpg)
12.2.5 改变 AP 层的层叠顺序 使用“ AP 元素”面板或使用“属性
检查器”都改变 AP 层的层叠顺序。具体操作步骤如下:
方法 1 :在“ AP 元素”面板的第 3栏( Z )中修改。
方法 2 :选中该 AP 元素,在“属性”面板中修改“ Z轴”文本框
![Page 14: 第 12 章 AP Div](https://reader036.vdocuments.site/reader036/viewer/2022081418/56812ad3550346895d8eb37f/html5/thumbnails/14.jpg)
12.2.6 改变 AP 层的可见性 AP 层可见性的改变也可通过 “ AP 元素”面板与“属性”面板来实现。 ( 1 )单击“窗口” |“AP 元素”打开“ AP 元素”面板,如图 12.25所示。 ( 2 )用鼠标单击要更改 AP 层名称前面的眼睛图标即可改变 AP 层的可见
性。闭上的眼睛图标表示 AP 层被隐藏,处于不可见状态;睁开的眼睛图标表示 AP 层被显示,处于可见状态;没有眼睛图标表示该 AP 层继承其父 AP层(即被嵌套 AP 层)的可见性属性。
注意:若想统一更改所有 AP 层的可见性,可用鼠标单击列顶端的眼睛图标。 ( 3 )在“属性”面板中更改。选中要设置可见性的 AP 层,在“属性”面
板中“可见性”下拉列表框中选择相应可见性选项即可,如图 12.26所示。
![Page 15: 第 12 章 AP Div](https://reader036.vdocuments.site/reader036/viewer/2022081418/56812ad3550346895d8eb37f/html5/thumbnails/15.jpg)
12.2.7 设置 AP 层的背景 设置 AP 层的背景包括添加背景颜色和
插入背景图片。 方法:选中该 AP 层后,利用“属性”
面板
![Page 16: 第 12 章 AP Div](https://reader036.vdocuments.site/reader036/viewer/2022081418/56812ad3550346895d8eb37f/html5/thumbnails/16.jpg)
12.2.8 对齐 AP 层 当有多个 AP层时,可以对它们进行对齐操作,包括左对齐、右对齐、上对齐与对齐下缘,以最后一个选定 AP层的边框位置为标准对齐。具体操作步骤如下:
( 1 )选中创建好的多个 AP 层,如图 12.32 所示。最右端的 AP层为最后选中的 AP 层。
( 2 )单击“修改” |“排列顺序” |“ 对齐下缘”命令菜单,将所有选中的 AP 层以最后选中的 AP 层的下边框为标准对齐,效果如图12.33 所示。其他对齐操作与其类似,就不再重复讲解。
![Page 17: 第 12 章 AP Div](https://reader036.vdocuments.site/reader036/viewer/2022081418/56812ad3550346895d8eb37f/html5/thumbnails/17.jpg)
12.2.9 AP 层与表格间的转换 在 Dreamweaver CS4 中,可以实现 AP 层与表格之间
的相互转换。具体操作步骤如下:
方法:
菜单“修改” |“转换” |“ 将表格转换为 AP Div”
菜单“修改” |“转换” |“ 将 AP Div转换为表格”
![Page 18: 第 12 章 AP Div](https://reader036.vdocuments.site/reader036/viewer/2022081418/56812ad3550346895d8eb37f/html5/thumbnails/18.jpg)
实训 1 AP 元素基本应用 新建 html 文档,利用素材中的图片、娃哈哈 .txt ,结合
AP 元素、表格(用于文章的布局)、 CSS 的基础知识等完成以下网页(如下图所示)。
要求:设置 AP 层分别距离浏览器左边缘 500px 和距离上边缘 85px 。AP 层宽高分别为 300px 和 320px 。背景颜色为粉红。在 AP 层中插入一个 1行 1 列的表格,使其居中。在表格中插入 txt 文件中的内容,并设置其格式。使 AP 层出现滚动条。
![Page 19: 第 12 章 AP Div](https://reader036.vdocuments.site/reader036/viewer/2022081418/56812ad3550346895d8eb37f/html5/thumbnails/19.jpg)
实训 2 用 AP 元素制作购物袋 利用素材中的 10-5.htm 文件及 images 文件夹中的图片,制作如下
图所示的购物袋,通过添加行为和调整相应 AP 层的 Z 轴层次,做出使用鼠标拖动货物使各种货物能够放置到购物篮中的效果。
![Page 20: 第 12 章 AP Div](https://reader036.vdocuments.site/reader036/viewer/2022081418/56812ad3550346895d8eb37f/html5/thumbnails/20.jpg)
实训 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 )其余下拉菜单各项均设置为空链接。