《网页设计之行为与时间轴.ppt》由会员分享，可在线阅读，更多相关《网页设计之行为与时间轴.ppt（24页珍藏版）》请在三一办公上搜索。
1、2023/9/15,1,复习：,1.模板文件的扩展名？库文件的扩展名？,2023/9/15,2,7章 行为,2023/9/15,3,行为就是以某种方式完成的动作。行为的主要功能：就是在网页中插入JavaScript程序而无需动手编写代码，这正是设计者所需要的。用它可以轻松地做出许多网页特效。,1 1、行为动作和事件,行为是一种事件和动作的组合：动作是指在浏览网页时可完成的一些特殊功能，如拖曳层、隐藏和显示层、播放音乐、交换图像等；事件是完成某一动作的具体方式，如onMouseOver(鼠标指向对象)、onMouseOut(鼠标移离对象)、onClick(单击鼠标)等。例：插入【交互式图像】就是
2、一个典型的行为应用。,2023/9/15,4,事件,Onclick:单击图像链接按扭onDblclick：双击对象onError：载入错误onFinish：所选内容完成一个循环onHelp：单击helponKeyDown：按键Onkeypress：按键并释放onKeyUp：释放onLoad：页面载入onMouseDown：按下鼠标onMouseMove：移动鼠标onMouseOut：鼠标移出onMouseOver：鼠标移入,2023/9/15,5,2、Dreamweaver 中可以添加的行为动作 3、Dreamweaver中主要事件 4、内置行为的具体应用,2023/9/15,6,2023/9
3、/15,7,交换图像:与鼠标经过的图像基本相同 拖动层转到URL播放声音打开浏览器窗口设置文本,2023/9/15,8,复习:,1.行为的重要组成部分是什么？,2023/9/15,9,8章 时间轴,2023/9/15,10,时间轴的基本原理：使层中的内容在一定的时间内，按照设计好的路线显示在页面中，在时间轴上显示的每一个层称为一帧，整个时间轴就是由许多帧构成的，这些帧在页面中的连续播放构成了时间轴动画。,一、时间轴的概述,2023/9/15,11,时间轴通过改变层在不同时间的 位置 大小 可见性和叠放顺序 来创建动画。,2023/9/15,12,时间轴弹出菜单,回首帧,后退,当前播放帧,播放,
4、每秒播放帧数,自动播放,循环播放,行为频道,播放头,动画频道,关键帧,动画栏,帧数,时间轴弹出菜单：指定当前文档的哪个时间轴显示在时间轴面板中,回首帧：将播放头移动到时间轴的首帧,后退：将播放头向左移动一帧,播放：将播放头向右移动一帧,自动播放：选择“自动播放”复选框，使当前页面在载入浏览器时自动开始播放时间轴,循环播放：使页面在浏览器中打开时，当前时间轴可以无限循环播放,播放头：值是页面上当前显示的是时间轴的哪一帧,动画频道：显示动画层和图像的栏,动画栏（条）：即动画频道中的蓝色小条，显示每个对象的持续时间。,关键帧：是动画栏中给某个对象指定了属性（如位置）的帧。,总帧数：表示每个动画栏占有
5、的帧数。,二、时间轴面板,2023/9/15,13,窗口时间轴（打开时间轴面板）,播放头：值是页面上当前显示的是时间轴的哪一帧,2.时间轴弹出菜单：指定当前文档的哪个时间轴显示在时间轴面板中。,3.动画频道：显示动画层和图像的栏,2023/9/15,14,4.动画栏（条）：即动画频道中的蓝色小条，显示每个对象的持续时间。一个单行可以包含多个代表不同对象的动画栏，但是在同一帧中，不同的动画条不能控制相同的对象。,5.关键帧：即动画栏中的小圆点。是动画栏中给某个对象指定了属性（如位置）的帧,2023/9/15,15,6.总帧数（即长度）：表示每个动画栏占有的帧数。后退和播放按钮之间的数字是当前播放
6、帧 通过设置总帧数和每秒帧数（fps），可以控制动画的持续时间及速度公式：总帧数持续秒数帧频率,2023/9/15,16,7.回首帧：将播放头移动到时间轴的首帧,8.后退：将播放头向左移动一帧。,9.播放：将播放头向右移动一帧。,10.自动播放：选择“自动播放”复选框，使当前页面在载入浏览器时自动开始播放时间轴,2023/9/15,17,11.循环播放：选择“循环”复选框，使页面在浏览器中打开时，当前时间轴可以无限循环播放 这实际上是在动画最后一帧后的行为通道中插入了“转到时间轴帧”行为。双击此帧中的标记，可以编辑行为的参数与改变循环次数,2023/9/15,18,在页面添加层，在层中插入要移
7、动的元素，然 后将层移动到动画的起始位置,2.选择 窗口时间轴，打开时间轴面板,3.选择要制作动画的层,4.选择 修改时间轴添加对象到时间轴 或者直接把选定的对象拖入时间轴面板中,三、创建时间轴动画的操作,(一)简单的时间轴应用：,2023/9/15,19,5.单击该动画栏最后关键帧标记（即第15帧），将页面上的层移动到动画末尾时它所应该在的位置,6.如果要让层按曲线移动，选择它的动画栏，按住Ctrl键单击，再插入点位置添加一个关键帧 或在动画栏中间单击一帧，并从右键快捷菜单中选择“增加关键帧”,7.移动层，使运动轨迹呈曲线状,2023/9/15,20,1.插入一个层,2.移动该层到动画的起始
8、处，选中该层,3.选择 修改时间轴录制层路径,4.在页面上拖动层，创建想要运动的路径并在动 画结束的地方松开鼠标。,（二）通过拖动路径创建时间轴动画,2023/9/15,21,1.选中层，在行为面板中单击加号按钮，选择 时间轴,转到时间轴帧：允许对指定的时间轴控制播放其指定的时间帧以及循环的次数。,播放时间轴，停止时间轴：允许用户通过某种事件来播放或停止播放时间轴,（三）控制时间轴,2023/9/15,22,制作在网页上飘动的广告图片(gundong.html),小广告在网页上飘动，当鼠标指向广告时广告停止不动，当鼠标离开广告时，广告继续飘动,1.在网页中插入一个层，在层中插入一幅广告图片,2.选中图像，为其设置超级链接,3.选中层 修改时间轴录制层路径,四、时间轴应用实例,2023/9/15,23,4.按住层不放，拖动层画出层的运动轨迹，在动画结束的地方松开鼠标,5.选中时间轴面板中的“自动播放”和“循环”,6.选中层，窗口行为面板 面板,7.单击加号，选择 时间轴停止时间轴，在对话框中选择Timeline1。在行为面板中把激发该动作的事件改为onMouseOver。,2023/9/15,24,8.再次单击行为面板中的加号，选择 时间轴播放时间轴，在对话框中选择Timeline1。在行为面板中把激发该动作的行为改为onMouseOut,
