《网页制作与开发教程 教学课件 ppt 作者 张强 高建华 温谦 第9章 动态网页技术》由会员分享，可在线阅读，更多相关《网页制作与开发教程 教学课件 ppt 作者 张强 高建华 温谦 第9章 动态网页技术（61页珍藏版）》请在金锄头文库上搜索。
1、第9章 动态网页技术,本章将通过对制作翻滚图的介绍引入了动态网页技术，主要对添加内置的Flash交互对象和使用行为进行介绍，综合运用了各种动态网页制作技术，使读者能够将所学知识融会贯通。,在这一章中，读者应重点理解和掌握Dreamweaver特有的“行为”概念，它是Dreamweaver中最有特色的功能，能大大提高网页制作的效率。通过本章的学习，读者可以掌握几种动态网页技术，制作出有动态效果的网页，将单一、死板的样式变得更加丰富多彩、引人入胜。,9.1 添加内置的Flash对象,Macromedia公司开发（现已被Adobe公司收购）的Flash技术是当前网络上传输矢量动画的主要解决方案。在D
2、reamweaver中使用Flash命令之前，应先熟悉下面两个Flash的不同文件格式。,Flash文件（.fla）是Flash程序的源文件。 Flash动画文件（.swf）是一种压缩过的Flash文件格式。,9.1.1 使用Flash按钮对象,图9-1 打开“插入Flash按钮”对话框,9.1.2 使用Flash文本对象,使用Flash文本对象可以创建和插入一个Flash电影，在这个电影中包含了文本动画效果。,图9-3 “插入Flash文本”对话框,9.2 设置Flash对象的属性,在按照上面介绍的步骤给网页加入Flash对象以后，还可以通过“属性”面板设置Flash SWF文件的所有属性。
3、选择菜单栏“窗口属性”命令，打开“属性”面板，如图9-4所示。,图9-4 “属性”面板,9.3 “行为”简介,Dreamweaver中的“行为”实际上是一些JavaScript的程序，它由事件和动作两部分组成。动作是特定的JavaScript程序，在某个特定的事件发生（如页面加载或者鼠标单击）后，相应的程序就会自动运行。在这一节中，将讲解行为的基本概念，并以几种常用的行为为例，进行详细的说明。,行为是Dreamweaver中最有特色的功能，通过使用它，用户可以不用编写JavaScript代码，就能制作出需要由数百行代码才能完成的功能。行为的关键在于Dreamweaver提供了许多标准的Java
4、Script程序，这些程序被称为动作。,每个动作都可以完成特定的任务，这样如果所需要的功能在这些动作中，就不必编写JavaScript程序了。另外Dreamweaver使用了开放结构，即任何人都可以开发出外挂插件。,9.3.1 “行为”的本质,行为是一系列使用JavaScript程序预定义的页面特效工具，是JavaScript在Dreamweaver中内置的程序库。使用程序库中的脚本或程序，通常鉴于以下两种目的：,（1）通过与服务器的交互执行复杂的数据处理，这通常需要执行服务器端的脚本或程序。 （2）实现简单页面中的交互控制，这就要使用客户端的脚本或程序。,Dreamweaver既有客户端的“
5、行为”，也有服务器端的“行为”，但是由于本书面向的是网页设计人员，而非后台的程序开发人员，因此本书重点介绍客户端的“行为”功能，在后面再简要介绍服务器端行为。 通过行为，可以为页面制作出各种各样的动态交互效果，如交换图像、弹出信息和拖动层等效果。,9.3.2 “行为”的构成,一般来说，一个“行为”由一个“事件”和一个“动作”所组成。 1动作 “动作”通常是一段JavaScript程序，利用这段程序可以完成相应的任务，比如弹出信息、播放声音和检查浏览器等。,2事件,“事件”通常由浏览器所定义，它可以被附加到各种页面元素对象上，也可以被附加到HTML标签中，比如附加到“”标签。,3事件和动作的组合
6、,将事件和动作结合起来，就构成了“行为”。,9.4 弹 出 消 息,有时希望访问者一进入首页就看到一些最新消息，可以弹出一个消息框，或显示一些文本，如图9-5所示。,图9-5 IE中弹出的消息框,图9-6 设定弹出的消息框中的文本,图9-7 加入动作后的“行为”面板,图9-8 IE中弹出的消息框,9.5 转到URL,这个行为可以使浏览器装载新页面，而不必等访问者单击了链接时才跳转。例如当网站更换了地址，就可以把原地址的首页制作成如图9-9所示的样子，当访问者浏览此页面时就会从这个页面跳转到新地址。如果访问者用的浏览器不支持这项功能，就可以根据提示单击链接，手动进入新地址。目前绝大多数实际用户都
7、使用支持该功能的浏览器，都可以实现自动跳转。,图9-9 自动跳转到其他地址,图9-10 设定跳转到的目标URL,图9-11 “行为”面板,9.6 实践与练习：打开浏览器窗口,很多网站为了吸引用户的注意，常常在打开首页的同时弹出一个浏览器窗口，用于显示通知信息和广告信息等。根据设计的不同需要，这些窗口的大小和形态各异。,这种效果通过Dreamweaver的“行为”功能十分容易实现，它用到的是“打开浏览器窗口”行为。使用该行为，可以自定义打开文档的窗口形式，比如自定义窗口的尺寸大小，自定义窗口是否具有菜单栏、标准工具栏和地址栏，自定义是否允许用户调整窗口大小等。,图9-12 “打开浏览器窗口”对话
8、框,9.7 实践与：在状态栏显示消息,这个动作与后面的“弹出消息”类似，不同的是如果用消息框显示文本，访问者必须单击消息框中的按钮，才能继续浏览；而在状态栏显示文本不会影响访问者的浏览，因此通常用onMouseOver事件与此动作配合。在状态栏显示消息的实例的制作方法如下。,图9-13 设定状态栏消息的文本,图9-14 加入动作后的“行为”面板,9.8 实践与练习：交换图像与恢复交换图像,图9-16所示是网页通常的显示效果，中间的小鸟图片色调很淡，当鼠标指针移动到小鸟图片的范围内时，图片变清晰，如图9-17所示，这个效果可以经常在网页中见到。,图9-16 交互前的页面显示,图9-17 交互后的
9、页面显示,图9-18 插入图像,图9-19 图像“属性”面板,图9-20 “行为”菜单,图9-21 “交换图像”对话框,图9-22 添加“交换图像”和 “恢复交换图像”行为,9.9 实践与练习：调用JavaScript,使用“调用JavaScript”行为，可以为文档或者文档中的元素对象添加一个JavaScript程序段，当特定事件发生时，该JavaScript程序段将会得到执行。调用JavaScript实例的制作方法如下。,图9-24 “调用JavaScript”对话框,图9-25 “行为”面板,图9-26 双击页面文本,9.10 实践与练习：图层拖动,层作为一种页面元素对象的定位工具，与表
10、格相比具有更大的灵活性，它不仅能够在编辑状态下随意移动和调整位置，使层内被控制的对象能够在页面的任一坐标位置放置，而且还能够在页面被浏览器加载执行后，被鼠标随意地拖动。当然，这不是仅用层就能够完成的，还需借助于行为。使用层的这种特性，可以制作出很多五彩缤纷的效果，比如拼图游戏、猜谜游戏和挑选物件游戏等。,图9-27 拼图游戏,图9-28 插入并设置图层,图9-29 在层中插入表格,图9-30 设置表格,图9-31 在图层中插入图片,图9-32 “拖动层”对话框,图9-33 确定放下目标的左坐标、上坐标及靠齐距离,图9-34 “高级”选项卡,图9-35 “行为”面板,图9-36 拼图效果,小 结,网页要吸引访问者的目光，“动”起来是最有效的手段。使网页动起来有很多种方法，本章介绍的使用Flash动画和使用行为就是其中非常重要且非常实用的两种方法。学习本章最重要的是理解“行为”的基本原理，也就是“事件 + 动作 = 行为”。在此基础上，再了解各种事件和动作的含义，并掌握它们的使用方法。,
