(XML) 是一种可对信息进行结构化处理和交换的语言。典型的 XML 应用包括收集 Blog 帖子、发布新闻资料和共享产品规范。随着越来越多的学校、*部门和企业采用 XML，集成 XML 正在迅速成为 Web 开发人员的一项常见任务。

您可以通过两种方式将 XML 文件中的信息放入 Web 页面：在本地使用 Web 浏览器，或从远程使用 ColdFusion、PHP、ASP 或 ASP.NET 等服务器技术。这两种方法均使用可扩展样式表语言 (XSL) 和 XPath 查询语言将 XML 文件中的信息转换为 Web 浏览器可显示的内容。Macromedia Dreamweaver 8 为开发人员和设计人员提供了将 XML 数据绑定到完整的 XSLT 页及 XSLT 片断的功能，因而同时支持客户端和服务器端工作流程。此外，还提供了转换数据的服务器行为。但是，每种方法都有各自的优缺点，我们将在本教程的后面部分进行讨论。

在本教程中，您将创建 XSLT 片断并将其添加到 Macromedia ColdFusion 或 PHP 页中。练习过程中将使用 Café Townsend 站点的经过修改后的版本，它实际上是 Dreamweaver 8 随附的教程文件。新页面使用了可访问的标记，CSS 现在已能指示语义，并且我添加了一个打印样式表。最后，我修改了原始 XML 文件使其包含以下菜品：开胃菜、主菜和甜品。

图 1. 您将创建的最终页面

必备知识

具有创建动态服务器页和 server-side include（SSI，服务器端包括）的经验。

客户端和服务器端转换比较

客户端方法不需要使用应用程序服务器，因此非常简单，适合您在学习 XML/XSL 发布的入门阶段使用。要了解有关客户端转换的更多信息，请参阅 Dreamweaver 8 帮助主题“关于客户端 XSL 转换*”以及题为“显示 XML 数据*”的文章。由于以下原因，相对于服务器端解决方案来说，客户端转换的灵活性较低：

* 为将 XML 文件中包含的信息显示为可读内容，客户端转换所使用的 XML 文件必须包含指向 XSLT 页面的链接。如果要将 XML 文件用于多个页面，则需要为每个页面创建一个 XML 文件副本，因此效率很低。相反，对于服务器端转换，位于任意数量的服务器页面上的任意数量的 XSLT 片断都可以引用一个 XML 文件。在 XML 文件更新时，所有以该 XML 文件为基础的页面都会接收到更新。
* 如果使用客户端解决方案，您需要对 XML 文件具有写入权限才能插入指向 XSLT 文件的链接。尽管您可将文件复制并保存到本地，但是一旦原始 XML 文件被更新，您的文件副本就会过时。由于 server-side include（服务器端包括）能将 XML 和 XSLT 文件链接起来，因此服务器端方法可以使用任何可公开访问的 XML 文件。
* 客户端解决方案要求下载完整的 XML 文件。当文件很大而您只需要使用其中的一小部分时，这种做法非常浪费资源。如果使用服务器端方法，服务器只收集 XSLT 文件中的 XPath 表达式指定的信息。

练习: 创建 XSLT 片断

XSLT 页可从 XML 文件中生成完整的 Web 页，而 XSLT 片断是仅生成页面的某一部分的代码段。在以 XML 数据填充 XSLT 片断后，您即引用了该片断以及包含在所插入的 XSLT 片断中的 XML 源。然后，此包含文件会插入动态页中并放置到配置了 XML 读取和转换脚本的服务器上。当有人访问该动态页时，Web 服务器就会将 XML 文件中的数据插入到该页面的此部分。

要开始学习此教程，首先要创建一个 XSLT 片断。

1. 将教程文件夹解压缩并复制到运行 ASP、ASP.NET、ColdFusion 或 PHP 的站点上。教程的开始处链接了一个 ZIP 文件，该 ZIP 文件中包含教程文件夹。
2. 打开静态页 specials.html 并切换到“代码”视图。
3. 选择第 33 到 56 行，然后按 Delete 键。您将创建的 XSLT 片断可重新生成这些静态信息，所以此时不需要这些信息。
4.

将插入点置于 <div id="main"> 标签的右尖括号 (>) 之后，然后单击编码工具栏中的“选择父标签”按钮 父标签。

备注：编码工具栏是 Dreamweaver 8 的新功能；您可在“代码”视图的右侧找到它。
5. 选择“编辑”>“剪切”。您将以此部分代码作为 XSLT 片断的基础，将其重新插入到此页面的动态版本中。
6. 选择“文件”>“另存为”。如果您使用的是运行 ASP 的服务器，请将此页面保存为 specials.asp；如果使用的是运行 ASP.NET 的服务器，请将此页面保存为 specials.aspx；如果使用的是运行 ColdFusion 的服务器，请将此页面保存为 specials.cfm；如果使用的是运行 PHP 的服务器，请将此页面保存为 specials.php。
7.

选择“文件”>“新建”，在“新建文档”对话框中选择“XSLT（片断）”，然后单击“创建”。

图 2.“新建文档”对话框

然后，系统会提示您输入 XML 文件的位置。此文件可驻留在站点或 Internet 上。暂且选择“附加我的计算机或局域网上的本地文件”，然后单击“浏览”。

图 3.“定位 XML 源”对话框

# 打开教程文件夹，选择 specials.xml，然后单击“确定”。在“定位 XML 源”对话框中再次单击“确定”。
#

在“代码”视图中，将光标移动到紧邻 <xsl:template match=”/”> 标签之后，按 Return 键。然后选择“编辑”>“粘贴”。您从静态页中剪切下的 div 现在应出现在片断中，如图 4 所示。

图 4. 粘贴 div 后的片断代码

11. 现在，在“绑定”面板（“窗口”>“绑定”）中还应该能看到 XML 架构。在教程文件夹中将该 XSLT 片断保存为 menu.xsl。

如果查看 XLST 片断代码的第一行，您会在 XML 版本声明之后看到如下注释：

<!-- DWXMLSource="specials.xml" -->

备注：Dreamweaver 使用此注释在“绑定”面板中显示 specials.xml 的架构。由于此行只是一个注释而不是实际链接，因此与在 XML 文件中附加一个指向完整 XSLT 页面的链接不同。
检查 XML

specials.xml 文件包含 Café Townsend 的日常菜单。通常情况下，厨师长使用一个 Web 应用程序来输入一天的开胃菜、主菜和甜品，而此 XML 文件则是从该 Web 应用程序生成的。此解决方案的巧妙之处在于它将形式与内容相分离。Specials 页不需要手动更新，而厨师长使用顾客看不到的简单 Web 应用程序更新菜单。

在“绑定”面板中查看该 XML 文件。文件中有一个重复元素 menu_item，它具有 id 和 course 两个属性；此外，还有若干个非重复元素：name、 link、description 和 price。

图 5. specials.xml 的 XML 架构

最终的菜单设计将列出每一道菜，其后会列出所包含的菜品。对于每个菜品，会列出名称、价格、描述和指向显示该菜品的页面链接。在下列步骤中，您要将这些元素绑定到标题和段落标签中。

1. 在刚创建的 XSL 文件中，切换到“设计”视图。
2. 将光标放到一级标题“Specials of the day”中最后一个字的后面，然后按 Enter 键 (Windows) 或 Return 键 (Macintosh)。
3. 按 Ctrl + 3 组合键 (Windows) 或 Command + 3 组合键 (Macintosh) 创建三级标题。菜品名称和价格将使用此格式。
4. 在“绑定”面板中，双击非重复元素 name。此操作将使用 XPath（XML 路径语言）在页面上创建 XML 数据占位符。路径指示数据在 XML 架构或树中的位置。在创建重复区域时，此路径将会缩短，因为重复区域将会设置数据的上下文或起始点。
5. 如果占位符仍处于选中状态，按向右光标键将插入点移到占位符的右侧。默认情况下，在插入数据占位符时会将其选中，这样更便于使用 HTML 标签和 CSS 规则设置其格式。
6. 按空格键。
7. 选择“插入”>“HTML”>“特殊字符”>“Em-Dash”，以插入长破折线或长连字符。长破折线将用于分隔菜单上特价菜的名称与价格。如果您查看此页的“代码”视图，会发现长破折线由 HTML 实体 — 代表，并且在“代码”视图页面顶部的 DTD 部分定义了一些实体。之所以指出这一点是因为，有时候您想要使用特殊字符，但未定义该字符，此时应用程序服务器上的 XML 分析器可能无法处理该页面。在插入长破折线后，您可能会看到一个“警告”对话框。如果看到“警告”对话框，只需将其关闭即可。建议您阅读 Dreamweaver 8 帮助中的“指定缺少的字符实体*”主题。
8. 按空格键。双击非重复元素“price”。此时，价格的 XPath 会出现在页面上长破折线的右侧。
9. 按键盘上的向右箭头键取消选择价格数据占位符，然后按 Enter 键 (Windows) 或 Return 键 (Macintosh) 创建新的段落。
10.

现在，双击非重复元素 description，将其插入页面中。这会将描述数据占位符插入刚才创建的段落中。现在的页面应类似于图 6：

图 6. 正在处理的 XSLT 片断

为菜品添加链接

XML 源还包括用于创建链接的非重复元素。此链接是指向显示开胃菜、主菜或甜品的页面的 URL。将链接应用到 XML 数据占位符比按照通常方式为普通静态文本设置链接要略微复杂一些。具体步骤如下：

1. 为名称选择数据占位符。
2. 在“属性”检查器中，单击“链接”字段右侧的文件夹图标。
3. 在“选择文件”对话框中，选择“数据源”，再选择链接元素，然后单击“确定”。

图 7. 选择“数据源”选项以查看 XML 架构

在“属性”检查器中，“链接”字段会将 {specials/menu_item/link} 指定为该菜品名称的链接属性。大括号的重要意义在于，它指示服务器或 Web 浏览器中的 XSL 分析器将 XML 架构中的链接元素作为此链接文本的来源进行插入。

图 8. 使用 XML 架构中的元素指定链接的正确方法是将其放在大括号中

创建重复区域

现在我们要创建重复区域，使最终页面列出每道菜的各个菜品。

1.

在“代码”视图中，选择包含 name 和 name 的三级标题，以及包含 description 的段落。

从“插入”工具栏中选择 XSLT，然后单击“重复区域”按钮 重复区域按钮。此时将显示 XPath 表达式创建器。

图 10.“XPath 表达式创建器”对话框

# 选择重复元素 menu_item，然后单击“确定”。
#

切换到“设计”视图。此时，在三级标题和段落周围应该出现选项卡式区域。如果您没有看到选项卡式区域，请确保在“查看”>“可视化助理”菜单中选中了“不可见元素”，并且没有在该菜单中选中“隐藏所有”。此外，请注意各个数据占位符已被截短，只留下元素名称。这是因为您已经将上下文设置为从 menu_item 开始，因此不再需要它与每个元素之间的路径。

图 11.“设计”视图中显示的重复区域

# 选择“文件”>“保存”。
#

选择“文件”>“在浏览器中预览”（在 Windows 计算机上按 F12 键，在 Mac 机上按 Option + F12 组合键），以便在浏览器中预览页面。在本例中，浏览器不会进行转换，并且 Dreamweaver 不会将文件发送到测试服务器上进行预览。Dreamweaver 将自己进行转换并创建临时文件供浏览器进行显示。

图 12. 在浏览器窗口中预览片断

练习: 使用 XPath 表达式进行创作

XPath 表达式的重要作用在于，您可用它来进一步改进过滤和显示 XML 源的数据的方法。在教程的本部分中，您将创建三个表达式来实现以下目标：

* 显示某道菜的所有菜品
* 在该道菜的第一个菜品之前显示该道菜的名称
* 在每道菜最后一个菜品之后显示一个小图形

显示某道菜的菜品

要在此重复区域中只显示开胃菜，您需要添加用于检查每个菜品的菜肴属性的过滤器，并只显示菜肴属性设置为“app”（app 是开胃菜的英文缩写）的菜品。

1. 在“设计”视图中，单击选项卡式区域的内部，然后在标签选择器中选择 <xsl:for-each> 标签。
2. 在“属性”检查器中单击“表达式创建器”图标 表达式创建器图标。
3. 在“表达式创建器”对话框中，如果“建立过滤器”部分被隐藏，则将其展开。
4. 先单击“添加过滤器”按钮 添加过滤器图标。“建立过滤器”将为表达式填充属性。在值字段中键入 ‘app’，完成过滤器的创建。请务必在 app 的两边加上英文的单引号。如果不加，过滤器将无法正常工作。
5. 单击“确定”关闭“XPath 表达式创建器（重复区域）”对话框。
6.

选择“文件”>“保存”。

图 13. 已完成的表达式

在 Web 浏览器中预览片断。

图 14. 片断中目前仅显示了开胃菜菜品

插入条件区域

最终页面设计为以二级标题显示每道菜，并在各道菜之间插入图形元素。您将使用条件区域显示该片断中的这些菜品。

1. 选择名称占位符并使用键盘上的向左箭头键将光标移动到占位符的左侧。
2. 按 Enter 键 (Windows) 或 Return 键 (Macintosh)，然后按键盘上的向上箭头键。
3. 按 Ctrl + 2 组合键 (Windows) 或 Command + 2 组合键 (Macintosh) 设置二级标题。键入 Appetizers。
4. 通过标签选择器选择二级标题，然后选择“插入”>“XSLT 对象”>“条件区域”或单击“插入”栏中的“条件区域”按钮 条件区域图标。
5. 在“条件区域”对话框中，键入 position()=1，然后单击“确定”。Appetizers 将只在第一个菜品前显示，不会在每个菜品前重复显示。
6. 将光标放到 {description} 占位符之后，按 Enter 键；然后，选择“插入”>“图像”，以插入图像。在“选择图像源文件”对话框中，打开图像文件夹，选择文件 fleuron.gif，然后单击“确定”。
7. 默认情况下，Dreamweaver 8 显示“图像标签辅助功能属性”对话框。输入 flower 作为替代文本，然后单击“确定”。
8. 在图像已选定的情况下，在其周围创建另一个条件区域，并输入 position()=last()，然后单击“确定”。与菜肴标题类似，此表达式通过使用 last() 函数，仅在该道菜的最后一个菜品之后显示图形。
9.

选择“文件”>“保存”以保存文件，然后在浏览器中预览页面 (F12)。

图 15. 条件区域在特定条件下显示内容

菜品排序

在某些时候，您很可能需要将 XML 数据源中的数据按字母顺序、价格或其它属性排序。除此之外，可能还需要按升序或降序排列。要修改片断以对数据排序，您需要进入“代码”视图。但不必担心，因为您只需要添加一个标签，并且 Dreamweaver 的代码提示功能会使此过程变得非常简单。

1. 通过单击文档窗口左上角的“代码”视图按钮，切换到“代码”视图。
2. 在“代码”视图中，将光标放到 <xsl:for-each select="specials/menu_item[@course = 'app']"> 标签之后，然后按 Enter 键。
3.

键入以下代码：

<xsl:sort select="price" data-type="number" order="ascending" /> 排序命令将指示服务器上的 XSL 处理器或者指示浏览器将菜品按价格升序排序。在本例中，data-type 属性是关键属性；因为如果没有该属性，价格值将作为字符串（文本）排序，也就得不到所期望的结果。
4. 从“文件”>“在浏览器中预览”子菜单中选择一个选项，以便在浏览器中预览页面。

练习: 为 XSLT 片断设置样式

为 XSLT 片断设置样式与为 server-side include（服务器端包括）设置样式类似，因为在设计时，二者均不能直接访问封闭动态页所使用的 CSS。您可以编写很多基于上下文的 CSS 规则来变通解决此问题，但由于您无法预览结果，因此仍好像是在“黑暗”中进行设计。所幸的是，Dreamweaver 为您提供了解决此问题的方法：设计时间样式表。
应用设计时间样式表

如名称所示，设计时间样式表中的 CSS 规则只在 Dreamweaver 的设计视图中应用，而不会嵌入到文档中。通过设计时间样式表，您可以更加轻松地应用和预览封闭页面将使用的 CSS 规则。

1. 在“设计”视图中，选择“文本”>“CSS 样式”>“设计时间…”
2. 在“设计时间样式表”对话框中，单击“只在设计时显示”组的加号 (+) 按钮。
3. 在“选择文件”对话框中，打开 css 目录，选择 screen.css 文件，然后单击“确定”。
4.

单击“确定”以关闭“设计时间样式表”对话框。在“设计”视图中，片断应与下图类似：

图 16. 附加设计时间样式表后的片断

使用 CSS 为元素设置样式

由于大多数 CSS 规则是上下文相关的，因此您只需对价格数据占位符应用一个 span 标签即可。您还要在主 div 中将段落标签的字体样式属性改为斜体。

1. 选择价格元素的数据占位符，然后通过选择“文本”>“CSS 样式”>“price”将 price 类应用到所选元素。
2. 将光标放到描述数据占位符之后，在“CSS 样式”面板中切换到“当前视图”模式（“窗口”>“CSS 样式”）。
3.

在“规则”窗格中，单击“显示层叠”按钮 显示层叠图标。如果尚未选择 #main p，请选择它。它应该在列表的底部。

备注：您可能需要调整屏幕上的面板，以便可以看到“规则”窗格的内容。例如，您可能需要关闭“文件”面板并拖动“规则”窗格的下边框。
4. 在“属性”窗格中，单击“添加属性”链接并键入字体样式，从而为 #main p 规则添加 font-style 属性。单击字体样式属性右侧的单元格内部，从菜单中选择斜体。
5.

选择“文件”>“全部保存”。由于您更改了外部 CSS 样式表，因此会保存您对 #main p 规则的字符样式属性所做的更改。

图 17. 在“CSS 样式”面板中添加 CSS 属性

完成片断

至此，基本片断已创建完成。您需要将此 for-each 声明复制两遍，然后修改副本使其成为页面的主菜和甜品部分。

1.

在“代码”视图中，将插入点置于 xsl:for-each 标签的右尖括号 (>) 之后，然后单击编码工具栏中的“选择父标签”按钮 父标签。

图 18. 将插入点置于 <xsl:for-each> 标签的右尖括号之后

# 选择“编辑”>“复制”。
# 将插入点移到结束 xsl:for-each 标签之后，按 Enter 键 (Windows) 或 Return 键 (Macintosh)，然后选择“编辑”>“粘贴”。
# 在第二个开始 xsl:for-each 标签中，将 &apos;app&apos; 替换为 &apos;ent&apos;，作为选择属性的值。
# 将此区块中的二级标题 Appetizers 改为 Entrées。
# 将插入点置于第二个结束 xsl:for-each 标签（即您刚粘贴的那个标签）之后，按 Enter 键 (Windows) 或 Return 键 (Macintosh)。
# 选择“编辑”>“粘贴”。
# 在第三个开始 xsl:for-each 标签中，将 &apos;app&apos; 替换为 &apos;des&apos;，作为选择属性的值。
# 将此区块中的二级标题 Appetizers 改为 Desserts。
# 保存文档。

练习: 将片断插入到动态页中

现在片断已经完成，可以将其插入到动态页中。

1. 切换到动态页（specials.asp、specials.aspx、specials.cfm 或 specials.php，具体文件取决于您采用的服务器技术）。
2. 在“代码”视图中，将插入点置于以 <! – Begin Main content area…开头的注释之后。
3. 选择“插入”>“应用程序对象”>“XSL 转换”。
4. 在“XSL 转换”对话框中，单击“浏览”查找 XSLT 文件，然后选择 menu.xsl 并单击“确定”。您会看到 XML 文件同时被自动选中。这是因为 Dreamweaver 读取 XSL 文件中的注释并使用其中所指定的 XML 文件。如果要使用其它 XML 文件，请单击“浏览”或在字段中指定其 URI。
5.

单击“确定”并切换到“设计”视图。

图 19. 嵌入到动态页中的片断

保存页面并使用“在浏览器中预览”(F12) 进行预览。

图 20. 已完成的页面

练习; 在服务器上部署页面

现在已经完成了动态页，可以将其部署到服务器上。

1. 打开文件面板，选择 css、图像、includes 文件夹以及 menu.xsl、specials.cfm（或 specials.php）和 specials.xml，然后放置这些文件。includes 文件夹包含执行 XML 到 XSL 转换的服务器库。
2. 完成后，打开浏览器并导航到服务器上的动态页。

如果显示页面时出现错误，请确保您的服务器已正确配置，可以处理 XML 和 XSLT 文件。如果需要解决服务器设置问题，请参阅“利用 XML 数据进行可视化创作的常见问题解答”。
总结

您已了解了使用 XSLT 进行服务器端部署的优点，创建了 XSLT 片断并为其设置了样式，尝试了 XPath 表达式并在动态页上部署了片断。恭喜！现在，您已全面尝试了使用动态服务器页的 XSLT 和 XML，为利用 Dreamweaver 8 提供的强大发布功能作好了准备。