第12章 使用行为和Spry构件

行为是DreamweaverCS3中内置的脚本程序，能够为网页增添许多功能。Spry构件是DreamweaverCS3中预置的用户界面组件，能给用户带来耳目一新的视觉体验。本章将介绍行为和Spry构件的基本知识和使用方法。第12章使用行为和Spry构件学习目标了解行为的基本概念。掌握常用事件和动作。掌握Spry构件的应用方法。12.1认识行为基本概念添加行为12.1.1

基本概念认识行为，需要掌握以下几个基本概念。行为：事件和动作的组合，因此行为的基本元素有两个：事件和动作。事件：触发程序运行的原因，事件可附加到网页中的各种对象上，例如，当访问者将鼠标光标移到一个链接上时，将会产生一个“onMouseOver”（鼠标经过）事件。动作：事件触发后要实现的效果，如打开浏览器窗口等。对象：产生行为的主体，如文本、图像等，不同的事件为不同的对象所定义，例如，“onMouseOver”（鼠标经过）和“onClick”（单击）是与链接相关的事件，“onLoad”（载入）是与图像和文档相关的事件。12.1.2

添加行为那么在文档中如何添加行为呢？方法是，在文档中选择触发行为的对象，然后选择【窗口】/【行为】命令打开【行为】面板，在【行为】面板中单击按钮，在弹出的行为菜单中选择相应的动作，对弹出的对话框进行设置后就可以将其附加到当前选择的对象上，然后在【行为】面板中单击事件名右边的按钮，在弹出的下拉菜单中选择相应的触发行为的事件。12.2

事件事件决定了为某一页面元素所定义的动作在什么时候执行。需要注意的是不同版本的浏览器所支持的事件类型也不同。常用事件请参考教材。12.3动作弹出信息打开浏览器窗口调用JavaScript改变属性交换图像拖动AP元素Spry效果12.3.1弹出信息【弹出信息】行为将显示一个指定的JavaScript提示信息框。因为该提示信息框只有一个

按钮，所以使用这个动作只是提供给用户信息，而不需做出选择。同时，此行为也不能控制这个提示框的外观，其外观要取决于用户所用浏览器的属性。在文档中选择触发行为的对象，如图像，然后从行为菜单中选择【弹出信息】命令可打开【弹出信息】对话框，进行设置即可。12.3.1弹出信息在【行为】面板中选择【onMouseDown】事件，即鼠标按下时触发该事件。在浏览网页时，用户可以在预下载的图像上单击鼠标右键，在弹出的快捷菜单中选择【图片另存为】命令，从而将网页中的图像下载到自己的计算机中。而当添加了这个行为动作以后，当访问者单击鼠标右键时，就只能看到提示框，而看不到快捷菜单，这样就限制了用户使用鼠标右键来下载图片。12.3.2打开浏览器窗口使用【打开浏览器窗口】行为将打开一个新浏览器窗口来显示指定的网页文档。在文档中选择触发行为的对象，如图像，然后从行为菜单中选择【打开浏览器窗口】命令即可打开【打开浏览器窗口】对话框，根据需要进行设置即可。在【行为】面板中将事件设置为“onClick”。当预览网页时，单击小图将打开一个大图像的新窗口。12.3.3调用JavaScript【调用JavaScript】行为能够让设计者使用【行为】面板指定一个自定义功能，或者当一个事件发生时执行一段JavaScript代码。设计者可以自己编写JavaScript代码。在文档中选择触发行为的对象，如带有空链接的“关闭窗口”文本，然后从行为菜单中选择【调用JavaScript】命令即可打开【调用JavaScript】对话框，在文本框中输入JavaScript代码或函数名，如“window.close()”，如图12-7所示。在【行为】面板中确认触发事件为“onClick”。12.3.4改变属性【改变属性】行为用来改变网页元素的属性值，如文本的大小、字体，层的可见性，背景色，图片的来源以及表单的执行等。12.3.5交换图像【交换图像】行为可以将一个图像替换为另一个图像，这是通过改变图像的“src”属性来实现的。在前一节中可以通过为图像添加【改变属性】行为来改变图像的“src”属性，不过【交换图像】行为更加复杂一些，可以使用这个行为来创建翻转的按钮及其他图像效果（包括同时替换多个图像）。12.3.6拖动AP元素如果使用了【拖动AP元素】行为，就可以制作出能让浏览者任意拖动的对象。不过，在开始制作前，需要在页面中先添加APDiv，并在其中添加图像或文本。12.3.7Spry效果“Spry效果”是视觉增强功能，几乎可以将它们应用于使用JavaScript的HTML页面上的所有元素。设置该效果通常可以在一段时间内高亮显示信息、创建动画过渡或者以可视方式修改页面元素。可以将效果直接应用于HTML元素，而无需其他自定义标签。要使某个元素应用效果，该元素必须处于当前选定状态，或者必须具有一个Id。例如，如果要向当前未选定的Div标签应用高亮显示效果，该Div必须具有一个有效的Id值。如果该元素尚且没有有效的Id值，需要在HTML代码中添加一个。利用该效果可以修改元素的不透明度、缩放比例、位置和样式属性（如背景颜色），也可以组合两个或多个属性来创建有趣的视觉效果。

由于这些效果都基于Spry，因此，当用户单击应用了效果的对象时，只有对象会进行动态更新，不会刷新整个HTML页面。12.3.7Spry效果在【行为】面板的下拉菜单中选择【效果】命令，其子命令如图所示。12.4Spry构件Spry菜单栏Spry选项卡式面板Spry折叠式构件Spry可折叠面板12.4.1Spry菜单栏Spry菜单栏是一组可导航的菜单按钮，当将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。选择【插入记录】/【Spry】/【Spry菜单栏】命令，打开【Spry菜单栏】对话框进行参数设置。12.4.2Spry选项卡式面板Spry选项卡式面板构件是一组面板，用来将内容存储到紧凑空间中。用户可以通过单击要访问面板上的选项卡来隐藏或显示存储在选项卡式面板中的内容。当访问者单击不同的选项卡时，构件的面板会相应地打开。在给定时间内，选项卡式面板构件中只有一个内容面板处于打开状态。选择【插入记录】/【Spry】/【Spry选项卡式面板】命令，在页面中添加一个Spry选项卡式面板构件。12.4.3Spry折叠式构件折叠式构件是一组可折叠的面板，可以将大量内容存储在一个紧凑的空间中。站点浏览者可通过单击该面板上的选项卡来隐藏或显示存储在折叠构件中的内容。当浏览者单击不同的选项卡时，折叠构件的面板会相应地展开或收缩。在折叠式构件中，每次只能有一个内容面板处于打开且可见的状态。选择【插入记录】/【Spry】/【Spry折叠式】命令，在页面中添加一个Spry折叠式构件。12.4.3Spry折叠式构件单击列表框上方的+按钮再添加一个面板项。展开第1个折叠条，更改折叠条的标题名称及内容。12.4.4Spry可折叠面板可折叠面板构件是一个面板，可将内容存储到紧凑的空间中。用户单击构件的选项卡即可隐藏或显示存储在可折叠面板中的内容。