第九章,网页特效,学习目标 1）了解行为面板的基本功能。 2）掌握常用行为的使用。,9.1 行为面板基本功能,重点提示 1）理解行为的作用。 2）熟悉行为面板。,行为是实现网页上交互的一种捷径，Dreamweaver 8.0 行为将 Javascript 代码放置在文档中，以允许访问者与 Web 页进行交互，从而以多种方式更改页面动作或执行某些任务。行为是事件和由该事件触发的动作的组合。事件是动作被触发的结果，而动作是用于完成特殊任务的预先编好的JavaScript代码，诸如打开一个浏览器窗口，播放声音等。当对一个页面元素使用行为时，需要用户指定动作和所触发的事件。,实例1 熟悉行为面板。,9.2 “改变属性”动作的应用,重点提示 1）动态改变文字大小 2）使用“改变属性”动作交换图片,实例2 动态改变文字大小。鼠标移到这段文字上，文字将被放大，单击鼠标时，改变文字的背景色，鼠标移开，文字恢复原大小。,实例3 变换图片。 实现效果：当用户把鼠标移到图片上时，就换了一张图片；当把鼠标移开图片时，它又恢复了原来的图片。这种动态效果同样是用“行为”中的“改变属性”动作功能实现的。,课堂练习 利用表格做一个变色按钮，当鼠标移到按钮上时，按钮背景色变为红色#ff0000，当鼠标按下时，按钮背景色变为浅黄色#ffffcc，当鼠标离开按钮时，按钮背景色恢复为原来的淡蓝色#ccccff，练习效果见下图。,鼠标不在按钮上时 鼠标移到按钮上 鼠标按下时,9.3 制作弹出窗口,重点提示 掌握网页中弹出窗口的制作方法。,实例4 载入网页时弹出窗口。,课堂练习 1使用超级链接控制弹出窗口。 2图片控制弹出窗口练习。,9.4 制作动态图片按钮,实例5 制作动态图片按钮。实例效果如下图所示。,9.5 制作动态图片说明,重点提示 掌握动态图片说明的制作方法。,实例6 制作动态图片说明。当鼠标指向不同的图片上时显示一段关于相应图片的文字说明，实例效果下图A、B所示。,图A鼠标不在图象上,图B 鼠标移到图象上,9.6 设置状态栏文本,重点提示 掌握状态栏文本的设置方法,实例7 在状态栏显示普通文本的提示。当鼠标移到这段文本上时状态栏显示关于文本的信息，鼠标离开这段文本时，状态栏中的信息消失，实例效果如下图所示。,9.7 播放声音,重点提示 掌握如何为网页中添加声音。,实例8 在普通文本上播放声音。实现的效果就是当浏览者的鼠标移到某段文本上就开始播放声音。,本 章 小 结,本章详细地讲解了部分网页特效的制作方法和基本原理，包括制作动态图片按钮、制作弹出按钮、设置状态栏文本、播放声音等，从中读者可以学习到很多设计思想和创意。,