第八节层与时间轴的应用
层是CSS中的定位技术，在Dreamweaver中对其进行了可视化操作。文本、图像、表格等元素只能固定其位置，不能互相叠加在一起，而层可以放置在网页文档内的任何一个位置，层内可以放置网页文档中的其他构成元素，层可以自由移动，层与层之间还可以重叠，层体现了网页技术从二维空间向三维空间的一种延伸。
一、创建层
1、创建普通层
（1）插入层
选择菜单栏>插入>布局对象>层命令，即可将层插入到页面中去。
使用这种方法插入层，层的位置由光标所在的位置决定，光标放置在什么位置，层就在什么位置出现。选中层会出现六个小手柄，拖动小手柄可以改变层的大小。
（2）拖放层
打开快捷栏的“布局”选项，单击“绘制层”按钮，单击鼠标左键，并且按住不放，拖动图标到文档窗口中，然后释放鼠标，这是层就会出现在页面中了。
（3）绘制层
打开快捷栏的“布局”选项，单击“绘制层”按钮，在文档窗口内鼠标光标变成十字光标，然后按住鼠标左键，拖动出一个矩形，矩形的大小就是层的大小，释放鼠标猴层就会出现在页面中。
2、创建嵌套层
创建嵌套层就是在一个层内插入另外的层。
方法一：将光标放才某层内，选择菜单栏>插入>布局对象>层命令，即可在改层内插入一个层。
方法二：打开层面板，从中选择需要嵌套的层，此时按住Ctrl键同时拖动改层到另外一个层上，直到出现如下图所示图标后，释放Ctrl键和鼠标，这样普通层就转换为嵌套层了。
二、设置层的属性
选中要设置的层，就可以在属性面板中设置层的属性了。
层编号：给层命名，以便在“层”面板和 JavaScript 代码中标识该层。
左、上：指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位置。
宽、高：指定层的宽度和高度。如果层的内容超过指定大小，层的底边缘（按照在 Dreamweaver设计视图中的显示）会延伸以容纳这些内容。（如果“溢出”属性没有设置为“可见”，那么当层在浏览器中出现时，底边缘将不会延伸。
Z轴：设置层的层次属性。在浏览器中，编号较大的层出现在编号较小的层的前面。值可以为正，也可以为负。当更改层的堆叠顺序时，使用“层”面板要比输入特定的 z 轴值更为简便
可见性：在“可见性”下拉列表中，设置层的可见性。使用教本语言如
JavaScrip可以控制层的动态显示和隐藏。有四个选项：
Default——选择该选项，则不指明层的可见性。
Inherit——选择该选项，可以继承父层的可见性。
Visible——选择该选项，可以显示层及其包含的内容，无论其父级层是否可见。
Hidden——选择该选项，可以隐藏层及其包含的内容，无论其父级层是否可见。
背景颜色：用来设置层的背景颜色。
背景图像——用来设置层的背景图像。
溢出——选择当层内容超过层的大小时的处理方式。有四个选项：
Visible（显示）：选择该选项，当层内容超出层的范围时，可自动增加层尺寸。
hidden（隐藏）: 选择该选项，，当层内容超出层的范围时，保持层尺寸不变，隐藏超出部分的内容。
scroll（滚动条）: 选择该选项，则层内容无论是否超出层的范围，都会自动增加滚动条。
auto（自动）: 选择该选项，，当层内容超出层的范围时，自动增加滚动条（默认）
剪辑：设置层的可视区域。通过上、下、左、右文本框设置可视区域与层边界的像素值。层经过“剪辑”后，只有指定的矩形区域才是可见的。
类：在类的下拉列表中，可以选择已经设置好的CSS样式或新建CSS样式。
注意：位置和大小的默认单位为像素 (px)。也可以指定以下单位：pc (pica)、pt（点）、in（英寸）、mm（毫米）、cm（厘米）或 %（父层相应值的百分比）。缩写必须紧跟在值之后，中间不留空格：
使用层制作特效我们在创建网页的时候，可以发现层可以在网页上随意改变位置，在设定层的属性的时，可以知道层有显示隐藏的功能，通过这两个特点可以实现很多令人激动的网页动态效果。
三、时间轴
时间轴实根据时间的流逝移动图层位置的方式显示动画效果的一种动画编辑界面，在时间轴中包含了制作动画时所必须的各种功能。
1、时间轴的各项功能
（1）时间轴弹出菜单：表示当前的时间轴名称。
（2）时间轴指针：在界面上显示当前位置的帧。
（3）不管时间轴在哪个位置，一直移动到第一帧。
（4）表示时间指针的当前位置。
（5）表示每秒显示的帧数。默认值时15帧。增加帧数值，则动画播放的速度将加快。
（6）自动不放：选中该项，则网页文档中应用动画后自动运行。
（7）LOOP（循环）：选中该项，则继续反复时间轴上的动画。
（8）行为通道：在指定帧中选选择要运行的行为。
（9）关键帧：可以变化的帧。
（10）图层条：意味着插入了“层”等对象。
（11）图层通道：它是用于编辑图层的空间。
2、在DW8中显示时间轴
选择菜单栏的窗口/时间轴或按快捷键Alt＋F9，则显示时间轴。
四、创建时间轴动画
时间线只能移动分层对象，如果想移动文本或图像之类的对象，可以将其放在层中。
1、打开09.html文件，
把光标放到页面左上方的位置，在插入面板选择布局>绘制层，创建六个层。分别输入文字“小”、“木”、“web”、“欢”、“迎”、“你”，将图层排列在适当的位置。
2、打开时间轴。选择层1后，拖动到时间轴的第一行上。
3、用同样的方法，把包含有其它文字的层也根据文字的顺序拖动到时间轴的第2－6行上。
4、为了减慢文字移动的速度，把时间轴中的15帧全部扩展为25帧。
5、在时间轴中选择Layer1的第一帧，在属性面板的顶端坐标值（T）中输入（－50），这样，可以把文字放置到上侧。
6、用同样的方法选择其余层的第一帧后，把顶端坐标值（T）统一设定为（－50）。
7、为了每个一段时间下落一个文字，从第二个动画条开始向后移动5帧。勾选“自动播放选项”。
8、按F12浏览效果。
第六章使用框架、层和时间轴 本章要点： ●框架的概念 ●使用框架设置网页布局 ●层的概念 ●创建层 ●使用时间轴 一、使用框架（P90 6.2 使用框架） （一）、使用框架 如果多个网页拥有相同的导航区，只是内容有所不同，则可以使用框架来设计网页布局，这样浏览者在查看不同内容时，无需每次都下载整个页面，而可以保持导航部分不变，只下载网页中需要更新的内容即可，从而极大提高网页的下载速度。这类网页称为框架页，其最典型的应用时各大论坛的设计。 1、框架的概念 框架页面通过框架将网页分成多个独立的区域，在每个区域可以单独显示不同的页面，每个区域可以独立翻滚。 （1）框架网页的结构 框架由框架和框架集组成，框架就是网页中被分隔开的各个部分，每一个部分都是一个完整的网页，这些网页共同组成了框架集。框架集实际上也是一个网页文件，用于定义框架的结构、数量、尺寸等属性。 框架集又被称为父框架，框架被称为子框架，将某个页面划分为若干框架时，既可独立地操作各个框架，创建新文件，也可为框架指定自己制作好的文档。选择【查看】-【可视化助理】-【框架边框】命令可以显示或隐藏框架边界。 （2）框架网页的功能——导航 （3）框架结构的优点 ●浏览者无需为每个页面重新加载与导航相关的图形，可以大大提高网页的下载效率 ●每个框架都有自己的滚动条，浏览者可以独立滚动这些框架 2、创建框架网页文档 （1）在【新建文档】对话框中创建 文件-新建-示例中的页-框架集-选择所需框架结构 在【框架标签辅助功能属性】对话框中为每一个框架指定一个标题 （2）在【布局】插入栏中创建 插入-布局-框架-可选13种预定于框架 （3）手动创建框架网页 查看-可视化助理-框架边框，显示框架边框，选中所需分隔的框架，按ALT键同时，光标移至框架边框上，显示为双箭头时，即可将一个框架拆分为两个框架。 （二）、编辑框架 1、框架的基本操作 （1）创建嵌套框架
制作层动画 动态HTML（即DHTML）是指HTML 与一种脚本撰写语言的组合，您可以使用该脚本撰写语言更改HTML 元素的样式或定位属性。在Dreamweaver 中，时间轴使用动态HTML 来更改层和图像在一段时间内的属性。使用时间轴可创建不需要任何ActiveX 控件、插件或Java Applet（但需要JavaScript）的动画。 注意 动态一词在与Web 相关的不同上下文中具有不同含义。不要将动态HTML 与动态Web 页的概念相混淆，后者表示在向访问者提供Web 页之前由服务器端代码动态生成的Web 页。 利用时间轴，您可以更改层的位置、大小、可见性和层叠顺序。（时间轴的层功能只能在 4.0 或更高版本的浏览器中使用。）对于要在页加载后执行的其他操作，时间轴也非常有用。例如，时间轴可以更改图像标签的源文件，因此一段时间内有不同的图像出现在页面上。 若要查看由时间轴生成的JavaScript 代码，请打开“文档”窗口的代码视图。时间轴代码位于MM_initTimelines 函数中（在文档的文件头部分的脚本标签中）。 当编辑包含时间轴的文档的HTML 时，请确保没有移动、重命名或删除时间轴所引用的任何内容。 Dreamweaver3 图层应用技巧（三）出处： PConline 责任编辑： [01-11-24 0:15] 作者：icefire/酷页 zwg 在Dreamweaver中不能对一般的普通文字直接予特效，这可能是设计者当初没有想到这个问题。真的不能吗？当然可以，仅需你改一点代码，先看看效果。 >>如何赋予文字图层特效（请看范例）
1.先输入你要做特效的文字，为它做一个链接，随便是什么链接。 2.建一个图层,设为(hidden)隐含,由于特效可以在链接上实现，先把图层特效在链接上做好。 3.链接的标签是与，我们现在做的事就是把与用与替换就可以达到目的。当然也有一些别的特效可以在文字上实现。如OnClick，Popup Message等，只要是能在链接上实现的特效，一般都可以在文本文字上实现。 >>Timeline 的基本应用（请看范例） TimeLine（时间轴）是Dreamweaver最精华的一点，也是Macromedia最为骄傲的。用TimeLine做动画可以满页飞，动画的实现主要是通过Java Script语句来完成的，你不必为不懂java script而苦恼，在DW中你只需用鼠标点几下就ok。DW动画是建立在图层上的，也就是说没有图层的参与DW动画就不可能实现，这是我为什么把TimeLine归纳为图层应用的原因。 先让我们熟悉一下TimeLine面板，按键盘Ctrl+F9或Window->TimeLine打开面板如下图： 1.时间轴选择框，它列出了当前所有时间轴动画名称，方便你选择编辑。 2.帧控制按钮，最左边的的按钮功能是回到第一帧，剩下的分别是向左或向右移动一个帧。
第八节层与时间轴的应用 层是CSS中的定位技术，在Dreamweaver中对其进行了可视化操作。文本、图像、表格等元素只能固定其位置，不能互相叠加在一起，而层可以放置在网页文档内的任何一个位置，层内可以放置网页文档中的其他构成元素，层可以自由移动，层与层之间还可以重叠，层体现了网页技术从二维空间向三维空间的一种延伸。 一、创建层 1、创建普通层 （1）插入层 选择菜单栏>插入>布局对象>层命令，即可将层插入到页面中去。 使用这种方法插入层，层的位置由光标所在的位置决定，光标放置在什么位置，层就在什么位置出现。选中层会出现六个小手柄，拖动小手柄可以改变层的大小。 （2）拖放层 打开快捷栏的“布局”选项，单击“绘制层”按钮，单击鼠标左键，并且按住不放，拖动图标到文档窗口中，然后释放鼠标，这是层就会出现在页面中了。 （3）绘制层 打开快捷栏的“布局”选项，单击“绘制层”按钮，在文档窗口内鼠标光标变成十字光标，然后按住鼠标左键，拖动出一个矩形，矩形的大小就是层的大小，释放鼠标猴层就会出现在页面中。 2、创建嵌套层 创建嵌套层就是在一个层内插入另外的层。 方法一：将光标放才某层内，选择菜单栏>插入>布局对象>层命令，即可在改层内插入一个层。
方法二：打开层面板，从中选择需要嵌套的层，此时按住Ctrl键同时拖动改层到另外一个层上，直到出现如下图所示图标后，释放Ctrl键和鼠标，这样普通层就转换为嵌套层了。 二、设置层的属性 选中要设置的层，就可以在属性面板中设置层的属性了。 层编号：给层命名，以便在“层”面板和 JavaScript 代码中标识该层。 左、上：指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位置。 宽、高：指定层的宽度和高度。如果层的内容超过指定大小，层的底边缘（按照在 Dreamweaver设计视图中的显示）会延伸以容纳这些内容。（如果“溢出”属性没有设置为“可见”，那么当层在浏览器中出现时，底边缘将不会延伸。 Z轴：设置层的层次属性。在浏览器中，编号较大的层出现在编号较小的层的前面。值可以为正，也可以为负。当更改层的堆叠顺序时，使用“层”面板要比输入特定的 z 轴值更为简便 可见性：在“可见性”下拉列表中，设置层的可见性。使用教本语言如
项目四时间轴、图层和帧的使用 习题答案 一、简答题 （1）时间轴由哪几部分组成？简单叙述各部分的功能。 时间轴的顶部是标题栏，单击标题栏中的“时间轴”按钮可以将时间轴折叠起来，再次单击则展开时间轴。 时间轴的左边是图层区，显示了当前场景的图层数、图层类型、图层的状态以及正在编辑的图层。 时间轴的右边是时间线，时间线由许多小格组成，每个格表示一帧。 在时间轴的底部有4个统称为洋葱皮的按钮。单击“绘图纸外观”按钮可以以残影方式查看动画的连续性效果；单击“绘图纸外观轮廓”按钮可以以轮廓方式查看动画的连续性效果；单击“编辑多个帧”按钮可以同时查看和编辑动画的多个关键帧；单击“修改绘图纸标记”按钮将打开一个菜单，在其中可以选择要查看或编辑的帧。 在洋葱皮按钮的右边是时间轴状态栏，用于显示当前游标所在帧的编号、帧频率和播放到当前帧所花的时间。 在时间轴的右上角有一个按钮，单击该按钮在弹出的下拉菜单中可以选择帧的显示方式。 （2）图层有几种类型？引导层有什么特点和功能? ①普通图层用于放置动画对象，也可以实现很多动画效果。②引导图层和被引导图层。用于创建路径引导动画，其中引导图层存放的是运动轨迹，被引导图层存放的是运动对象。 （3）图层的锁定和隐藏在实际应用中有什么意义？ 锁定图层可以防止不需要编辑的图层误操作。如果需要观察某个图层的效果，可以把其他图层隐藏。 （4）帧的类型有哪些？ 帧的类型有关键帧、空白关键帧、普通帧、空白的普通帧和过渡帧等类型。 （5）关键帧和空白关键帧有什么区别和联系？二则如何转换？ 关键帧就是有关键内容的帧。用来定义动画变化、更改状态的帧，即可以修改舞台上对象属性的帧，在时间轴上显示为实心的圆点。空白关键帧是没有包含舞台上的实例内容的关键帧，也就是空的关键帧，在时间轴上显示为空心的圆点。在空白关键帧中添加内容后，该空白关键帧就变成了关键帧，清除关键帧的内容后就变成了空白关键帧。 二、操作题 （1）制作倒计10秒动画。 方法请参考本章项目实践制作倒计时动画。 （2）制作探照灯动画。动画效果为：一个光线很暗的图形上有个圆形的探照灯在走动，灯走到什么地方可以看到什么地方的彩色效果图，同时探照灯在走的过程中有大小的变化。 用引导图层和被引导图层制作。引导图层放置路径，路径的形状随意。被引导放置圆形。
DW教程--八、层与时间轴的应用
第八节层与时间轴的应用 层是CSS中的定位技术，在Dreamweaver中对其进行了可视化操作。文本、图像、表格等元素只能固定其位置，不能互相叠加在一起，而层可以放置在网页文档内的任何一个位置，层内可以放置网页文档中的其他构成元素，层可以自由移动，层与层之间还可以重叠，层体现了网页技术从二维空间向三维空间的一种延伸。 一、创建层 1、创建普通层 （1）插入层 选择菜单栏>插入>布局对象>层命令，即可将层插入到页面中去。 使用这种方法插入层，层的位置由光标所在的位置决定，光标放置在什么位置，层就在什么位置出现。选中层会出现六个小手柄，拖动小手柄可以改变层的大小。 （2）拖放层 打开快捷栏的“布局”选项，单击“绘制层”按钮，单击鼠标左键，并且按住不放，拖动图标到文档窗口中，然后释放鼠标，这是层就会出现在页面中了。 （3）绘制层 打开快捷栏的“布局”选项，单击“绘制层”按钮，在文档窗口内鼠标光标变成十字光标，然后按住鼠标左键，拖动出一个矩形，矩形的大小就是层的大小，释放鼠标猴层就会出现在页面中。 2、创建嵌套层 创建嵌套层就是在一个层内插入另外的层。 方法一：将光标放才某层内，选择菜单栏>插入>布局对象>层命令，即可在改层内插入一个层。
方法二：打开层面板，从中选择需要嵌套的层，此时按住Ctrl键同时拖动改层到另外一个层上，直到出现如下图所示图标后，释放Ctrl键和鼠标，这样普通层就转换为嵌套层了。 二、设置层的属性 选中要设置的层，就可以在属性面板中设置层的属性了。 层编号：给层命名，以便在“层”面板和 JavaScript 代码中标识该层。 左、上：指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位置。 宽、高：指定层的宽度和高度。如果层的内容超过指定大小，层的底边缘（按照在 Dreamweaver设计视图中的显示）会延伸以容纳这些内容。（如果“溢出”属性没有设置为“可见”，那么当层在浏览器中出现时，底边缘将不会延伸。 Z轴：设置层的层次属性。在浏览器中，编号较大的层出现在编号较小的层的前面。值可以为正，也可以为负。当更改层的堆叠顺序时，使用“层”面板要比输入特定的 z 轴值更为简便 可见性：在“可见性”下拉列表中，设置层的可见性。使用教本语言
第七讲场景与时间轴特效动画 一、场景 1．增加场景与切换场景 在 Flash 影片中，演出的舞台只有一个，但在演出过程中，可以更换不同的场景。 (1)增加场景 (2)切换场景 2．“场景”面板的使用 单击“窗口”→“其他面板”→“场景”菜单命令，可以调出“场景”面板，利用该面板，可显示、新建、复制、删除场景，以及给场景更名和改变场景的顺序等。 (1)改变场景播放顺序 (2)新建场景 (3)重制场景 (4)删除场景 (5)更改场景名称 二、帧的基本操作 1．选择帧 编辑帧以前应先选中要编辑的帧。在时间轴中选中若干帧，然后单击右键，即可调出帧快捷菜单，常常需要使用帧快捷菜单中的菜单命令来编辑帧。选择帧的方法如下。 (1)选中一个帧 (2)选中连续的多个帧 (3)选中一个图层的所有帧 (4)选中多个连续图层的所有帧 (5)选中多个图层的所有帧 (6)选择所有帧 2．移动帧、复制帧和调整关键帧的位置 (1)调整关键帧的位置 (2)鼠标移动帧 (3)复制帧和移动帧 3．插入帧、删除帧和转换为关键帧 (1)插入普通帧：单击选中要插入普通帧的帧单元格，然后按 F5 键。这时就会在选中的帧单元格中新添加一个普通帧，该帧单元格中原来的帧以及它右面的帧都会向右移动一帧。 (2)删除帧：选中要删除的一个或多个帧，单击帧快捷菜单中的“删除帧”菜单命令。
(3)插入关键帧：选中要插入关键帧的帧，按 F6 键或单击帧快捷菜单中的“插入关键帧”菜单命令。 (4)插入空白关键帧：选中要插入空白关键帧的帧，按 F7 键或单击帧快捷菜单中的“插入空白关键帧”菜单命令。 (5)清除关键帧：选中要删除的关键帧，单击帧快捷菜单中的“删除关键帧”菜单命令。此时，原关键帧中的内容会被前面的关键帧内容取代。 (6)清除帧：选中要清除的帧，单击帧快捷菜单中的“清除帧”菜单命令，可将选中的帧中的内容清除，使该帧成为空白关键帧。 (7)转换为关键帧：选中要转换的普通帧，然后单击帧快捷菜单中的“转换为关键帧” (或“转换为空白关键帧” )菜单命令，即可将普通帧转换为关键帧(或空白关键帧) 。 三、时间轴特效动画 1．时间轴特效动画简介 时间轴特效是Flash 8 中内置的一组动画效果，可以通过执行时间轴特效来快速创建复杂的动画。时间轴特效有“变形”、“转换”、“分离”、“展开”、“投影”和“模糊”等特效。它们的操作步骤很简单。可以对文本、图形、图像和元件实例等对象应用时间轴特效。 当将时间轴特效应用于舞台工作区中的对象，创建完一个时间轴特效后，“库“面板中会自动添加一个与该时间轴特效同名的文件夹，它包含有该时间轴特效所用到的所有元素。当一个对象创建了时间轴特效后，Flash 将为这个时间轴特效创建一个图层，并将对象放置在该图层中，动画所用到的所有补间、变形等都在该图层中。 2．编辑时间轴特效 （1）选中有时间轴特效动画的图层，单击“修改”→“时间轴特效”→“编辑特效”菜单命令，即可调出相应的对话框。 （2）在调出的对话框内进行参数修改后，单击该对话框内的“确定”按钮，即可完成时间轴特效的编辑。 四、案例 案例1图像切换 “图像切换”动画的显示效果是先显示第1 幅图像，接着第 1 幅图像从左向右淡出涂抹，同时由不透明变为透明，逐渐将第 2 幅图像显示出来；然后第2 幅图像逐渐旋转、缩小、移出左上角，逐渐将第 3 幅图像显示出来。动画播放后的2 幅画面如图4-4-1 所示。通过本实例的学习，掌握使用“转换”时间轴特效功能制作动画的方法。该动画的制作方法如下。