《网页设计》课程教学资源（PPT课件讲稿）第十讲 图层的应用（2/2）

篡图层的 图层层叠效果制作 (实例操作演示) 鼠标移到图片时显示隐含图层。 (实例操作演示) 拖动层的应用 (实例操作演示)

一、图层层叠效果制作 （实例操作演示） 二、鼠标移到图片时显示隐含图层。 （实例操作演示） 三、拖动层的应用。 （实例操作演示）

时间轴(线) 同学们上网的时候,经常会在网上看见小图 标在以一定的轨迹移动飞行,效果动感十 足,非常引人入胜,在页面上魅力四射。 对于很多的设计者来说,如何能用最简单 快速的方法来实现它,可以说是个梦寐以 求的事情。 般在网页上实现动画的效果要使用程序 Javascrip编程,或者使用专业的动画制 作软件来实现,这对很多设计者来说比较 头痛 是 DreamweaverMX带来的 福音,利用它的时间轴技术就可以轻松

同学们上网的时候，经常会在网上看见小图 标在以一定的轨迹移动飞行，效果动感十 足，非常引人入胜，在页面上魅力四射。 对于很多的设计者来说，如何能用最简单、 快速的方法来实现它，可以说是个梦寐以 求的事情。 一般在网页上实现动画的效果要使用程序 JavaScript编程，或者使用专业的动画制 作软件来实现，这对很多设计者来说比较 头痛。------是DreamweaverMX带来的 福音，利用它的时间轴技术就可以轻松、 时间轴（线）

简单、快速制作网页上满天飞的动画效果, 而且不需要编写复杂的程序。 这也是 DreamweaverMX强于其它网页编辑 工具的地方。 时间轴基础 1、动画的原理 动画的原理:动画是由一系列连续(静止) 的图片组成的。动画的实现就是将画面连起 来播放,由于人的视觉的滞后,产生运动的 和错觉,从而形成了运动的效果

简单、快速制作网页上满天飞的动画效果， 而且不需要编写复杂的程序。 这也是DreamweaverMX强于其它网页编辑 工具的地方。 一、时间轴基础 1、动画的原理 动画的原理：动画是由一系列连续（静止） 的图片组成的。动画的实现就是将画面连起 来播放，由于人的视觉的滞后，产生运动的 和错觉，从而形成了运动的效果

2、什么是帧 动画的基本单位就是一个画面,也叫做帧 3、什么是关键帧? 有些画面是关键的,会影响整个动画,这个 画面称为关键帧。 而很多的画面按照时间先后顺序连起来就是 力画 4、什么是时间轴? DreamweaverMX中的时间轴就是来安排画。 面的顺序的,是一种用来控制网页中的层 在每一秒的位置的工具

2、什么是帧？ 动画的基本单位就是一个画面，也叫做帧。 3、什么是关键帧？ 有些画面是关键的，会影响整个动画，这个 画面称为关键帧。 而很多的画面按照时间先后顺序连起来就是 动画。 4、什么是时间轴？ DreamweaverMX中的时间轴就是来安排画 面的顺序的，是一种用来控制网页中的层 在每一秒的位置的工具

5、什么时候使用时间轴 想要网页中的层移动的时候使用时间轴。 (时间线一定是和层一起使用的 6、如何打开时间轴? 操作方法:选择主菜单中的【窗口】/【其 它】/【时间线(轴)】命令,或者直接按 A1t+F9打开时间轴。 二、使用时间轴面板 选择打开时间轴(线)命令,则弹出一个系 统的时间轴面板如下图所示:

5、什么时候使用时间轴？ 想要网页中的层移动的时候使用时间轴。 （时间线一定是和层一起使用的！------牢 记!） 6、如何打开时间轴？ 操作方法：选择主菜单中的【窗口】/ 【其 它】/【时间线（轴）】命令，或者直接按 Alt+F9打开时间轴。 二、使用时间轴面板 选择打开时间轴（线）命令，则弹出一个系 统的时间轴面板如下图所示：

时间线下拉列表框 帧编号(帧数)」「动画的播 放速度 时间轴 叶阿 Timeline Fps15厂自动播放厂循环 B 行为通道 45 当 播放栏动画条关键帧:在动画中的画面是 关键的,会影响整个动画 显示每个对象的动画长度 时间轴(线)面板

时间轴（线）面板 时间线下拉列表框 播放栏 动画条 关键帧：在动画中的画面是 关键的，会影响整个动画。 行为通道 帧编号(帧数) B 循环 动画的播 放速度 显示每个对象的动画长度

时间线面板中各部分的功 时间线下拉列表框】:指定显示文档中 的哪一个时间线。(一个文档中可以包 多个时间线) 播放栏】:在时间线中当前指定显示哪 帧编号(帧数)】:以连续编号的形式表 示动画中的帧 【行为通道】:用于存放控制时间线的指 定帧的行为

时间线面板中各部分的功能： 【时间线下拉列表框】 ：指定显示文档中 的哪一个时间线。（一个文档中可以包 含多个时间线） 【播放栏】 ：在时间线中当前指定显示哪 一帧。 【帧编号(帧数)】 ：以连续编号的形式表 示动画中的帧。 【行为通道】 ：用于存放控制时间线的指 定帧的行为

帧】:时间轴上每一个小格 【Fps】:动画的播放速度,用每秒播放 多少帧来表示。系统默认设置是15帧/秒 Fps值越大,相同帧数的动画显示就越快。 动画条】:显示每个对象的动画长度 【关键帧】:在动画条中特殊的帧。 动画通道】:用于显示层对应的动画条 (即是把要设置成动画的层添加到此通 道中)

【帧】 ：时间轴上每一个小格。 【Fps】 ：动画的播放速度，用每秒播放 多少帧来表示。系统默认设置是15帧/秒 Fps值越大，相同帧数的动画显示就越快。 【动画条】 ：显示每个对象的动画长度。 【关键帧】 ：在动画条中特殊的帧。 【动画通道】 ：用于显示层对应的动画条。 （即是把要设置成动画的层添加到此通 道中）

使用时间轴面板注意的问题: 时间轴面板是用来创建页面上动画效果, 而时间轴只对层起作用,如果要希望移动 文本、图像之类的对象,可将它们先放置 在层中,然后再设置为时间动画。 ·在时间轴面板上单击鼠标右键,可以打开 有关时间轴所有命令的快捷菜单

使用时间轴面板注意的问题： 时间轴面板是用来创建页面上动画效果， 而时间轴只对层起作用，如果要希望移动 文本、图像之类的对象，可将它们先放置 在层中，然后再设置为时间动画。 在时间轴面板上单击鼠标右键，可以打开 有关时间轴所有命令的快捷菜单

、使用时间线来制作动画效果 例1、滚动字幕(或者滚动的图片 重点介绍不同的轨迹的设置方法 例2、滚动广告牌(嵌套图层的应用) 例3、幻灯片效果 实现网页上的幻灯片效果的常用方法有: 方法一、用时间轴控制图片替换。 方法二、用时间轴改变层的叠放顺序。 方法三、用时间轴添加行为 例4、用时间轴改变层的大小。 例5、行为和时间轴的综合应用实例

三、使用时间线来制作动画效果 例1、滚动字幕(或者滚动的图片) 重点介绍不同的轨迹的设置方法。 例2、滚动广告牌（嵌套图层的应用） 例3、幻灯片效果 实现网页上的幻灯片效果的常用方法有： 方法一、用时间轴控制图片替换。 方法二、用时间轴改变层的叠放顺序。 方法三、用时间轴添加行为 例4、用时间轴改变层的大小。 例5、行为和时间轴的综合应用实例