网页制作-行为与时间轴及其应用.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属性,改变图像。利用该动作可创建活动按钮或其他图像效果。,可以很方便地在网页上显示带指定信息的JavaSc
7、ript对话框。,用于将在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与
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 制作 行为 时间 及其 应用
链接地址:https://www.31doc.com/p-3411048.html