第10章使用行为制作网课件

《第10章使用行为制作网课件》由会员分享，可在线阅读，更多相关《第10章使用行为制作网课件（38页珍藏版）》请在装配图网上搜索。

1、网页设计与制作案例教程（第2版）http:/第第10章章 使用行为制作网页特效使用行为制作网页特效网页设计与制作案例教程（第2版）Dreamweaver行为是一段Javascript代码，当某个事件触发它时，将执行一个动作，如打开浏览器窗口或显示页面元素。使用Dreamweaver内置的行为，不需要编写代码，就可以实现复杂的网页特效。网页设计与制作案例教程（第2版）本章学习内容o 10.1 学习任务：认识行为o 10.2 案例1 制作网页加载时弹出公告页o 10.3 案例2利用JavaScript实现加载网页时弹出消息框o 10.4 案例3 使用行为设置图像特效o 10.5 案例4 使用行为设

2、置文本o 10.6 案例5 使用行为设置跳转菜单效果o 10.7 案例6 制作网页拼图游戏网页设计与制作案例教程（第2版）10.1 学习任务：认识行为学习任务：认识行为行为是Dreamweaver CS5中一个非常强大的工具。使用行为，编程人员不用编写Javascript代码便可实现多种动态网页特效。Dreamweaver CS5提供了很多行为，这些行为放在其内部行为库中。o 本节学习任务本节学习任务认识行为，了解行为的相关概念以及属性、事件、方法的含义；掌握行为面板的基本操作。网页设计与制作案例教程（第2版）10.1.1 行为概述行为概述行为是对象为响应某一事件而采取的动作，它由对象、事件和

3、动作组成。对象是产生行为的主体。很多网页元素都可以成为对象，如图片、文字、多媒体文件等。此外，网页本身有时也可作为对象。网页设计与制作案例教程（第2版）10.1.1 行为概述行为概述事件是触发动态效果的原因，它可以被附加到各种页面元素上，也可以被附加到HTML标记中。一个事件总是针对页面元素或标记而言的，例如将鼠标指针移到图片上、把鼠标指针放在图片之外和单击鼠标左键，是与鼠标有关的三个最常见的事件(onMouseOver、onMouseOut、onClick)。不同浏览器支持的事件类型和数量是不一样的，通常高版本的浏览器支持更多的事件。动作是指最终需完成的动态效果，如交换图像、弹出信息、打开浏

4、览器窗口、播放声音等都是动作。动作通常是一段JavaScript代码。在Dreamweaver CS5中使用内置行为时，系统会自动向页面中添加JavaScript代码，用户完全不必自己编写。网页设计与制作案例教程（第2版）10.1.2 “标签检查器标签检查器”面板面板在Dreamweaver CS5中，对行为的添加和管理主要通过”标签检查器”面板完成，在菜单栏中选择“窗口行为”命令或按组合键，可以打开”标签检查器”面板，如图10-1所示。网页设计与制作案例教程（第2版）10.1.3 事件事件用户与网页交互时产生的操作，称为事件。事件可以由用户引发，也可能是页面发生改变，甚至还有看不见的事件（如

5、Ajax的交互进度改变）。绝大部分事都由用户的动作所引发，如：用户单击鼠标触发onClick事件，若鼠标移动到目标时，触发onMouseOver事件等等。在Javascript中，事件往往与事件处理程序配套使用。每个浏览器都提供一组事件，这些事件可以与”标签检查器”面板的“动作”(+)弹出菜单中列出的动作相关联。当网页的访问者与页面进行交互时（例如，单击某个图像），浏览器会生成事件；这些事件可用于调用执行动作的 JavaScript 函数。Dreamweaver 提供多个可通过这些事件触发的常用动作。网页设计与制作案例教程（第2版）10.1.4 Dreamweaver CS5的标准行为针对In

6、ternet Explorer4.0或更高版本浏览器。在“标签检查器”面板中，单击【添加行为】按钮，可以展开行为菜单，如图10-2所示。网页设计与制作案例教程（第2版）10.2 案例1 制作网页加载时弹出公告页o 学习目标 使用Dreamwear的“打开浏览器窗口”行为制作网页加载时弹出公告页。o 知识要点 创建行为的步骤，“打开浏览器窗口”行为。当加载网页时，弹出公告页，如图10-3所示。网页设计与制作案例教程（第2版）o 案例小结 在Dreamweaver CS5中，内置了丰富的行为。行为的设置是通过”标签检查器”面板完成的。添加行为的步骤为：1.创建或选择要触发行为的页面元素；2.选择要

7、应用的行为，并设置其参数；3.指定触发该行为的事件。4.通过学习设置“打开浏览器窗口”行为的具体步骤，掌握了在Dreamweaver中添加行为的方法。网页设计与制作案例教程（第2版）10.3 案例2 利用JavaScript实现加载网页时弹出消息框o 学习目标 为网页调用JavaScript，当加载网页时，弹出对话框，提示用户当前正访问的网站。o 知识要点 了解JavaScript基本概念、在网页中引用JavaScript脚本的两种方法，掌握通过“标签检查器”面板调用JavaScript脚本的步骤。在浏览器中打开网页时，弹出消息框，由浏览者单击【确定】后继续浏览网站。效果如图10-7所示。网页

8、设计与制作案例教程（第2版）请在Dreamweaver中完成案例的制作。网页设计与制作案例教程（第2版）10.3.1 认识JavaScriptDreamweaver CS5内置了丰富的行为。行为是某些事件触发的动作，而动作则是Dreamweaver CS5库中的 JavaScript 代码或用户自定义的代码。JavaScript是一种由Netscape的LiveScript发展而来的面向对象的客户端脚本语言，主要目的是为了解决服务器端编程语言如Perl速度过慢的问题，以便为客户提供更加流畅的浏览体验。JavaScript的正式名称是“ECMAScript”，由 ECMA（European Co

9、mputer Manufacturers Association，欧洲电脑厂商协会）组织发展和维护。ECMA-262 是正式的 JavaScript 标准。这个标准基于 JavaScript(Netscape)和 JScript(Microsoft)，JSript是微软为了取得技术优势，推出的脚本语言。目前JavaScript的最新版本为2.0。网页设计与制作案例教程（第2版）JavaScript在网页中有两种简单的调用方法，一种是直接将JavaScript脚本语言嵌入到网页中，另一种是引用外部JavaScript文件。网页设计与制作案例教程（第2版）1直接嵌入HTML文档这是最常用的方法，大

10、部分含有JavaScript的网页都采用这种方法，打开网页文件“01.html”，可以查看代码如下所示：document.write(hello world!);Javascript网页设计与制作案例教程（第2版）2引用方式如果已经存在一个Javascript源文件（以js为扩展名），则可以在网页中引用它，以提高代码的利用率。其格式如下：其中的url就是程序文件的地址。同样的，该语句可以放在HTML文档头部或主体的任何部分。如果要实现“直接插入方式”中所举例子的效果，可以首先创建一个Javascript源代码文件“script.js”，其内容如下：document.write(hello wo

11、rld!);在网页“02.html”中，调用脚本文件“script.js”：网页设计与制作案例教程（第2版）10.3.2 使用行为调用JavaScript脚本“调用 JavaScript”行为在事件发生时执行自定义的函数或 JavaScript 代码行。可以自己编写 JavaScript，也可以使用 Web 上各种免费的 JavaScript 库中提供的代码。本实例采用的行为是Dreamweaver内部Javascript库的行为window.alert（），该行为用来弹出消息框。网页设计与制作案例教程（第2版）o操作步骤如下：1.在Dreamweaver中打开网页文件“10-3.html”，

12、如图10-9所示。2.选择“body”标签，单击“窗口行为”菜单命令，打开”标签检查器”面板，单击“添加行为”按钮，选择“调用Javascript”菜单命令，弹出“调用Javascript”对话框。在文本框中输入JavaScript脚本“window.alert(欢迎访问夏威夷风情网)”，如图10-10所示。3.单击【确定】按钮，在“标签检查器”面板添加了“调用Javascript”行为，设置触发事件为“onLoad”。如图10-11所示。4.保存文档，按F12键在浏览器中预览效果。网页设计与制作案例教程（第2版）网页设计与制作案例教程（第2版）o 案例小结 JavaScript是一种功能强大

13、的脚本语言。在网页内部嵌入JavaScript脚本语言，可以方便的实现JavaScript特效。本案例简要介绍了Javascript脚本语言和通过行为面板调用JavaScript脚本的方法。网页设计与制作案例教程（第2版）10.4 案例3 使用行为设置图像特效Dreamweaver CS5内置了“交换图像”、“预先载入图像”、等图像行为特效。“交换图像”行为通过更改标签的src属性将一个图像和另一个图像进行交换。使用此行为可创建“鼠标经过图像”的效果以及其他图像效果（包括一次交换多个图像）。“预先载入图像”行为可以将不会立即出现在网页上的图像载入到浏览器缓存中，这样可以防止由于网速导致图像下载

14、缓慢而带来的浏览延迟。o学习目标 在网页中插入一幅图像并设置ID，选中图像，添加“交换图像”行为并设置参数，当鼠标经过图像时切换图像。o 知识要点 图像“ID”属性的设置，为图像添加“交换图像”行为的方法和参数设置。网页设计与制作案例教程（第2版）请在Dreamweaver中完成案例的制作。网页设计与制作案例教程（第2版）10.5 案例4 使用行为设置文本通过Dreamweaver内置的“设置文本”行为可以为网页的状态栏、容器、文本域、框架等元素要显示的文字。“设置状态栏文本”行为可在浏览器窗口左下角处的状态栏中显示文本消息。例如，可以使用此行为在状态栏中说明链接的目标，而不是显示默认的URL

15、。“设置容器的文本”行为将页面上现有容器的内容和格式替换为指定的内容。“设置文本域文字”行为可用指定的内容替换表单文本域的内容。“设置框架文本”行为可用来动态设置框架的文本，用指定的内容替换框架的内容和格式，该内容可以包含任何有效的 HTML代码。使用此行为可在框架中动态显示信息。网页设计与制作案例教程（第2版）o 学习目标 为网页添加“设置状态栏文本”行为，当浏览网页时在状态栏显示相应信息；为AP Div添加“设置容器的文本”行为，当鼠标经过时，用指定内容替换AP Div中的图像。o 知识要点 为网页添加“设置状态栏文本”行为、为AP Div添加“设置容器行为”。请在Dreamweaver中

16、完成案例的制作。网页设计与制作案例教程（第2版）o 案例小结 本节主要介绍通过Dreamweaver内置的“设置文本”行为为网页设置所要显示的内容。为网页元素设置文字的重点在于HTML标签和JavaScript脚本语言的使用。网页设计与制作案例教程（第2版）10.6 案例5 使用行为设置跳转菜单效果使用Dreamweaver内置的行为可以创建跳转菜单。跳转菜单是由下拉式菜单组成的超链接组，使用跳转菜单可以创建多个网页的链接，实现向多个目标网页的跳转。o 学习目标 使用“跳转菜单”行为，为网页添加友情链接栏。o 知识要点 为网页添加“跳转菜单”行为。网页效果如图10-24所示。网页设计与制作案例

17、教程（第2版）请在Dreamweaver中完成案例的制作。网页设计与制作案例教程（第2版）o 案例小结 使用“跳转菜单”行为，可以快速设置超链接区域，并且节省空间，是网页更加整洁。“跳转菜单”行为是表单的一种。网页设计与制作案例教程（第2版）10.7 案例6 制作网页拼图游戏o 学习目标 使用Fireworks软件切割图片，使用“拖动AP元素”行为制作网页拼图游戏。o 知识要点 使用Fireworks软件切割图片；AP Div元素的基本操作；“拖动AP元素”行为。使用“拖动AP元素”行为创建的网页拼图游戏效果如图10-30所示。请在Dreamweaver中完成案例的制作。网页设计与制作案例教程

18、（第2版）网页设计与制作案例教程（第2版）o 案例小结 使用“拖动AP 元素”行为制作拼图游戏。使用Dreamweaver的内置行为，可以方便的制作网页特效。网页设计与制作案例教程（第2版）10.8 实训o 本节重点练习使用Dreamweaver的“标签选择器”面板创建行为的基本操作。网页设计与制作案例教程（第2版）10.8.1 使用行为创建图像收缩特效o1实训目的掌握”标签检查器”面板及行为的基本操作掌握使用“效果”行为设置图像收缩特效的方法o2实训要求及网页设计效果使用”标签检查器”面板中的“效果”行为为图像设定收缩效果。首先在文档中插入一幅图像，然后单击”标签检查器”面板中的 按钮，选择

19、“效果增大/收缩”，为该图像设置“增大/收缩”行为。在“增大/收缩”对话框中的设置参考如图10-37所示，设置后的”标签检查器”面板如图10-38所示。鼠标经过前的图像和鼠标经过后的图像如图10-39和图10-40所示。网页设计与制作案例教程（第2版）网页设计与制作案例教程（第2版）10.8.2 设置变换图像的导航栏o 1实训目的掌握”标签检查器”面板及行为的基本操作掌握使用“交换图像”行为设置导航栏图像的方法o 2实训要求及网页设计效果导航栏是网页重要的组成部分。变换图像的导航栏是网页常用的导航特效。当鼠标移动到导航按钮时，变换图像，当鼠标移开时，恢复原图像。网页设计与制作案例教程（第2版）o 操作提示：在Dreamweaver中打开网页“temp.html”，为导航栏图像设置ID，依次为nav1nav6；选择导航栏图像，单击“窗口行为”菜单命令，打开“标签选择器”面板，单击面板中的 按钮，在弹出的菜单中选择“交换图像”行为。鼠标经过导航栏前后的效果分别如图10-41和10-42所示。网页设计与制作案例教程（第2版）