1、10.1 功能讲解10.2 范例解析导读、动态和消息 10.3 课堂实训园林景观 10.4 综合案例宁静的美 第10章 使用行为和Spry构件 10.1 功能讲解 10.1.1 关于行为 10.1.2【行为】面板 10.1.3 添加行为 10.1.4 常用行为 10.1.5 关于Spry布局构件 10.1.6 使用Spry布局构件 v行为是某个事件和事件触发的动作的组合，是用来动态响应用户操作、改变当前页面效果或是执行特定任务的一种方法。因此行为的基本元素有两个：事件和动作。事件是触发动作的原因，动作是事件触发后要实现的效果。10.1.1 关于行为v实际上事件是由浏览器生成的消息，它提示该页的
2、浏览者已执行了某种操作。v动作是一段预先编写的JavaScript代码，可用于执行诸如以下的任务：打开浏览器窗口、显示或隐藏AP元素、转到URL等。在将行为附加到某个页面元素后，当该元素的某个事件发生时，行为即会调用与这一事件关联的动作。v通过【行为】面板，用户可以方便地为对象添加行为，还可以修改以前设置过的行为参数。在Dreamweaver CS6中，行为的添加和管理主要通过【行为】面板来实现。选择菜单命令【窗口】/【行为】，即可打开【行为】面板。10.1.2【行为】面板 v在页面上选择一个对象，例如一个图像或一个链接。如果要将行为附加到整个文档，可在文档窗口左下角的标签选择器中单击选中标签
3、。v选择菜单命令【窗口】/【行为】，打开【行为】面板（如果【行为】面板已经打开，不需要再操作此步）。v单击+按钮并从下拉菜单中选择一个要添加的行为动作。v在对话框中为动作设置参数。v触发该动作的默认事件显示在【事件】列中。如果这不是所需要的触发事件，可从【事件】下拉列表中选择需要的事件。10.1.3 添加行为 v一、弹出信息。【弹出信息】行为显示一个包含指定消息的JavaScript提示框。在文档中选择要触发行为的对象，然后从行为菜单中选择【弹出信息】命令，在弹出的【弹出信息】对话框中进行参数设置。在【行为】面板中将事件设置为“onMouseDown”，即鼠标按下时触发该事件。10.1.4 常
4、用行为 v二、调用JavaScript。【调用JavaScript】行为能够在事件发生时执行自定义的函数或JavaScript代码行。在文档中选择要触发行为的对象，如带有空链接的“关闭窗口”文本，然后从行为菜单中选择【调用JavaScript】命令，弹出【调用JavaScript】对话框，在文本框中输入JavaScript代码。在【行为】面板中确认触发事件为“onClick”。v三、改变属性。选中Div标签并从【行为】菜单中选择【改变属性】命令，弹出【改变属性】对话框并设置参数，在【行为】面板中确认触发事件为“onMouseOver”，运用相同的方法再添加一个“onMouseOut”事件及相应
5、的动作。v四、交换图像。【交换图像】行为可以将一个图像替换为另一个图像，这是通过改变图像的“src”属性来实现的。虽然也可以通过为图像添加【改变属性】行为来改变图像的“src”属性，但是【交换图像】行为更加复杂一些，可以使用这个行为来创建翻转的按钮及其他图像效果（包括同时替换多个图像）。v五、恢复交换图像。【恢复交换图像】行为就是将交换后的图像恢复为它们以前的源文件。选中已添加【交换图像】行为的对象，然后在【行为】面板中单击+按钮，从弹出的【行为】下拉菜单中选择【恢复交换图像】命令，弹出【恢复交换图像】对话框，直接单击【确定】按钮即可。v六、打开浏览器窗口。使用【打开浏览器窗口】行为可在一个新
6、的窗口中打开页面。选中一个对象，然后在【行为】面板中单击+按钮，从弹出的【行为】下拉菜单中选择【打开浏览器窗口】命令，打开【打开浏览器窗口】对话框，根据需要进行设置即可。v七、Spry效果。“Spry效果”是视觉增强功能，几乎可以将它们应用于使用JavaScript的HTML页面上的所有元素。要使某个元素应用效果，该元素必须处于当前选定状态，或者必须具有一个ID名称。利用该效果可以修改元素的不透明度、缩放比例、位置和样式属性（如背景颜色），也可以组合两个或多个属性来创建有趣的视觉效果。由于这些效果都基于Spry，因此当用户单击应用了效果的对象时，只有对象会进行动态更新，不会刷新整个HTML页面
7、。在【行为】面板的下拉菜单中选择【效果】命令，其子命令如图所示。v八、转到URL。【转到URL】行为可在当前窗口或指定的框架中打开一个新页。此行为适用于通过一次单击更改两个或多个框架的内容。选中对象，并在【属性（HTML）】面板中为其添加空链接“#”。在【行为】面板中单击+按钮，从弹出的【行为】下拉菜单中选择【转到URL】命令，打开【转到URL】对话框。最后在【行为】面板中设置触发事件为“onClick”。v九、预先载入图像。在文档中选择一个对象，如在标签选择器中选择“”标签，然后在【行为】面板中单击+按钮，从弹出的【行为】下拉菜单中选择【预先载入图像】，打开【预先载入图像】对话框进行设置。最
8、后在【行为】面板中设置触发事件为“onLoad”。v十、设置状态栏文本。【设置状态栏文本】行为可在浏览器窗口左下角处的状态栏中显示消息。选择一个对象，如电子邮件超级链接，然后在【行为】面板中单击+按钮，从弹出的【行为】下拉菜单中选择【设置文本】/【设置状态栏文本】，打开【设置状态栏文本】对话框进行设置即可。最后在【行为】面板中设置触发事件为“onMouseOver”。vSpry布局构件是Dreamweaver CS6预置的常用用户界面组件，其命令都集中在【插入】/【Spry】菜单中。Spry布局构件使用了CSS+DIV布局技术，因此在CSS+DIV页面布局中使用Spry布局构件，能完美地保证S
9、pry布局构件的效果。v用户可以选择菜单命令【插入】/【Spry】中的相应选项向页面中插入Spry构件，也可以通过【Spry】面板中的相应按钮进行操作。如果要编辑Spry构件，可以将鼠标光标指向此构件，直到看到构件的蓝色选项卡式轮廓，单击构件左上角的选项卡将其选中，然后在【属性】面板中编辑构件即可。尽管可以使用【属性】面板编辑Spry构件，但【属性】面板并不支持其外观CSS样式的设置。如果要修改其外观CSS样式，必须修改对应的CSS样式代码。10.1.5 关于Spry布局构件 v一、Spry菜单栏。Spry菜单栏是一组可导航的菜单按钮，当将鼠标光标悬停在其中的某个按钮上时，将显示相应的子菜单。
10、创建Spry菜单栏的方法是，选择菜单命令【插入】/【Spry】/【Spry菜单栏】，打开【Spry菜单栏】对话框进行设置即可。10.1.6 使用Spry布局构件 v二、Spry选项卡式面板。Spry选项卡式面板构件是一组面板，用来将内容存储到紧凑空间中。当访问者单击不同的选项卡时，构件的面板会相应地打开。创建Spry选项卡式面板的方法是，选择菜单命令【插入】/【Spry】/【Spry选项卡式面板】，在页面中添加一个Spry选项卡式面板构件。v三、Spry折叠式构件。Spry折叠式构件是一组可折叠的面板，可以将大量内容存储在一个紧凑的空间中。浏览者可通过单击该面板上的选项卡来隐藏或显示存储在折叠
11、构件中的内容。在折叠式构件中，每次只能有一个内容面板处于打开状态。创建Spry折叠式构件的方法是，选择菜单命令【插入】/【Spry】/【Spry折叠式】，在页面中添加一个Spry折叠式构件。v四、Spry折叠面板构件。Spry可折叠面板构件是一个面板，可将内容存储到紧凑的空间中。用户单击构件的选项卡即可隐藏或显示存储在可折叠面板中的内容。创建Spry可折叠面板构件的方法是，选择菜单命令【插入】/【Spry】/【Spry可折叠面板】，在页面中添加一个Spry可折叠面板构件。v五、Spry工具提示。Spry工具提示是指当鼠标光标悬停在网页中的特定元素上时，Spry工具提示会显示提示信息，当鼠标光标
12、移开时，提示信息消失。创建Spry工具提示的方法是，选择菜单命令【插入】/【Spry】/【Spry工具提示】，在页面中添加一个Spry工具提示构件。10.2 范例解析导读、动态和消息 v创建一个Spry选项卡式面板，在浏览器中的预览效果如图所示。10.3 课堂实训园林景观 v将附盘文件复制到站点文件夹下，然后使用行为和Spry构件制作网页，最终效果如图所示。10.4 综合案例宁静的美 v将附盘文件复制到站点文件夹下，然后使用行为和Spry构件制作网页，最终效果如图所示。人有了知识，就会具备各种分析能力，明辨是非的能力。所以我们要勤恳读书，广泛阅读，古人说“书中自有黄金屋。”通过阅读科技书籍，我们能丰富知识，培养逻辑思维能力；通过阅读文学作品，我们能提高文学鉴赏水平，培养文学情趣；通过阅读报刊，我们能增长见识，扩大自己的知识面。有许多书籍还能培养我们的道德情操，给我们巨大的精神力量，鼓舞我们前进。
