已学过的知识,我们前面已经学习了使用
表格来进行网页中元素的布局，通过表格
实现网页中元素的布局。
问题,使用表格布局时，大家都发现一个这
样的问题：有些元素规格大小一致的用表
格很方便，但是对于一些不规则的、位置
随意的网页元素表格的布局也是不理想。
用表格进行布局并不是很方便。
Dreamweaver MX提供了另外的一个工具：
图层，它可以实现网页元素的布局。
第九讲 图层的应用
主要内容：
一、什么是图层
二、创建图层及层的操作
三、层与表格的转换
四、层的应用
五、时间轴（线）
六、举例说明
七、本节小结
什么是图层？
事实上在 Dreamweaver系
统中，图层是放置文本、
图像等元素的载体。使用
图层及配合其它元素、时
间线等，可以实现有很多
很奇妙的功能。在网页设
计中应用非常广泛。
通俗地讲,图层就像含有
文字、图片、表格等元素
的胶片，一张张按照顺序
叠放在一起，组合起来形
成页面的最终效果。
图层层叠的效果
图层的特点：
? 图层可以将页面的元素精确定位；
? 层在网页编辑区中可以自由移动，可以去很
多其它元素不能去的地方；
? 图层中可以加入文本、图像、表格等元素；
? 可以在图层里面嵌套图层，嵌套后的关系是
,父, 与, 子, 的关系，里面嵌套的称为子
图层，包含嵌套层的图层称为父图层。嵌套
层永远在其父图层的上方。
? 图层可以显示或隐藏；
? 图层在平面上可以设置 X,Y坐标，除此
之外，还添加一个具有三维空间的 Z坐标，
使图层有一个叠放顺序，而且可以通过改
变 Z值，来改变图层的叠放顺序。正是因
为有了这个 Z坐标使得图层有一个独特的
功能 ------就是可以使页面元素重叠。
创建图层及层的操作
一、创建图层
方法有两种：
第一种：利用菜单插入一个层，操作步骤：
1）、在要插入图层的位置单击鼠标左键，确
定插入点。
2）、执行 【 插入 】 / 【 图层 】 命令，则在光
标的当前处插入了一个系统缺省默认的图层。
第二种：利用插入栏中的常用面板来实现插
入图层，操作步骤如下：
1）、打开要创建图层的文档。
2）、单击插入栏中的常用面板的 按钮。
3）、用鼠标拖动该图标，到工作窗口释放
鼠标左键（或直接在编辑区内画层）。
二、创建嵌套的图层
操作步骤如下：
1）、打开要创建图层的文档。
2）、单击插入栏中的常用面板的 按钮。
3）、用鼠标拖动该图标，到工作窗口释放鼠
标左键（或直接在编辑区内画层）。
4）、将光标插入到已建好的图层中，然后选
择菜单中的“插入 /层”命令，可在已建的
图层中插入一个嵌套的图层。
三、图层的操作
1、激活图层
一个层在被激活后，才能将文本、图像、表
格、表单等网页元素插入到图层中。
如何激活？ ------单击图层的任意位置，就可
以激活图层，此时光标在图层中闪烁，这
时候就可以往图层插入其它的网页元素。
未被选中激活的层 激活的层 被选中的层
2、选中（取）图层
选中图层的方法有很多：
1）、按下 Shift键 +鼠标单击层的任意位置，
可以选中层。
2）、单击层的标记可以选中层。
3）、单击层的边框线可以选中层。
4）、先激活层，再单击层的左上角的选择柄
可以选中层。
5）、按下 Shift键 +鼠标单击每一个层的任意
位置，可以选中多个层。
3、层的操作
1）、删除层
方法：选中要删除的层，然后按 Delete键。
2）、移动层
方法：
? 用鼠标移动层，将光标移到层的左上角的
选择柄上，或者将鼠标移动到层的边框线
上，指针变成 4个十字状箭头时，拖动鼠标
即可移动该层。
? 选中要移动的层，在属性面板中的 [左 ]和
[上 ]两个文本框中输入层的左上角坐标，便
可精确设置这个层在网页中的目标位置。
3）、调整层的大小
方法：
? 用鼠标操作，先选中要改变大小的层，此时
层的边框线出现 8个黑色活动块，用鼠标拖
拽某个活动块，即可调整层的大小。
? 选中要移动的层，在属性面板中的 [宽 ]和 [高 ]
两个文本框中输入层的宽度和高度尺寸，便
可精确调整该层尺寸。
4）、对齐层
选中要对齐的多个层，选择菜单, 修改 /对齐,
命令，可以设置层的不同的对齐方式。
四、设置图层的属性
选择图层，则弹出图层属性面板对话框
【 层编号 】,在本栏为图层命名。名称不能用中文，
不能以数字开头，只能用西文和数字。
【 左 L】, 层左边界距离浏览器窗口左边的距离。
【 上 T】, 层上边界距离浏览器窗口上边的距离。
这两个参数是设置当前层的左上角的坐标值。
20px
100px
【 宽 W】, 图层的宽度，单位为像素。
【 高 H】,图层的高度，单位为像素。
【 Z轴 】, 在垂直平面的方向上层的顺序号。
设置图层的堆叠顺序。 （提示：在该文本框
中的数值，决定了当前层放在哪个层上面。
通常,Z值大的层放在上面,Z值小的层放
在下面。）
【 显示 Vis】, 层的可见性，设置图层的显示
情况。可选择, defaul”（默认）、
,inherit”（继承父层的属性）、
,visible”（可见）,,hidden”（隐藏）
四个选项之一。
【 背景图像 】, 设置图层的背景图像。
【 背景颜色 】, 设置图层的背景颜色。
【 标签 Tag】, 设置图层在 HTML代码中使用标
记，建议使用 DIV，它可以同时被 IE和
Netscape支持。
【 溢出 Overflow】, 设置图层的内容超出图
层范围大小时的显示方式。
有以下 4种选择：
? Visible:按照内容尺寸向右、向下扩大层，
以显示层内的全部内容。（换句话说，增加
层尺寸，显示超出部分的内容。）
? Hidden：只显示图层尺寸以内的内容。保
持层尺寸不变，隐藏超出部分的内容。
? Scroll:不改变图层的大小，但增加滚动
条,用户可以通过滚动条来浏览整个图层。
? Auto:只在层不够大时才出现滚动条，这
一项也是在支持滚动条的浏览器中才有效。
【 剪辑 Clip】, 设置图层的可视区域，即
哪一部分是可见的，输入的数值表示图层
的可视区域与层左、上边界之间的距离。
五、图层的默认设置
当图层被插入时，其属性是默认，但这些默
认属性不是固定不变的，可以随时修改。
操作方法：
选择主菜单中的 【 编辑 】 / 【, 参数修改,
或者称为, 偏好设置, 】 命令，在弹出的
对话框中的 【 分类 】 栏中选择层。
如下图所示：
【 标签 Tag】, 设置图层在 HTML代码中使
用标记，可使用 DIV,SPAN,LAYER 或
ILAYER。
【 显示 Vis】, 层的可见性，设置图层的
显示情况。可选择, defaul”（默认）、
,inherit”（继承父层的属性）、
,visible”（可见）,,hidden”（隐藏）
四个选项之一。
【 宽 W】 和 【 高 H】, 设置图层的宽和高度，
单位为像素。
【 背景图像 】, 设置图层的背景图像。
【 背景颜色 】, 设置图层的背景颜色。
【 嵌套 】, 勾选该项，只要出现重叠时，
将采用嵌套的方式。
【 Netscape4兼容性 】, 勾选该项，当插入
层时，固定其大小。
层的属性被修改后，当下一次插入层时，
其默认的属性会变为修改后的数值。
六、层的管理
在 Dreamweaver中,图层的管理是使用 层
面板 。 层面板 是文档中层的可视图。在层
面板中，层以堆叠名称列表的形式显示，
先建立的层位于列表的底部，后建立的层
位于列表的上部，使用层面板可以防止层
重叠、改变层的可见性和堆叠顺序。
打开层面板的方法：
选择主菜单中的 【 窗口 】 / 【 其它 】 】 /
【 层 】 命令，或者直接按 F2键打开层面板，
如图所示：
在层面板中,Z轴数值最大的，图层就
会排在上面。可以通过改变 Z的数值，
来改变图层上下位置。
层面板
先创建的
层
后创建的
层改变层的
可视性
代表可视
代表不可视
层和表格是网页设计中经常用到的两种技术，
二者各有优缺点。利用表格布局网页元素
过于呆板；而使用层对网页进行布局，则
有可能无法被有些浏览器支持。如果将二
者结合使用，可以大大提高效率。
1、表格转换为层
操作方法：
1）、选中要转换为层的表格。
2）、选择菜单中的, 修改 /转换 /表格到层,
命令。
层与表格的转换
2、层转换为表格
操作方法：
1）、选中要转换为表格的层。
2）、选择菜单中的, 修改 /转换 /层到表格,
命令。在弹出的对话框中进行设置。
提示：层转换为表格时，要求层不能重叠。
如果层重叠，则不能进行层转换为表格的
操作。
层的应用
一、图层层叠效果制作（实例操作演示）
二、鼠标移到图片时显示隐含图层。 （实
例操作演示）
三、拖动层的应用。 （实例操作演示）
时间轴（线）
在这节中我们要学习 DreamweaverMX的时间轴
动画，在不需要编写复杂的程序，只是利用层
和时间轴，就可以让网页元素在网页画面中移
动起来。 这也是 DreamweaverMX强于其它网页
编辑工具的地方。
动画的原理：动画是由一系列连续（静止）的
图片组成的。动画的实现就是将画面连起来播
放，由于人的视觉的滞后，产生运动的和错觉，
从而形成了运动的效果。
动画的基本单位就是一个画面，也叫做帧。
有些画面是关键的，会影响整个动画，这个画
面称为关键帧。
很多的画面按时间先后顺序链起来就是动画。
时间轴就是来排列画面的顺序的。基本概念：
? 什么是时间轴（线）？ ----时间轴（线）是用
来控制网页中的层在每一秒的位置的工具。
? 什么时候使用时间轴（线）？ ----想要网页中
的层移动的时候使用时间轴（线）。 （时间
线一定是和层一起使用的！ ------牢记 !）
? 如何打开时间轴？ ----操作方法：选择主菜单
中的 【 窗口 】 / 【 其它 】 /【 时间线（轴） 】
命令，或者直接按 Alt+F9打开时间轴。
打开的时间轴（线）如下图所示：
时间轴（线）面板
时间线下拉列表框
播放栏 动画条 关键帧：在动画中的画面是
关键的，会影响整个动画。
行为通道
帧编号 (帧数 )
B
循环
动画的播
放速度
时间线面板中各部分的功能：
【 时间线下拉列表框 】, 指定显示文档中的哪一个
时间线。（一个文档中可以包含多个时间线）
【 播放栏 】, 在时间线中指定显示哪一帧。
【 帧编号 (帧数 )】, 以连续编号的形式表示动画中
的帧。
【 行为通道 】, 用于存放控制时间线的指定帧的行
为。
【 Fps】, 动画的播放速度，用每秒播放多少帧来表
示。系统默认设置是 15帧 /秒（专家经过无数次实
验得出的比较合适的平均速度，可以很好地满足
多数 Windows系统中浏览器的显示要求，达到流
畅的播放效果。 ）
【 动画条 】, 显示每个对象的动画长度。
【 关键帧 】, 在动画条中特殊的帧。
【 动画通道 】, 用于显示层对应的动画条。
（即是把要设置成动画的层添加到此通
道中）
下面举例说明如何使用时间线来制作动画
效果：
例 1、滚动字幕
例 2、滚动广告牌
例 3、幻灯片效果
本节小结
本节主要介绍了图层的作用、图层的
创建方法，最后又通过制作一个图层
网页的实例讲解，使大家对图层的功
能加深了理解。
重点熟练掌握网页中 图层 的创建，灵
活、合理使用 图层 以满足网页设计实
际中的需要。
上机操作作业
每个同学独立上机操作完成老师讲过
的例子。要求熟练掌握。
表格来进行网页中元素的布局，通过表格
实现网页中元素的布局。
问题,使用表格布局时，大家都发现一个这
样的问题：有些元素规格大小一致的用表
格很方便，但是对于一些不规则的、位置
随意的网页元素表格的布局也是不理想。
用表格进行布局并不是很方便。
Dreamweaver MX提供了另外的一个工具：
图层，它可以实现网页元素的布局。
第九讲 图层的应用
主要内容：
一、什么是图层
二、创建图层及层的操作
三、层与表格的转换
四、层的应用
五、时间轴（线）
六、举例说明
七、本节小结
什么是图层？
事实上在 Dreamweaver系
统中，图层是放置文本、
图像等元素的载体。使用
图层及配合其它元素、时
间线等，可以实现有很多
很奇妙的功能。在网页设
计中应用非常广泛。
通俗地讲,图层就像含有
文字、图片、表格等元素
的胶片，一张张按照顺序
叠放在一起，组合起来形
成页面的最终效果。
图层层叠的效果
图层的特点：
? 图层可以将页面的元素精确定位；
? 层在网页编辑区中可以自由移动，可以去很
多其它元素不能去的地方；
? 图层中可以加入文本、图像、表格等元素；
? 可以在图层里面嵌套图层，嵌套后的关系是
,父, 与, 子, 的关系，里面嵌套的称为子
图层，包含嵌套层的图层称为父图层。嵌套
层永远在其父图层的上方。
? 图层可以显示或隐藏；
? 图层在平面上可以设置 X,Y坐标，除此
之外，还添加一个具有三维空间的 Z坐标，
使图层有一个叠放顺序，而且可以通过改
变 Z值，来改变图层的叠放顺序。正是因
为有了这个 Z坐标使得图层有一个独特的
功能 ------就是可以使页面元素重叠。
创建图层及层的操作
一、创建图层
方法有两种：
第一种：利用菜单插入一个层，操作步骤：
1）、在要插入图层的位置单击鼠标左键，确
定插入点。
2）、执行 【 插入 】 / 【 图层 】 命令，则在光
标的当前处插入了一个系统缺省默认的图层。
第二种：利用插入栏中的常用面板来实现插
入图层，操作步骤如下：
1）、打开要创建图层的文档。
2）、单击插入栏中的常用面板的 按钮。
3）、用鼠标拖动该图标，到工作窗口释放
鼠标左键（或直接在编辑区内画层）。
二、创建嵌套的图层
操作步骤如下：
1）、打开要创建图层的文档。
2）、单击插入栏中的常用面板的 按钮。
3）、用鼠标拖动该图标，到工作窗口释放鼠
标左键（或直接在编辑区内画层）。
4）、将光标插入到已建好的图层中，然后选
择菜单中的“插入 /层”命令，可在已建的
图层中插入一个嵌套的图层。
三、图层的操作
1、激活图层
一个层在被激活后，才能将文本、图像、表
格、表单等网页元素插入到图层中。
如何激活？ ------单击图层的任意位置，就可
以激活图层，此时光标在图层中闪烁，这
时候就可以往图层插入其它的网页元素。
未被选中激活的层 激活的层 被选中的层
2、选中（取）图层
选中图层的方法有很多：
1）、按下 Shift键 +鼠标单击层的任意位置，
可以选中层。
2）、单击层的标记可以选中层。
3）、单击层的边框线可以选中层。
4）、先激活层，再单击层的左上角的选择柄
可以选中层。
5）、按下 Shift键 +鼠标单击每一个层的任意
位置，可以选中多个层。
3、层的操作
1）、删除层
方法：选中要删除的层，然后按 Delete键。
2）、移动层
方法：
? 用鼠标移动层，将光标移到层的左上角的
选择柄上，或者将鼠标移动到层的边框线
上，指针变成 4个十字状箭头时，拖动鼠标
即可移动该层。
? 选中要移动的层，在属性面板中的 [左 ]和
[上 ]两个文本框中输入层的左上角坐标，便
可精确设置这个层在网页中的目标位置。
3）、调整层的大小
方法：
? 用鼠标操作，先选中要改变大小的层，此时
层的边框线出现 8个黑色活动块，用鼠标拖
拽某个活动块，即可调整层的大小。
? 选中要移动的层，在属性面板中的 [宽 ]和 [高 ]
两个文本框中输入层的宽度和高度尺寸，便
可精确调整该层尺寸。
4）、对齐层
选中要对齐的多个层，选择菜单, 修改 /对齐,
命令，可以设置层的不同的对齐方式。
四、设置图层的属性
选择图层，则弹出图层属性面板对话框
【 层编号 】,在本栏为图层命名。名称不能用中文，
不能以数字开头，只能用西文和数字。
【 左 L】, 层左边界距离浏览器窗口左边的距离。
【 上 T】, 层上边界距离浏览器窗口上边的距离。
这两个参数是设置当前层的左上角的坐标值。
20px
100px
【 宽 W】, 图层的宽度，单位为像素。
【 高 H】,图层的高度，单位为像素。
【 Z轴 】, 在垂直平面的方向上层的顺序号。
设置图层的堆叠顺序。 （提示：在该文本框
中的数值，决定了当前层放在哪个层上面。
通常,Z值大的层放在上面,Z值小的层放
在下面。）
【 显示 Vis】, 层的可见性，设置图层的显示
情况。可选择, defaul”（默认）、
,inherit”（继承父层的属性）、
,visible”（可见）,,hidden”（隐藏）
四个选项之一。
【 背景图像 】, 设置图层的背景图像。
【 背景颜色 】, 设置图层的背景颜色。
【 标签 Tag】, 设置图层在 HTML代码中使用标
记，建议使用 DIV，它可以同时被 IE和
Netscape支持。
【 溢出 Overflow】, 设置图层的内容超出图
层范围大小时的显示方式。
有以下 4种选择：
? Visible:按照内容尺寸向右、向下扩大层，
以显示层内的全部内容。（换句话说，增加
层尺寸，显示超出部分的内容。）
? Hidden：只显示图层尺寸以内的内容。保
持层尺寸不变，隐藏超出部分的内容。
? Scroll:不改变图层的大小，但增加滚动
条,用户可以通过滚动条来浏览整个图层。
? Auto:只在层不够大时才出现滚动条，这
一项也是在支持滚动条的浏览器中才有效。
【 剪辑 Clip】, 设置图层的可视区域，即
哪一部分是可见的，输入的数值表示图层
的可视区域与层左、上边界之间的距离。
五、图层的默认设置
当图层被插入时，其属性是默认，但这些默
认属性不是固定不变的，可以随时修改。
操作方法：
选择主菜单中的 【 编辑 】 / 【, 参数修改,
或者称为, 偏好设置, 】 命令，在弹出的
对话框中的 【 分类 】 栏中选择层。
如下图所示：
【 标签 Tag】, 设置图层在 HTML代码中使
用标记，可使用 DIV,SPAN,LAYER 或
ILAYER。
【 显示 Vis】, 层的可见性，设置图层的
显示情况。可选择, defaul”（默认）、
,inherit”（继承父层的属性）、
,visible”（可见）,,hidden”（隐藏）
四个选项之一。
【 宽 W】 和 【 高 H】, 设置图层的宽和高度，
单位为像素。
【 背景图像 】, 设置图层的背景图像。
【 背景颜色 】, 设置图层的背景颜色。
【 嵌套 】, 勾选该项，只要出现重叠时，
将采用嵌套的方式。
【 Netscape4兼容性 】, 勾选该项，当插入
层时，固定其大小。
层的属性被修改后，当下一次插入层时，
其默认的属性会变为修改后的数值。
六、层的管理
在 Dreamweaver中,图层的管理是使用 层
面板 。 层面板 是文档中层的可视图。在层
面板中，层以堆叠名称列表的形式显示，
先建立的层位于列表的底部，后建立的层
位于列表的上部，使用层面板可以防止层
重叠、改变层的可见性和堆叠顺序。
打开层面板的方法：
选择主菜单中的 【 窗口 】 / 【 其它 】 】 /
【 层 】 命令，或者直接按 F2键打开层面板，
如图所示：
在层面板中,Z轴数值最大的，图层就
会排在上面。可以通过改变 Z的数值，
来改变图层上下位置。
层面板
先创建的
层
后创建的
层改变层的
可视性
代表可视
代表不可视
层和表格是网页设计中经常用到的两种技术，
二者各有优缺点。利用表格布局网页元素
过于呆板；而使用层对网页进行布局，则
有可能无法被有些浏览器支持。如果将二
者结合使用，可以大大提高效率。
1、表格转换为层
操作方法：
1）、选中要转换为层的表格。
2）、选择菜单中的, 修改 /转换 /表格到层,
命令。
层与表格的转换
2、层转换为表格
操作方法：
1）、选中要转换为表格的层。
2）、选择菜单中的, 修改 /转换 /层到表格,
命令。在弹出的对话框中进行设置。
提示：层转换为表格时，要求层不能重叠。
如果层重叠，则不能进行层转换为表格的
操作。
层的应用
一、图层层叠效果制作（实例操作演示）
二、鼠标移到图片时显示隐含图层。 （实
例操作演示）
三、拖动层的应用。 （实例操作演示）
时间轴（线）
在这节中我们要学习 DreamweaverMX的时间轴
动画，在不需要编写复杂的程序，只是利用层
和时间轴，就可以让网页元素在网页画面中移
动起来。 这也是 DreamweaverMX强于其它网页
编辑工具的地方。
动画的原理：动画是由一系列连续（静止）的
图片组成的。动画的实现就是将画面连起来播
放，由于人的视觉的滞后，产生运动的和错觉，
从而形成了运动的效果。
动画的基本单位就是一个画面，也叫做帧。
有些画面是关键的，会影响整个动画，这个画
面称为关键帧。
很多的画面按时间先后顺序链起来就是动画。
时间轴就是来排列画面的顺序的。基本概念：
? 什么是时间轴（线）？ ----时间轴（线）是用
来控制网页中的层在每一秒的位置的工具。
? 什么时候使用时间轴（线）？ ----想要网页中
的层移动的时候使用时间轴（线）。 （时间
线一定是和层一起使用的！ ------牢记 !）
? 如何打开时间轴？ ----操作方法：选择主菜单
中的 【 窗口 】 / 【 其它 】 /【 时间线（轴） 】
命令，或者直接按 Alt+F9打开时间轴。
打开的时间轴（线）如下图所示：
时间轴（线）面板
时间线下拉列表框
播放栏 动画条 关键帧：在动画中的画面是
关键的，会影响整个动画。
行为通道
帧编号 (帧数 )
B
循环
动画的播
放速度
时间线面板中各部分的功能：
【 时间线下拉列表框 】, 指定显示文档中的哪一个
时间线。（一个文档中可以包含多个时间线）
【 播放栏 】, 在时间线中指定显示哪一帧。
【 帧编号 (帧数 )】, 以连续编号的形式表示动画中
的帧。
【 行为通道 】, 用于存放控制时间线的指定帧的行
为。
【 Fps】, 动画的播放速度，用每秒播放多少帧来表
示。系统默认设置是 15帧 /秒（专家经过无数次实
验得出的比较合适的平均速度，可以很好地满足
多数 Windows系统中浏览器的显示要求，达到流
畅的播放效果。 ）
【 动画条 】, 显示每个对象的动画长度。
【 关键帧 】, 在动画条中特殊的帧。
【 动画通道 】, 用于显示层对应的动画条。
（即是把要设置成动画的层添加到此通
道中）
下面举例说明如何使用时间线来制作动画
效果：
例 1、滚动字幕
例 2、滚动广告牌
例 3、幻灯片效果
本节小结
本节主要介绍了图层的作用、图层的
创建方法，最后又通过制作一个图层
网页的实例讲解，使大家对图层的功
能加深了理解。
重点熟练掌握网页中 图层 的创建，灵
活、合理使用 图层 以满足网页设计实
际中的需要。
上机操作作业
每个同学独立上机操作完成老师讲过
的例子。要求熟练掌握。
