网页制作-行为与时间轴及其应用.ppt

《网页制作-行为与时间轴及其应用.ppt》由会员分享，可在线阅读，更多相关《网页制作-行为与时间轴及其应用.ppt（41页珍藏版）》请在装配图网上搜索。

1、,第9章 行为与时间轴及其应用,9.1 行为的概述 9.1.1 行为面板及其使用方法 9.1.2 添加和修改行为 9.1.3 行为的简单应用9.2 Dreamweaver 8 内置的动作和事件,9.4 用时间轴改变图像和层的属性 9.4.1 用时间轴控制层的可见性 9.4.2 用时间轴控制图像替换 9.4.3 用时间轴改变层的叠放次序 9.4.4 多条时间轴的管理9.5 行为和时间轴的应用实例,9.3 时间轴的概述 9.3.1 使用时间轴面板 9.3.2 创建时间轴动画 9.3.3 生成和编辑动画路径 9.3.4 在时间轴中加入行为,9.1 行为的概述,行为以某种方式完成的动作，在网页设计中通

2、过行为可以实现浏览者与计算机的人机交互。,事件：是完成某一动作的具体方式； 动作：指在浏览网页时可完成的一些特殊功能；,在浏览带有行为的交互网页时，当某一事件被响应后便会触发执行相对应的动作。,一个事件可以触发多个动作,指定动作触发的先后次序,在网页中为页面对象添加和修改行为，可使用【行为】面板。选择【窗口】|【行为】命令，或按Shift+F4快捷键，也可以单击状态栏中的按钮，便可打开【行为】面板。,9.1.1 行为面板及其使用方法,事件列表,显示设置事件,显示所有事件,添加行为,删除行为,动作列表,利用【行为】面板可在网页中添加、修改行为。给网页对象添加行为的步骤如下。,9.1.2 添加和修

3、改行为,（1） 选中网页中的一个对象，该对象可以是图像、文本或层。 （2） 选择【窗口】|【行为】命令，打开【行为】面板。 （3） 单击【行为】面板上的按钮，屏幕显示【动作】（Action）菜单。根据需要选择其中一种动作，并在对话框中设置该动作的参数。 （4） 选择【显示事件】命令，并在【显示事件】级联菜单中选择一种合适的浏览器。,（5） 在【事件】（Event）菜单中显示当前动作的默认事件，单击该事件后，【行为】面板的当前事件中会出现一个下拉三角形按钮，单击该下拉三角形按钮，屏幕显示【事件】级联菜单,可从该菜单选项中选择一种事件来代替默认事件。,网页中一个对象附加了行为后，可以根据需要利用【

4、行为】面板修改触发动作的事件，添加、删除及修改动作的参数。,9.1.3 行为的简单应用,例1 设计制作一个符合下列要求的网页文件。 （1） 在网页中创建2个层，在层Layer1中插入图片1，在层Layer2插入图片2。 （2） 隐藏层Layer2。 （3） 在浏览该页面时，只显示层Layer1的图片1。当鼠标指向该图片时，显示图片2； 移开鼠标时，隐藏图片2。,layer1 layer2,插入层layer1和layer2，并在层中插入相应的图片； 打开【层】面板，选中层Layer2，该层的属性设置为不可见。,按快捷键Shift + F4，打开【行为】面板。选中层Layer1，单击行为添加按钮，

5、选择【显示-隐藏层】动作，在弹出的【显示-隐藏层】对话框中选中层Layer2，并单击【显示】按钮设置显示该层。单击【确定】按钮，【显示-隐藏层】的动作被添加到【行为】面板中。,选中该行为，并单击事件列表中下三角形按钮，在菜单中选择事件【onMouseOver】，其意义为“鼠标指向对象”，表示当鼠标指在层Layer1上时，显示层Layer2。此时层Layer2中图像2被显示。,给层Layer 1添加【显示-隐藏层】的动作。在弹出的【显示-隐藏层】对话框中选中层Layer2，并单击【隐藏】按钮设置隐藏该层。选择事件【onMouseOut】，其意义为“鼠标移去”，表示当鼠标从层Layer1上移去时，

6、隐藏层Layer2。,layer1,例2 双击层1，改变状态栏中显示的文字。,例3 拖动层。,选中整个,Dreamweaver 8中自带了很多动作，使用它们可以在网页中设计出各种效果。在本节中列出的动作是Netscape 6.0、Internet Explorer 6.0及以上版本支持的动作。在【行为】面板的【动作】菜单中各项的意义如下所述。,9.2 Dreamweaver 8 内置的动作和事件,1 【交换图像】： 2 【弹出信息】： 3 【恢复交换图像】:,通过改变IMG标记的SRC属性，改变图像。利用该动作可创建活动按钮或其他图像效果。,可以很方便地在网页上显示带指定信息的JavaScri

7、pt对话框。,用于将在Swap Image动作中设置的后一张图片，恢复为前一张图片。此动作会自动添加在链接了Swap Image动作的对象中。,4 【打开浏览器窗口】： 在触发该行为时打开一个新的浏览器窗口，并在新窗口中打开URL地址指定的网页。还可设置新窗口的尺寸，是否显示导航条、滚动条等属性。 5 【拖动层】： 允许用户用该动作完成拖动层的操作。 6 【控制Shockwave或 Flash】： 利用该动作可控制Shockwave或Flash动画的【播放】、【停止】、【倒带】或指定【前往帧】等操作。 7 【播放声音】： 在网页中加入音乐。 8 【改变属性】： 通过设定的动作触发行为，动态改变

8、对象属性值。,9 【时间轴】级联菜单中有以下3个命令。 【播放时间轴】： 可以启动播放时间轴动画。 【停止时间轴】： 可以停止播放时间轴动画。 【转到时间轴帧】： 此动作可以转到时间轴动画的某个指定的帧，然后开始播放时间轴动画。在时间轴面板的行为通道中设置此动作及时间轴动画的某部分循环播放的次数。,10【显示隐藏层】： 显示、隐藏一个或多个层的可见性，这个动作在与浏览者交互信息时是非常有用的。,11【显示弹出式菜单】： 该行为用来创建或编辑Dreamweaver弹出式菜单，或者打开并修改已插入Dreamweaver文档的Fireworks弹出式菜单。,加上虚链接 （ “ # ” ） 或（“ j

9、avascript:; ”）,12 【检查插件】： 利用该动作可根据访问者是否安装需要的插件，而发送不同的页面。例如，可检测访问者的计算机中是否安装了Flash播放器，对已安装Flash播放器的用户发送包含Flash的网页； 对没有安装Flash播放器的用户发送一个可以下载Flash播放器的网址。 13 【检查浏览器】： 利用该动作可根据访问者所使用的浏览器版本，发送不同的页面。 14 【检查表单】： 检查指定的文本框中的内容，以确保浏览者输入的数据格式正确无误。 15 【设置导航条图像】： 将图片转换成导航条图像或改变导航条中的图像显示，也可更新、编辑导航条的图像。,16 【设置文本】： 级

10、联菜单中有以下4个命令。 【设置层文本】：用指定内容替换某个页面上的层中的内容及格式，但不改变原来层的属性（如背景颜色、背景图片等）。 【设置框架文本】： 动态设置框架文本，以特定的内容替换框架格式和内容。 【设置文本域文字】： 可以用指定的内容取代文本框中内容。 【设置状态条文本】： 可在浏览器左下角的状态栏中显示文本信息。 17 【调用JavaScript】： 执行输入的JavaScript代码。 18 【跳转菜单】： 设计者通过选择【插入】【表单对象】【跳转菜单】命令，可在网页上创建一个跳转菜单。若要修改这个跳转菜单，可在【行为】面板中双击【跳转菜单】动作，在【跳转菜单】对话框中修改跳转

11、菜单的各项参数。,19 【跳转菜单开始】：可以给跳转菜单添加不同的事件。 20 【转到 URL】： 这个动作用于在当前窗口或指定的框架中打开一个新的页面。 21 【隐藏弹出式菜单】：可给弹出式菜单添加事件使其隐藏。 22 【预先载入图像】： 此动作可以在浏览器的缓冲存储器中载入不立即在Web 页面上显示的图片，以便在下载较大的图片文件时可以避免浏览者长时间等待。它主要用于时间轴、行为或JavaScript变换图片等。,动作是执行某个特定任务的一段JavaScript的程序，事件则是指明了执行动作的方法。在【行为】面板中单击按钮，选择【显示事件】命令，在【显示事件】的级联菜单中选定能浏览网页的浏

12、览器版本。选定不同的浏览器版本，事件列表中的事件选项也不同，之前所示的【事件】菜单中各事件选项的意义如下。,onAbort： onAfterUpdate： onBeforeUpdate： onBlur： onFocus： onBounce： onChange：,在装载一幅图片时，单击浏览器的【停止】按钮，可触发该事件。,当页面中的数据元素完成了数据源更新后，触发该事件。,当页面中的数据元素被修改时，触发该事件。,取消选中对象时，触发该事件。,选中指定对象时，触发该事件。,当编辑框中的内容到达其边界时，将触发该事件。,改变页面中数值时，将触发该事件。例如，当用户在菜单中选择了一个项目，或者修改了

13、文本区中的数值，然后在页面任意位置单击均可触发该事件。,onClick： onDblClick： onError： onFinish： onHelp： onKeyDown： onKeyPress： onKeyUp： onLoad：,单击选定对象（如超链接、图片、图片映像、按钮），将触发该事件。,双击选定对象，将触发该事件。,在页面或图片发生装载错误时，将触发该事件。,当选取框内容已经完成了一个循环后，将触发该事件。,当用户单击浏览器的【帮助】按钮或从菜单中选择【帮助】时，将触发该事件。,当用户按下任何键时，将触发该事件。,当用户按下并释放任何键时，触发该事件。 它相当于onKeyDown与on

14、KeyUp事件的联合。,按下任意键后释放该键时，触发该事件。,当图片或页面完成装载后，将触发该事件。,onMouseDown：当浏览者单击鼠标按键（不释放鼠标按键） 时，将触发该事件。 ：当鼠标指针在对象上移动时，触发该事件。 ：当鼠标指针离开对象边界时，将触发该事件。 ：当鼠标首次移动指向特定对象时，将触发该 事件。 ：当鼠标按键被释放时，将触发该事件。 onMove： onReadyStateChange： onReset：,onMouseMove,onMouseOut,onMouseOver,onMouseUp,当指定对象的状态改变时，将触发该事件。,当表单被复位到其缺省值时，将触发该事

15、件。,移动窗口、框架或对象时，将触发该事件。,onRowEnter： onScroll： onSelect： onStart： onResize： onRowExit： onUnload： onSubmit：,当用户调整浏览器窗口或框架的尺寸时， 将触发该事件。 当捆绑数据源的当前记录指针改变时，将 触发该事件。 当捆绑数据源的当前记录指针将要改变时, 触发该事件。 当用户拖动上、下滚动条时，触发该事件。 在文本区域选定文本时，触发该事件。 当编辑框中的内容开始循环时，触发该事件。 提交表单时，触发该事件。 离开页面时，触发该事件。,用Dreamweaver 8的时间轴技术实现动画效果较为方便

16、，只需在不同的时间内改变某个对象的位置、尺寸、可见性等属性，便能实现动画效果。时间轴动画的单位是帧，每一帧是动画的一幅瞬间图。,9.3 时间轴的概述,时间轴动画是在特定的时间内、在指定的动画运动轨迹上，显示一系列有关联特性的静态图像的组合。,9.3.1 使用时间轴面板,时间轴动画是通过【时间轴】面板来制作完成的。在【时间轴】面板中的每一列代表一帧，帧的显示速度是由帧频率（fps）决定的。,帧：动画的基本单位，就是一个画面。 关键帧：在动画中一些关键的画面，可以影响整个动画的。,很多画面按照时间先后顺序连起来就是动画,时间轴：用于排列画面顺序的。时间轴由通道组成，每一个通道里面放一个要运动的物体

17、；关键帧用圆点表示；播放头指向当前动画所在帧。,【时间轴】面板最上面一行是标题栏，下面是控制栏，在控制栏中可设置时间轴动画的各项参数。标有大写字母B的是行为通道，在行为通道中带有行为标记的帧附加了行为。面板中间是时间标尺，标尺上有个红色小块是当前帧标记，表明了当前帧的状况。下面是动画条。在一个Web 页面上可设置描述多个对象运动的动画条。,例如：15fps表示15帧的动画在1秒钟内显示完。,行为通道,关键帧,动画通道, 【时间轴列表】： 是时间轴选择列表，在同一个文档中可以设置多个时间轴，当用户创建多个时间轴时，利用该下拉列表可选择当前时间轴。 【播放控制选项】： 它的3个按钮的功能分别是切换

18、到第一帧、切换到当前帧的上一帧、切换到当前帧的下一帧，文本框中是当前帧的序号。若输入某个帧序号值，便可切换到该帧。单击、这2个按钮并按住鼠标左键不放，可预览动画效果。, 【播放速度设置】： 在Fps文本框中设置每秒要播放的速度，默认值为15fps。该数值越小，播放速度越慢。动画的帧频率等于帧总数（即长度）除以动画所持续的时间。 公式为： 帧总数=持续秒数帧频率。 动画的长度就是指定的时间轴从起点到终点所有的帧数。可以随意调整以上3个参数，设置希望得到的动画效果。, 【自动播放】复选框： 若选中该复选框，表示网页打开后，时间轴动画自动开始播放。 【循环】复选框： 选中该复选框，表示网页打开后，循

19、环播放时间轴动画。系统自动在动画的最后一帧后面插入【转到时间轴帧】的行为，设计者可以在【行为】面板中双击该行为后，可加以修改。,时间轴能移动的主要对象是层，如果希望移动文本或图像之类的对象，可以将它们先放置在层中，然后再设置为时间轴动画。,时间轴一般可通过控制层来实现图片、文本或其他对象活动。将图片或文本插入层中，通过时间轴控制层的变化，就能制作出图片、文本或其他对象的动画效果。,9.3.2 创建时间轴动画,在Dreamweaver8中制作简单的时间轴动画时，设计者只需定义起始位置和结束位置的两个关键帧的属性，两个关键帧之间其他帧的属性由Dreamweaver 8自动设置。,设计者可用鼠标拖曳

20、第一个或最后一个关键帧来改变动画条的长度，或直接拖曳动画条改变动画开始或结束的时间。,例 制作一个使图片文件angle.jpg从屏幕直线移动的动画。,选择【窗口】|【时间轴】命令，或按Alt + F9，打开【时间轴】面板。,插入层，在层中插入图像文件。,选中该层，并将其拖动到【时间轴】面板中去。在【时间轴】面板中形成一段15帧的动画条。,选中时间轴上方的【自动播放】和【循环】复选框，此时在动画条最后一帧的后一帧上附加了返回第一帧的行为。,Dreamweaver8允许设计者对动画的直线路径进行修改，利用插入关键帧的方法来实现复杂的动画路径。 在设置了时间轴动画的基本状态之后，可利用【时间轴】面板

21、增加、减少动画的帧，增加、减少动画的关键帧，修改对象运动的轨迹，改变动画的开始时间等。,9.3.3 生成和编辑动画路径,（1） 通过拖曳动画条结束帧标记，可以增加动画的帧，用同样的方法可以减少动画的帧。 （2） 分别选中【时间轴】面板中的某帧，单击右键，选择快捷菜单中的【增加关键帧】命令，或单击【时间轴】面板的右侧按钮，选择【增加关键帧】命令，在动画条中的某帧处增加关键帧；或按住Ctrl单击时间轴某处。,（3） 如果在当前动画条上已经插入了关键帧，在增加或减少动 画的帧时不希望调整其他关键帧的位置，可在拖动结束帧 标记时按住Ctrl键，此时动画条中关键帧的位置不变。 （4） 通过拖动关键帧标记

22、可调整该关键帧在画面上出现的时间。 （5） 通过直接向左、右拖曳动画条，可调整动画的开始、结束 的时间。,（6） 要移动整个层对象和运动轨迹。单击动画条上任意非关键帧处，选中整个动画条，单击层控制柄拖动该对象，移动整个动画对象和其运动的轨迹。,（7） 要在网页中增加动画对象，实际上就是在【时间轴】面板中增加动画条，可单击右键，在快捷菜单中选择【增加时间轴】命令，也可以选择【修改】|【时间轴】|【增加对象到时间轴】命令，还可以选中某个层对象后，直接将其拖至【时间轴】面板中。,（8） 利用插入的关键帧可将动画直线运动的轨迹改为曲线运动。分别选中【时间轴】面板中的动画条的某一关键帧，然后拖曳层控制柄

23、，改变层对象的运动轨迹。图像将沿新轨迹上下运动，在层对象的运动轨迹拐角处就是关键帧所处的位置。,【添加对象】或【移除对象】命令，可从【时间轴】面板中增加或删除对象，即增加或删除该对象所对应的动画条； 【添加行为】或【移除行为】命令，可增加或删除行为； 【增加关键帧】或【移除关键帧】命令,可增加或删除关键帧； 【增加时间轴】、【移除时间轴】、【重命名时间轴】命令，可对时间轴完成增加、删除或改名的操作。,（9） 选中对象后，右击【时间轴】面板，然后从弹出的快捷菜单中选择下述命令，可完成相应的操作：,（10）,从上述可以看出，用时间轴技术制作的动画操作比较简单，设计者不必设置每一帧的属性，而只要设置

24、关键的几个帧即可确定对象运动的轨迹。关键帧之间的帧被称为中间帧（或普通帧），它们的状态由系统自动产生。 注意： 时间轴动画不是所谓的GIF动画，而是真正用Java Script代码编写的动画。 用关键帧编辑不很复杂的动画运动路径是个较好的方法。但是，对于编辑较复杂的动画运动路径，却并不容易。,Dreamweaver 8还提供了一种可生成复杂路径的动画的简单的方法。设计者可单击【时间轴】面板右上角的快捷菜单按钮，在快捷菜单中选择【录制层路径】命令，单击层控制柄拖动该对象，就可记录层对象的较为复杂的运动轨迹。,9.4 用时间轴改变图像和层的属性,用时间轴除可以控制层的位置变化以外，还可以替换图片，

25、改变层的可见性、层的叠放次序和层的大小等属性。动画对象的这些属性变化，主要是通过在不同的关键帧上设置对象的不同属性来实现的。,9.4.1 用时间轴控制层的可见性,动画在播放过程中，可在时间轴的关键帧上设置层的显示属性来改变层的可见性，或者在关键帧处添加隐藏或显示层的行为，从而在浏览网页时，使动画对象产生时隐时现的效果。,用时间轴控制层的可见性,在浏览网页时，经常可以看到网页中有些图片像幻灯片一样，随着时间的推移不断地在变化。下面通过应用实例来介绍用时间轴控制图片轮流替换的方法。,9.4.2 用时间轴控制图片替换,例 制作一Web 页面，页面上的五幅图片轮流显示，每隔2/3s显示其中一幅图片。（

26、若每秒播放15帧）,选中图片，将其拖入【时间轴】面板，将时间轴动画条增加至50帧，并在10、20、30、40帧处设置关键帧。,分别选中第10、20、30、40帧，在【属性】面板的【源文件】文本框中，输入该关键帧处替换图片的路径和文件名。,9.4.3 用时间轴改变层的叠放次序,用时间轴控制图片替换，制作出图片在页面上的轮流显示的效果。利用时间轴改变层的叠放次序也能设计出类似的页面效果。,9.4.4 多条时间轴的管理,如果在同一个Web 页面中的动画过多或动画类型不同，可用多个时间轴分别控制多个不同的动画。,添加、删除和重命名时间轴的操作步骤如下。 (1) 选择【窗口】| 【其他】| 【时间轴】命令，或按Alt+F9快捷键，打开【时间轴】面板。 (2) 单击【时间轴】面板右上角的按钮，打开时间轴的快捷菜单，在快捷菜单中选择以下命令分别完成不同的任务： 【添加时间轴】命令：可添加时间轴，然后在新的时间轴中添加管理动画的动画条。 【移除时间轴】命令：可删除当前选中的时间轴。 【重命名时间轴】命令：在【重命名时间轴】对话框中对当时间轴重命名。,9.5 行为和时间轴的应用实例,Thanks,to be continued,&,