第 12 章 ap div

20
第 12 第 AP Div 第第第 Dreamweaver 第第第第第第第 第第 APDiv 第第第第第第第第第第第第第第第第 Div 第第第 第第第第第 CS3 第第第第第第第第第 第第第 。, AP Div 第 Dreamweaver CS4 第第第第第第第第第第第 第第第 AP 第第CSS- P 第第 第第第第第第 AP 第 第第第第第第第第第第第第第第第第第第 第第第第第 第第第第第第 第第第第第第第第第第第 :??, 第第第第第第第第第第第第第第第第AP 第第第第第第第第第第第第AP 第第第第第 第第第 第第第第第 第第第 第第第 第第第 第第第第 第第第第第第 、、、、、一 HTML 第第第第 第第第 第第 AP 第第第第 AP 第 第第第第第第第第第第第第第第 第 。一 AP 第第第第第第

Upload: wilma-bentley

Post on 30-Dec-2015

60 views

Category:

Documents


8 download

DESCRIPTION

第 12 章 AP Div. 对于有 Dreamweaver 基础的读者来说,初识 APDiv 或许会感到即熟悉又陌生。熟悉于它的 Div 标识符,陌生于它在 CS3 版本中的含义及作用。其实, AP Div 在 Dreamweaver CS4 中仍等同于前期版本的层,又称为 AP 元素 或 CSS-P 元素 ,本文以下简称 AP 层 。 - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: 第 12 章   AP Div

第 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

12.1 AP 层的创建与属性

12.1.1 创建 AP 层12.1.2 AP 层的属性

Page 3: 第 12 章   AP Div

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

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

Page 4: 第 12 章   AP Div

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

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

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

Page 6: 第 12 章   AP Div

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

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

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

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

Page 9: 第 12 章   AP Div

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

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

1.激活 AP 层即插入光标 (光标只能插入到没有嵌套层的 AP 层中)

2.选择 AP 层 (选中多个 AP 层用 shift 键)

Page 10: 第 12 章   AP Div

12.2.2 在 AP 层内插入内容

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

Page 11: 第 12 章   AP Div

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

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

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

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

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

Page 12: 第 12 章   AP Div

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

对其进行精确调整,调整步骤如下:

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

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

Page 13: 第 12 章   AP Div

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

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

方法 1 :在“ AP 元素”面板的第 3栏( Z )中修改。

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

Page 14: 第 12 章   AP Div

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

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

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

面板

Page 16: 第 12 章   AP Div

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

( 1 )选中创建好的多个 AP 层,如图 12.32 所示。最右端的 AP层为最后选中的 AP 层。

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

Page 17: 第 12 章   AP Div

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

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

方法:

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

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

Page 18: 第 12 章   AP Div

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

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

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

Page 19: 第 12 章   AP Div

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

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

Page 20: 第 12 章   AP Div

实训 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 )其余下拉菜单各项均设置为空链接。