使用Dreamweaver CS3 Spry 框架构建相册-平面设计-菜鸟图库

使用Dreamweaver CS3 Spry 框架构建相册

2022-02-02
来源/作者： adobe-dreamweaver.cn / adobe-dr…
3 次浏览

将 Spry framework 纳入 HTML 页面, 以创建动态生成的 Web 相册。 Spry framework 可用于通过少量标记将 XML 数据载入并纳入 HTML 页面。在开发相册功能后, CSS 用于为相同的基本 HTML 页面创建各种不同的布局。

在此项目中, 相册的索引页将显示缩略图和第一个大图像。当用户单击索引页中的缩略图时, 该图像对应的大图将显示在第一个图像的位置。传统的 Web 相册通常由多个静态网页构成 (往往在相册中每个图像占一页), 图像本身随网页一起显示。这些页面除 URL 外往往完全相同, 其 URL 会根据当前观看的大图变动。在传统相册中, 当用户单击缩略图时 (或单击“下一个”或“上一个”按钮时), 在其中一个相册页面上, 会产生一个全新的 HTML 页面并将其载入浏览器以显示下一个图像。本教程使用不同的约定 - 不是更新整个页面, 而只通过 Ajax 重新载入新的大图。这种方法可更快地显示图像, 在用户观看相片时产生更流畅的用户体验。 Spry framework 在这种情况下非常有用, 因为它可能创建非常灵活的页面, 这种页面只需几行代码即可动态显示图像。

如果没有, 请下载此教程的源文件并解压 zip 文件。示例文件夹包含以下内容:

* Spry 数据框架和 xpath.js 文件
* 包含图像信息的 XML 文件: photos.xml
* 在 XML 文件中列出的示例相片, 包括缩略图
* 相片库的完整版本: gallery_finished.htm

Spry framework

Spry framework 是一种 JavaScript 库, 其中包含在相册页上使用 XML 数据所需的全部功能。虽然 Spry Framework 的最终版本有更多的功能, 但此版本 (prerelease 1.4) 强调动态数据。

以下是本教程中要使用的术语列表:

* 数据集: 一种 JavaScript 对象, 其中包含类似于平伸桌面的 XML 数据演示。
* 动态区域: 网页的动态区域, 与一个或多个数据集绑定, 能够在载入或更改的数据集中将自己重新生成为数据。
* 数据引用: 动态区域内从特定数据集引用数据。由于动态区域重新生成自己, 这些数据引用会替换数据集中的实际数据。数据引用在动态区域以花括号表示, 形式类似于: {dataSetName::columnName}。如果动态区域只与一个数据集绑定, 则数据引用使用简短形式: {columnName}

您必须熟悉这些术语才能掌握本教程。现在, 我们启动项目。

要完成本教程, 您需要安装以下软件和文件: Spry Prerelease 1.4

下载 Spry Prerelease 1.4

可选: Dreamweaver CS3

试用
购买

示例文件

photo_album_samples.zip (ZIP, 1.5 MB)

构建相册页面

我们将从创建相册页面的基本结构开始。我们的 HTML 页面将由一个包含缩略图的 <div> 和另一个包含主图像的 <div> 构成。如果您尚未查看项目的完成版本, 现在就可以查看 (从示例文件夹打开 gallery_finished.htm) 以更好地了解这一点如何工作。

注: 本教程中列出的步骤假设您使用 Dreamweaver 8。如果您使用其他编辑器, 请确保您编写的代码类似于以下提供的示例代码。如果您创建自己的相册页面版本并将其保存到示例文件夹中, 则提供的 CSS 布局将向您的页面赋予一个基本布局。按以下步骤为相册创建 HTML 页面:

1. 下载示例文件。解压文件夹以访问文件。
2. 启动 Dreamweaver。创建并保存一个新的 HTML 页面, 将此文件保存在包含示例文件的文件夹中。将文件命名为“gallery.htm”。使用“拆分视图”设置 (选择“查看”>“代码和设计”), 使您在执行下述说明时可以参照代码窗口和设计窗口。
3. 选择“窗口”>“插入”以访问“插入”面板。它显示在程序的顶部。从最左侧的下拉菜单中, 选择“布局”, 而不是默认设置 (“常用”)。
4. 接着, 单击“绘制层”按钮 (下拉菜单右侧第三个按钮)。
5. 在“设计”窗口中, 单击并拖动鼠标, 在页面左半部分画出一个层。这就是将要容纳缩略图图像的 <div>。您画的层应占居页面左关侧的大部分。不要担心准确的比例, 因为以后会根据需要调整层的大小。通过单击左上角的“手柄”, 选中层。
6. 在选中层后, 访问“属性”检查器。 (如果未显示, 请选择“窗口”>“属性”。) 在显示“Layer1”的字段中选择文本, 然后键入新的层编号: thumbContainer
7. 再次单击“绘制层”按钮, 在页面右侧画出另一个层。这就是将要容纳大图的 <div>。单击层的“手柄”将其选中, 然后在“属性”检查器中, 将层编号设置为: main
8. 在页面顶部的“标题”字段中, 键入页面标题: Ajax Album Demo

完成这些步骤后, 在“代码”窗口中检查标签。您的 HTML 应类似于以下代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Album Demo</title>
<style type="text/css">
<!—
#thumbContainer {
position:absolute;
left:23px;
top:127px;
width:437px;
height:430px;
z-index:1;
}
#main {
position:absolute;
left:476px;
top:128px;
width:491px;
height:315px;
z-index:2;
}
-->
</style>
</head>
<body>
<div id="thumbContainer"> </div>
<div id="main"> </div>
</body>
</html>

您会发现您的代码与上述代码有所不同, 主要是由于两个 <div> 层的确切位置以及您在 Dreamweaver 中选择的首选项不同造成的。不要求您的代码与上述示例完全相同。

注: 如果您希望与本教程完全相同的 HTML 代码, 只需复制上述代码示例, 然后选中 Dreamweaver“代码”窗口中的所有代码, 将教程中的代码粘贴上去。

我们已经创建了 HTML 页面, 现在可以使用 Ajax framework 的库中可用的函数设置动态功能。

定义数据集并添加数据绑定

在构建 HTML 页面后, 下一步就是将 Ajax 脚本添加到项目。我们将从添加 XML 数据集开始。但在我们准备好这样做之前, 先看看 XML 数据, 得到关于其用法的感觉。

使用 Dreamweaver 打开源文件文件夹中的 photos.xml 文件。如果您研究 XML 文件的一个节点, 您会发现以下标签:

<photo
path = "travel_01.jpg"
width = "350"
height = "262"
thumbpath = "travel_01.jpg"
thumbwidth = "75"
thumbheight = "56">
</photo>

请注意, XML 节点“photo”包含 HTML <img> 标签所需的全部基本信息。您将使用此数据动态构建一系列用于显示相册的 HTML <img> 标签。
定义数据集

我们需要做的第一件事就是将 sprydata.js 和 xpath.js 文件链接到您创建的 gallery.htm 文件。

1.

在“代码”窗口中, 将以下代码键入 HTML 的 <head> 部分:

<script type="text/javascript" src="includes/xpath.js"></script>
<script type="text/javascript" src="includes/sprydata.js"></script>

注: 您已将 xpath.js 和 sprydata.js 文件移动到示例文件夹的子文件夹中, 请确保 src 路径与项目的文件夹结构匹配。

现在, 我们已准备好创建数据集。使用 JavaScript 调用 sprydata.js 文件, 即完成此操作。请执行下列步骤:
2.

在 HTML 页面的 <head> 部分, 添加 <script> 标签。键入以下代码, 将其添加到将创建数据集的 JavaScript 调用。

<script type="text/javascript">
var dsGallery = new Spry.Data.XMLDataSet("photos.xml", "gallery/photos/photo");
</script>

如果未准备好, 现在可以保存文件。

通过查看您的“代码”窗口并将代码与以下 HTML 页面示例对比, 检查您的进度:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Album Demo</title>
<script type="text/javascript" src="includes/xpath.js"></script>
<script type="text/javascript" src="includes/sprydata.js"></script>
<script type="text/javascript">
var dsGallery = new Spry.Data.XMLDataSet("photos.xml", "gallery/photos/photo");
</script>
<style type="text/css">

</style>
</head>
<body>
<div id="thumbContainer"> </div>
<div id="main"> </div>
</body>
</html>

我们刚在 <script> 标签之间添加的代码创建名为“dsGallery”的变量, 这就是数据集的名称。 “Spry.Data.XMLdataset”是创建数据集的函数。文件“photos.xml”是包含相片数据的 XML 文件的名称。 “gallery/photos/photo”部分描述 XML 中实际数据开始的路径。代码的此数据集部分代表我们查看的示例 XML 节点中的三个标签。这表示数据集的数据在 photos.xml 文档中的 <photo> 节点内开始。

这就是我们为定义数据集需要添加的所有脚本!
添加数据绑定

现在, 我们已经定义了数据集, 可以将数据绑定添加到 HTML 页面。我们从将缩略图添加到我们在前面创建的“thumbcontainer”<div>开始。
3. 通过在 <div> 标签之间键入以下内容, 将图像标签插入“thumbcontainer”DIV 中: <img src="">
4.

然后, 将图像 URL 的数据引用添加到 src 属性, 如下所示:

<img src="thumbnails/{@thumbpath}" />

“src”字段指向缩略图文件夹, 然后抽出 XML 文件中“thumbpath”属性的 XML 值。这将完成缩略图图像的路径。 @ 符号用于名称之前, 原因是此值为图像标签的一个属性。例如, 要从 <image thumbpath="foo.jpg">链接到名为“foo.jpg”的图像文件, 请使用此语法: {@thumbpath}。这不同于键入的标签值, 后者应为: <thumbpath>foo.jpg</thumbpath>。如果没有“@”, 则应为 {thumbpath}。

现在已设置缩略图图像。现在, 我们通过将“spry:repeat”属性添加到缩略图图像标签设置要重复的图像。这将使图像标签在整个数据集重复。
5.

在 <img> 标签的缩略图中, 添加以下“spry:repeat”属性:

<img src="thumbnails/{@thumbpath}" spry:repeat="dsGallery" />

6.

在“thumbContainer”<div> 标签的缩略图中, 添加以下“spry:region”属性:

<div id="thumbContainer" spry:region="dsGallery">

7.

然后, 找到“main”<div> 标签, 并添加“spry:detailregion”属性:

<div id="main" spry:detailregion="dsGallery">

此时, 您的代码应类似于以下示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Album Demo</title>
<script type="text/javascript" src="includes/xpath.js"></script>
<script type="text/javascript" src="includes/sprydata.js"></script>
<script type="text/javascript">
var dsGallery = new Spry.Data.XMLDataSet("photos.xml", "gallery/photos/photo");
</script>
<style type="text/css">

</style>
</head>
<body>
<div id="thumbContainer" spry:region="dsGallery">
<img src="thumbnails/{@thumbpath}" spry:repeat="dsGallery" />
</div>
<div id="main" spry:detailregion="dsGallery">
</div>
</body>
</html>

在两个 <div> 标签中, “spry:region”属性告诉 Ajax framework 每个 <div> 层都包含动态数据。

<img> 标签中的“spry:repeat”属性选择动态区域应为 dsGallery 数据集中的每一行创建一个图像。这将使页面为数据集中的每个缩略图生成一个图像。

现在, 当您选择“文件”>“在浏览器中预览”时, 所有缩略图图像都将显示在页面中。
设置主图像画面

下面这一部分看起来很熟悉, 因为它与我们刚完成的步骤非常相似。
8.

在“main”<div> 标签中, 添加一个图像标签。再添加一个代码以将图像名称显示在主图像下方, 如下所示:

<img src="images/{@path}"><br/>Name:{@path}

请注意, 此代码与缩略图代码的唯一区别在于我们使用 {@path} 而不是 {@thumbpath}。由于这些值在 XML 文件中完全相同, 我们可以使两者中任何一个 - 但为了清晰和符合最佳实践, 我们将使用正确的属性。

现在, 基本的相册功能已经设置完。再次选择“文件”>“在浏览器中预览”, 您将看到第一个主图像和所有缩略图图像的页面显示。但是, 如果您单击缩略图图像, 不会发生任何事情。我们下一步的目标就是添加一个功能, 即当用户单击缩略图图像时, 该图像对应的大图将更新主 <div> 区域。为此, 我们需要在缩略图图像和主图像之间建立关系, 如下所示:
9.

在“代码”窗口中, 将“spry:setrow”属性添加到缩略图 <img> 标签:

spry:setrow="dsGallery"

您的 HTML 代码应类似于:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Album Demo</title>
<script type="text/javascript" src="includes/xpath.js"></script>
<script type="text/javascript" src="includes/sprydata.js"></script>
<script type="text/javascript">
var dsGallery = new Spry.Data.XMLDataSet("photos.xml", "gallery/photos/photo");
</script>
<style type="text/css">

</style>
</head>
<body>
<div id="thumbContainer"spry:region="dsGallery">
<img src="thumbnails/{@thumbpath}" spry:repeat="dsGallery" spry:setrow="dsGallery"/>
</div>
<div id="main"spry:detailregion="dsGallery">
<img src="images/{@path}"><br/>Name:{@path}
</div>
</body>
</html>

让我们现在看看发生了什么情况:

当用户单击缩略图时, “spry:setrow”属性告诉浏览器将数据集的 RowID 设置为 CurrentRow。 “spry:detailregion”属性使用此值更新, 然后再使用 XML 文件中该节点 ID 的图像名称更新主图像的路径。现在显示新的主图像。

当您在浏览器中预览您的页面时, 您会发现相册的功能现在已经很不错, 但缩略图在浏览器窗口顶部显示混乱。不必担心 HTML 页面中的布局, 我们将在本教程的下一部分解决这个问题。

使用 CSS 控制相册的布局

我们将使用某些 CSS 代码限制缩略图图像, 使其正确显示。通过为缩略图添加浮动规则和大小规则可以实现这一目标, 从而使缩略图图像限制在缩略图容器 <div> 标签中。

1.

在 HTML 文档的 <head> 部分中找到样式标签。添加迟到 CSS:

img.thumbs {
float:left;
height:60px;
width:60px;
margin-right: 2px;
margin-bottom: 2px;
border: solid black 1px;
}

“float:left;”代码强制图像留在缩略图 <div> 内。高度和宽度值定义缩略图图像的大小。您可以根据需要任意调整或删除这些值, 但请记住, 指定一致的高度和宽度会使图像块显示令人惬意的一致风格, 即使某些缩略图有轻微拉伸。
2.

下一步, 找到缩略图图像的图标, 然后使用值“thumbs”添加类属性, 类似于:

<img src="thumbnails/{@thumbpath}" spry:repeat="dsGallery" class="thumbs" onclick="dsGallery.setCurrentRow('{ds_RowID}');" />

代码应类似于:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Album Demo</title>
<script type="text/javascript" src="includes/xpath.js"> </script>
<script type="text/javascript" src="includes/sprydata.js"> </script>
<script type="text/javascript">
var dsGallery = new Spry.Data.XMLDataSet("photos.xml","gallery/photos/photo");
</script>
<style type="text/css">

</style>
</head>
<body>
<div id="thumbContainer" spry:region="dsGallery">
<img src="thumbnails/{@thumbpath}" spry:repeat="dsGallery" class="thumbs" onclick="dsGallery.setCurrentRow('{ds_RowID}');" /> </div>
<div id="main" spry:detailregion="dsGallery">
<img src="images/{@path}"/><br />Name:{@path}
</div>
</body>
</html>

在浏览器中预览页面并验证图像是否正确处于 <div> 区域中 - 使相册页面 (gallery.htm) 中的图像像本教程完成版本一样显示 (位于示例文件夹中)。要对比, 请打开一个新浏览器窗口, 然后选择“文件”>“打开文件”, 再导航到 gallery_finished.htm 文件以并排观看页面。

下一步工作

在完成本教程中的步骤后, 您可能发现创建功能完整、外观漂亮的相册非常容易 - 只需使用几行代码。此设计的妙处在于非常灵活, 可针对您的项目进行改编。尝试移动 <div> 和调整其大小以创建不同的页面布局。使用更多的 CSS 添加其他样式, 以增强外观。如果您使用关于每个图像的描述或元数据更新 XML 文件, 也可以显示这些字幕。尝试将高度和宽度数据添加到页面。当您更改缩略图的高度和宽度后, 看看效果。

为本教程准备示例文件时, 我使用了 Photoshop CS2 生成 Flash 样式的 Web 相片库。在导出此相片库后, 我复制了“thumbnails”和“images”文件夹以及 photos.xml 文件, 并将其用于此项目。在构建您自己的相册时, 可以使用 Photoshop CS2 创建您自己的文件, 然后将其如本教程所示进行运用。如果您认真执行这些步骤, 应能够很容易地使用您在 Photoshop 中创建的文件替换本教程中的图像和 XML 文件, 网页将正确显示您的新图像。当您复制文件或更新 XML 及 HTML 页面以反映站点结构时, 只需确保命名约定和文件夹结构一致。

注: Safari 浏览器的当前版本在节点命名方面有一些已知的问题, 可能使相册页面无法正确显示, 除非采取其他办法。如果您要为 Safari 用户创建站点, 则需要适当更新 XML 文件才能正确显示相册。发生这种问题是因为 Safari 浏览器会将名为“image”的 XML 节点转换为实际的 <img> 标签! 如果您遇到这种问题, 请通过将 <image> XML 节点更改为其他内容 (例如 <photo>) 来更新您的 XML 文件。在进行此更改后, 您的 XML 文件将类似于:

<gallery>
<images>
<photo
path="...

在本教程中, 我们已经转换 XML <images> 和 <image> 节点, 因此, 该代码在所有浏览器中都能工作。如果您未来在使用 Safari 浏览器预览相册时发现奇怪的画面, 但请记住此重命名问题。
将项目提高到下一个水平

现在, 相册已经具备完整功能, 对多数用户已能很好地工作。但是, 为了简便起见, 我直接将一些值硬编码到了 HTML 页面, 通过在 XML 中指定此信息可以更加灵活地处理; 特别地, 在本教程中, 图像文件的文件夹路径是硬编码的。如果您研究这些文件, 可能已发现此文件夹信息已经存在于 XML 文件中, 但在 XML 的根级 <gallery> 节点中存储为标签。在练习时, 您可以尝试通过在 HTML 中将硬编码的值换出到 XML 文件的节点使此代码更具通用性和可再用性。文件中还有很多其他数据点可用于进一步改进相册。为了使用此数据, 您将需要创建另一个数据集。
多个数据集

如果您现在停止模仿本教程, 您就有功能完整的相册可以通过更改 CSS 样式来更新 (根据需要), 还可以通过生成新图像、缩略图和 XML 文件来创建新的图库。如果您要继续模仿本教程, 我将添加另一个数据集, 并将某些相册信息添加到页面顶部。

我在本教程开头曾简单地提及一个页面中可以使用多个数据集。为 photos.xml 文件创建第二个数据集将使您能够访问额外数据。完成这一任务后, 您可以很容易地在页面上显示这些数据。请注意, 默认情况下, 除文件夹路径外, 其他数据点 (如字体、颜色、边框、摄影师姓名和日期) 也都包括在文件中。 XML 文件中的值可以编辑或更改。节点还可以根据需要展开。例如“description”属性可以添加到每个图像节点以包含每个图像的字幕。在添加此属性后, 您可以使用要显示在每个主图像下方的描述属性 (而不是图像名称)。

Photoshop CS2 Web 相册功能也可用于设置其他元数据点。让我们看看这一点是如何工作的:

1.

在文档开头创建第二个数据集。它类似于第一个数据集, 只是 XML 文件夹路径将仅指向 XML 的根。此新数据集的名称为“dsData”。请参见以下突出显示的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Album Demo</title>
<script type="text/javascript" src="includes/xpath.js"></script>
<script type="text/javascript" src="includes/sprydata.js"></script>
<script type="text/javascript">
var dsGallery = new Spry.Data.XMLDataSet("photos.xml","gallery/photos/photo");
var dsData = new Spry.Data.XMLDataSet("photos.xml","gallery");
</script>
<style type="text/css">

</style>
</head>
<body>
<div id="thumbContainer" spry:region="dsGallery">
<img src="thumbnails/{@thumbpath}" spry:repeat="dsGallery" class="thumbs" onclick="dsGallery.setCurrentRow('{ds_RowID}');" />
</div>
<div id="main" spry:detailregion="dsGallery">
<img src="images/{@path}"/><br />Name:{@path}
</div>
</body>
</html>
在添加此新数据集后, 您就准备好在相册中使用这些新的数据点。从将硬编码的图像文件夹路径替换成 XML 文件中使用的值, 如以下步骤所示:
2.

在缩略图“src”路径中, 删除“thumbnails/”并将其替换为 XML 值。确保删除斜杠, 因为该字符已存储在路径的 XML 值中。
3.

对主 <img> 标签重复步骤 2。从“src”字段删除“images/”部分并将其替换为 XML 值。
4.

下一部分需要告诉动态区域您将使用新数据集中的数据。将数据集名称添加到 spry:region 属性, 以空格隔开, 如以下代码示例所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Album Demo</title>
<script type="text/javascript" src="includes/xpath.js"></script>
<script type="text/javascript" src="includes/sprydata.js"></script>
<script type="text/javascript">
var dsGallery = new Spry.Data.XMLDataSet("photos.xml","gallery/photos/photo");
var dsData = new Spry.Data.XMLDataSet("photos.xml","gallery");
</script>
<style type="text/css">

</style>
</head>
<body>
<div id="thumbContainer" spry:region="dsGallery dsData">
<img src="{dsData::thumbnail/@base}{@thumbpath}" spry:repeat="dsGallery" class="thumbs" onclick="dsGallery.setCurrentRow('{ds_RowID}');" />
</div>
<div id="main" spry:detailregion="dsGallery dsData">
<img src="{dsData::large/@base}{@path}"/><br />Name:{@path}
</div>
</body>
</html>

要了解如何指定动态数据, 以下是另一个示例:

不使用 {dsData::large/@base}

您可以这样考虑它: {dataset::XMLTagName/@XMLTagAttribute}

此时, 我们已准备好将站点信息添加到页面顶部。
5.

在页面上画一个新层 <div>。随意放置该层。在示例文件内本项目的完成版本中, 我将 <div> 置于页面中心的顶部。将新的 <div> 层命名为“header”。
6.

通过添加 spry:region 属性指定新层是一个 Spry 区域。通过将“dsData”设置为 spry:region 的值绑定“dsData”数据集, 如以下代码所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Album Demo</title>
<script type="text/javascript" src="includes/xpath.js"></script>
<script type="text/javascript" src="includes/sprydata.js"></script>
<script type="text/javascript">
var dsGallery = new Spry.Data.XMLDataSet("photos.xml","gallery/photos/photo");
var dsData = new Spry.Data.XMLDataSet("photos.xml","gallery");
</script>
<style type="text/css">

</style>
</head>
<body>
<div id="header" spry:region="dsData"></div>
<div id="thumbContainer" spry:region="dsGallery dsData">
<img src="{dsData::thumbnail/@base}{@thumbpath}" spry:repeat="dsGallery" class="thumbs" onclick="dsGallery.setCurrentRow('{ds_RowID}');" />
</div>
<div id="main" spry:detailregion="dsGallery dsData">
<img src="{dsData::large/@base}{@path}"/><br />Name:{@path}
</div>
</body>
</html>

现在, 我们可以将动态值添加到此区域。在示例文件内包含的 XML 文件中, 以下值可用:
* 站点名称
* 摄影师
* 联系信息
* 电子邮件
* 选择日期

将这些值添加到文档, 使它们显示为相册的一部分。因为只有一个数据集与此区域绑定, 可以使用简单的 {tagname} 语法。其唯一例外就是数据, 这是 <gallery> 标签的一个属性。
7.

对于上述每个值, 创建一个新标签并为该标签输入动态值: 站点名称: {sitename}。请记住, 标签的属性记为类似于: {@attributeName}。更新您的代码, 如以下突出显示的标签所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Album Demo</title>
<script type="text/javascript" src="includes/xpath.js"></script>
<script type="text/javascript" src="includes/sprydata.js"></script>
<script type="text/javascript">
var dsGallery = new Spry.Data.XMLDataSet("photos.xml","gallery/photos/photo");
var dsData = new Spry.Data.XMLDataSet("photos.xml","gallery");
</script>
<style type="text/css">

</style>
</head>
<body>
<div id="header" spry:region="dsData">
<p>Site Name: {sitename}<br />
Photographer: {photographer}<br />
Website: {contactinfo}<br />
Email: {email}<br />
Date: {@date} </p>
</div>
<div id="thumbContainer" spry:region="dsGallery dsData">
<img src="{dsData::thumbnail/@base}{@thumbpath}" spry:repeat="dsGallery"class="thumbs" onclick="dsGallery.setCurrentRow('{ds_RowID}');" />
</div>
<div id="main" spry:detailregion="dsGallery dsData">
<img src="{dsData::large/@base}{@path}"/><br />Name:{@path}
</div>
</body>
</html>

在浏览器中预览您的页面, 并检查两次, 看这个新标题数据是否显示正确。

对于最后一个步骤, 我们将使网站和电子邮件值成为真正的超链接。
8.

将 {contactinfo} 字段在 <a> 中换行, 并将 href 属性设置为: {contactinfo}。
9.

也将 {email} 文本在 <a> 中换行。将 href 属性设置为: mailto:{email}

您的最终 HTML 页面应类似于:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Album Demo</title>
<script type="text/javascript" src="includes/xpath.js"></script>
<script type="text/javascript" src="includes/sprydata.js"></script>
<script type="text/javascript">
var dsGallery = new Spry.Data.XMLDataSet("photos.xml","gallery/photos/photo");
var dsData = new Spry.Data.XMLDataSet("photos.xml","gallery");
</script>
<style type="text/css">

</style>
</head>
<body>
<div id="header" spry:region="dsData">
<p>Site Name: {sitename}<br />
Photographer: {photographer}<br />
Website: <a href="{contactinfo}">{contactinfo}</a><br />
Email: <a href="mailto:{email}">{email}</a><br />
Date: {@date} </p>
</div>
<div id="thumbContainer" spry:region="dsGallery dsData">
<img src="{dsData::thumbnail/@base}{@thumbpath}" spry:repeat="dsGallery" class="thumbs" onclick="dsGallery.setCurrentRow('{ds_RowID}');" />
</div>
<div id="main" spry:detailregion="dsGallery dsData">
<img src="{dsData::large/@base}{@path}"/><br />Name:{@path}
</div>
</body>
</html>

在浏览器中预览您的页面并验证页眉中的链接正常工作。

祝贺您! 您只用 60 行代码 - 主要是 CSS - 就已经成功地创建了一个 Spry Web 相册!

使用 Spry Framework 和一些简单的标记, 您已了解可以如何创建动态相册。稍加修改, 就可以使用本教程中介绍的方法创建各种各样的网页。例如, 您可以创建显示动态文本而不是图像的页面。只需增加几个步骤, 您就可以循环读取表格的 <tr> 标签以生成动态表格。 Spry 还可以用于方便地动态填充表单元素。在尝试使用后, 您将发现 Spry Framework 使用清晰的标记提供了优秀的站点功能。通过将 Ajax 添加到您的站点, 可以开发灵活而易于更新的页面。没有做不到, 只有想不到!

使用Dreamweaver CS3 Spry 框架构建相册

更多精彩内容