《网页制作基础教程(Dreamweaver-CS4)》第13章-使用Spry构件

《网页制作基础教程（DreamweaverCS4）》

电子教案第13章使用Spry构件

本章重点：Spry折叠构件、菜单栏构件、验证文本域构件、验证复选框构件与重复区域构件等多种构件的使用方法

。第13章使用Spry构件13.1使用Spry构件——新功能展示13.2Spry构件13.3使用Spry显示数据13.4Spry效果13.1使用“Spry”构件-----新功能展示13.1.1案例综述

新增的Spry功能不仅增加了页面的布局形式，简化并增强了表单的验证功能，还与XML数据相结合，方便构造动态数据显示。本例就将这些新功能集合到一个网页中，使读者从中体会Spry的无穷魅力

。13.1.2案例分析

我们要做的工作是：申请网站空间检查站点上传网站。13.1使用“Spry”构件-----新功能展示13.1.2案例分析

DreamweaverCS4中的Spry功能由四个部分组成：①Spry构件。②Spry验证表单。③SpryXML数据显示。④Spry特效。13.1使用“Spry”构件-----新功能展示13.1.3实现步骤

用Spry构件创建页面（1）插入Spry菜单栏（2）插入“Spry选项卡式面板”（3）插入“Spry折叠式”（4）插入“Spry折叠面板”13.1使用“Spry”构件-----新功能展示13.1.3实现步骤

使用Spry验证表单域（1）插入Spry验证文本域（2）插入“Spry验证复选框”（3）插入“Spry验证选择”（4）插入“Spry验证文本区域”13.1使用“Spry”构件-----新功能展示13.1.3实现步骤

使用SpryXML显示数据（1）绑定SpryXML数据集。（2）插入Spry表，显示SpryXML数据在页面

（3）插入Spry详细区域

13.2Spry构件13.2.1Spry菜单栏

1．插入Spry菜单栏13.2Spry构件13.2.1Spry菜单栏

1．插入Spry菜单栏①“插入”栏|“Spry”类型|“Spry菜单栏”按钮或菜单栏“插入”|“布局对象”|“Spry菜单栏”或“插入”|“Spry”|“Spry菜单栏”命令。②在弹出的“Spry菜单栏”对话框中选择“水平”或“垂直”，然后单击“确定”按钮。13.2Spry构件13.2.1Spry菜单栏

2．编辑Spry菜单栏属性“菜单项”：单击列表框中的具体菜单项，在“文本”文本框中编辑输入文本即重新定义该列表项的内容。“添加菜单项”按钮：表示为该菜单项添加了“子菜单”。“删除菜单项”按钮：将该菜单项与“子菜单”同时删除。“上移项”或“下移项”按钮：进行菜单项的显示排序。

“链接”：输入链接的目标页面地址，或者单击“浏览”按钮以浏览到相应的文件。“目标”：指定要在何处打开所链接的页面。

13.2Spry构件13.2.1Spry菜单栏

3．设置Spry菜单栏样式设置方法：先选中要设置的菜单（单击选中）。然后在“属性”面板中选择“样式”就可以进行设置13.2Spry构件13.2.1Spry菜单栏

4．保存含有“Spry菜单栏”的页面

在保存含有“Spry菜单栏”的页面文件时，会弹出“复制相关文件”对话框。表示软件将自动复制Spry菜单栏所需要到的CSS文件、JavaScript文件和相关图像文件到站点目录的SpryAssets文件夹内。单击“确定”按钮进行复制，否则将不能保证“Spry菜单栏”的正确运行。13.2Spry构件13.2.2Spry选项卡式面板1．插入选项卡式面板13.2Spry构件13.2.2Spry选项卡式面板1．插入选项卡式面板①“插入”栏|“Spry”类型|“Spry选项卡面板”按钮或菜单栏“插入”|“布局对象”|“Spry选项卡面板”或“插入”|“Spry”|“Spry选项卡面板”命令。②对于插入到网页中的“Spry选项卡式面板”，单击左上角的蓝色区域即表示选择了该“Spry选项卡式面板”，进行编辑操作。。13.2Spry构件13.2.2Spry选项卡式面板2．添加与删除选择卡面板①在“文档”窗口中单击选项卡左上角的蓝色区域选择该“Spry选项卡式面板”。②在“属性”面板中，单击“添加面板”按钮或“删除面板”按钮。13.2Spry构件13.2.2Spry选项卡式面板3．设置默认的打开面板①在“文档”窗口中单击选项卡左上角的蓝色区域选择该“Spry选项卡式面板”。②在“属性”面板中，从“默认面板”下拉列表中选择默认情况下要打开的面板。13.2Spry构件13.2.2Spry选项卡式面板4．编辑面板①将鼠标定位在选项卡标题所在区域即可对该标题进行编辑操作。②对于插入到页面中各“Spry选项卡式面板”所对应的内容，鼠标移动到相应的“Spry选项卡”标题时，会显示“单击以显示面板内容”按钮，单击该按钮即可显示面板内容。13.2Spry构件13.2.2Spry选项卡式面板5．调整选项卡面板的顺序在“属性”面板中，通过“在列表中向上移动面板”按钮和“在列表中向下移动面板”按钮对页面中的“Spry选择卡”进行左右排序。13.2Spry构件13.2.3Spry折叠式1.插入“Spry折叠式”13.2Spry构件13.2.3Spry折叠式1.插入“Spry折叠式”①选择菜单栏的“插入”|“Spry”|“Spry折叠式”，或“插入”|“布局对象”|“Spry折叠式”命令，或在“插入”面板的“Spry”类别中单击“Spry折叠式”按钮。②对于插入到网页中的“Spry折叠式”，单击左上角的蓝色区域即表示选择了该“Spry折叠式”，进行编辑操作。13.2Spry构件13.2.3Spry折叠式2．添加与删除选择卡面板①在“文档”窗口中选择一个折叠构件。②在“属性”面板中单击“面板”旁边的加号(+)按钮或减号（-）按钮。③（可选）更改面板的名称，方法是在“设计”视图中选择面板的文本并对其进行修改。13.2Spry构件13.2.3Spry折叠式3．更改面板的顺序在“属性”面板中，通过“在列表中向上移动面板”按钮和“在列表中向下移动面板”按钮对页面中的面板进行上下排序。13.2Spry构件13.2.3Spry折叠式4．打开面板进行编辑请执行下列操作之一：将鼠标指针移到要在“设计”视图中打开的面板的选项卡上，然后单击出现在该选项卡右侧的眼睛图标。在“文档”窗口中选择一个折叠构件，然后在“属性”面板的“面板”菜单中选择要进行编辑的面板。13.2Spry构件13.2.4Spry可折叠面板2．打开或关闭可折叠面板打开或关闭可折叠面板的方法：将鼠标指针移到要在“设计”视图中打开的面板的选项卡上，然后单击出现在该选项卡右侧的眼睛图标。在“文档”窗口中选择一个折叠构件，然后在“属性”面板中，从“显示”下拉列表中选择“打开”或“已关闭”。13.2Spry构件13.2.4Spry可折叠面板3．设置可折叠面板的默认状态①在“文档”窗口中选择一个可折叠面板构件。②在“属性”面板中，从“默认状态”弹出菜单中选择“打开”或“已关闭”。13.2Spry构件13.2.4Spry可折叠面板4．启用或禁用可折叠面板的动画①在“文档”窗口中选择一个可折叠面板构件。②在“属性”面板中，勾选或撤选“启用动画”复选框即可。13.2Spry构件13.2.5Spry工具提示构件

1．插入“Spry工具提示构件”选择菜单栏的“插入”|“Spry”|“Spry工具提示”，或在“插入”面板的“Spry”类别中单击“Spry工具提示”按钮。13.3使用Spry显示数据13.3.1

Spry数据集

要在Web页上显示XML数据，首先需要在Dreamweaver中建立一个XML数据集，表示当前网页与XML文件之间建立了关系，才能向HTML页面中添加Spry区域、表格或列表。

13.3使用Spry显示数据13.3.1.1创建Spry数据集

步骤：①选择“插入Spry”|“Spry

数据集”。或在“插入”栏中的“Spry”类别中单击“Spry数据集”按钮。②弹出的“Spry数据集”对话框，进行相关设置。③设置完成后单击“确定”按钮。13.3使用Spry显示数据13.3.1.1创建Spry数据集

13.3使用Spry显示数据13.3.1.2定义Spry数据集

1.定义SpryHTML数据集

①为新数据集指定名称。②在检测选项中指定数据源中HTML元素。③在指定数据文件选项中指定包含HTML数据源的文件的路径。④将在“数据选择”窗口中呈现HTML数据源，并显示可用作数据集容器的元素的可视标记。13.3使用Spry显示数据13.3.1.2定义Spry数据集

1.定义SpryHTML数据集

13.3使用Spry显示数据13.3.1.2定义Spry数据集

2.定义SpryXML数据集

①为新数据集指定名称。②在指定数据文件选项中包含XML数据源的文件的路径。③选择包含要显示的数据的元素。为数据集选择容器元素后，Dreamweaver

会在“数据预览”窗口中显示数据集预览。XPath

文本框会显示一个表达式，指明所选节点在XML源文件中位置。④完成“指定数据源”屏幕中的操作时，单击“完成”可立即创建数据集，也可以单击“下一步”，转到“设置数据选项”屏幕。

13.3使用Spry显示数据13.3.1.2定义Spry数据集

2.定义SpryXML数据集

13.3使用Spry显示数据13.3.1.2定义Spry数据集

3.设置数据选项-----设置数据按某列排序

13.3使用Spry显示数据13.3.1.2定义Spry数据集

4.为数据集选择布局在“Spry数据集”的第三步“选择插入选项”对话框中，用来选择各种显示选项，不同选项对应数据集中的值在页面上的不同显示方式。13.3使用Spry显示数据13.3.1.2定义Spry数据集

4.为数据集选择布局13.3使用Spry显示数据13.3.1.2定义Spry数据集

4.为数据集选择布局动态表格布局主/详细布局13.3使用Spry显示数据13.3.1.2定义Spry数据集

4.为数据集选择布局堆积容器布局带有聚光灯区域的堆积容器布局13.3使用Spry显示数据13.3.2创建Spry区域Spry区域有两种类型：围绕数据对象（如表格和重复列表）的Spry区域；

Spry详细区域，该区域与主表格对象一起使用时，可允许对Dreamweaver

页面上的数据进行动态更新。13.3使用Spry显示数据13.3.2创建Spry区域插入Spry区域的步骤：①选择“插入”|“Spry”|“Spry

区域”。或在“插入”栏中“Spry”类别中单击“Spry区域”按钮。②弹出的“插入Spry区域”对话框，进行相关设置。③单击“确定”时，Dreamweaver

会在页面中放置一个区域占位符，并显示文本“此处为Spry区域的内容”。13.3使用Spry显示数据13.3.3

创建Spry重复项可以添加重复项来显示数据。例如，有一组照片缩略图，将它们逐个顺序地放在页面布局对象（如APdiv元素）中。13.3使用Spry显示数据13.3.3创建Spry重复项

在“容器”中根据所需的标签类型选择“<div>”或“<span>”选项。默认值是使用<div>容器。在“类型”中选择“重复”（默认选项）或“重复子项”选项。在“Spry数据集”中选择前面定义好的Spry数据集“ds1”。如果已经选择了文本或元素，即可环绕或替换它们。

13.3使用Spry显示数据13.3.3创建Spry重复项步骤：①选择“插入”|“Spry”|“Spry

重复项”，或在“插入””栏中的“Spry”类别中单击“Spry重复项”按钮。②弹出“插入Spry重复项”对话框，③在“容器”:“<div>”或“<span>”选项。④“类型”:“重复”或“重复子项”选项。⑤“Spry数据集”中选择前面定义好的Spry数据集“ds1”。⑥如果已经选择了文本或元素，即可环绕或替换它们。13.3使用Spry显示数据13.3.4

创建Spry重复列表可以添加重复列表，以便将数据显示为经过排序的列表、未经排序的（项目符号）列表、定义列表或下拉列表。

①选择“插入”|“Spry”|“Spry

重复列表”，或在“插入”面板中的“Spry”类别中单击“Spry重复列表”按钮。②弹出“插入Spry重复列表”对话框，

13.3使用Spry显示数据13