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