网页设计之行为与时间轴.pptxVIP

2025/4/241复习：1.模板文件的扩展名？库文件的扩展名？

2025/4/2427章行为

行为就是以某种方式完成的动作。行为的主要功能：就是在网页中插入JavaScript程序而无需动手编写代码，这正是设计者所需要的。用它可以轻松地做出许多网页特效。11、行为动作和事件行为是一种事件和动作的组合：动作是指在浏览网页时可完成的一些特殊功能，如拖曳层、隐藏和显示层、播放音乐、交换图像等；事件是完成某一动作的具体方式，如onMouseOver(鼠标指向对象)、onMouseOut(鼠标移离对象)、onClick(单击鼠标)等。例：插入【交互式图像】就是一个典型的行为应用。

事件2025/4/244Onclick:单击图像链接按扭onDblclick：双击对象onError：载入错误onFinish：所选内容完成一个循环onHelp：单击helponKeyDown：按键Onkeypress：按键并释放onKeyUp：释放onLoad：页面载入onMouseDown：按下鼠标onMouseMove：移动鼠标onMouseOut：鼠标移出onMouseOver：鼠标移入

Dreamweaver中可以添加的行为动作Dreamweaver中主要事件内置行为的具体应用010302

交换图像:与鼠标经过的图像基本相同拖动层转到URL播放声音打开浏览器窗口设置文本

复习:2025/4/248行为的重要组成部分是什么？

2025/4/2498章时间轴

时间轴的概述时间轴的基本原理：使层中的内容在一定的时间内，按照设计好的路线显示在页面中，在时间轴上显示的每一个层称为一帧，整个时间轴就是由许多帧构成的，这些帧在页面中的连续播放构成了时间轴动画。

时间轴通过改变层在不同时间的位置大小可见性和叠放顺序来创建动画。

二、时间轴面板2025/4/2412时间轴弹出菜单回首帧后退当前播放帧播放每秒播放帧数自动播放循环播放行为频道播放头动画频道关键帧动画栏帧数时间轴弹出菜单：指定当前文档的哪个时间轴显示在时间轴面板中回首帧：将播放头移动到时间轴的首帧后退：将播放头向左移动一帧播放：将播放头向右移动一帧自动播放：选择“自动播放”复选框，使当前页面在载入浏览器时自动开始播放时间轴循环播放：使页面在浏览器中打开时，当前时间轴可以无限循环播放播放头：值是页面上当前显示的是时间轴的哪一帧动画频道：显示动画层和图像的栏动画栏（条）：即动画频道中的蓝色小条，显示每个对象的持续时间。关键帧：是动画栏中给某个对象指定了属性（如位置）的帧。总帧数：表示每个动画栏占有的帧数。

显示动画层和图像的栏3.动画频道：12.时间轴弹出菜单：指定当前文档的哪个时间轴显示在时间轴面板中。窗口?时间轴（打开时间轴面板）播放头：值是页面上当前显示的是时间轴的哪一帧2

4.动画栏（条）：即动画频道中的蓝色小条，显示每个对象的持续时间。一个单行可以包含多个代表不同对象的动画栏，但是在同一帧中，不同的动画条不能控制相同的对象。5.关键帧：即动画栏中的小圆点。是动画栏中给某个对象指定了属性（如位置）的帧

总帧数（即长度）：表示每个动画栏占有的帧数。后退和播放按钮之间的数字是当前播放帧通过设置总帧数和每秒帧数（fps），可以控制动画的持续时间及速度公式：总帧数＝持续秒数×帧频率

回首帧：将播放头移动到时间轴的首帧后退：将播放头向左移动一帧。播放：将播放头向右移动一帧。自动播放：选择“自动播放”复选框，使当前页面在载入浏览器时自动开始播放时间轴

循环播放：选择“循环”复选框，使页面在浏览器中打开时，当前时间轴可以无限循环播放这实际上是在动画最后一帧后的行为通道中插入了“转到时间轴帧”行为。双击此帧中的标记，可以编辑行为的参数与改变循环次数

三、创建时间轴动画的操作2025/4/2418选择要制作动画的层或者直接把选定的对象拖入时间轴面板中4.选择修改?时间轴?添加对象到时间轴01在页面添加层，在层中插入要移动的元素，然后将层移动到动画的起始位置简单的时间轴应用：2.选择窗口?时间轴，打开时间轴面板02

单击该动画栏最后关键帧标记（即第15帧），将页面上的层移动到动画末尾时它所应该在的位置如果要让层按曲线移动，选择它的动画栏，按住Ctrl键单击，再插入点位置添加一个关键帧或在动画栏中间单击一帧，并从右键快捷菜单中选择“增加关键帧”移动层，使运动轨迹呈曲线状

（二）通过拖动路径创建时间轴动画2025/4/242001040203插入一个层移动该层到动画的起始处，选中该层选择修改?时间轴?录制层路径在页面上拖动层，创建想要运动的路径并在动画结束的地方松开