Download presentation
Presentation is loading. Please wait.
1
第11章 行 为
2
本章导读 本章主要介绍了行为的相关知识：第一节首先介绍了行为的基本组成部分（事件和动作）；第二节介绍如何通过行为面板使用编辑行为；第三节介绍了Dreamweaver内置的行为以及其应用实例。
3
本章要点 事件和动作 使用行为 编辑行为事件 内置行为的应用实例
4
11.1 行为的概述 行为是Macromedia预置的JavaScript程序库，它是事件和动作的组合。事件是动作被触发的结果，而动作是用于完成特殊任务的预先编好的JavaScript代码，如打开浏览器，点击按钮等。
5
认识事件 事实上，事件是浏览器生成的消息，用于指示该页的浏览者执行了某种操作，例如，当浏览者将鼠标指针移到某个链接时，浏览器为该链接生成一个onMouseOver事件，然后浏览器查看是否存在为该链接生成事件时浏览器应该调用的JavaSript代码。不同的网页元素定义了不同的事件。
6
下面根据用途分类介绍Dreamweaver 8提供的常用的事件种类
有关窗口的事件 OnAbort在浏览器中停止了加载网页文档的操作时发生的事件 OnMove移动窗口或者帧时发生的事件 Onload选定的对象出现在浏览器上时发生的事件 OnResize访问者改变窗口大小时发生的事件OnUnload访问者退出网页文档时发生的事件
7
有关鼠标和键盘的事件 OnClick用鼠标单击选定元素的一瞬间发生的事件OnBlur鼠标指针移到窗口或帧外部，即在这种非激活状态下发生的事件
OnDragDrop拖动并放置选定元素的那一瞬间发生的事件 OnFocus鼠标指针移动到窗口或帧上，即激活之后发生的事件OnMouseOut鼠标指针经过选定元素之外时发生的事件OnMouseOver鼠标指针位于选定元素上方时发生的事件OnMouseUp单击鼠标右键，然后释放时发生的事件
8
OnScroll访问者在浏览器上移动滚动条的时候发生的事件OnKeyDown在键盘上按下任意键时发生的事件
OnKeyPress在键盘上按下并释放任意键时发生的事件 OnKeyUp在键盘上按下特定键并释放时发生的事件 OnMouseDown单击鼠标右键的一瞬间发生的事件 OnMouseMove鼠标指针经过选定元素上方时发生的事件
9
有关表单的事件 OnAfterUpdate更新表单文档的内容时发生的事件 OnBeforeUpdate改变表单文档的项目时发生的事件
OnChange访问者修改表单文件的初始值时发生的事件 OnReset将表单文件重设置为初始值时发生的事件 OnSubnit访问者传送表单文档时发生的事件OnSelect访问者选定文件字段中的内容时发生的事件
10
其他事件 OnError在加载文档的过程中，发生错误时发生的事件 OnFilterChange运用于选定元素的字段发生变化时发生的事件
Onfinish Marquee用功能来显示的内容结束时发生的事件 OnStart Marquee开始应用功能时发生的事件
11
动作类型 所谓动作就是设定更换图片、弹出警告信息框等特殊的JavaSript效果。动作在设定的事件发生时运行。
12
下面是Dreamweaver 8中默认提供的动作类型
调用JavaSript----发生指定事件时，调用特定的JavaSript函数 改变属性-----更改选定的客体属性 检查浏览器----根据访问者的浏览器显示合适的网页文档检查插件----确认打开网页时需要的插件的安装情况 控制Shockwave或Flash----控制Flash动画的效果 拖动层----设定在浏览器中可以自由移动的层 转到URL-----发生指定事件时，跳转到指定的网站或者网页 隐藏弹出式菜单------隐藏Dreamweaver中制作的弹出菜单 跳转菜单----制作可以一次设定多个链接的跳转菜单 跳转菜单开始-----在跳转菜单中选择要要跳转到的网站后，只有单击GO按钮时才会跳转到所链接的网站
13
打开浏览器窗口-----显示新的弹出窗口
播放声音-----发生指定事件时，播放链接的音乐 弹出信息-----发生指定事件时，显示弹出信息 预先载入图像-----为了在浏览器中快速显示图像，预先下载图像后再显示设置 导航栏图像----用图像制作构成菜单的导航条 设置框架文本-----在选定的框架中显示指定的内容 设置层文本----在选定的图层中显示指定的内容
14
设置状态栏文本-----在状态栏中显示指定的内容
设置文本域文本-----在文本域中显示指定的文字显示弹出式菜单-----在Dreamweaver中制作所需样式的弹出菜单 显示－隐藏层-----根据指定的条件，显示或隐藏特定的层 交换图像-----发生指定事件时，把选定的图像替换为其他图像 恢复交换图像-----应用“交换图像”后，显示原图像 检查表单-----检查表单文档的有效性
15
11.2 行为面板 在Dreamweaver 8中，用户可以通过使用【行为】面板来附加和编辑行为。选择菜单命令【窗口】行为】或者使用Shift＋F4快捷键即可打开【行为】控制面板
17
图中各代号的名称和功能如下： （1）显示设置事件按钮将显示当前元素已经附加到当前文档的事件
（2）显示所有事件按钮将显示当前元素所有可能事件，一般来说，浏览器的版本越高，可支持的事件就越多 （3）添加行为按钮单击该按钮将弹出一个活动菜单 （4）删除事件按钮用于在行为列表中删除所选的事件和动作 （5）增加事件值按钮用于在行为列表中向上移动所选的事件 （6）降低事件值按钮用于在行为列表中向下移动所选的事件
18
使用行为 要使用行为功能，首先要打开【行为】面板，选择网页中要添加行为的元素（如果选择行为元素，系统一般会默认为整个网页文档），然后单击【行为】面板中“添加行为”按钮，在弹出的动作菜单中选择要使用的行为即可。
19
选择下图2所示菜单中的“显示事件”选项，在弹出的下一级菜单中可以选择浏览器的版本。不同的浏览器版本对应可以使用的行为的项目，以及该项目中可以触发的事件的数目也不同，一般来说，版本越高，可以使用的功能就越多，但是相对的兼容性就越差。网页是要面向大多数浏览者的，所以作为一个设计者，必须考虑到浏览者之间可能存在的不同的上网条件，因此为了能够得到更好的兼容性，浏览器的版本不要设得太高。如下图3
20
图2：
21
图3：
22
编辑行为事件 在创建了行为以后，可以为行为选择一个合适的事件，或者直接删除动作。若要编辑事件，首先要选择一个有附加行为的对象，然后执行菜单栏中的【窗口》行为】命令，打开【行为】面板，在【行为】面板中进行操作。 若要编辑行为事件，可以单击“事件”按钮，然后单击下三角按钮，在弹出的下拉列表中选取“事件”，如图4所示。
23
图4
24
如果要编辑事件参数，可以双击事件后的参数，并在弹出的对话框中进行编辑后，单击“确定”按钮，如图5所示。
25
图5：
26
如果要删除某个事件，可以单击该事件后，在【行为】面板中单击【删除事件】按钮即可，如图6所示。
27
图6：
28
11.3 内置行为 在网页中选择某一个页面元素，即可通过【行为】面板添加行为，如果弹出的动画为灰色，说明当前的文档中不存在所需要的对象。对每一个行为所产生的动作，按要求进行相关设置，然后再进行调整，直至满意，下面结合实例说明主要行为的应用。
29
弹出信息 “弹出信息”动作显示一个带有读者指定消息的JavaScript警告，因为JavaScript警告只有一个“确定”按钮，所以使用此动作可以提供信息，而不能为浏览者提供选择，并且读者无法控制JavaScript警告的外观，它取决于浏览者的浏览器，具体操作步骤如下： （1）在Dreamweaver 8中打开要附加“弹出信息”动作的网页，并且将光标放入到页面中。 （2）单击行为面板中的添加按钮，并从弹出菜单中选择“弹出信息”，弹出“弹出信息”对话框，并填入要显示的信息，如图7所示。
30
图7：
31
（3）单击【确定】按钮完成设置。因为光标是在页面上，而不是在页面的对象上，因此行为附加的对象是整个文档，行为面板列表中会出现一项对整个文档附加的行为，事件可以设置为onLoad，表示载入网页时触发弹出消息框，如图8所示。 （4）保存网页并浏览，在网页打开的同时弹出的警告消息框，如图9所示。
32
图8：
33
图9：
34
打开浏览窗口 使用“打开浏览器窗口”动作可以在一个新的窗口中打开指定的URL，同时用户还可以指定新窗口的属性，包括大小、特性和名称。如果不指定新窗口的任何属性，在打开时它的大小和属性将与启动它的窗口相同，为新窗口指定的任何属性都将自动关闭其他所有未加指定的属性。下面结合实例介绍该行为的使用。 （1）选中要附加行为的对象，这里选择<body>元素，打开“行为”面板。 （2）单击“添加行为”按钮，并从弹出的菜单中选择命令“打开浏览器窗口”，即弹出如图10所示的对话框。
35
图10：
36
（3）单击“浏览”按钮选择一个文件，或者输入要显示的URL。
（4）在“窗口宽度”和“窗口高度”文本框中输入新窗口的宽度和高度值，单位是像素。 （5）在“属性”区域中可以设置新窗口是否显示相应的元素，选中该复选框则显示该元素，清除该复选框则不显示该元素。各复选框具体含义如下：
37
导航工具栏：包括“前进”和“后退”等按钮的工具栏；
地址工具栏：帮助用户输入地址或进行链接的工具栏； 状态栏：位于浏览器窗口底部的区域，根据操作的不同，在该区域显示相应的提示信息； 菜单条：在浏览器窗口上显示菜单的区域。如果要让用户能够从新窗口导航，应该选中此项，否则在新窗口中，用户只能关闭或最小化窗口； 需要时使用滚动条：指定如果内容超出可视区域是否显示滚动条，如果不选择此项，则不显示滚动条，如果“调整大小手柄”选项也关闭，则访问者将无法看到超出窗口原始大小以外的内容； 调整大小手柄：指定是否能够调整窗口的大小，如果未选定此项，则新窗口将无法改变大小，也无法拖动其边框改变大小； 窗口名称：指定新窗口的名称。如果想通过JavaScript使用链接指向新窗口或者控制新窗口，则应该对新窗口进行命名，此名称不能包含空格或特殊字符。
38
（6）单击“确定”按钮，完成设置，并使用默认事件“onLoad”触发该动作。
（7）保存后并浏览页面，可以看到打开本网页时，同时打开一个新的浏览器窗口，如图11所示。
39
图11：
40
播放声音 使用“播放声音”动作可以实现播放声音，例如当鼠标经过某个按钮时产生声音效果，或者在网页载入时播放音乐片段等，具体的操作步骤如下： （1）选中要附加行为的对象，这里选择<body>元素，打开行为面板。 （2）单击“添加行为”按钮，并从弹出的菜单中选择菜单命令“播放声音”，弹出如图12所示的“播放声音”对话框。
41
图12：
42
（3）单击“浏览”按钮，从本地磁盘中选择要播放的声音文件，或者在“播放声音”文本框中输入要播放的声音文件的路径和名称。
（4）单击“确定”按钮，完成设置，并使用默认事件“onLoad”触发该动作。 （5）保存后按F12浏览该网页，可以看到打开网页时，同时开始播放该音乐文件。
43
显示与隐藏层 使用“显示－隐藏层”动作可以显示、隐藏或恢复一个或多个层的默认可见性。这个动作在显示用户与网页之间的交互信息时非常有用。例如，当用户将鼠标移到一张图片时，可以触发显示一个层，此层用来描述该图片的相关信息。当鼠标离开该对象时再次隐藏该层，从而实现非常生动的动态网页效果，具体操作步骤如下： （1）选择菜单命令【插入】图像】，在文档中插入一张图片，如图13所示。
44
图13：
45
（2）选择菜单命令【插入》布局对象》层】，在文档中通过拖动来绘制一个层，并在层内输入文字“桂林山水甲天下！”，如图14所示。
46
图14：
47
（3）单击插入的图像，并打开【行为】面板。
（4）单击“添加行为”按钮，并从动作弹出菜单中选择“显示－隐藏层”，弹出如图15所示的对话框。
48
图15：
49
（5）在“命名的层”列表中选择要更改其可见性的层，这里选择“层Layer1”。
（6）单击“显示”按钮以显示该层；单击“隐藏”按钮以隐藏该层；单击“默认”按钮以恢复该层的默认可见性。这里单击“显示”按钮。 （7）单击“确定”按钮，完成设置，再检查默认事件是否为所需的事件，这里使用的是“onMouseOver”触发该动作。 （8）再次选中该图像，再添加一个“显示－隐藏层”的动作。但在“显示－隐藏层”对话框中单击“隐藏”按钮，将附加的该行为的事件改为“onMouseOut”，完成上述操作后，在“行为”面板中显示如图16所示。
50
图16：
51
（9）保存后按F12预览该页面，就能得到如图17的效果。
52
图17：
53
设置状态栏文本 使用“设置状态栏文本”动作可以在浏览器窗口底部左侧的状态栏中显示当前状态的提示信息。例如可以用该动作在状态栏中说明链接的目标，代替显示与之相关的URL。具体层操作步骤如下： （1）选择菜单命令【插入》超级链接】，弹出如图18所示的对话框。在“文本”文本框中输入文字“校园网”，在“链接”文本框中输入
54
图18：
55
（2）选中刚创建的链接对象，打开【行为】面板。
（3）单击“添加行为”按钮，并从动作弹出菜单中选择【设置文本》设置状态栏文本】命令，即弹出如图19的对话框。
56
图19：
57
（4）在“消息”文本框中输入状态栏要显示的文本，这里输入“链接到校园网”。
（5）单击“确定”按钮，即可完成设置，并使用默认的事件“onMouseOver”触发该动作。 （6）保存后按F12浏览该页面，可以看到当鼠标移到该链接上面时，在浏览器窗口的状态栏中显示“链接到校园网”，如图20所示。
58
图20：
59
转到URL 使用“转到URL”动作可以在当前窗口或指定的框架中打开一个新的网页，这个动作对于想单击一次便改变两个或者多个框架中的内容比较有效，具体的操作步骤如下： （1）创建如图21所示的框架页，并在左侧的框架中添加2个空链接，设置其文本分别是“链接一”和“链接二”。
61
（2）选中左侧边框中的“链接一”，并打开【行为】面板。
（3）单击“添加行为”按钮，并从弹出的动作菜单中选择“转到URL”，即弹出如图22所示的对话框。
62
图22：
63
（4）选择“打开在”列表中的“框架topFrame”，然后单击“浏览”按钮选择要打开的文档，或直接在“URL”文本框中输入该文档的路径和名称，这里设为top-1.htm。
（5）选择“打开在”列表中的“框架mainFrame”，然后单击“浏览”按钮选择要打开的文档，或直接在“URL”文本框中输入该文档的路径和名称，这里设为right-2.htm。 （6）单击“确定”按钮，完成设置，并使用默认事件“onClick”触发该动作。 （7）以同样的方法对左边框架中的“链接二”应用该动作，只是打开的文档分别是top-2.htm和right-23.htm。 （8）保存后按F12预览效果，分别点击链接一和链接二，如图23所示。
64
图23：
65
交换图像 “交换图像”动作可以通过更改img标签的src属性，将一个图像和另外一个图像进行交换。使用此动作可以创建按钮鼠标经过图像和其他图像效果，包括一次交换多个图像。需要注意的是，因为只有src属性受此动作的影响，所以需要换入一个与原图像具有相同大小的图像，否则，换入的图像显示时会被压缩或扩展，以使其适应原图像的尺寸，具体的操作步骤如下。 （1）准备两个具有相同尺寸的图像文件pic1和pic2，选择菜单命令【插入》图像】，在文档中插入图像pic1，并命名为changepic，作为原始图像。 （2）选中插入的图像，并打开【行为】面板。 （3）单击“添加行为”按钮，并从动作弹出菜单中选择“交换图像”，即弹出如图24所示的“交换图像”对话框。
66
图24：
67
（4）设置“交换图像”对话框，从“图像”列表中选择要设置替换图像的原始图像，这里选择“图像changepic”。
（5）单击“浏览”按钮，然后从磁盘上选择新的图像文件，或在“设定原始文档为”文本框中输入新图像的路径和文件名。 （6）选中“预先载入图像”复选框，用于在载入页面时将新图像载入到浏览器的高速缓存中，防止新图像载入时发生延迟。 （7）选中“鼠标滑开时恢复图像”复选框，则当鼠标离开图像时，图像自动地恢复为交换前的原始图像。 （8）单击【确定】按钮，完成设置，并使用默认的事件“onMouseOver”触发该动作。 （9）保存后按F12预览网页效果，当鼠标经过原图像时，效果如图25右侧所示。
68
图25：
69
检查插件 在网页中插入一些Dreamweaver技术制作的元素时，如果浏览者的浏览器没有安装相应的插件，是无法看到网页的完整效果的。使用Dreamweaver的检查插件功能，可以自动的检测浏览者的浏览器是否安装了对应的插件，如未安装可以转到该软件的下载页面，实现步骤如下： （1）选择需要检查插件的对象，在此选择“进入动画”这个文本，然后添加空链接【＃】。 （2）打开【行为】面板，单击“添加行为”按钮，从弹出的菜单中选择“检查插件”选项，弹出如图26所示的对话框。
70
图26：
71
对话框中各参数的设置如下： 插件：有2个单选按钮，“选择”和“输入”，只能任选其一，可以使用系统自带的插件或输入插件的名称。选择插件类型，本例选择【windows media player】； 如果有，转到URL：添加当前下载插件的URL地址，或单击浏览按钮选择本地地址，在本例中地址为： 否则，转到URL：添加备用的下载地址，或单击浏览按钮选择本地地址； 如果无法检测，则始终转到第一个URL：选中该复选框表示只使用第一个地址来作为插件的下载地址。 （3）完成设置的对话框如图27所示。
72
图27：
73
（4）单击【确定】按钮，然后在【行为】面板中设置事件为“onClick”。
（5）保存文档，在浏览器中查看效果，当单击对象时会自动跳转到插件的下载地址，如图28所示。
74
图28：
75
检查浏览器 不同的操作系统所使用的浏览器也各不相同，现在使用最多的是Windows状态下的Internet Explore和Netscape Navigator浏览器，但是这两种浏览器在支持HTML语言和DHTML语言方面没有形成统一，这样就导致了一些在Internet Explore中可以浏览的网页特效，而在Netscape Navigator中就无法显示出来。使用Dreamweaver 8自带的浏览器检查功能就可以解决这个问题，在页面载入时，使用JavaSript脚本自动地检测浏览器版本，并将页面转到适合浏览者浏览器的网页中，实现浏览器的检查，具体的操作步骤如下： （1）在文档中输入“检查浏览器”，并对此文本建立空链接【＃】。 （2）打开“行为”面板，单击“添加行为”按钮，从弹出的菜单中选择“检查浏览器”选项，弹出“检查浏览器”对话框，如图29所示。
76
图29：
77
（3）在两个浏览器后的文本框中输入当前的最低版本号4.0，并且设置浏览器转到的URL地址，如图11-29所示。
（4）单击“确定”按钮，在文档中就成功的设置了检查浏览器的行为。 （5）保存文档，在浏览器中浏览的效果如图30所示。
78
图30：
79
本 章 小 结 本章主要是介绍了网页中行为的应用，其中的重点包括基本的行为事件、如何创建行为等，行为面板实际上是一个非常强大的Javascript程序，通过使用行为面板，我们可以制作出交互性强而且动感十足的网页。
Similar presentations
