第 9 章交互页面

第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）一起实现在一个网页中链接多个对象，与网络客户进行交互，从而可以开发客户端的应用程序。

9.3.1 脚本语言入门 • 所有脚本程序都必须封装在一对特定的HTML标签之间，<Script>标签表示一个脚本程序的开始，</Script>则表示该脚本程序的结束，一个网页中可能有多个脚本程序。使用<Script>标签的语法结构是： • <Script language=” JavaScript”> • … • … • </Script> • 如果要在网页中用VBScript建立脚本程序，就应该将<Script>标签的language属性赋值为VBScript，语法结构是： • <Script language=” VBScript”> • … • … • </Script> • 另外，为了照顾广大的互联网用户，必须考虑那些使用了不支持客户脚本程序的旧版本浏览器用户。因为浏览器会忽略掉它不支持的任何HTML标签，所以脚本程序可能就会像纯文本那样显示。这是网页设计者所不想看到的，为了避免出现这样的情况，可以在HTML注释中封装脚本程序。 • <Script language=” JavaScript”> • <!- • … • … • --> • </Script>

9.3.2 课堂实例――编写一个简单的JavaScript程序 • 本节通过编写一个简单JavaScript程序制作一个带链接的水平滚动字幕效果，在网页中，这种效果一般用于广告宣传，非常醒目。 • 1．创建网页 • 2．编写JavaScript程序

9.3.3 课堂实例――使用“代码片断”面板 • 本节利用“代码片断”面板制作一个Javascript实例，为页面提供禁止用户使用鼠标右键的功能。通过这个实例可以学校到使用Dreamweaver 8【代码片段】面板的方法以及应事件调用Javascript的方法。 1．插入脚本标记 2．插入禁用右键的函数 3．调用Javascript函数

本章习题 • 上机练习

练习1 QQ虚拟试衣室 • 用“显示-隐藏层”行为制作一个仿QQ秀的虚拟试衣室实例，效果如图9-71所示。单击衣服图片可以给人物形象穿上衣服，双击衣服图片可以将衣服从人物形象上脱下。 • 在练习制作这个实例时，要把人物形象分成头、上身、下身3部分，并且放在3个不同的层中，另外穿上衣服的人物形象图片也要分别放在不同的层中。最后，分别定义衣服图片的行为，实现单击时显示层，双击时隐藏层的效果。图9-71 QQ虚拟试衣室

左右来回滚动的字幕 练习2 滚动字幕 • 利用层和时间轴制作一个文字左右滚动的字幕效果，如图9-72所示。在制作这个实例时，先把要滚动的文字放在一个层中，然后将层添加到时间轴面板，定义左右滚动的动画效果。图9-72 滚动字幕

练习3 利用JavaScript实现全屏显示网页窗口 • 利用JavaScript制作一个全屏显示网页窗口的实例，全屏显示的网页效果如图9-73所示。这个实例效果对应的JavaScript代码如下： <script>  winopen() </script> 这里提醒注意的是，这段JavaScript代码必须放在<body></body>之间。图9-73 全屏显示的网页

第 9 章交互页面