如何制作一个Spry构件服务排序数据

使用Dreamweaver的CS4新功能之一轻松创建可排序的数据没有得到你的手脏与代码。

网页设计一向桥接两个完全不同的过程之间的鸿沟：平面设计和编程。这经常被更容易通过工具如Dreamweaver，这让创意需要多种方法来达到同样的目标。

然而，随着网页被纯静态的演变，变得更加动感，任何设计师不愿或不能把握的代码化的设计基本面运行越来越掉队的危险。

这尤其是当它涉及到JavaScript的，现在形成了网页小工具和应用程序令人眼花缭乱的根本基础。

有效，Dreamweaver的作者是深知这一点，并已包括的手段，直接实现同等功能到CS4应用程序。在本教程中，你会使用Dreamweaver的轻快功能工作，创建可排序的数据 - 所有无需任何编码的知识。

前期准备工作（包括相关工具或所使用的原料等）

Dreamweaver CS4

详细的操作方法或具体步骤

复制的获取你的硬盘上开始从盖CD文件夹到一个难忘的位置。打开Dreamweaver，并转到网站>新建站点。在站点定义对话框中，单击高级，命名您的网站，并设置本地根文件夹为您刚才复制整个文件夹

使用文件面板打开播放列表，data.html。这是您将创建一个排序表中的内容。本文件包含一个标准的HTML表格，字段名称作为列标题和数据列。选择表（点击之内，然后点击““在状态栏）。在属性面板中，注意“playlistTable”的表中的ID值。在自己的排序工作的内容时，该表总是需要一个唯一的ID。

关闭播放列表数据文件，并转到文件>新建。创建一个空白的HTML网页并保存在步骤1中创建的文件夹中，使用该名称排序，playlist.html。点击链接图标（附加样式表）在CSS面板打开的附加 外部样式表对话框的底部。

单击Browse ...并选择排序- playlist.css的样式表附加。确保“添加为”设置为链接，然后选择屏幕从媒体菜单。点击“确定”。你不会看到在设计视图中的任何变化，但如果你查看页面的代码，一些预制的CSS现在连接，这将在稍后样式表很好

转到插入>轻快> Spry数据集来开始配置Spry数据显示。点击浏览并选择播放列表，data.html。然后从数据容器下拉菜单中选择playlistTable“ -你会记得，这是”播放列表数据表的步骤2中的数据预览部分现在应该显示您的表ID的价值。

单击下一步，你会得到确定的内容选项。在大多数情况下，默认设置可以被单独留下，但特定类型的数据可以具有不同类型的分配，它可以帮助Dreamweaver的与排序。选择评级列，然后从类型选择号码; 选择进口，并从类型日期。单击下一步继续。除非你做一些黑客代码，日期必须是在美国格式（MMDDYY） -英国的格式（DDMMYY）将无法正常工作。

Dreamweaver中提供了各种布局选项为您的数据。在这个例子中，选择顶部的选项（插入表格），然后单击设置。在随后的对话框，您可以拖动列四周，确定每一列是否可排序，甚至删除你不希望显示的列

单击完成并保存文件。Dreamweaver的应该在这一点上实现了页面使用的行为“，需要配套的文件，所以会显示描绘复制相关文件对话框。单击确定，将文件复制到你的网站（记住上传他们，如果你把你的排序在线内容）。

在设计视图，您现在应该看到一个样式表，用标题不变，但只有占位符的数据。点击实时查看按钮，你会得到你的网页的完整，互动预览，具有播放列表数据。点击标题之一，数据将重新排序相应。单击标题，第二次和排序顺序将颠倒过来。

使用这种方法提供了超越了简单的整理利益。您不仅可以共享多个网页的原始数据文件，但因为它是一个模块化的组件，你可以更新它没有做任何事情的主网页（你在步骤3中创建）。要开始这样做，所谓的预览排序，playlist.html使用文件>浏览器预览浏览器中保存的网页，然后关闭所有的Dreamweaver文件。

接下来，重新打开刚刚播放列表，data.html在Dreamweaver和编辑文件-删除一个或两个行并添加了一些新的内容。您可以通过选择表并修改在属性面板中的行值增加空表行。

保存页面并刷新你在第10步打开浏览器窗口，你会看到的内容自动更新，呈现你刚刚作出播放列表，data.html的变化。如果你没有看到的变化，你的网页很可能缓存-按住ALT /选项，并刷新浏览器。

注意，Spry数据显示区主要包括标准代码。如果你不惹的“轻快”属性，你可以围绕它进 行编辑很轻松了。例如，检查sortableplaylist。HTML在完成文件夹。这是一样的，你所创建的，但它也包括一个表格标题和页脚。这是一个好主意，避免将Spry数据显示的包含div标签中的内容无关; 插入新的布局div标签和页面内容，这不是在Spry数据显示的一部分时，一定要这样做之前或之后的Spry区域，不属于它。

没有使用Dreamweaver的图形用户界面更新设置为HTML数据集的简单方法。但是，如果你是幸福的复制和粘贴一些代码，你可以很容易地更新设置。创建一个新网页，请按照本教程的方法来创建可排序的内容（但使用不同的设置，如在第7步确定了“排序列”选项宋列），然后在拆分 视图，复制和粘贴必要的从相关的脚本元素中的JavaScript（见图片）。在您的示例页面的情况下，将'，{sortOnLoad：“宋”，sortOrderOnLoad：“升序”}“后直接”playlistTable“会自动排序宋列。看到完成的文件夹中的文件，更好地了解如何工作的。

经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。作者声明：本教程系本人依照真实经历原创，未经许可，谢绝转载。