网页制作中的行为技术

第11章网页制作中的行为技术□本章知识点及学习目标本章重点介绍了DreamweaverMX2004自带的20种“行为”的定义和基本功能。行为就是由一段段JavaScript代码组成的，主要是为更好地控制其他网页中的元素而设置。行为的扩展是无限制的，只要掌握了JavaScript，就可以自己编写行为，也可以从DreamweaverMX2004的官方网站中获得。通过本章的学习，应该掌握以下内容：■行为的意义以及【行为】面板的使用方法■根据具体的行为设置相对应的事件■对所使用的事件进行修改本章内容概览11.1选用行为11.1.1使用行为面板11.1.2添加行为11.2标准事件11.3课堂小实例11.3.1调用JavaScript11.3.2改变属性11.3.3检查浏览器11.3.4检查插件11.3.5控制Shockwave或Flash11.3.6拖动层11.3.7转到URL11.3.8跳转菜单11.3.9跳转菜单开始11.3.10打开浏览器窗口11.3.11播放声音11.3.12弹出消息11.3.13预先载入图像11.3.14设置导航栏图像11.3.15设置文本11.3.16显示－隐藏层11.3.17显示弹出菜单11.3.18交换图像11.3.19恢复图像交换11.3.20检查表单11.4课后习题与解答11.1选用行为为了更好地理解行为的概念，下面分别解释与行为相关的三个重要的概念【对象】、【事件】和【动作】。【对象】是产生行为的主体，很多网页元素都可以成为对象，如图片、文字、多媒体文件等。此外，网页本身有时也可作为对象。【事件】是触发动态效果的原因，它可以被附加到各种页面元素上，也可以被附加到HTML标记中。一个事件总是针对页面元素或标记而言的，例如将鼠标指针移到图片上、把鼠标指针放在图片之外和单击鼠标左键，是与鼠标有关的三个最常见的事件(onMouseOver、onMouseOut、onClick)。不同的浏览器支持的事件种类和数量是不一样的，通常高版本的浏览器支持更多的事件。【动作】是指最终需完成的动态效果，如交换图像、弹出信息、打开浏览器窗口、播放声音等都是动作。动作通常是一段JavaScript代码。在DreamweaverMX2004中使用内置的行为时，系统会自动向页面中添加JavaScript代码，用户完全不必自己编写。将事件和动作组合起来就构成了行为。11.1.1使用行为面板在DreamweaverMX2004中，对行为的添加和控制主要通过【行为】面板来实现。具体操作步骤如下。1．选择【窗口】中的【行为】命令。2．打开【行为】面板，如图11-1所示。图11-1【行为】面板11.1.2添加行为添加行为的具体操作方法如下。在网页中选定一个对象，或者直接选中整个页面。1打开【行为】面板，单击面板上的【+】按钮，将弹出动作菜单，如图11-2所示。2．从弹出下拉菜单中选择一种动作，弹出相应的参数设置对话框，在其中进行设置后，单击【确定】按钮。图11-2添加行为11.2标准事件DreamweaverMX2004配备了一套得到流行浏览器承认的事件列表。单击【行为】面板上的【＋】按钮，选取【显示事件】菜单，打开级联菜单，可以看到在级联菜单中提供的10种不同浏览器的版本。11.3课堂小实例（标准动作）DreamweaverMX2004内置许多行为，每一种行为都可以实现一个动态效果，或用户与网页的交互行为。下面将分别讲述每个动作。11.3.1调用JavaScript“调用JavaScript”动作允许您使用“行为”面板指定当发生某个事件时应该执行的自定义函数或JavaScript代码行。（您可以自己编写JavaScript或使用Web上多个免费的JavaScript库中提供的代码。“调用JavaScript”动作若要使用“调用JavaScript”动作，请执行以下操作：1.选择一个对象并打开“行为”面板。2.单击加号(+)按钮并从“动作”弹出菜单中选择“调用JavaScript”。3.准确键入要执行的JavaScript，或键入函数的名称。例如，若要创建一个“后退”按钮，您可以键入if(history.length0){history.back()}。如果您已将代码封装在一个函数中，则只需键入该函数的名称（例如hogback()）。4.单击“确定”。5.检查默认事件是否是所需的事件。如果不是，请从弹出菜单中选择另一个事件。如果未列出所需的事件，则在“显示事件”弹出菜单中更改目标浏览器。11.3.2改变属性使用“改变属性”动作更改对象某个属性（例如层的背景颜色或表单的动作）的值。您可以更改的属性是由浏览器决定的；在InternetExplorer4.0中可以通过此行为更改的属性比InternetExplorer3.0或NetscapeNavigator3.0或4.0多得多。例如，您可以动态设置层的背景颜色。注意：只有在您非常熟悉HTML和JavaScript的情况下才使用此动作。使用“改变属性”动作若要使用“改变属性”动作，请执行以下操作：选择一个对象并打开“行为”面板。单击加号(+)按钮并从“动作”弹出菜单中选择“更改属性”。从“对象类型”弹出菜单中选择您要更改其属性的对象的类型。“命名对象”弹出菜单马上列出所有所选类型的命名对象。从“命名对象”弹出菜单中选择一个对象。从“属性”弹出菜单中选择一个属性，或在文本框中输入该属性的名称。若要查看每个浏览器中可以更改的属性，请从浏览器弹出菜单中选择不同的浏览器或浏览器版本。如果您正在键入属性名称，则一定要使用该属性的准确JavaScript名称（请记住JavaScript属性是区分大小写的）。在“新值”文本框中为该属性输入新值，然后单击“确定”。检查默认事件是否是所需的事件。（当该事件发生时，将执行动作并更改属性。如果不是，请从弹出菜单中选择另一个事件。如果未列出所需的事件，则在“显示事件”弹出菜单中更改目标浏览器。11.3.3检查浏览器使用“检查浏览器”动作可根据访问者不同类型和版本的浏览器将他们转到不同的页。例如，您可能想要将使用NetscapeNavigator4.0或更高版本浏览器的访问者转到一页，而将使用InternetExplorer4.0或更高版本的访问者转到另一页，并让使用任何其它类型浏览器的访问者留在当前页上。将此行为附加到几乎与任何浏览器都兼容的页（该页不使用任何其它JavaScript）的body标签将十分有用；这样，已关闭JavaScript功能的访问者在访问此页时仍可以看到内容。另一个办法是将此行为附加到一个空链接（例如ahref=javascript:;）并让该动作根据访问者浏览器的类型和版本确定链接的目标。11.3.4检查插件使用【检查插件】动作，可以检查访问者的浏览器中是否安装了指定的插件，通过这个检查，可以分别为安装插件和未安装插件的用户显示不同的页面。例如，可以检查用户是否安装有播放flash动画的插件，如果用户安装了该插件，就可以将带有flash动画对象的页面显现给该用户；相反则可以将一幅带有图像的页面显示给该访问者即可。检查插件1．在文档中选中文本【检查插件】，并为文本添加一个空链接。2．选择文本，打开【行为】面板。单击加号按钮，从【动作】弹出菜单中选择【检查插件】，出现【检查插件】对话框中设置具体的参数，如图所示。【检查插件】对话框11.3.5控制Shockwave或Flash使用【控制Shockwave或Flash】动作来播放、停止、倒放或转到MacromediaShockwave或MacromediaFlashSWF文件中的帧。在【行为】面板中单击＋按钮并从【动作】弹出菜单中选择【控制Shockwave或Flash】选项，出现【控制Shockwave或Flash】对话框，可以设置控制播放的动作。11.3.6拖动层【拖动层】动作允许访问者拖动层。使用此动作可创建拼板游戏、滑块控件和其他可移动的界面元素。在【行为】面板中打开【拖动层】对话框，在【层】选项的下拉列表中选择【层“Layer1”】，在【移动】选项的下拉列表中选择【不限制】选项，在【放下目标】选项中的【左】和【上】文本框中为拖放目标输入值，在【靠齐距离】文本框中输入一个值（以像素为单位），确定访问者必须放目标多近，才能将层靠齐到目标，如图所示。11.3.7转到URL【转到URL】动作在当前窗口或指定的框架中打开一个新页。此操作尤其适用于通过一次单击更改两个或多个框架的内容。在【行为】面板中单击按钮，在弹出的【动作】菜单中选择【转到URL】命令，打开【转到URL】对话框，如图所示。11.3.8跳转菜单选择菜单【插入】|【表单】|【跳转菜单】，可以在文档窗口中的当前位置插入跳转菜单对象。通过属性面板可以改变菜单项列表顺序或一个菜单项所链接的文件，也可以添加、删除菜单项，或给菜单项换名。但是要改变链接文件打开的位置，添加或改变菜单选择提示，必须使用【行为】面板。11.3.9跳转菜单开始【跳转菜单开始】动作与【跳转菜单】动作密切关联。【跳转菜单开始】允许将一个【转到】按钮和一个跳转菜单关联起来（在使用此动作之前，文档中必须已存在一个跳转菜单），单击【转到】按钮打开在该跳转菜单中选择的链接。通常情况下，并不是所有跳转菜单都需要一个【转到】按钮。从跳转菜单中选择一项通常会引起URL的载入，不需要用户做任何进一步的操作。但是如果访问者选择已在跳转菜单中选择的同一项，则不发生跳转。通常情况下这不会有多大关系，但是如果跳转菜单出现在一个框架中，而跳转菜单项链接到其他框架中的页，就需要使用【转到】按钮，以允许访问者重新选择已在跳转菜单中选择的项。11.3.10打开浏览器窗口使用【打开浏览器窗口】动作可在新窗口中打开一个URL。可以指定新窗口的属性，例如窗口大小、属性（是否可调整大小、是否有菜单栏等）以及名称。如果指定窗口无属性，则窗口将按启动窗口的属性大小打开。指定窗口的任何属性都将自动关闭所有其他属性。例如，如果设置窗口无属性，则它可能会以640×480像素打开一个导航工具栏、位置栏、状态栏和菜单栏。如果明确设置了窗口宽度为640，高度为480而没有设置其他属性，则窗口将以640×480像素打开，但是没有导航工具栏、位置栏、状态栏、菜单栏调整柄以及滚动条。11.3.11播放声音使用【播放声音】动作来播放声音。例如用户可能要在每次鼠标指针滑过某个链接时播放一段声音效果，或在页载入时播放音乐剪辑。11.3.12弹出消息【弹出消息】动作显示一个带有用户指定的消息的JavaScript警告。因为JavaScript警告只有一个【确定】按钮，所以使用此动作可以提供信息，而不能为用户提供选择。11.3.13预先载入图像【预先载入图像】动作将在浏览器缓存中载入不会立即出现在页上的图像，如那些将通过行为或JavaScript换入的图像。这样可防止当图像变换时由于下载速度慢而导致延迟。11.3.14设置导航栏图像【设置导航栏图像】的具体操作步骤如下。1．选中要设置为导航栏的图像，打开【行为】面板。2．单击【行为】面板上的按钮，在下拉菜单中选择【设置导航栏图像】，出现【设置导航栏图像】对话框，如图所示。11.3.15设置文本【设置文本】动作包括【设置层文本】、【设置文本域文本】、【设置框架文本】和【设置状态条文本】4个选项。这4个动作分别为层、文本域、框架和状态条对象添加文本信息。11.3.16显示－隐藏层【显示－隐藏层】动作显示、隐藏或恢复一个或多个层的默认可见性。此动作用于在用户与网页进行交互时显示信息。例如，当用户将鼠标指针滑过一个图像时，可以显示一个层给出有关的详细信息。11.3.17显示弹出菜单使用【显示弹出菜单】行为可创建或编辑Dreamweaver弹出菜单，或者打开并修改已插入Dreamweaver文档的Fireworks弹出菜单。可以通过在【显示弹