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