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

《网页制作-行为与时间轴及其应用》由会员分享，可在线阅读，更多相关《网页制作-行为与时间轴及其应用（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，打开【行为】面板。选中层Laye

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

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

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

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

9、） 或（“ javascript:; ”）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与onKey

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

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

16、效果。时间轴动画的单位是帧，每一帧是动画的一幅瞬间图。9.3 时间轴的概述时间轴动画是在特定的时间内、在指定的动画运动轨迹 上，显示一系列有关联特性的静态图像的组合。9.3.1 使用时间轴面板时间轴动画是通过【时间轴】面板来制作完成的。在【时间轴】面板中的每一列代表一帧，帧的显示速度是由 帧频率（fps）决定的。帧：动画的基本单位，就是一个画面。 关键帧：在动画中一些关键的画面，可以影响整个动画的。很多画面按照时间先后顺序连起来就是动画时间轴：用于排列画面顺序的。时间轴由通道组成，每一 个通道里面放一个要运动的物体；关键帧用圆点表示；播 放头指向当前动画所在帧。【时间轴】面板最上面一行是标题栏，下面是控制栏，在控制 栏中可设置时间轴动画的各项参数。标有大写字母B的是行为通道，在行为通道中带有行为标记的帧附加了行为。面板中间是时间标尺，标尺上有个红色小块是当前帧标记，表明了当前 帧的状况。下面是