第13章 使用Spry构件

13.3 使用Spry显示数据
网 页 制 作 基 础 教 程
13.3.1.2 定义 Spry 数据集
1.定义 Spry HTML数据集
①为新数据集指定名称。 ②在检测选项中指定数据源中HTML 元素。
③在指定数据文件选项中指定包含 HTML 数据源
的文件的路径。 ④将在“数据选择”窗口中呈现 HTML 数据源， 并显示可用作数据集容器的元素的可视标记。
13.3
13.4
使用Spry显示数据
Spry效果
13.1 使用“Spry”构件-----新功能展示
13.1.1
网 页 制 作 基 础 教 程
案例综述
新增的Spry功能不仅增加了页面的布局形式，简化并增强了 表单的验证功能，还与XML数据相结合，方便构造动态数据显示。
本例就将这些新功能集合到一个网页中，使读者从中体会Spry的
13.1 使用“Spry”构件-----新功能展示
网 页 制 作 基 础 教 程
13.1.3
实现步骤
1. 用Spry构件创建页面
（1）插入Spry菜单栏 （2）插入“Spry选项卡式面板” （3）插入“Spry折叠式” （4）插入“Spry折叠面板”
13.1 使用“Spry”构件-----新功能展示
13.2.1
Spry菜单栏
2．编辑Spry菜单栏属性
“菜单项”：单击列表框中的具体菜单项，在“文本”文本框 中编辑输入文本即重新定义该列表项的内容。 “添加菜单项”按钮：表示为该菜单项添加了“子菜单”。 “删除菜单项”按钮：将该菜单项与“子菜单”同时删除。 “上移项”或“下移项”按钮：进行菜单项的显示排序。 “链接”：输入链接的目标页面地址，或者单击“浏览”按钮 以浏览到相应的文件。 “目标”：指定要在何处打开所链接的页面。
13.3.1 Spry 数据集
要在Web页上显示XML数据，首先需要在Dreamweaver 中建立一个XML数据集，表示当前网页与XML文件之 间建立了关系，才能向 HTML 页面中添加 Spry 区
域、表格或列表。
13.3 使用Spry显示数据
网 页 制 作 基 础 教 程
13.3.1.1 创建 Spry 数据集
（1）绑定Spry XML 数据集。 （2）插入Spry表，显示Spry XML数据在页面 （3）插入Spry详细区域
13.2
网 页 制 作 基 础 教 程
Spry构件
13.2.1
Spry菜单栏
1．插入Spry菜单栏
13.2
网 页 制 作 基 础 教 程
Spry构件
13.2.1
Spry菜单栏
1．插入Spry菜单栏
13.2.4 Spry可折叠面板
3．设置可折叠面板的默认状态
① 在“文档”窗口中选择一个可折叠面板构件。 ② 在“属性”面板中，从“默认状态”弹出菜单
中选择“打开”或“已关闭”。
13.2
网 页 制 作 基 础 教 程
Spry构件
13.2.4 Spry可折叠面板
4．启用或禁用可折叠面板的动画
① 在“文档”窗口中选择一个可折叠面板构件。 ② 在“属性”面板中，勾选或撤选“启用动画”
② 在“属性”面板中，从“默认面板”下拉列表
中选择默认情况下要打开的面板。
13.2
网 页 制 作 基 础 教 程
Spry构件
13.2.2 Spry选项卡式面板
4．编辑面板
① 将鼠标定位在选项卡标题所在区域即可对该标 题进行编辑操作。
② 对于插入到页面中各“Spry选项卡式面板”所
对应的内容，鼠标移动到相应的“Spry选项卡” 标题时，会显示“单击以显示面板内容”按钮， 单击该按钮即可显示面板内容。
13.3 使用Spry显示数据
网 页 制 作 基 础 教 程
13.3.1.2 定义 Spry 数据集
2.定义 Spry XML数据集
13.3 使用Spry显示数据
网 页 制 作 基 础 教 程
13.3.1.2 定义 Spry 数据集
3.设置数据选项 -----设置数据按某列排序
13.3 使用Spry显示数据
步骤： ① 选择“插入Spry”|“Spry 数据集”。或在 “插入”栏中的“Spry”类别中单击“Spry 数
据集”按钮。
② 弹出的“Spry 数据集”对话框，进行相关设 置。 ③ 设置完成后单击“确定”按钮。
13.3 使用Spry显示数据
网 页 制 作 基 础 教 程
13.3.1.1 创建 Spry 数据集
2．添加与删除选择卡面板
① 在“文档”窗口中单击选项卡左上角的蓝色区 域选择该“Spry选项卡式面板”。
② 在“属性”面板中，单击“添加面板”按钮或
“删除面板”按钮。
13.2
网 页 制 作 基 础 教 程
Spry构件
13.2.2 Spry选项卡式面板
3．设置默认的打开面板
① 在“文档”窗口中单击选项卡左上角的蓝色区 域选择该“Spry选项卡式面板”。
网 页 制 作 基 础 教 程
13.3.1.2 定义 Spry 数据集
4.为数据集选择布局

在“Spry数据集”的第三步“选择插入选项” 对话框中，用来选择各种显示选项，不同选 项对应数据集中的值在页面上的不同显示方 式。
13.3 使用Spry显示数据
网 页 制 作 基 础 教 程
13.3.1.2 定义 Spry 数据集
或 菜单栏“插入”|“布局对象”|“Spry选项卡面板 ”
百度文库
或 “插入”|“Spry”|“Spry选项卡面板 ”命令。 ②对于插入到网页中的“Spry选项卡式面板”，单击左上 角的蓝色区域即表示选择了该“Spry选项卡式面板”， 进行编辑操作。。
13.2
网 页 制 作 基 础 教 程
Spry构件
13.2.2 Spry选项卡式面板
无穷魅力 。
13.1.2

案例分析
申请网站空间 检查站点
我们要做的工作是：
上传网站。
13.1 使用“Spry”构件-----新功能展示
网 页 制 作 基 础 教 程
13.1.2
案例分析
Dreamweaver CS4中的Spry功能由四个部分组成：
① Spry构件。
② Spry验证表单。 ③ Spry XML数据显示。 ④ Spry特效。
4.为数据集选择布局
13.3 使用Spry显示数据
网 页 制 作 基 础 教 程
13.3.1.2 定义 Spry 数据集
4.为数据集选择布局
1.
动态表格布局
2.
主/详细布局
13.3 使用Spry显示数据
网 页 制 作 基 础 教 程
13.3.1.2 定义 Spry 数据集
4.为数据集选择布局
3.
13.2.1
Spry菜单栏
4．保存含有“Spry菜单栏”的页面
13.2
网 页 制 作 基 础 教 程
Spry构件
13.2.2 Spry选项卡式面板
1．插入选项卡式面板
13.2
网 页 制 作 基 础 教 程
Spry构件
13.2.2 Spry选项卡式面板
1．插入选项卡式面板
① “插入”栏|“Spry”类型|“Spry选项卡面板 ”按钮
13.3 使用Spry显示数据
网 页 制 作 基 础 教 程
13.3.1.2 定义 Spry 数据集
1.定义 Spry HTML数据集
13.3 使用Spry显示数据
网 页 制 作 基 础 教 程
13.3.1.2 定义 Spry 数据集
2.定义 Spry XML数据集 ①为新数据集指定名称。 ②在指定数据文件选项中包含 XML 数据源的文件 的路径。 ③选择包含要显示的数据的元素。为数据集选择 容器元素后，Dreamweaver 会在“数据预览” 窗口中显示数据集预览。XPath 文本框会显示 一个表达式，指明所选节点在 XML 源文件中位 置。 ④完成“指定数据源”屏幕中的操作时，单击 “完成”可立即创建数据集，也可以单击“下 一步”，转到“设置数据选项”屏幕。
13.2
网 页 制 作 基 础 教 程
Spry构件
13.2.1
Spry菜单栏
3．设置Spry菜单栏样式
设置方法：先选中要设置的菜单（单击选中）。然后在“属性” 面板中选择“样式”就可以进行设置
13.2
网 页 制 作 基 础 教 程
Spry构件
在保存含有“Spry菜单栏” 的页面文件时，会弹出 “复制相关文件”对话 框。表示软件将自动复 制Spry菜单栏所需要到 的CSS文件、 JavaScript文件和相关 图像文件到站点目录的 SpryAssets文件夹内。 单击“确定”按钮进行 复制，否则将不能保证 “Spry菜单栏”的正确 运行。
1.插入“Spry折叠式”
13.2
网 页 制 作 基 础 教 程
Spry构件
13.2.3 Spry折叠式
1.插入“Spry折叠式”
① 选择菜单栏的“插入”|“Spry”|“Spry折叠 式”，或“插入”|“布局对象”|“Spry折叠
式”命令，或在“插入”面板的“Spry”类别
中单击“Spry折叠式”按钮。 ② 对于插入到网页中的“Spry折叠式”，单击左
《网页制作基础教程（Dreamweaver CS4）》 电子教案
葛艳玲
主编
ISBN978-7-121-15403-4
第13章 使用Spry构件
本章重点：Spry折叠构件、菜 单栏构件、验证文本域构件、验证复 选框构件与重复区域构件等多种构件 的使用方法 。
第13章 使用Spry构件
13.1 13.2 使用Spry构件——新功能展示 Spry构件
2．打开或关闭可折叠面板
打开或关闭可折叠面板的方法：

将鼠标指针移到要在“设计”视图中打开的面
板的选项卡上，然后单击出现在该选项卡右侧
的眼睛图标。

在“文档”窗口中选择一个折叠构件，然后在 “属性”面板中，从“显示”下拉列表中选择 “打开”或“已关闭”。
13.2
网 页 制 作 基 础 教 程
Spry构件
复选框即可。
13.2
网 页 制 作 基 础 教 程
Spry构件
13.2.5 Spry工具提示构件
1．插入“Spry工具提示构件”
选择菜单栏的“插入”|“Spry”|“Spry工具 提示”，或在“插入”面板的“Spry”类别中 单击“Spry工具提示”按钮。
13.3 使用Spry显示数据
网 页 制 作 基 础 教 程
堆积容器布局
4.
带有聚光灯区域的堆积容器布局
13.3 使用Spry显示数据
网 页 制 作 基 础 教 程
13.1.3 实现步骤 2. 使用Spry验证表单域
（1）插入Spry验证文本域 （2）插入“Spry验证复选框” （3）插入“Spry验证选择” （4）插入“Spry验证文本区域”
13.1 使用“Spry”构件-----新功能展示
网 页 制 作 基 础 教 程
13.1.3 实现步骤 3. 使用Spry XML显示数据
视图中选择面板的文本并对其进行修改。
13.2
网 页 制 作 基 础 教 程
Spry构件
13.2.3 Spry折叠式
3．更改面板的顺序

在“属性”面板中，通过“在列表中向上移动
面板”按钮和“在列表中向下移动面板”按钮 对页面中的面板进行上下排序。
13.2
网 页 制 作 基 础 教 程
Spry构件
13.2.3 Spry折叠式
① “插入”栏|“Spry”类型|“Spry菜单栏”按钮
或 菜单栏“插入”|“布局对象”|“Spry菜单栏”
或 “插入”|“Spry”|“Spry菜单栏”命令。 ② 在弹出的“Spry菜单栏”对话框中选择“水平”或“垂 直”，然后单击“确定”按钮。
13.2
网 页 制 作 基 础 教 程
Spry构件
上角的蓝色区域即表示选择了该“Spry折叠
式”，进行编辑操作。
13.2
网 页 制 作 基 础 教 程
Spry构件
13.2.3 Spry折叠式
2．添加与删除选择卡面板
① 在“文档”窗口中选择一个折叠构件。 ② 在“属性”面板中单击“面板”旁边的加号
(+) 按钮或减号（-）按钮。
③ （可选）更改面板的名称，方法是在“设计”
13.2
网 页 制 作 基 础 教 程
Spry构件
13.2.2 Spry选项卡式面板
5．调整选项卡面板的顺序
在“属性”面板中，通过“在列表中向上移动面板” 按钮和“在列表中向下移动面板”按钮对页面中的
“Spry选择卡”进行左右排序。
13.2
网 页 制 作 基 础 教 程
Spry构件
13.2.3 Spry折叠式
4．打开面板进行编辑
请执行下列操作之一：

将鼠标指针移到要在“设计”视图中打开的面 板的选项卡上，然后单击出现在该选项卡右侧 的眼睛图标。

在“文档”窗口中选择一个折叠构件，然后在
“属性”面板的“面板”菜单中选择要进行编
辑的面板。
13.2
网 页 制 作 基 础 教 程
Spry构件
13.2.4 Spry可折叠面板