第12章 使用Spry构件

12.2.1
Spry菜单栏
4．保存含有“Spry菜单栏”的页面
12.2
网 页 制 作 基 础 教 程
Spry构件
12.2.2 Spry选项卡式面板
1．插入选项卡式面板
① “插入”栏|“Spry”类型|“Spry选项卡面板 ”按钮
或 菜单栏“插入”|“布局对象”|“Spry选项卡面板 ”
或 “插入”|“Spry”|“Spry选项卡面板 ”命令。 ②对于插入到网页中的“Spry选项卡式面板”，单击左上 角的蓝色区域即表示选择了该“Spry选项卡式面板”， 进行编辑操作。。
网 页 制 作 基 础 教 程
12.3.3 创建 Spry表格
Spry表格有两种类型：

简单表格 主动态表格，主动态表格与详细区域绑定，以 允许动态更新Dreamweaver页面上的数据。
12.3 使用Spry显示数据
网 页 制 作 基 础 教 程
12.3.3 创建 Spry表格
步骤：
① 在前面插入的Spry区域中删除“此处为 Spry 区域的
式”命令，或在“插入”面板的“Spry”类别
中单击“Spry折叠式”按钮。 ② 对于插入到网页中的“Spry折叠式”，单击左
上角的蓝色区域即表示选择了该“Spry折叠
式”，进行编辑操作。
12.2
网 页 制 作 基 础 教 程
Spry构件
12.2.3 Spry折叠式
2．添加与删除选择卡面板
① 在“文档”窗口中选择一个折叠构件。 ② 在“属性”面板中单击“面板”旁边的加号
12.2
网 页 制 作 基 础 教 程
Spry构件
12.2.3 Spry折叠式
4．打开面板进行编辑
请执行下列操作之一：

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

在“文档”窗口中选择一个折叠构件，然后在
“属性”面板的“面板”菜单中选择要进行编
12.2
网 页 制 作 基 础 教 程
Spry构件
12.2.2 Spry选项卡式面板
2．添加与删除选择卡面板
① 在“文档”窗口中单击选项卡左上角的蓝色区 域选择该“Spry选项卡式面板”。
② 在“属性”面板中，单击“添加面板”按钮或
“删除面板”按钮。
12.2
网 页 制 作 基 础 教 程
Spry构件
或 “插入”|“Spry”|“Spry菜单栏”命令。 ② 在弹出的“Spry菜单栏”对话框中选择“水平”或“垂 直”，然后单击“确定”按钮。
12.2
网 页 制 作 基 础 教 程
Spry构件
12.2.1
Spry菜单栏
2．编辑Spry菜单栏属性
“菜单项”：单击列表框中的具体菜单项，在“文本”文本框 中编辑输入文本即重新定义该列表项的内容。 “添加菜单项”按钮：表示为该菜单项添加了“子菜单”。 “删除菜单项”按钮：将该菜单项与“子菜单”同时删除。 “上移项”或“下移项”按钮：进行菜单项的显示排序。 “链接”：输入链接的目标页面地址，或者单击“浏览”按钮 以浏览到相应的文件。 “目标”：指定要在何处打开所链接的页面。
4．启用或禁用可折叠面板的动画
① 在“文档”窗口中选择一个可折叠面板构件。 ② 在“属性”面板中，勾选或撤选“启用动画”
复选框即可。
12.3 使用Spry显示数据
网 页 制 作 基 础 教 程
12.3.1 定义 Spry XML 数据集
要在Web页上显示XML数据，首先需要在Dreamweaver 中建立一个XML数据集，表示当前网页与XML文件之 间建立了关系，才能向 HTML 页面中添加 Spry 区
内容”文本，然后切换到 “插入”栏中的“Spry”类 别 中 单 击 相 应 的 “ Spry 表 ” 按 钮 。 或 选 择 “ 插
入”|“Spry”|“Spry 表格”。
② 弹出的“插入Spry 表”对话框 ，进行相关设置。 ③ 单击“确定”，用户会在“设计”视图中看到一个 表格，在该表格中，针对所包括的每个元素都有一行 标题和一行数据引用，并用大括号 ({}) 括起来。
《网页制作基础教程 （Dreamweaver CS3）》
电子教案
葛艳玲
主编
ISBN7－121－02882－4
第12章 使用Spry构件
本章重点：Spry折叠构件、菜 单栏构件、验证文本域构件、验证复 选框构件与重复区域构件等多种构件 的使用方法 。
第12章 站点的整理维护与上传
12.1 12.2 使用Spry构件——新功能展示 Spry构件
5．调整选项卡面板的顺序
在“属性”面板中，通过“在列表中向上移动面板” 按钮和“在列表中向下移动面板”按钮对页面中的
“Spry选择卡”进行左右排序。
12.2
网 页 制 作 基 础 教 程
Spry构件
12.2.3 Spry折叠式
1.插入“Spry折叠式”
① 选择菜单栏的“插入”|“Spry”|“Spry折叠 式”，或“插入”|“布局对象”|“Spry折叠
（1）绑定Spry XML 数据集。 （2）插入Spry表，显示Spry XML数据在页面 （3）插入Spry详细区域
12.2
网 页 制 作 基 础 教 程
Spry构件
12.2.1
Spry菜单栏
1．插入Spry菜单栏
① “插入”栏|“Spry”类型|“Spry菜单栏”按钮
或 菜单栏“插入”|“布局对象”|“Spry菜单栏”
12.2.2 Spry选项卡式面板
3．设置默认的打开面板
① 在“文档”窗口中单击选项卡左上角的蓝色区 域选择该“Spry选项卡式面板”。
② 在“属性”面板中，从“默认面板”下拉列表
中选择默认情况下要打开的面板。
12.2
网 页 制 作 基 础 教 程
Spry构件
12.2.2 Spry选项卡式面板
4．编辑面板
(+) 按钮或减号（-）按钮。
③ （可选）更改面板的名称，方法是在“设计”
视图中选择面板的文本并对其进行修改。
12.2
网 页 制 作 基 础 教 程
Spry构件
12.2.3 Spry折叠式
3．更改面板的顺序

在“属性”面板中，通过“在列表中向上移动
面板”按钮和“在列表中向下移动面板”按钮 对页面中的面板进行上下排序。

获取架构按钮：在确定要使用的数据集之后，单击此按
钮，则该数据集中的数据将显示在“行元素”的列表框 中。

XPath：显示一个表达式，指示所选节点在XML源文件中
的位置。
12.3 使用Spry显示数据
网 页 制 作 基 础 教 程
“Spry XML数据集”对话框相关选项：
预览：单击该按钮可以查看数据在浏览器中的显示情况。
页中显示XML数据，必须先建立“Spry区域”。

Spry区域有两种类型：

围绕数据对象（如表格和重复列表）的 Spry 区 域；

Spry 详细区域，该区域与主表格对象一起使用 时，可允许对 Dreamweaver 页面上的数据进行动 态更新。
12.3 使用Spry显示数据
12.3.2 创建 Spry 区域 网 页 制 作 基 础 教 程 插入Spry区域的步骤：
数据类型：指定当前在“数据集列”中选定的数据列的类
型。 排序：如果要在页面加载数据时自动排序数据，则从“排 序”下拉列表中选择一个用于排序的列值。 方向：确定排序的方式，包括“升序”和“降序”两种方 式。
12.3 使用Spry显示数据
网 页 制 作 基 础 教 程
“Spry XML数据集”对话框相关选项：
域、表格或列表。
12.3 使用Spry显示数据
网 页 制 作 基 础 教 程
12.3.1 定义 Spry XML 数据集
步骤： ① 选择“插入Spry”|“Spry XML 数据集”。或 在“插入”栏中的“Spry”类别中单击“Spry
XML 数据集”按钮。
② 弹出的“Spry XML数据集”对话框，进行相关 设置。 ③ 设置完成后单击“确定”按钮。
12.1 使用“Spry”构件-----新功能展示
网 页 制 作 基 础 教 程
12.1.3
实现步骤
1. 用Spry构件创建页面
（1）插入Spry菜单栏 （2）插入“Spry选项卡式面板” （3）插入“Spry折叠式” （4）插入“Spry折叠面板”
12.1 使用“Spry”构件-----新功能展示
辑的面板。
12.2
网 页 制 作 基 础 教 程
Spry构件
12.2.4 Spry可折叠面板
2．打开或关闭可折叠面板
打开或关闭可折叠面板的方法：

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

在“文档”窗口中选择一个折叠构件，然后在 “属性”面板中，从“显示”下拉列表中选择 “打开”或“已关闭”。
无穷魅力 。
12.1.2

案例分析
申请网站空间 检查站点
我们要做的工作是：
上传网站。
12.1 使用“Spry”构件-----新功能展示
网 页 制 作 基 础 教 程
12.1.2
案例分析
Dreamweaver CS3中的Spry功能由四个部分组成：
① Baidu Nhomakorabeapry构件。
② Spry验证表单。 ③ Spry XML数据显示。 ④ Spry特效。
① 将鼠标定位在选项卡标题所在区域即可对该标 题进行编辑操作。
② 对于插入到页面中各“Spry选项卡式面板”所
对应的内容，鼠标移动到相应的“Spry选项卡” 标题时，会显示“单击以显示面板内容”按钮， 单击该按钮即可显示面板内容。
12.2
网 页 制 作 基 础 教 程
Spry构件
12.2.2 Spry选项卡式面板
12.2
网 页 制 作 基 础 教 程
Spry构件
12.2.1
Spry菜单栏
3．设置Spry菜单栏样式
设置方法：先选中要设置的菜单（单击选中）。然后在“属性” 面板中选择“样式”就可以进行设置
12.2
网 页 制 作 基 础 教 程
Spry构件
在保存含有“Spry菜单栏” 的页面文件时，会弹出 “复制相关文件”对话 框。表示软件将自动复 制Spry菜单栏所需要到 的CSS文件、 JavaScript文件和相关 图像文件到站点目录的 SpryAssets文件夹内。 单击“确定”按钮进行 复制，否则将不能保证 “Spry菜单栏”的正确 运行。
13.3
13.4
使用Spry显示数据
Spry效果
12.1 使用“Spry”构件-----新功能展示
12.1.1
网 页 制 作 基 础 教 程
案例综述
新增的Spry功能不仅增加了页面的布局形式，简化并增强了 表单的验证功能，还与XML数据相结合，方便构造动态数据显示。
本例就将这些新功能集合到一个网页中，使读者从中体会Spry的
12.3 使用Spry显示数据
网 页 制 作 基 础 教 程
12.3.1 定义 Spry XML 数据集
12.3 使用Spry显示数据
“Spry XML数据集”对话框相关选项：
网 页 制 作 基 础 教 程

数据集名称：接受默认的 Spry 数据集名称“ds1”，也
可以输入更有意义的名称。

XML源：通过单击“浏览”按钮获得已准备好的XML数据 文件。
① 选择“插入”|“Spry”|“Spry 区域”。或在“插入”
栏中“Spry”类别中单击“Spry 区域”按钮。 ② 弹出的“Spry XML数据集”对话框，进行相关设置。 ③ 单击“确定”时，Dreamweaver 会在页面中放置一个区 域占位符，并显示文本“此处为 Spry 区域的内容”。
12.3 使用Spry显示数据
12.2
网 页 制 作 基 础 教 程
Spry构件
12.2.4 Spry可折叠面板
3．设置可折叠面板的默认状态
① 在“文档”窗口中选择一个可折叠面板构件。 ② 在“属性”面板中，从“默认状态”弹出菜单
中选择“打开”或“已关闭”。
12.2
网 页 制 作 基 础 教 程
Spry构件
12.2.4 Spry可折叠面板
网 页 制 作 基 础 教 程
12.1.3 实现步骤 2. 使用Spry验证表单域
（1）插入Spry验证文本域 （2）插入“Spry验证复选框” （3）插入“Spry验证选择” （4）插入“Spry验证文本区域”
12.1 使用“Spry”构件-----新功能展示
网 页 制 作 基 础 教 程
12.1.3 实现步骤 3. 使用Spry XML显示数据

加载时不同：勾选此项以确保没有重复列。

禁用XML缓存：要直接从服务器中加载数据时，则选择
“禁用XML缓存”选项。

自动刷新数据：选择“自动刷新数据”选项并输入一个 毫秒值 。
12.3 使用Spry显示数据
12.3.2 创建 Spry 区域 网 页 制 作 基 础 教 程

对于绑定了“Spry XML 数据集”的页面来说，要在网