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