创建 Spry 数据集

目录

• 创建 Spry HTML 数据集

   

• 创建 Spry XML 数据集

   

• 为数据集选择布局

   

  • 动态表格布局

     

  • 主/详细布局

     

  • 堆积容器布局

     

  • 带有聚光灯区域的堆积容器布局

     

  • 不要插入 HTML

     

• 编辑数据集

   

• 使用设计时输入功能

   

• 关于 Spry 数据选择器

   

• 关于动态 Spry 主表格和更新详细区域

   

创建 Spry HTML 数据集

1. 如果仅是创建数据集，您无需考虑插入点。如果要创建数据集，同时还要插入布局，请确保插入点位于希望插入布局的页面位置。

2. 选择“插入”>“Spry”>“Spry 数据集”。

3. 在“指定数据源”屏幕中，执行以下操作：

   • 从“选择数据类型”弹出菜单中，选择“HTML”。（默认选中此项。）

   • 为新数据集指定名称。第一次创建数据集时，默认名称为 ds1。数据集名称可以包含字母、数字和下划线，但不能以数字开头。

   • 在数据源中指定希望 Dreamweaver 检测的 HTML 元素。例如，如果已将数据组织在 div 标签中，希望 Dreamweaver 检测 div 标签而不是表格，请从“检测”弹出菜单中选择“Divs”。通过“自定义”选项，您可以输入希望检测的任何标签名称。

   • 指定包含 HTML 数据源的文件的路径。此路径可以是指向您站点中本地文件的相对路径（例如 data/html_data.html），也可以是指向现用网页的绝对 URL（使用 HTTP 或 HTTPS）。您可以单击“浏览”按钮，导航并选择本地文件。

     Dreamweaver 将在“数据选择”窗口中呈现 HTML 数据源，并显示可用作数据集容器的元素的可视标记。希望使用的元素必须已分配有唯一 ID。如果未分配，Dreamweaver 将显示错误消息，您将需要返回数据源文件，分配一个唯一 ID。此外，数据源文件中的合格元素不得位于 Spry 区域中，也不得包含其它数据引用。

     或者，您也可以指定“设计时输入”作为数据源。有关详细信息，请参阅使用设计时输入功能。

   • 单击“数据选择”窗口中显示的其个黄色箭头，或从“数据容器”弹出菜单中选择一个 ID，以此为数据容器选择元素。

     查看完全大小图形为 HTML 数据集数据容器选择元素。
     
     

对于过长的文件，您可以单击“数据选择”窗口底部的“展开/折叠”箭头，查看更多数据。

为数据集选择容器元素后，Dreamweaver 会在“数据预览”窗口中显示数据集预览。

（可选）如果希望为数据集指定 CSS 数据选择器，请选择“高级数据选择”。例如，如果在“行选择器”文本框中指定 .product，在“列选择器”文本框中指定 .boximage，数据集将仅包含分配有 .product 类别的行，以及分配有 .boximage 类别的列。

如果要在给定文本框中键入多个选择器，请用逗号分隔。

有关详细信息，请参阅关于 Spry 数据选择器。

完成“指定数据源”屏幕中的操作时，单击“完成”可立即创建数据集，也可以单击“下一步”，转到“设置数据选项”屏幕。如果单击“完成”，数据集将出现在“绑定”面板（“窗口”>“绑定”）中。

在“设置数据选项”屏幕中，执行以下操作：

• （可选）选中一列，然后从“类型”弹出菜单中选择一种列类型，以此设置数据集的列类型。例如，如果数据集中有一列包含数字，请选中该列，然后从“类型”弹出菜单中选择“数字”。仅当您希望用户能够按该列排序数据时，此选项才有意义。

  选择数据集列的方式有以下三种：单击列标题；从“列名”弹出菜单中选择该列；使用屏幕左上角的左右箭头导航到该列。

• （可选）从“对列排序”弹出菜单中选择要用作排序依据的列，这样可以指定希望如何排序数据。选择列后，您可以指定是按升序还是按降序排序该列。

• （可选：仅限表格）如果希望使用通用列名，即 column0、column1、column2 等，而不使用 HTML 数据源中指定的列名，请取消选择“将第一行作为标题”。

  注： 如果所选数据集容器元素不是表格，此选项和下一选项均不可用。对于不是基于表格的数据集，Dreamweaver 自动使用 column0、column1、column2 等作为列名。

• （可选：仅限表格）选择“将列作为行”可以反转数据集中数据的水平方向与垂直方向。如果选择此选项，列将用作行。

• （可选）选择“筛选掉重复行”，排除数据集中重复的数据行。

• （可选）如果希望始终能够访问数据集中最近使用的数据，请选择“禁用数据缓存”。如果希望自动刷新数据，请选择“自动刷新数据”，并以毫秒为单位指定刷新时间。

• 完成“设置数据选项”屏幕中的操作时，单击“完成”可立即创建数据集，也可以单击“下一步”，转到“选择插入选项”屏幕。如果单击“完成”，数据集将出现在“绑定”面板（“窗口”>“绑定”）中。

在“选择插入选项”屏幕中，执行下列操作之一：

• 为新数据集选择布局，并指定适当的设置选项。有关详细信息，请参阅为数据集选择布局。

• 选择“不要插入 HTML”。如果选择此选项，Dreamweaver 将创建数据集，但不会向页面中添加任何 HTML。数据集显示在“绑定”面板（“窗口”>“绑定”）中，您可以手动将所需数据从数据集拖动到页面。

单击“完成”。

Dreamweaver 将创建数据集。如果您选择了布局选项，Dreamweaver 还将在页面上显示布局和数据占位符。如果查看“代码视图”，您会看到，Dreamweaver 已在标头中添加对 SpryData.js 文件和 SpryHTMLDataSet.js 文件的引用。这些文件是重要的 Spry 资源，与页面一起使用。请勿从页面删除此代码，否则数据集将无效。将页面上传到服务器时，也需要以相关文件的形式上传这些文件。