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

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