在浏览器中预览的页面的类型
将 XML 和 XSLT 用于 Dreamweaver 网页。
用户界面已经在 Dreamweaver 和更高版本中做了简化。 因此,您可能在 Dreamweaver 和更高版本中找不到本文中描述的一些选项。 有关详细信息,请参阅此文章。
将 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 文件中定义样式、 页面元素、布局等,并将其附加 到 XML 文件,这样当用户在浏览器中查看 XML 数据时, 数据会根据您在 XSL 文件中定义的内容进行格式化。内容(XML 数据)和呈现(由 XSL 文件定义)是完全分离的,为您提供更大的 控制权来决定信息在网页上的显示方式。本质上, XSL 是 XML 的呈现技术,其主要输出 是 HTML 页面。
可扩展 样式表语言转换 (XSLT) 是 XSL 的子集语言, 实际上让您可以在网页上显示 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 提供了 创建 XSLT 页面的方法,让您执行服务器端 XSL 转换。当应用程序服务器执行 XSL 转换时, 包含 XML 数据的文件可以位于您自己的服务器上,或 web 上的任何其他地方。此外,任何浏览器都可以显示 转换后的数据。但是,部署服务器端转换的页面 有些复杂,需要您具有 应用程序服务器访问权限。
在 使用服务器端 XSL 转换时,您可以使用 Dreamweaver 来创建 XSLT 页面,这些页面可以生成 完整的 HTML 文档(完整的 XSLT 页面),或生成 HTML 文档一部分的 XSLT 片段。完整的 XSLT 页面类似于 常规 HTML 页面。它包含一个 <body> 标记 和一个 <head> 标记,让您在页面上显示 HTML 和 XML 数据的组合。XSLT 片段是 一段代码,由单独的文档使用,用于显示格式化的 XML 数据。与完整的 XSLT 页面不同,它是一个独立的文件, 不包含 <body> 或 <head> 标记。 如果您想在单独的页面上显示 XML 数据,您可以 创建完整的 XSLT 页面,并将您的 XML 数据绑定到它。另一方面,如果您想在现有动态页面的特定部分显示 XML 数据,例如, 体育用品网络商店的动态主页,页面一侧显示来自 RSS 动态的 体育比分,您可以创建 XSLT 片段并在 动态页面中插入对它的引用。创建 XSLT 片段 并将其与其他动态页面结合使用来显示 XML 数据,是更常见的情况。
创建这些类型页面的 第一步是创建 XSLT 片段。它是一个单独的文件,包含您最终想要在动态页面中显示的 XML 数据的布局、格式等。创建 XSLT 片段后,您在 动态页面(例如 PHP 或 ColdFusion 页面)中插入对它的引用。插入的片段引用的工作方式非常类似于服务器端包含 (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 动态的文件,那么该文件当然必须位于互联网上的其他某个位置。)
您还可以使用 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)。
首先,创建整个 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 添加将其链接到 XSLT 页面的相应代码,并将两个页面(下载的 XML 文件和链接的 XSLT 页面)发布到您的 web 服务器。当用户在浏览器中查看 XML 页面时,XSLT 页面会格式化内容,就像在上一个示例中一样。
在对来自外部来源的 XML 数据执行客户端 XSL 变换的缺点是,XML 数据只是部分"动态"的。您下载和修改的 XML 文件仅仅是存在于 web 上其他位置的文件的"快照"。如果 web 上的原始 XML 文件发生更改,您必须重新下载该文件,将其关联到 XSLT 页面,然后将 XML 文件重新发布到您的 web 服务器。浏览器只渲染从您 web 服务器上的 XML 文件接收到的数据,而不是原始 XML 来源文件中包含的数据。
XML 数据和重复元素
Repeating Region XSLT 对象允许您在页面内显示 XML 文件中的重复元素。任何包含 XML 数据占位符的区域都可以转换为重复区域。不过,最常见的区域是表格、表格行或一系列表格行。
以下示例展示了如何将 Repeating Region XSLT 对象应用于显示餐厅菜单信息的表格行。初始行显示来自 XML 架构的三个不同元素:item、description 和 price。当 Repeating Region XSLT 对象应用于表格行,并且页面由应用程序服务器或浏览器处理时,表格会重复,并在每个新表格行中插入唯一数据。
当您将 Repeating Region XSLT 对象应用于文档窗口中的元素时,重复区域周围会出现细的、带选项卡的灰色轮廓。当您在浏览器中预览工作时("文件">"在浏览器中预览"),灰色轮廓消失,选择区域展开以显示 XML 文件中指定的重复元素,如前面的插图所示。
当您将 Repeating Region XSLT 对象添加到页面时,文档窗口中 XML 数据占位符的长度被截断。这是因为 Dreamweaver 更新 XML 数据占位符的 XPath(XML 路径语言)表达式,使其相对于重复元素的路径。
例如,以下代码用于包含两个动态占位符的表格,未对表格应用 Repeating Region 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>
以下代码用于应用了 Repeating Region 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 已将重复区域内项目(标题和描述)的 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 执行变换,可能会提供略有不一致的结果。您可以使用 Dreamweaver 在构建 XSLT 片段时预览它,但如果您在插入 XSLT 片段后使用应用程序服务器预览动态页面,就能看到数据渲染的最准确结果。
预览客户端转换的页面
在客户端变换的情况下,网站访客最终看到的内容由浏览器变换。您可以通过添加从 XML 文件到 XSLT 页面的关联来实现此操作。如果您在 Dreamweaver 中打开 XML 文件并在浏览器中预览它,您就会强制浏览器加载 XML 文件并执行变换。这为您提供与网站访客相同的体验。
但是,使用这种方法会使调试您的页面变得更加困难,因为浏览器会转换 XML 并在内部生成 HTML。如果您选择浏览器的\n"查看源代码"选项来调试生成的 HTML,您只会看到\n浏览器接收到的原始 XML,而不是负责页面渲染的完整 HTML(标记、样式\n等等)。要在查看源代码时看到\n完整的 HTML,您必须在浏览器中预览 XSLT\n页面。
预览整个 XSLT 页面和 XSLT 片断
创建整个 XSLT 页面和 XSLT 片段时,您需要预览工作以确保数据正确显示。如果您使用"在浏览器中预览"来显示整个 XSLT 页面或\nXSLT 片段,Dreamweaver 会使用内置变换引擎执行\n变换。这种方法为您提供快速结果,并使您能够更轻松地逐步构建和调试页面。它还为您提供了一种通过在浏览器中选择"查看\n源代码"选项来查看\n完整 HTML(标记、样式等等)的方法。
无论您使用客户端还是服务器来变换数据,当您开始构建 XSLT 页面时,通常都会使用这种预览方法。