《第12章 使用Spry构件》由会员分享，可在线阅读，更多相关《第12章 使用Spry构件（42页珍藏版）》请在金锄头文库上搜索。
1、网页制作基础教程网页制作基础教程 （Dreamweaver CS3Dreamweaver CS3）第12章 使用Spry构件本章重点：Spry折叠构件、 菜单栏构件、验证文本域构件、验证 复选框构件与重复区域构件等多种构 件的使用方法 。第12章 使用Spry构件12.1 使用Spry构件新功能展示 12.2 Spry构件13.3 使用Spry显示数据13.4 Spry效果网页制作基础教程12.1 使用“Spry”构件-新功能展示 12.1.1 案例综述 新增的Spry功能不仅增加了页面的布局形式，简化并增强了表单的验证功能，还与XML数据相结合，方便构造动态数据显示。本例就将这些新功能集合到
2、一个网页中，使读者从中体会Spry的无穷魅力 。12.1.2 案例分析 我们要做的工作是： n申请网站空间n检查站点n上传网站。网页制作基础教程12.1 使用“Spry”构件-新功能展示 12.1.2 案例分析 Dreamweaver CS3中的Spry功能由四个部分组成 ： Spry构件。 Spry验证表单。 Spry XML数据显示。 Spry特效。网页制作基础教程12.1 使用“Spry”构件-新功能展示 12.1.3 实现步骤 n用Spry构件创建页面 （1）插入Spry菜单栏（2）插入“Spry选项卡式面板”（3）插入“Spry折叠式”（4）插入“Spry折叠面板”网页制作基础教程1
3、2.1 使用“Spry”构件-新功能展示 12.1.3 实现步骤 n 使用Spry验证表单域（1）插入Spry验证文本域（2）插入“Spry验证复选框”（3）插入“Spry验证选择”（4）插入“Spry验证文本区域”网页制作基础教程12.1 使用“Spry”构件-新功能展示 12.1.3 实现步骤 n 使用Spry XML显示数据（1）绑定Spry XML 数据集。（2）插入Spry表，显示Spry XML数据在页面 （3）插入Spry详细区域 网页制作基础教程12.2 Spry构件12.2.1 Spry菜单栏 1插入Spry菜单栏 “插入”栏|“Spry”类型|“Spry菜单栏”按钮或 菜单
4、栏“插入”|“布局对象”|“Spry菜单栏”或 “插入”|“Spry”|“Spry菜单栏”命令。 在弹出的“Spry菜单栏”对话框中选择“水平”或“垂直”，然后单击“确定”按钮。 网页制作基础教程12.2 Spry构件12.2.1 Spry菜单栏 2编辑Spry菜单栏属性“菜单项”：单击列表框中的具体菜单项，在“文本”文本框中 编辑输入文本即重新定义该列表项的内容。 “添加菜单项”按钮：表示为该菜单项添加了“子菜单”。 “删除菜单项”按钮：将该菜单项与“子菜单”同时删除。 “上移项”或“下移项”按钮：进行菜单项的显示排序。“链接”：输入链接的目标页面地址，或者单击“浏览”按钮 以浏览到相应的文
5、件。 “目标”：指定要在何处打开所链接的页面。 网页制作基础教程12.2 Spry构件12.2.1 Spry菜单栏 3设置Spry菜单栏样式n设置方法：先选中要设置的菜单（单击选中）。然后在“属性”面板中选择“样式”就可以进行设置 网页制作基础教程12.2 Spry构件12.2.1 Spry菜单栏 4保存含有“Spry菜单栏”的页面 在保存含有“Spry菜单栏”的页面文件时，会弹出“复制相关文件”对话框。表示软件将自动复制Spry菜单栏所需要到的CSS文件、JavaScript文件和相关图像文件到站点目录的SpryAssets文件夹内。单击“确定”按钮进行复制，否则将不能保证“Spry菜单栏”
6、的正确运行。 网页制作基础教程12.2 Spry构件12.2.2 Spry选项卡式面板1插入选项卡式面板 “插入”栏|“Spry”类型|“Spry选项卡面板 ”按钮或 菜单栏“插入”|“布局对象”|“Spry选项卡面板 ”或 “插入”|“Spry”|“Spry选项卡面板 ”命令。对于插入到网页中的“Spry选项卡式面板”，单击左上角的蓝色区域即表示选择了该“Spry选项卡式面板”，进行编辑操作。 网页制作基础教程12.2 Spry构件12.2.2 Spry选项卡式面板2添加与删除选择卡面板 在“文档”窗口中单击选项卡左上角的蓝色区域选择该“Spry选项卡式面板”。 在“属性”面板中，单击“添加
7、面板”按钮或“删除面板”按钮。网页制作基础教程12.2 Spry构件12.2.2 Spry选项卡式面板3设置默认的打开面板 在“文档”窗口中单击选项卡左上角的蓝色区域选择该“Spry选项卡式面板”。 在“属性”面板中，从“默认面板”下拉列表中选择默认情况下要打开的面板。网页制作基础教程12.2 Spry构件12.2.2 Spry选项卡式面板4编辑面板 将鼠标定位在选项卡标题所在区域即可对该标题进行编辑操作。 对于插入到页面中各“Spry选项卡式面板”所对应的内容，鼠标移动到相应的“Spry选项卡”标题时，会显示“单击以显示面板内容”按钮，单击该按钮即可显示面板内容。 网页制作基础教程12.2
8、Spry构件12.2.2 Spry选项卡式面板5调整选项卡面板的顺序在“属性”面板中，通过“在列表中向上移动面板”按钮和“在列表中向下移动面板”按钮对页面中的“Spry选择卡”进行左右排序。网页制作基础教程12.2 Spry构件12.2.3 Spry折叠式1.插入“Spry折叠式” 选择菜单栏的“插入”|“Spry”|“Spry折叠式”，或“插入”|“布局对象”|“Spry折叠式”命令，或在“插入”面板的“Spry”类别中单击“Spry折叠式”按钮。 对于插入到网页中的“Spry折叠式”，单击左上角的蓝色区域即表示选择了该“Spry折叠式”，进行编辑操作。 网页制作基础教程12.2 Spry构
9、件12.2.3 Spry折叠式2添加与删除选择卡面板 在“文档”窗口中选择一个折叠构件。 在“属性”面板中单击“面板”旁边的加号 (+) 按钮或减号（-）按钮。 （可选）更改面板的名称，方法是在“设计”视图中选择面板的文本并对其进行修改。网页制作基础教程12.2 Spry构件12.2.3 Spry折叠式3更改面板的顺序n在“属性”面板中，通过“在列表中向上移动面板”按钮和“在列表中向下移动面板”按钮对页面中的面板进行上下排序。网页制作基础教程12.2 Spry构件12.2.3 Spry折叠式4打开面板进行编辑请执行下列操作之一： n将鼠标指针移到要在“设计”视图中打开的面板的选项卡上，然后单击
10、出现在该选项卡右侧的眼睛图标。n在“文档”窗口中选择一个折叠构件，然后在“属性”面板的“面板”菜单中选择要进行编辑的面板。网页制作基础教程12.2 Spry构件12.2.4 Spry可折叠面板2打开或关闭可折叠面板打开或关闭可折叠面板的方法： n将鼠标指针移到要在“设计”视图中打开的面板的选项卡上，然后单击出现在该选项卡右侧的眼睛图标。 n在“文档”窗口中选择一个折叠构件，然后在“属性”面板中，从“显示”下拉列表中选择“打开”或“已关闭”。 网页制作基础教程12.2 Spry构件12.2.4 Spry可折叠面板3设置可折叠面板的默认状态 在“文档”窗口中选择一个可折叠面板构件。 在“属性”面板
11、中，从“默认状态”弹出菜单中选择“打开”或“已关闭”。网页制作基础教程12.2 Spry构件12.2.4 Spry可折叠面板4启用或禁用可折叠面板的动画 在“文档”窗口中选择一个可折叠面板构件。 在“属性”面板中，勾选或撤选“启用动画”复选框即可。 网页制作基础教程12.3 使用Spry显示数据12.3.1 定义 Spry XML 数据集 n要在Web页上显示XML数据，首先需要在Dreamweaver中建立一个XML数据集，表示当前网页与XML文件之间建立了关系，才能向 HTML 页面中添加 Spry 区域、表格或列表。 网页制作基础教程12.3 使用Spry显示数据12.3.1 定义 Sp
12、ry XML 数据集 步骤： 选择“插入Spry”|“Spry XML 数据集”。或在“插入”栏中的“Spry”类别中单击“Spry XML 数据集”按钮。 弹出的“Spry XML数据集”对话框，进行相关设置。 设置完成后单击“确定”按钮。 网页制作基础教程12.3 使用Spry显示数据12.3.1 定义 Spry XML 数据集 网页制作基础教程12.3 使用Spry显示数据“Spry XML数据集”对话框相关选项：n数据集名称：接受默认的 Spry 数据集名称“ds1”，也可以输入更有意义的名称。 nXML源：通过单击“浏览”按钮获得已准备好的XML数据文件。 n获取架构按钮：在确定要使
13、用的数据集之后，单击此按钮，则该数据集中的数据将显示在“行元素”的列表框中。nXPath：显示一个表达式，指示所选节点在XML源文件中的位置。网页制作基础教程12.3 使用Spry显示数据“Spry XML数据集”对话框相关选项：预览：单击该按钮可以查看数据在浏览器中的显示情况。数据类型：指定当前在“数据集列”中选定的数据列的类型。排序：如果要在页面加载数据时自动排序数据，则从“排序”下拉列表中选择一个用于排序的列值。方向：确定排序的方式，包括“升序”和“降序”两种方式。网页制作基础教程12.3 使用Spry显示数据“Spry XML数据集”对话框相关选项：n加载时不同：勾选此项以确保没有重复
14、列。n禁用XML缓存：要直接从服务器中加载数据时，则选择“禁用XML缓存”选项。n自动刷新数据：选择“自动刷新数据”选项并输入一个毫秒值 。 网页制作基础教程12.3 使用Spry显示数据12.3.2 创建 Spry 区域n对于绑定了“Spry XML 数据集”的页面来说，要在网页中显示XML数据，必须先建立“Spry区域”。 nSpry区域有两种类型：n围绕数据对象（如表格和重复列表）的 Spry 区域；n Spry 详细区域，该区域与主表格对象一起使用时，可允许对 Dreamweaver 页面上的数据进行动态更新。 网页制作基础教程12.3 使用Spry显示数据12.3.2 创建 Spry
15、 区域插入Spry区域的步骤： 选择“插入”|“Spry”|“Spry 区域”。或在“插入”栏中“Spry”类别中单击“Spry 区域”按钮。 弹出的“Spry XML数据集”对话框，进行相关设置。 单击“确定”时，Dreamweaver 会在页面中放置一个区域占位符，并显示文本“此处为 Spry 区域的内容”。网页制作基础教程12.3 使用Spry显示数据12.3.3 创建 Spry表格 Spry表格有两种类型：n简单表格n主动态表格，主动态表格与详细区域绑定，以允许动态更新Dreamweaver页面上的数据。 网页制作基础教程12.3 使用Spry显示数据12.3.3 创建 Spry表格
16、步骤： 在前面插入的Spry区域中删除“此处为 Spry 区域的内容”文本，然后切换到 “插入”栏中的“Spry”类别中单击相应的 “Spry 表”按钮。或选择“插入”|“Spry”|“Spry 表格”。 弹出的“插入Spry 表”对话框 ，进行相关设置。 单击“确定”，用户会在“设计”视图中看到一个表格，在该表格中，针对所包括的每个元素都有一行标题和一行数据引用，并用大括号 () 括起来。 网页制作基础教程12.3 使用Spry显示数据12.3.3 创建 Spry表格 在“列”面板中，单击 加号 (+)可以添加将要 表格中的数据列，单击 减号 (-) 可以减少列； 单击向上箭头或向下箭 头可以移动数据列的排 列次序。如果希望在单击网页中 数据列上标题时自动排 序，则可在“列”面板 中选择它，然后选择“ 单击标题时将对列排序 ”。对于每个要作为
