Embed Size (px)
Citation preview
第第1313章章 使用行为和使用行为和JavaScripJavaScrip 为网页增添活力为网页增添活力
教学内容：教学内容：行为是Dreamweaver中制作绚丽网 页的利器，它功能强大，颇受网页设计者的喜
爱。行为是一系列使用JavaScript程序预定义 的页面特效工具，是JavaScript在
Dreamweaver中内置的程序库。在Dreamweaver 中，利用行为可以为页面制作出各种各样的特 殊效果，如打开浏览器窗口、弹出信息、交换 图像等网页特殊效果。
1／30
第13章 课后练习
1. 填空题2. 操作题：(2)
2／30
学习目标学习目标 了解行为的概念 掌握行为中常见的动作和事件 掌握Dreamweaver内置行为的使用
3／30
教学目标和基本要求教学目标和基本要求__________________________________________________________________________________________________________________________________________________________________________________________________________________教学时间教学时间：：本章共分_______课时
教学方法教学方法案例教学
多媒体教学
理
论面授
教学素材教学素材课程范例文件：sample\第13章\练习文件：exercise\第13章\
4／30
13.1 13.1 行为的概念行为的概念
行为是用来动态响应用户操作、改变当前
页面效果或是执行特定任务的一种方法。行为 是由对象、事件和动作构成。
对象是产生行为的主体。网页中的很多元 素都可以成为对象，如整个HTML文档、插入 的图片、文字等。
事件是触发动态效果的条件。网页事件分 为不同的种类。有的与鼠标有关，有的与键盘 有关，如鼠标单击、按下键盘上的某个键。有 的事件还和网页相关，如网页下载完毕，网页 切换等。
5／30
13.2 13.2 行为的动作和事件行为的动作和事件
在Dreamweaver中，行为是事件和动作的 组合。事件是特定的时间或是用户在某时所发 出的指令后紧接着发生的，而动作是事件发生 后网页所要做出的反应。
6／30
13.2.113.2.1常见动作类型常见动作类型
所谓的动作就是设置交换图像、弹出信息 等特殊的JavaScript效果。在设定的事件发生
时运行动作。
13.2.213.2.2常见事件常见事件
事件就是选择在特定情况下发生选定行为动作
的功能。例如，如果运用了单击图片之后转移到特 定站点上的行为，这是因为事件被指定了onClick， 所以执行了在单击图片的一瞬间转移到其他站点的 这一动作。
7／30
13.3 13.3 使用使用DreamweaverDreamweaver内置行为内置行为使用行为提高了网站的交互性。在
Dreamweaver中插入行为，实际上是给网 页添加了一些JavaScript代码，这些代码
能实现动感网页效果
8／30
13.3.113.3.1小案例小案例————交换图像交换图像
交换图像就是当鼠标指针经过图像时，原图 像会变成另外一幅图像。一个交换图像其实是由 两幅图像组成的：原始图像（当页面显示时候的 图像）和交换图像（当鼠标指针经过原始图像时 显示的图像）。组成图像交换的两幅图像必须有 相同的尺寸；如果两幅图像的尺寸不同，
Dreamweaver会自动将第二幅图像尺寸调整成第 一幅同样大小。交换图像前的效果如左图所示， 交换后图像的效果如图右所示。
9／30
10／30
13.3.213.3.2小案例小案例————弹出提示信息弹出提示信息弹出信息显示一个带有指定信息的警告窗口，
因为该警告窗口只有一个【确定】按钮，所以使用 此动作可以提供信息，而不能为用户提供选择。
11／30
13.3.313.3.3小案例小案例————交换图像交换图像使用【打开浏览器窗口】动作在打开当前网
页的同时，还可以再打开一个新的窗口。同时还 可以编辑浏览窗口的大小、名称、状态栏菜单栏 等属性。
12／30
13.3.4 13.3.4 小案例小案例——转到转到URLURL
【转到URL】动作在当前窗口或指定的框架 中打开一个新页。此操作尤其适用于通过一次单 击更改两个或多个框架的内容。跳转前右图，跳 转后如左图。
13／30
14／30
13.3.513.3.5小案例小案例——预先载入图像预先载入图像
当一个网页包含很多图像，但有些图像在下载 时不能被同时下载，需要显示这些图像时，浏览器 再次向服务器请求指令继续下载图像，这样会给网 页的浏览造成一定程度的延迟。而使用【预先载入 图像】动作就可以把那些不显示出来的图像预先载 入浏览器的缓冲区内，这样就避免了在下载时出现 的延迟。
15／30
16／30
13.3.613.3.6小案例小案例——设置容器中的文本设置容器中的文本使用【设置容器中的文本】动作可以将指定
的内容替换网页上现有AP元素中的内容和格式设 置。
17／30
13.3.713.3.7小案例小案例——显示显示--隐藏元素隐藏元素顾名思义，【显示-隐藏元素】动作就是改
变一个或多个AP元素的可见性状态。【显示-隐 藏元素】动作显示、隐藏或恢复一个或多个AP
元素的默认可见性。
18／30
13.3.813.3.8检查插件检查插件【检查插件】动作用来检查访问者的计算机
中是否安装了特定的插件，从而决定将访问者带到 不同的页面。
19／30
13.3.913.3.9小案例小案例————检查表单检查表单
【检查表单】动作检查指定文本域的内容以 确保用户输入了正确的数据类型。使用onBlur事 件将此动作分别附加到各文本域，在用户填写表 单时对文本域进行检查；或使用onSubmit事件将 其附加到表单，在用户单击【提交】按钮时同时 对多个文本域进行检查。将此动作附加到表单防 止表单提交到服务器后任何指定的文本域包含无 效的数据。
20／30
21／30
13.3.1013.3.10小案例小案例————设置状态栏文本设置状态栏文本
【设置状态栏文本】动作在浏览器窗口 底部左侧的状态栏中显示消息。可以使用此 动作在状态栏中说明链接的目标而不是显示 与之关联的URL。
22／30
13.4 13.4 使用使用JavaScriptJavaScript
JavaScript是Internet上 流行的脚本 语言。它存在于全世界所有Web浏览器 中，能够增强用户与网站之间的交互。 可以使用自己编写JavaScript代码，或使 用网络上免费的JavaScript库中提供的代 码。
23／30
13.4.113.4.1小案例小案例————利用利用JavaScriptJavaScript函数实函数实 现打印功能现打印功能
下面制作调用JavaScript打印当前页面，制作时 先定义一个打印当前页函数printPage()，然后在
<body>中添加代码OnLoad="printPage()"，当打开 网页时调用打印当前页函数printPage()。利用
JavaScript函数实现打印功能。
24／30
25／30
13.4.213.4.2小案例小案例————利用利用JavaScriptJavaScript函数实函数实 现关闭网页功能现关闭网页功能
【调用JavaScript】动作允许使用【行 为】面板指定一个自定义功能，或当发生某
个事件时应该执行的一段JavaScript代码。可 以自己编写或者使用各种免费获取的
JavaScript代码。
26／30
27／30
13.4.313.4.3小案例小案例————利用利用JavaScriptJavaScript函数插函数插 件自动滚屏网页效果件自动滚屏网页效果
整个网页自动滚动适合用户浏览一篇长达数十 页的网页，免去了用户手动翻页的麻烦。
28／30
29／30
本本 章章 小小 结结本章中主要讲解了“行为”的基本概念以及
Dreamweaver内置的所有“行为”的操作方法。对 于“行为”本身，读者在使用时一定要注意确保合 理和恰当，并且一个网页中不要使用过多的“行
为”。只有这样，设计才能够得到事半功倍的效 果。
30／30
