将 XML 和 XSLT 用于 Dreamweaver 网页
注意:用户界面已经在 Dreamweaver CC 和更高版本中做了简化。因此,您可能在 Dreamweaver CC 和更高版本中找不到本文中描述的一些选项。有关详细信息,请参阅此文章。
将 XML 和 XSL 用于网页
可扩展标记语言 (XML) 可对信息进行结构化处理。与 HTML 一样,XML 允许您使用标签使信息结构化,但 XML 标签与 HTML 标签不一样,它不是预定义的。XML 允许您创建对数据结构(架构)进行最佳定义的标签。标签嵌套在其它标签中可创建一种父子标签的架构。与大多数 HTML 标签一样,XML 架构中的所有标签都有一个开始标签和一个结束标签。
下面的示例介绍 XML 文件的基本结构:
<?xml version=“1.0”> <mybooks> <book bookid=“1”> <pubdate>03/01/2004</pubdate> <title>Displaying XML Data with Adobe Dreamweaver</title> <author>Charles Brown</author> </book> <book bookid=“2”> <pubdate>04/08/2004</pubdate> <title>Understanding XML</title> <author>John Thompson</author> </book> </mybooks>
在此示例中,每个父级 <book> 标签包含三个子级标签:<pubdate>、<title> 和 <author>。但每个 <book> 标签也是 <mybooks> 标签的子标签,后者在架构中的级别比前者高一级。只要相应地将标签嵌套在其它标签中,并为每个开始标签指定一个对应的结束标签,您就可以随意命名 XML 标签并安排它们的结构。
XML 文档不包含任何格式设置,这类文档只是结构化信息的容器。有了 XML 架构之后,就可以使用可扩展样式表语言 (XSL) 来显示信息。与层叠样式表 (CSS) 允许您设置 HTML 的格式一样,XSL 也允许您设置 XML 数据的格式。您可以在 XSL 文件中定义样式、页面元素和布局等,并将 XSL 文件附加到 XML 文件,以便用户在浏览器中查看 XML 数据时,数据格式会根据您在 XSL 文件中的定义进行设置。内容(XML 数据)与表现形式(由 XSL 文件定义)是完全独立的,这使您可以更好地控制信息在网页上的显示方式。本质上,XSL 是 XML 的一种表示形式技术,其中的主要输出是 HTML 页面。
可扩展样式表语言转换 (XSLT) 是 XSL 的子集语言,它允许您在网页上显示 XML 数据,并将 XML 数据连同 XSL 样式“转换”为 HTML 形式的可读样式化信息。您可以使用 Dreamweaver 创建 XSLT 页面,这种页面允许您使用应用程序服务器或浏览器执行 XSL 转换。在执行服务器端 XSL 转换时,服务器执行 XML 和 XSL 的转换工作,并将其显示在页面上。在执行客户端转换时,浏览器(如 Internet Explorer)执行操作。
最终采用的方法(服务器端转换与客户端转换)取决于想要达到的最终结果、可供使用的技术、对 XML 源文件的访问级别及其它因素。两种方法都有它们自己的优点和局限性。例如,服务器端转换适用于所有浏览器,而客户端转换仅限于新型浏览器(Internet Explorer 6、Netscape 8、Mozilla 1.8 和 Firefox 1.0.2)。服务器端转换允许您动态地显示您自己的服务器上或 Web 上任何地方的 XML 数据,而客户端转换必须使用自己的 Web 服务器上本地承载的那些 XML 数据。最后,服务器端转换要求将页面部署到已配置的应用程序服务器,而客户端转换只要求访问 Web 服务器。
有关了解 XML 的教程,请参阅 www.adobe.com/go/vid0165_cn。
服务器端 XSL 转换
Dreamweaver 提供了一些方法,用于创建可执行服务器端 XSL 转换的 XSLT 页面。当应用程序服务器执行 XSL 转换时,包含 XML 数据的文件可以驻留在您自己的服务器上,也可驻留在 Web 上的任何地方。此外,任何浏览器都可显示已转换的数据。但是,部署服务器端转换的页面有些复杂,并要求您拥有应用程序服务器的访问权。
当处理服务器端 XSL 转换时,您可以使用 Dreamweaver 来创建生成整个 HTML 文档的 XSLT 页面(整个 XSLT 页面),也可以创建生成部分 HTML 文档的 XSLT 片断。整个 XSLT 页面类似于常规 HTML 页面。它包含一个 <body> 标签和一个 <head> 标签,允许在页面上显示 HTML 数据和 XML 数据的组合。XSLT 片断是由单独的文档使用的一段代码,它显示带格式的 XML 数据。与整个 XSLT 页面不同,它是一个独立的文件,不包含任何 <body> 或 <head> 标签。如果要在 XML 数据自己的页面上显示 XML 数据,则需要创建整个 XSLT 页面,并将 XML 数据绑定到该页面。另一方面,如果要在现有动态页的特定部分中显示 XML 数据,例如,在体育用品商店的动态主页的一侧显示来自 RSS 源的体育比分,则需要创建 XSLT 片断,并在动态页中插入对该片断的引用。创建 XSLT 片断并与其它动态页一起使用这些片断来显示 XML 数据是较常用的方法。
创建这些类型页面的第一步是创建 XSLT 片断。它是一个单独的文件,该文件包含要最终显示在动态页中的 XML 数据的布局和格式设置等。创建 XSLT 片断之后,请在动态页(如 PHP 或 ColdFusion 页面)中插入对该片断的引用。插入的对 XSLT 片断的引用与服务器端包含 (SSI) 的工作方式很类似,即带格式的 XML 数据(片断)位于单独的文件中,而在“设计”视图中,片断的占位符显示在动态页本身上。如果浏览器请求的动态页包含对该片断的引用,则服务器处理所包含的指令并创建一个新文档,其中显示片断的带格式内容而不是占位符。
A. 浏览器请求动态页 B. Web 服务器查找该页并将其传递给应用程序服务器 C. 应用程序服务器扫描该页中的指令并获取 XSLT 片段 D. 应用程序服务器执行转换(读取 XSLT 片段,获取 xml 数据并设置 xml 数据的格式) E. 应用程序服务器将转换后的片段插入页中,然后将该页传递回 Web 服务器 F. Web 服务器将完成的页发送到浏览器使用 XSL 转换服务器行为在动态页中插入对 XSLT 片断的引用。插入引用时,Dreamweaver 会在包含运行时库文件的站点根文件夹中生成一个 includes/MM_XSLTransform/ 文件夹。转换指定的 XML 数据时,应用程序服务器使用该文件中定义的函数。该文件负责获取 XML 数据和 XSLT 片断、执行 XSL 转换和在网页上输出结果。
包含 XSLT 片断的文件、包含您的数据的 XML 文件以及生成的运行时库文件都必须在服务器上,页面才能正确显示。(如果您选择远程 XML 文件作为数据源,例如,从 RSS 源选择一个文件,则该文件当然必须位于 Internet 上的其它某个位置。)
也可以使用 Dreamweaver 创建用于服务器端转换的整个 XSLT 页面。整个 XSLT 页面的工作方式与 XSLT 片断的工作方式完全相同,只是在使用 XSL 转换服务器行为插入对整个 XSLT 页面的引用时,插入的是 HTML 页面的完整内容。所以,在插入引用之前必须清空动态页(充当容器页面的 .cfm、.php 或 .asp 页面)中的所有 HTML 代码。
Dreamweaver 支持对 ColdFusion、ASP 和 PHP 页面执行 XSL 转换。
注意:必须正确配置服务器才能执行服务器端转换。有关详细信息,请与您的服务器管理员联系。
客户端 XSL 转换
您可以在客户端执行 XSL 转换,而无需使用应用程序服务器。您可以使用 Dreamweaver 创建整个 XSLT 页面来执行此转换,但客户端转换要求对包含要显示的数据的 XML 文件进行操作。此外,客户端转换只适用于新型浏览器(Internet Explorer 6、Netscape 8、Mozilla 1.8 和 Firefox 1.0.2)。有关支持及不支持 XSL 转换的浏览器的详细信息,请访问 www.w3schools.com/xsl/xsl_intro.asp。
首先,创建整个 XSLT 页面并附加 XML 数据源。(创建新页面时,Dreamweaver 会提示您附加数据源。) 可以从头创建 XSLT 页面,或者将现有 HTML 页面转换为 XSLT 页面。当您将现有 HTML 页面转换为 XSLT 页面时,必须使用“绑定”面板(“窗口”>“绑定”)附加 XML 数据源。
创建 XSLT 页面后,必须通过在 XML 文件本身中插入对 XSLT 页面的引用(与在 HTML 页面的 <head> 部分中插入对外部 CSS 样式表的引用非常类似),将该页面链接到包含 XML 数据的 XML 文件。站点访问者必须在浏览器中查看 XML 文件(而不是 XSLT 页面)。当站点访问者查看页面时,浏览器执行 XSL 转换,并显示由链接的 XSLT 页面进行格式设置的 XML 数据。
链接的 XSLT 和 XML 页面之间的关系在概念上相似,但不同于外部 CSS/HTML 页面模型。当您拥有一个包含内容(如文本)的 HTML 页面时,可以使用外部样式表对该内容进行格式设置。HTML 页面将决定内容,而用户看不到的外部 CSS 代码则决定表现形式。而对于 XSLT 和 XML,情况相反。XML 文件(用户看不到它的原始形式)决定内容,而 XSLT 页面决定表现形式。XSLT 页面包含标准 HTML 通常包含的表格、布局和图形等。当用户在浏览器中查看 XML 文件时,XSLT 页面将对内容进行格式设置。
A. 浏览器请求 XML 文件 B. 服务器通过将 XML 文件发送到浏览器来进行响应 C. 浏览器读取 XML 指令并调用 XSLT 文件 D. 服务器将 XSLT 文件发送到浏览器 E. 浏览器转换 XML 数据并将其显示在浏览器中在使用 Dreamweaver 将 XSLT 页面链接到 XML 页面时,Dreamweaver 会在 XML 页面顶部为您插入相应的代码。如果您拥有要链接到的 XML 页面(即,此 XML 文件以独占方式存在于您的 Web 服务器上),则需要执行的所有操作是:使用 Dreamweaver 插入链接这两个页面的相应代码。当您拥有 XML 文件时,客户端所执行的 XSL 转换完全是动态的。也就是说,每当您更新 XML 文件中的数据时,使用链接的 XSLT 页面的任何 HTML 输出都将用新信息自动进行更新。
注意:用于客户端转换的 XML 和 XSL 文件必须位于同一个目录中。否则,浏览器将读取 XML 文件并查找用于转换的 XSLT 页面,但无法找到 XSLT 页面中由相对链接定义的资源(样式表、图像等)。
如果您对要链接到的 XML 页面不具备所有权(例如,要使用来自 Web 上其它地方的 RSS 源的 XML 数据),则工作流程将稍微复杂一点。要使用来自外部源的 XML 数据执行客户端转换,必须首先将 XML 源文件下载到 XSLT 页面所在的同一目录。在 XML 页面位于本地站点后,可以使用 Dreamweaver 添加相应代码,以便将 XML 页面链接到 XSLT 页面,然后将这两个页面(下载的 XML 文件和链接的 XSLT 页面)都发送到 Web 服务器。当用户在浏览器中查看 XML 页面时,XSLT 页面将对内容进行格式设置,如上例所述。
对来自外部源的 XML 数据执行客户端 XSL 转换的缺点是:XML 数据只有部分是“动态的”。下载和修改的 XML 文件只是存在于 Web 上其它某个地方的文件的“快照”。如果不在 Web 上的原始 XML 文件发生更改,则必须再次下载文件,将其链接到 XSLT 页面,并重新将 XML 文件发送给 Web 服务器。浏览器只呈现它从 Web 服务器上的 XML 文件接收的数据,而不呈现原始 XML 源文件包含的数据。
XML 数据和重复元素
重复区域 XSLT 对象允许在页面中显示 XML 文件中的重复元素。包含 XML 数据占位符的所有区域均可转换为重复区域。但最常见的区域是表格、表格行或一系列表格行。
下例说明如何将重复区域 XSLT 对象应用于显示餐馆菜单信息的表格行。初始行显示来自 XML 架构的三个不同元素:菜品、说明及价格。将重复区域 XSLT 对象应用于表格行,并由应用程序服务器或浏览器处理页面时,将重复该表格,在每个新表格行中插入唯一的数据。
当您对“文档”窗口中的元素应用重复区域 XSLT 对象时,重复的区域周围会出现一个灰色的选项卡式细轮廓。在浏览器(“文件”>“在浏览器中预览”)中预览工作时,该灰色轮廓消失且所选内容扩展,以显示 XML 文件中的指定重复元素(如以上说明所述)。
向页面添加重复区域 XSLT 对象时,“文档”窗口中 XML 数据占位符的长度将截短。这是因为 Dreamweaver 更新了 XML 数据占位符的 XPath(XML 路径语言)表达式,使该路径变为相对于重复元素的路径。
例如,以下代码表示包含两个动态占位符的表格,并且没有对此表格应用重复区域 XSLT 对象:
<table width="500" border="1"> <tr> <td><xsl:value-of select="rss/channel/item/title"/></td> </tr> <tr> <td><xsl:value-of select="rss/channel/item/description"/></td> </tr> </table>
以下代码表示同一个表格,但对表格应用了重复区域 XSLT 对象:
<xsl:for-each select="rss/channel/item"> <table width="500" border="1"> <tr> <td><xsl:value-of select="title"/></td> </tr> <tr> <td><xsl:value-of select="description"/></td> </tr> </table> </xsl:for-each>
在上例中,Dreamweaver 将位于重复区域(title 和 description)内项目的 Xpath 更新为相对于封闭标签 <xsl:for-each> 内的 XPath,而不是整个文档。
同样,在其它情况下,Dreamweaver 也会生成上下文相关的 XPath 表达式。例如,如果将某个 XML 数据占位符拖放到已应用了重复区域 XSLT 对象的表格中,Dreamweaver 会自动显示相对于封闭标签 <xsl:for-each> 中现有 XPath 的 XPath。
预览 XML 数据
当您使用“在浏览器中预览”(“文件”>“在浏览器中预览”)来预览插入到 XSLT 片断或整个 XSLT 页面的 XML 数据时,执行 XSL 转换的引擎根据具体情况的不同而不同。对于包含 XSLT 片断的动态页,应用程序服务器始终执行此转换。在其它情况下,Dreamweaver 或浏览器可能会执行此转换。
下表概述了使用“在浏览器中预览”时的各种情况,以及那些执行各自的转换的引擎:
在浏览器中预览的页面的类型 | 数据转换执行者 |
包含 XSLT 片断的动态页 | 应用程序服务器 |
XSLT 片断或整个 XSLT 页面 | Dreamweaver |
包含指向整个 XSLT 页面的链接的 XML 文件 | 浏览器 |
以下主题提供了一些准则,可帮助您根据需要确定适当的预览方法:
预览服务器端转换的页面
如果进行服务器端转换,站点访问者最终看到的内容由应用程序服务器进行转换。创建 XSLT 和动态页以用于服务器端转换时,预览包含 XSLT 片断的动态页(而非 XSLT 片断本身)通常更可取。在前一种情形中,使用应用程序服务器可以确保您预览的内容与站点访问者在访问页面时所看到的内容一致。在后一种情形中,Dreamweaver 执行转换,并可能提供略微不一致的结果。您可以在生成 XSLT 片断时使用 Dreamweaver 预览该片断,但如果在插入 XSLT 片断之后使用应用程序服务器预览动态页,则可以看到数据呈现的最准确结果。
预览客户端转换的页面
如果进行客户端转换,站点访问者最终看到的内容由浏览器转换。通过添加一个从 XML 文件指向 XSLT 页面的链接,您可以达到此目的。如果在 Dreamweaver 中打开 XML 文件,并在浏览器中预览此文件,将强制浏览器加载 XML 文件并执行转换。这将为您提供与站点访问者相同的体验。
但使用此方法使调试页面变得更加困难,因为浏览器在内部转换 XML 并生成 HTML。如果选择浏览器的“查看源文件”选项调试生成的 HTML,您将只看到浏览器接收到的原始 XML,而无法看到负责呈现页面的完整 HTML(标签和样式等)。若要在查看源代码时看到完整的 HTML,则必须改为在浏览器中预览 XSLT 页面。
预览整个 XSLT 页面和 XSLT 片断
创建整个 XSLT 页面和 XSLT 片断时,您会希望预览工作结果以确保正确显示数据。如果使用“在浏览器中预览”显示整个 XSLT 页面或 XSLT 片断,Dreamweaver 将使用内置转换引擎执行转换。该方法可使您快速看到结果,并使您能够更轻松地以渐进方式构建和调试页面。它还提供了一种方式,使您可通过在浏览器中选择“查看源文件”选项来查看整个 HTML(标签和样式等)。
注意:开始构建 XSLT 页时通常使用此预览方法,而与使用客户端还是服务器转换数据无关。
更多此类内容
- XML 教程
- 在服务器上执行 XSL 转换
- 在客户端上执行 XSL 转换
- 显示重复 XML 元素