网页制作教程 第2版 王君学 项目五 网页动态效果的制作

《网页制作教程 第2版 王君学 项目五 网页动态效果的制作》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、浏览互联网中的网页，许多页面都具有动态效果。那么，这些动态效果是如何制作的呢？本项目将介绍使用行为、时间轴和Flash制作网页动态效果的基本方法。项目五网页动态效果的制作学习目标掌握设置行为的方法。掌握制作时间轴动画的方法。掌握制作Flash动画的方法。任务一认识网页和网站任务一制作“翔翔写真”网页任务二制作“嫦娥奔月”网页任务三制作“祝福一翔”动画实训━━制作“十大名山”网页任务一制作“翔翔写真”网页制作“翔翔写真”网页，如图5-1所示。通过本实例的制，掌握设置行为的基本方法。（一）预备知识──行为（二）任务实施──制作“翔翔写真”网页（三）延伸阅读──事件和动作（一）预备知识──行为行为是

2、Dreamweaver8中内置的脚本程序，能够为网页增添许多功能。行为通常由3部分组成，它们分别是对象、事件和动作。•对象：行为的主体，网页中的元素都可以成为对象，如文本、图像等。•事件：触发动态效果的条件，如鼠标放在图像之上或网页下载完毕时。•动作：最终产生的动态效果，也就是浏览器完成的功能。（一）预备知识──行为1.添加行为在添加行为时，首先应选中对象，然后选择【窗口】/【行为】命令打开【行为】面板，在【行为】面板中单击按钮，在弹出的行为菜单中选择相应的行为动作，最后在【行为】面板中单击事件名右边的按钮，在弹出的下拉菜单中选择相应的触发行为动作的事件，如图5-2所示。（一）预备知识──行为

3、2.常用行为Dreamweaver8内置了许多行为动作，下面对常用行为进行简要介绍。(1)弹出信息【弹出信息】行为将弹出一个提示对话框。在文档中选择要触发行为的对象，然后从行为菜单中选择【弹出信息】命令，在弹出的【弹出信息】对话框中进行参数设置即可，如图5-3所示。（一）预备知识──行为在【行为】面板中将事件设置为【onMouseDown】，即鼠标按下时触发该事件，如图5-4所示。在浏览网页时，用户可以在图像上单击鼠标右键，在弹出的快捷菜单中选择【图片另存为】命令，将网页中的图像下载到自己的计算机中。而当添加了这个行为动作以后，当访问者单击鼠标右键时，将显示提示框而不是快捷菜单，这样就限制了用

4、户使用鼠标右键来下载图片，如图5-5所示。（一）预备知识──行为(2)调用JavaScript【调用JavaScript】行为能够让设计者使用【行为】面板指定一个自定义功能，或者当一个事件发生时执行一段JavaScript代码。在文档中选择要触发行为的对象，如带有空链接的“关闭窗口”文本，然后从行为菜单中选择【调用JavaScript】命令，弹出【调用JavaScript】对话框，在文本框中输入要执行的JavaScript代码或函数名，如“window.close()”，用来关闭窗口，如图5-6所示。在【行为】面板中确认触发事件为【onClick】。预览网页，当单击“关闭窗口”超级链接文本时，

5、就会弹出提示对话框，询问用户是否关闭窗口，如图5-7所示。（一）预备知识──行为(3)改变属性【改变属性】行为用来改变网页元素的属性值，如文本的大小、字体，层的可见性，背景色，图片的来源以及表单的执行等。例如，在文档中插入一个层，并在其中插入一幅名称为“pic”的图像，然后选中层并从【行为】菜单中选择【改变属性】命令，弹出【改变属性】对话框，根据需要进行参数设置，在【行为】面板中确认触发事件为【onMouseOver】，运用相同的方法再添加一个【onMouseOut】事件及相应的动作，如图5-8所示。（一）预备知识──行为(4)交换图像【交换图像】行为可以将一个图像替换为另一个图像，这是通过改

6、变图像的“src”属性来实现的。虽然也可以通过为图像添加【改变属性】行为来改变图像的“src”属性，不过【交换图像】行为更加复杂一些，可以使用这个行为来创建翻转的按钮及其他图像效果（包括同时替换多个图像）。例如，在文档中插入一幅图像并命名，然后在【行为】面板中单击按钮，从弹出的【行为】菜单中选择【交换图像】命令，弹出【交换图像】对话框。在【图像】列表框中选择要改变的图像，然后设置其【设定原始档为】选项，并勾选【预先载入图像】和【鼠标滑开时恢复图像】复选框，如图5-10所示。（一）预备知识──行为（一）预备知识──行为单击按钮，关闭对话框，在【行为】面板中自动添加了3个行为：图像的【交换图像】和

7、【恢复交换图像】行为及文档的【预先载入图像】行为，如图5-11所示。预览网页，当鼠标滑过图像时，图像会发生变化，如图5-12所示。（二）任务实施──制作“翔翔写真”网页在学习了行为的基本知识后，现在开始制作“翔翔写真”网页。在制作之前，首先将素材文件“项目素材项目五任务一images”文件夹复制到站点根目录下。（三）延伸阅读──事件和动作事件决定了为某一页面元素所定义的动作在什么时候执行。需