第10章 使用行为制作网页特效

《网页设计与制作案例教程》（第2版）章使用行为制作网页特效《网页设计与制作案例教程》（第2版）Dreamweaver行为是一段Javascript代码，当某个事件触发它时，将执行一个动作，如打开浏览器窗口或显示页面元素。使用Dreamweaver内置的行为，不需要编写代码，就可以实现复杂的网页特效。《网页设计与制作案例教程》（第2版）本章学习内容10.1学习任务：认识行为10.2案例1制作网页加载时弹出公告页10.3案例2利用JavaScript实现加载网页时弹出消息框10.4案例3使用行为设置图像特效10.5案例4使用行为设置文本10.6案例5使用行为设置跳转菜单效果10.7案例6制作网页拼图游戏《网页设计与制作案例教程》（第2版）10.1学习任务：认识行为行为是DreamweaverCS5中一个非常强大的工具。使用行为，编程人员不用编写Javascript代码便可实现多种动态网页特效。DreamweaverCS5提供了很多行为，这些行为放在其内部行为库中。本节学习任务认识行为，了解行为的相关概念以及属性、事件、方法的含义；掌握行为面板的基本操作。《网页设计与制作案例教程》（第2版）10.1.1行为概述行为是对象为响应某一事件而采取的动作，它由对象、事件和动作组成。对象是产生行为的主体。很多网页元素都可以成为对象，如图片、文字、多媒体文件等。此外，网页本身有时也可作为对象。《网页设计与制作案例教程》（第2版）10.1.1行为概述事件是触发动态效果的原因，它可以被附加到各种页面元素上，也可以被附加到HTML标记中。一个事件总是针对页面元素或标记而言的，例如将鼠标指针移到图片上、把鼠标指针放在图片之外和单击鼠标左键，是与鼠标有关的三个最常见的事件(onMouseOver、onMouseOut、onClick)。不同浏览器支持的事件类型和数量是不一样的，通常高版本的浏览器支持更多的事件。动作是指最终需完成的动态效果，如交换图像、弹出信息、打开浏览器窗口、播放声音等都是动作。动作通常是一段JavaScript代码。在DreamweaverCS5中使用内置行为时，系统会自动向页面中添加JavaScript代码，用户完全不必自己编写。《网页设计与制作案例教程》（第2版）10.1.2“标签检查器”面板在DreamweaverCS5中，对行为的添加和管理主要通过”标签检查器”面板完成，在菜单栏中选择“窗口→行为”命令或按Shift+F4组合键，可以打开”标签检查器”面板，如图10-1所示。《网页设计与制作案例教程》（第2版）10.1.3事件用户与网页交互时产生的操作，称为事件。事件可以由用户引发，也可能是页面发生改变，甚至还有看不见的事件（如Ajax的交互进度改变）。绝大部分事都由用户的动作所引发，如：用户单击鼠标触发onClick事件，若鼠标移动到目标时，触发onMouseOver事件等等。在Javascript中，事件往往与事件处理程序配套使用。每个浏览器都提供一组事件，这些事件可以与”标签检查器”面板的“动作”(+)弹出菜单中列出的动作相关联。当网页的访问者与页面进行交互时（例如，单击某个图像），浏览器会生成事件；这些事件可用于调用执行动作的JavaScript函数。Dreamweaver提供多个可通过这些事件触发的常用动作。《网页设计与制作案例教程》（第2版）10.1.4DreamweaverCS5的标准行为针对InternetExplorer4.0或更高版本浏览器。在“标签检查器”面板中，单击【添加行为】按钮，可以展开行为菜单，如图10-2所示。《网页设计与制作案例教程》（第2版）10.2案例1制作网页加载时弹出公告页学习目标使用Dreamwear的“打开浏览器窗口”行为制作网页加载时弹出公告页。知识要点创建行为的步骤，“打开浏览器窗口”行为。当加载网页时，弹出公告页，如图10-3所示。《网页设计与制作案例教程》（第2版）案例小结在DreamweaverCS5中，内置了丰富的行为。行为的设置是通过”标签检查器”面板完成的。添加行为的步骤为：1.创建或选择要触发行为的页面元素；2.选择要应用的行为，并设置其参数；3.指定触发该行为的事件。4.通过学习设置“打开浏览器窗口”行为的具体步骤，掌握了在Dreamweaver中添加行为的方法。《网页设计与制作案例教程》（第2版）10.3案例2利用JavaScript实现加载网页时弹出消息框学习目标为网页调用JavaScript，当加载网页时，弹出对话框，提示用户当前正访问的网站。知识要点了解JavaScript基本概念、在网页中引用JavaScript脚本的两种方法，掌握通过“标签检查器”面板调用JavaScript脚本的步骤。在浏览器中打开网页时，弹出消息框，由浏览者单击【确定】后继续浏览网站。效果如图10-7所示。《网页设计与制作案例教程》（第2版）请在Dreamweaver中完成案例的制作。《网页设计与制作案例教程》（第2版）10.3.1认识JavaScriptDreamweaverCS5内置了丰富的行为。行为是某些事件触发的动作，而动作则是DreamweaverCS5库中的JavaScript代码或用户自定义的代码。JavaScript是一种由Netscape的LiveScript发展而来的面向对象的客户端脚本语言，主要目的是为了解决服务器端编程语言如Perl速度过慢的问题，以便为客户提供更加流畅的浏览体验。JavaScript的正式名称是“ECMAScript”，由ECMA（EuropeanComputerManufacturersAssociation，欧洲电脑厂商协会）组织发展和维护。ECMA-262是正式的JavaScript标准。这个标准基于JavaScript(Netscape)和JScript(Microsoft)，JSript是微软为了取得技术优势，推出的脚本语言。目前JavaScript的最新版本为2.0。《网页设计与制作案例教程》（第2版）JavaScript在网页中有两种简单的调用方法，一种是直接将JavaScript脚本语言嵌入到网页中，另一种是引用外部JavaScript文件。《网页设计与制作案例教程》（第2版）1．直接嵌入HTML文档这是最常用的方法，大部分含有JavaScript的网页都采用这种方法，打开网页文件“01.html”，可以查看代码如下所示：…scripttype=“text/javascript”document.write(helloworld!);/scriptJavascript………《网页设计与制作案例教程》（第2版）2．引用方式如果已经存在一个Javascript源文件（以js为扩展名），则可以在网页中引用它，以提高代码的利用率。其格式如下：scriptsrc＝urltype=text/javascript/script其中的url就是程序文件的地址。同样的，该语句可以放在HTML文档头部或主体的任何部分。如果要实现“直接插入方式”中所举例子的效果，可以首先创建一个Javascript源代码文件“script.js”，其内容如下：document.write(helloworld!);在网页“02.html”中，调用脚本文件“script.js”：scriptsrc＝script.jstype=text/javascript/script《网页设计与制作案例教程》（第2版）10.3.2使用行为调用JavaScript脚本“调用JavaScript”行为在事件发生时执行自定义的函数或JavaScript代码行。可以自己编写JavaScript，也可以使用Web上各种免费的JavaScript库中提供的代码。本实例采用的行为是Dreamweaver内部Javascript库的行为window.alert（），该行为用来弹出消息框。《网页设计与制作案例教程》（第2版）操作步骤如下：1.在Dreamweaver中打开网页文件“10-3.html”，如图10-9所示。2.选择“body”标签，单击“窗口→行为”菜单命令，打开”标签检查器”面板，单击“添加行为”按钮，选择“调用Javascript”菜单命令，弹出“调用Javascript”对话框。在文本框中输入JavaScript脚本“window.alert(欢迎访问夏威夷风情网)”，如图10-10所示。3.单击【确定】按钮，在“标签检查器”面板添加了“调用Javascript”行为，设置触发事件为“onLoad”。如图10-11所示。4.保存文档，按〈F12〉键在浏览器中预览效果。《网页设计与制作案例教程》（第2版）《网页设计与制作案例教程》（第2版）案例小结JavaScript是一种功能强大的脚本语言。在网页内部嵌入JavaScript脚本语言，可以方便的实现JavaScript特效。本案例简要介绍了Javascript脚本语言和通过行为面板调用JavaScript脚本的方法。《网页设计与制作案例教程》（第2版）10.4案例3使用行为设置图像特效DreamweaverCS5内置了“交换图像”、“预先载入图像”、等图像行为特效。“交换图像”行为通过更改img标签的src属性将一个图像和另一个图像进行交换。使用此行为可创建“鼠标经过图像”的效果以及其他图像效果（包括一次交换多个图像）。“预先载入图像”行为可以将不会立即出现在网页上的图像载入到浏览器缓存中，这样可以防止由于网速导致图像下载缓慢而带来的浏览延迟。学习目标在网页中插入一幅图像并设置ID，选中图像，添加“交换图像”行为并设置参数，当鼠标经过图像时切换图像。知识要点图像“ID”属性的设置，为图像添加“交换图像”行为的方法和参数设置。《网页设计与制作案例教程》（第2版）请在Dreamweaver中完成案例的制作。《网页设计与制作案例教程》（第2版）10.5案例4使用行为设置文本通过Dreamweaver内置的“设置文本”行为可以为网页的状态栏、容器、文本域、框架等元素要显示的文字。“设置状态栏文本”行为可在浏览器窗口左下角处的状态栏中显示文本消息。例如，可以使用此行为在状态栏中说明链接的目标，而不是显示默认的URL。“设置容器的文本”行为将页面上现有容器的内容和格式替换为指定的内容。“设置文本域文字”行为可用指定的内容替换表单文本域的内容。“设置框架文本”行为可用来动态设置框架的文本，用指定的内容替换框架的内容和格式，该内容可以包含任何有效的HTML代码。使用此行为可在框架中动态显示信息。《网页设计与制作案例教程》（第2版）学习目标为网页添加“设置状态栏文本”行为，当浏览网页时在状态栏显示相应信息；为APDiv添加“设置容器的文本”行为，当鼠标经过时，用指定内容替换APDiv中的图像。知识要点为网页添加“设置状态栏文本”行为、为APDiv添加“设置容器行为”。请在Dreamweaver中完成案例的制作。《网页设计与制作案例教程》（第2版）案例小结本节主要介绍通过Dreamweaver内置的“设置文本”行为为网页设置所要显示的内容。为网页元素设置文字的重点在于HTML标签和JavaScript脚本语言的使用。《网页设计与制作案例教程》（第2版）10.6案例5使用行为设置跳转菜单效果使用Dreamweaver内置的行为可以创建跳转菜单。跳转菜单是由下拉式菜单组成的超链接组，使用跳转菜单可以创建多个网页的链接，实现向多个目标网页的跳转。学习目标使用“跳转菜单”行为，为网页添加友情链接栏。知识要点为网页添加“跳转菜单”行为。网页效果如图10-24所示。《网页设计与制作案例教程》（第2版）请在Dreamweaver中完成案例的制作。《网页设计与制作案例教程》（第2版）案例小结使用“跳转菜单”行为，可以快速设置超链接区域，并且节省空间，是网页更加整洁。“跳转菜单”行为是表单的