^第9章 交互页面.pptVIP

第9章 交互页面 在制作网页时，为了丰富网页内容，可以在网页中添加交互效果。这样制作出来的网页功能强大，可以提高网站的访问量。Dreamweaver提供了丰富的交互功能，可以用来制作互动页面。 本章介绍网页交互的制作方法，主要内容有： 行为 时间轴动画 JavaScript 9.1 行为 Dreamweaver 8的行为是一个带有面向对象设计思想的工具。在Dreamweaver 8的行为面板中提供了20多种行为，利用这些行为，不需要书写一行代码，就可以在网页中实现丰富的交互效果，诸如为网页添加播放音乐、显示/隐藏层、弹出消息、打开新浏览窗口等功能，达到用户与页面的交互。 9.1.1 认识行为 所谓行为，就是一段预定义好的程序代码通过浏览器的解释并响应用户操作的过程。一个行为是由一个事件（Event）所触发的动作（Action ），因此把行为又称为事件的响应，是被用来动态响应用户操作、改变当前页面效果或是执行特定任务的一种方法。 1．附加行为 行为可以附加到整个文档，即附加到body标签，还可以附加到超级链接、图像、文字、表单元素或多种其它HTML元素中的任何一种。 2．动作 Dreamweaver 8内置了20多个动作，这些自带的动作是为在Netscape Navigator 4.0和更高版本以及Internet Explorer 4.0和更高版本中使用而编写的。 3．事件 事件决定了为某一页面元素所定义的动作在什么时候被执行，即在何时触发一个动作。需要注意的是不同版本的浏览器所支持的事件类型也不相同。 9.1.2课堂实例――网页加载时弹出公告页 打开网站页面时，同时会弹出写有通知事项或特殊信息的小窗口。利用Dreamweaver 8的“打开浏览器窗口”行为就可以制作这种弹出公告页效果。 1．制作用做公告页的网页文档 2．在另一个网页中添加“打开浏览器窗口”行为 3．设置事件 9.1.3 课堂实例――用行为控制Flash动画 使用“控制Shockwave或Flash”行为可以播放、停止、后退或转到Shockwave或Macromedia Flash SWF文件中的帧。通过这个行为可以在网页中制作控制Flash影片的播放、停止、后退等效果。 1．设置影片名称 2．用行为控制Flash影片的播放 3．用行为控制Flash影片的停止 4．影片的后退 9.1.4 课堂实例――用行为设计弹出式菜单 访问网页时，鼠标指针移到导航条，会弹出一个弹出式菜单。这样既节省了页面的空间，又能让浏览者对每一级的导航一目了然。利用Dreamweaver 8的“显示弹出式菜单”行为，可以轻松地实现这个弹出式菜单效果。 本节利用“显示弹出式菜单”行为制作一个弹出式菜单。效果如图所示。 1．添加菜单项 2. 设置菜单外观和位置 9.2 时间轴动画 利用Dreamweaver 8提供的时间轴，可以制作多种动态和交互效果。使用时间轴，无须再使用ActiveX控件、插件或JavaApplet就可以创建生动的动画。 9.2.1 认识时间轴 动画的实现原理就是将画面连起来播放，产生运动的错觉。动画的基本单位就是一个画面，也叫做帧。而在动画中有些画面是关键的，可以影响整个动画的效果，这样的帧叫做关键帧。很多的画面按照时间先后顺序连起来就是动画。在Dreamweaver中，时间轴就是用来排列画面顺序的。 1．【时间轴】面板 选择【窗口】|【时间轴】命令即可打开【时间轴】面板。如图所示。 2．播放选项 9.2.2 课堂实例――制作时间轴动画 最常见的时间轴动画都是沿着一条轨迹移动层。本节就制作一个沿一条轨迹运动的图像的时间轴动画实例。 1．添加层到时间轴 2．制作层的水平运动 3．调整动画路径 4．延长动画长度 9.2.3 课堂实例――具有预览功能的电子相册 本节利用层、时间轴和行为相结合制作一个具有预览功能的电子相册实例。当单击“连续播放”时，图片连续循环播放，当单击“暂停播放”时，图片停留在当前图，当单击“从头播放”时图片从第一张开始循环播放，单击左侧的缩略图即能预览相应图片。 1．制作电子相册页面 2．插入层 3．将图片添加到时间轴 4．为文字添加行为 5．给缩略图添加行为动作 9.3 在网页中应用JavaScript JavaScript是目前在网页中广泛使用的脚本语言，它是Netscape公司利用Java的程序概念，将自己原有的Livescript重新进行设计后而产生的脚本语言。 JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，有了JavaScript，可使网页变得生动、活泼。使用JavaScript的目的是与HTML超文本标识语言、Java小程序（Java Applet）一起实现在一个网页中链接多个对象，与网络客