在瀏覽器中預覽的頁面類型
上次更新時間
2024年4月25日
使用 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）。伺服器端 轉換讓您能夠從自己的伺服器或網路上的任何其他位置 動態顯示 XML 資料，而用戶端轉換 必須使用本機託管在您自己的網頁伺服器上的 XML 資料。 最後，伺服器端轉換需要您將網頁 部署至已設定的應用程式伺服器，而用戶端轉換 僅需要存取權至網頁伺服器。
如需有關了解 XML 的教學課程，請參閱 www.adobe.com/go/vid0165_tw。
伺服器端 XSL 轉換
Dreamweaver 提供 建立 XSLT 網頁的方法，讓您執行伺服器端 XSL 轉換。當應用程式伺服器執行 XSL 轉換時， 包含 XML 資料的檔案可以位於您自己的伺服器上，或 網路上的任何其他位置。此外，任何瀏覽器都可以顯示 轉換後的資料。但是，為伺服器端轉換部署網頁有些複雜，需要您能存取應用程式伺服器。
在 使用伺服器端 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. 網頁伺服器尋找頁面並將其傳遞至應用程式伺服器 C. 應用程式伺服器掃描網頁上的指示並取得 XSLT 片段 D. 應用程式伺服器執行轉換 (讀取 XSLT 片段、取得 XML 資料並將其格式化) E. 應用程式伺服器將轉換後的片段插入網頁，並將網頁傳送回網頁伺服器 F. 網頁伺服器將完成的網頁傳送給瀏覽器
您可以使用 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 頁面的參考，藉此將頁面連結到包含 XML 資料的 XML 檔案 (很像您在 HTML 頁面的 <head> 區段中插入指向外部 CSS 樣式表的參考)。 您的網頁瀏覽者必須在瀏覽器中檢視 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 檔案專門存放在您的網頁伺服器上)，您只需要使用 Dreamweaver 插入連結兩個頁面的適當程式碼即可。當您擁有 XML 檔案時，用戶端執行的 XSL 轉換是完全動態的。也就是說，每當您更新 XML 檔案中的資料時，任何使用連結的 XSLT 頁面的 HTML 輸出都會自動以新資訊更新。
備註
您用於用戶端轉換的 XML 和 XSL 檔案必須位於相同的目錄中。如果它們不在相同目錄中，瀏覽器會讀取 XML 檔案並尋找用於轉換的 XSLT 頁面，但會找不到 XSLT 頁面中相對連結定義的資產 (樣式表、影像等等)。
如果您不擁有您要連結的 XML 頁面 (例如，如果您想要使用來自網路上某處 RSS 動態消息的 XML 資料)，工作流程會稍微複雜一些。若要使用來自外部來源的 XML 資料執行用戶端轉換，您必須先將 XML 來源檔案下載至 XSLT 頁面所在的相同目錄。當 XML 頁面位於您的本機網站中時，您可以使用 Dreamweaver 新增將其連結至 XSLT 頁面的適當程式碼，並將兩個頁面 (下載的 XML 檔案和連結的 XSLT 頁面) 發佈至您的網頁伺服器。當用戶在瀏覽器中檢視 XML 頁面時，XSLT 頁面會格式化內容，如同前面的範例。
在來自外部來源的 XML 資料上執行用戶端 XSL 轉換的缺點是 XML 資料僅部分「動態」。您下載和變更的 XML 檔案僅是存在於網頁其他位置的檔案「快照」。如果網頁上的原始 XML 檔案發生變更，您必須再次下載檔案、將其連結到 XSLT 頁面，並將 XML 檔案重新發佈到您的網頁伺服器。瀏覽器只會轉譯從您網頁伺服器上的 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 |
|
含連結的 XML 檔案插入到完整的 XSLT 頁面 |
瀏覽器 |
下列主題提供指引，協助您根據需求決定適當的預覽方式。
預覽伺服器端轉換的頁面
在伺服器端轉換的情況下，網站訪客最終看到的內容是由您的應用程式伺服器轉換。在建置 XSLT 和動態頁面以搭配伺服器端轉換使用時，最好預覽包含 XSLT 片段的動態頁面，而不是 XSLT 片段本身。在前一種情況下，您使用應用程式伺服器，這可確保您的預覽與網站訪客造訪您頁面時所看到的內容一致。在後一種情況下，Dreamweaver 會執行轉換，可能提供稍微不一致的結果。您可以使用 Dreamweaver 在建置 XSLT 片段時預覽它，但如果您在插入 XSLT 片段後使用應用程式伺服器來預覽動態頁面，將能看到資料轉譯最準確的結果。
預覽用戶端轉換的頁面
在用戶端轉換的情況下，網站訪客最終看到的內容是由瀏覽器轉換。您可以透過從 XML 檔案新增連結到 XSLT 頁面來完成此操作。如果您在 Dreamweaver 中開啟 XML 檔案並在瀏覽器中預覽，您會強制瀏覽器載入 XML 檔案並執行轉換。這為您提供與網站訪客相同的體驗。
不過，使用此方法會讓您更難對頁面進行偵錯，因為瀏覽器會轉換 XML 並在內部生成 HTML。如果您選取瀏覽器的「檢視原始碼」選項來對生成的 HTML 進行偵錯，您只會看到瀏覽器接收的原始 XML，而不是負責轉譯頁面的完整 HTML (標記、樣式等等)。若要在檢視原始碼時看到完整的 HTML，您必須改為在瀏覽器中預覽 XSLT 頁面。
預覽完整的 XSLT 頁面和 XSLT 片段
建立完整的 XSLT 頁面和 XSLT 片段時，您會想要預覽您的工作，以確保資料顯示正確。如果您使用「在瀏覽器中預覽」來顯示完整的 XSLT 頁面或 XSLT 片段，Dreamweaver 會使用內建的轉換引擎執行轉換。此方法可提供您快速的結果，讓您更容易逐步建置頁面並進行偵錯。此外，它還提供一種方法，讓您選取瀏覽器中的「檢視來源」選項來檢視完整的 HTML (標記、樣式等等)。
備註
無論您使用用戶端或伺服器來轉換資料，當您開始建置 XSLT 頁面時，通常都會使用此預覽方法。
