使用 Spry 顯示資料

如果您只要建立資料集，就不需顧慮有關插入點的問題。如果您要建立資料集，而且也要插入版面，請務必將插入點置於頁面上要插入版面的位置。

選擇「插入 > Spry > Spry 資料集」。

在「指定資料來源」畫面中，執行下列動作：

• 從「選取資料類型」彈出式選單中選取「HTML」(如果預設為已選取的話)。

• 指定新資料集的名稱。如果您是第一次建立資料集，預設名稱就是 ds1。資料集名稱可以包含字母、數字和底線，但是不能以數字做為開頭。

• 指定資料來源中您要讓 Dreamweaver 偵測的 HTML 元素。例如，如果您已經在 div 標籤內組織好資料，而且要讓 Dreamweaver 偵測 div 標籤而不是偵測表格，請從「偵測」彈出式選單中選取「Divs」。「自訂」選項可以讓您輸入要偵測的任何標籤名稱。

• 指定包含您 HTML 資料來源之檔案的路徑。此路徑可以是您網站上本機檔案的相對路徑 (例如 data/html_data.html)，或是使用中網頁的絕對 URL (使用 HTTP 或 HTTPS)。您可以按一下「瀏覽」按鈕，瀏覽到某個本機檔案，然後加以選取。

  Dreamweaver 會在「資料選取」視窗中呈現 HTML 資料來源，並且為可以做為資料集容器的元素顯示視覺標記。您要使用的元素必須已有指定唯一的 ID。如果沒有指定，Dreamweaver 將會顯示錯誤訊息，而且您必須返回資料來源檔案並指定唯一的 ID。此外，資料來源檔案中適合的元素不可位於 Spry 區域中，也不可包含其他資料參考。

  或者，您也可以將「設計時間反饋」指定為資料來源。如需詳細資訊，請參閱使用設計時間反饋。

• 按一下「資料選取」視窗中出現的其中一個黃色箭頭，選取資料容器的元素，或者從「資料容器」彈出式選單中選取一個 ID。

  
  選取 HTML 資料集資料容器的元素。

  對於冗長的檔案，您可以按一下「資料選取」視窗下方的「展開/收合」箭頭查看較詳細的資料。

  選取資料集的容器元素之後，Dreamweaver 便會在「資料預覽」視窗中顯示資料集的預覽。

• (選擇性) 如果您要為資料集指定 CSS 資料選取器，請選取「進階資料選取」。例如，如果您在「列選取器」文字方塊中指定了 .product，並且在「欄選取器」文字方塊中指定了 .boximage，則此資料集將只包含已經指定 .product 類別的列，以及已經指定 .boximage 類別的欄。

  如果您要在特定的文字方塊中輸入多個選取器，請用逗號分隔這些選取器。

  如需詳細資訊，請參閱關於 Spry 資料選取器。

• 完成「指定資料來源」畫面之後，按一下「完成」可立即建立資料集，或者按「下一步」前往「設定資料選項」畫面。如果按一下「完成」，資料集便會出現在「繫結」面板中 (「視窗＞繫結」)。

在「設定資料選項」畫面中，執行下列動作：

• (選擇性) 選取某個欄並從「類型」彈出式選單中選取欄類型，以設定資料集欄類型。例如，如果資料集的某一欄包含數字，請選取這個欄，並且從「類型」彈出式選單中選擇「數字」。如果您想讓使用者能夠依據這個欄來排序資料，才要使用這個選項。

  您可以按一下欄標題、從「欄名」彈出式選單選擇，或者使用畫面左上角的左箭號或右箭號瀏覽到某一欄，藉此選取資料集欄。

• (選擇性) 從「排序欄」彈出式選單中選取要做為排序依據的欄，藉此指定資料的排序方式。選取這個欄之後，您可以指定要以遞增或遞減順序來進行排序。

• (選擇性：僅限表格) 如果您要使用一般欄名稱 (即 column0、column1、column 2 等) 而非在您的 HTML 資料來源中指定的欄名稱，請取消選取「使用第一列做為標題」。

• (選擇性：僅限表格) 選取「將欄當做列」可反轉資料集中資料的水平與垂直方向。如果選取這個選項，欄將會被當成列。
• (選擇性) 選取「篩選出重複的列」可從資料集排除重複的資料列。
• (選擇性) 如果您固定要存取資料集中最新的資料，請選取「停用資料快取」。如果您要讓資料自動重新整理，請選取「自動重新整理資料」並指定重新整理的時間 (以毫秒為單位)。
• 完成「設定資料選項」畫面之後，按一下「完成」可立即建立資料集，或者按「下一步」前往「選擇插入選項」畫面。如果按一下「完成」，資料集便會出現在「繫結」面板中 (「視窗 > 繫結」)。

在「選擇插入選項」畫面中，執行下列其中一項：

• 為新資料集選取版面，並且指定適當的設定選項。如需詳細資訊，請參閱為資料集選擇版面。

• 選取「不要插入 HTML」。如果選取這個選項，Dreamweaver 會建立資料集，但是不會新增任何 HTML 到頁面。資料集會出現在「繫結」面板中 (「視窗＞繫結」)，而且您可以手動將資料從資料集拖曳到頁面上。

按一下「完成」。

Dreamweaver 便會建立資料集，而且會在頁面上顯示版面和資料預留位置 (如果您選取了版面選項)。如果在「程式碼」檢視中查看，您會看到 Dreamweaver 已將標題中的參考新增到 SpryData.js 檔案和 SpryHTMLDataSet.js 檔案中。這些檔案是與此頁面共同運作的重要 Spry 資源。請勿從頁面移除此程式碼，否則資料集將無法運作。當您將頁面上傳到伺服器時，必須同時上傳這些檔案做為相關檔案

如果您只要建立資料集，就不需顧慮有關插入點的問題。如果您要建立資料集，而且也要插入版面，請務必將插入點置於頁面上要插入版面的位置。

選擇「插入 > Spry > Spry 資料集」。

在「指定資料來源」畫面中，執行下列動作：

• 從「選取資料類型」彈出式選單中選取「XML」。

• 指定新資料集的名稱。如果您是第一次建立資料集，預設名稱就是 ds1。資料集名稱可以包含字母、數字和底線，但是不能以數字做為開頭。

• 指定包含您 XML 資料來源之檔案的路徑。此路徑可以是您網站上本機檔案的相對路徑 (例如 datafiles/data.xml)，或是網路上網頁的絕對 URL (使用 HTTP 或 HTTPS)。您可以按一下「瀏覽」按鈕，瀏覽到某個本機檔案，然後加以選取。

  Dreamweaver 會在「列元素」視窗中呈現 XML 資料來源，顯示可供選取之資料元素的 XML 樹狀結構。重複元素會以加號 (+) 標示，而子元素則會縮排。

  或者，您也可以將「設計時間反饋」指定為資料來源。如需詳細資訊，請參閱使用設計時間反饋。

• 選取包含要顯示之資料的元素。一般而言，這個元素是具有幾個子元素 (例如 <item>、<link>、<description> 等) 的重複元素 (例如 <menu_item>)。

  
  選取 XML 資料集的重複元素。

  選取資料集的容器元素之後，Dreamweaver 便會在「資料預覽」視窗中顯示資料集的預覽。XPath 文字方塊會顯示一則運算式，指出所選節點位於 XML 來源檔的哪個位置。

• 完成「指定資料來源」畫面之後，按一下「完成」可立即建立資料集，或者按「下一步」前往「設定資料選項」畫面。如果按一下「完成」，資料集便會出現在「繫結」面板中 (「視窗 > 繫結」)。

在「設定資料選項」畫面中，執行下列動作：

• (選擇性) 選取某個欄並從「類型」彈出式選單中選取欄類型，以設定資料集欄類型。例如，如果資料集的某一欄包含數字，請選取這個欄，並且從「類型」彈出式選單中選擇「數字」。如果您想讓使用者能夠依據這個欄來排序資料，才要使用這個選項。

  您可以按一下欄標題、從「欄名」彈出式選單選擇，或者使用畫面左上角的左箭號或右箭號瀏覽到某一欄，藉此選取資料集欄。

• (選擇性) 從「排序欄」彈出式選單中選取要做為排序依據的欄，藉此指定資料的排序方式。選取這個欄之後，您可以指定要以遞增或遞減順序來進行排序。

• (選擇性) 選取「篩選出重複的列」可從資料集排除重複的資料列。

• (選擇性) 如果您固定要存取資料集中最新的資料，請選取「停用資料快取」。如果您要自動重新整理資料，請選取「自動重新整理資料」並指定重新整理的時間 (以毫秒為單位)。

• 完成「設定資料選項」畫面之後，按一下「完成」可立即建立資料集，或者按「下一步」前往「選擇插入選項」畫面。如果按一下「完成」，資料集便會出現在「繫結」面板中 (「視窗＞繫結」)。

在「選擇插入選項」畫面中，執行下列其中一項：

• 為新資料集選取版面，並且指定適當的設定選項。如需詳細資訊，請參閱為資料集選擇版面。

• 選取「不要插入 HTML」。如果選取這個選項，Dreamweaver 會建立資料集，但是不會新增任何 HTML 到頁面。資料集會出現在「繫結」面板中 (「視窗＞繫結」)，而且您可以手動將資料從資料集拖曳到頁面上。

按一下「完成」。

Dreamweaver 便會建立資料集，而且會在頁面上顯示版面和資料預留位置 (如果您選取了版面選項)。如果在「程式碼」檢視中查看，您會看到 Dreamweaver 已將標題中的參考新增到 xpath.js 檔案和 SpryData.js 檔案中。這些檔案是與此頁面共同運作的重要 Spry 資源。請勿從頁面移除此程式碼，否則資料集將無法運作。當您將頁面上傳到伺服器時，必須同時上傳這些檔案做為相關檔案.

請執行下列動作，在「欄」面板中調整表格的欄：

• 選取欄名，然後按一下減號 (-) 即可從表格刪除這個欄。按一下加號 (+) 並選取欄名可新增欄到這個表格。

• 選取欄名，然後按一下向上或向下鍵，即可移動這個欄。若將欄向上移動，在顯示表格中會向左移動；若將欄向下移動，在顯示表格中則會向右移動。

若要將欄設定成可排序，請在「欄」面板中選取該欄，然後選取「當按一下標題時排序欄」。根據預設，所有欄都可以排序。

若要將欄設定成不可排序，請在「欄」面板中選取該欄，然後取消選取「當按一下標題時排序欄」。

如果您有和網頁相關聯的 CSS 樣式，不論其形式為 HTML 網頁中的附加樣式表或是個別的樣式集，您都能為一個或多個下列選項套用 CSS 類別：

依據選取的類別樣式變更奇數編號列在動態表格中的外觀。

依據選取的類別樣式變更偶數編號列在動態表格中的外觀。

當您將滑鼠移動到表格列上方時，依據選取的類別樣式變更其外觀。

當您按一下表格列時，依據選取的類別樣式變更其外觀。

如果您要建立的表格是要成為動態 Spry 主要表格，請選取「當按一下列時更新細節區域」。如需詳細資訊，請參閱關於動態 Spry 主要表格和更新細節區域。

按一下「確定」關閉對話框，然後在「選擇插入選項」畫面中按一下「完成」。

如果您是在「設計」檢視中，將會看到這個表格附有標題列和資料參考列。資料參考會以反白標示並且用大括號 ({}) 括住。

在「主要欄」面板中，請執行下列動作來調整主要區域的內容：

• 選取欄名，然後按一下減號 (-) 即可從主要區域刪除這個欄。按一下加號 (+) 並選取欄名可新增欄到這個主要區域。根據預設，Dreamweaver 會用資料集第一欄的資料填入主要區域。

• 選取欄名，然後按一下向上或向下鍵，即可移動這個欄。在「主要欄」面板中向上或向下移動欄，即可設定資料在頁面主要區域中的出現順序。

在「細節欄」面板中重複上述步驟。根據預設，Dreamweaver 會用不在主要區域中的所有資料 (也就是資料集中除了第一欄以外的所有欄) 填入細節區域。

(選擇性) 為細節區域中的資料設定不同的容器類型。若要這麼做，請選取細節欄的名稱，然後從「容器類型」彈出式選單中選取要用於此欄的容器。您可以從 DIV、P、SPAN 或 H1-H6 標籤選擇。

按一下「確定」關閉對話框，然後在「選擇插入選項」畫面中按一下「完成」。

如果您是在「設計」檢視中，將會看到主要/細節區域出現，並且填入了您所選取的資料參考。資料參考會以反白標示並且用大括號 ({}) 括住。

在「欄」面板中，請執行下列動作來調整堆疊容器的內容：

• 選取欄名，然後按一下減號 (-) 即可從堆疊容器刪除這個欄。按一下加號 (+) 並選取欄名可新增欄到這個容器。根據預設，Dreamweaver 會用資料集中每一欄的資料填入堆疊容器。

• 選取欄名，然後按一下向上或向下鍵，即可移動這個欄。在「欄」面板中向上或向下移動欄，即可設定資料在頁面堆疊容器中的出現順序。

(選擇性) 為堆疊容器中的資料設定不同的容器類型。若要這麼做，請選取資料集欄的名稱，然後從「容器類型」彈出式選單中選取要用於此欄的容器。您可以從 DIV、P、SPAN 或 H1-H6 標籤選擇。

按一下「確定」關閉對話框，然後在「選擇插入選項」畫面中按一下「完成」。

如果您是在「設計」檢視中，將會看到這個容器出現，並且填入了您所選取的資料參考。資料參考會以反白標示並且用大括號 ({}) 括住。

在「重點欄」面板中，請執行下列動作來調整重點區域的內容：

• 選取欄名，然後按一下減號 (-) 即可從重點區域刪除這個欄。按一下加號 (+) 並選取欄名可新增欄到這個重點區域。根據預設，Dreamweaver 會用資料集第一欄的資料填入重點區域。

• 選取欄名，然後按一下向上或向下鍵，即可移動這個欄。在「重點欄」面板中向上或向下移動欄，即可設定資料在頁面重點區域中的出現順序。

(選擇性) 為重點區域中的資料設定不同的容器類型。若要這麼做，請選取資料集欄的名稱，然後從「容器類型」彈出式選單中選取要用於此欄的容器。您可以從 DIV、P、SPAN 或 H1-H6 標籤選擇。

在「堆疊欄」面板中重複上述步驟。根據預設，Dreamweaver 會用不在重點區域中的所有資料 (也就是資料集中除了第一欄以外的所有欄) 填入堆疊欄。

按一下「確定」關閉對話框，然後在「選擇插入選項」畫面中按一下「完成」。

如果您是在「設計」檢視中，將會看到旁邊有內含堆疊容器的重點區域，並且填入了您所選取的資料參考。資料參考會以反白標示並且用大括號 ({}) 括住。

在「繫結」面板中 (「視窗 > 繫結」)，按兩下資料集的名稱，然後進行編輯。

開始建立 Spry 資料集 (相關說明請參閱前面的程序)。

在「指定資料來源」畫面中，按一下「設計階段反饋」連結。

按一下「瀏覽」按鈕，找出設計階段反饋，然後按一下「確定」。

• 若要建立「Spry 區域」，請選取「區域」(預設) 做為您要插入的區域類型。

• 若要建立「Spry 細節區域」，請選取「細節區域」選項。只有當您要連結會隨著其他 Spry 區域的資料變更而更新的動態資料時，才會用到細節區域。

在物件周圍放置一個新的區域。

取代物件現有的區域。

• 從「繫結」面板拖曳一或多個元素至選定文字的上方。

• 在「程式碼」檢視中，直接鍵入一或多個元素的程式碼。使用這個格式：{dataset-name::element-name}，就如同在 {ds1::category} 或 {dsProducts::desc} 中。如果您在檔案中僅使用一個資料集，或者您所使用的資料元素是來自您為區域所定義的相同資料集，則可以省略資料集名稱，只要撰寫 {category} 或 {desc} 即可。

不論您使用何種方法來定義區域內容，HTML 程式碼都會新增下列幾行：

• 從「繫結」面板拖曳一或多個元素至選定文字的上方。

• 在「程式碼」檢視中，直接鍵入一或多個元素的程式碼。使用這個格式：{dataset-name::element-name}，就如同在 {ds1::category} 或 {dsProducts::desc} 中。如果您在檔案中僅使用一個資料集，或者您所使用的資料元素是來自您為區域所定義的相同資料集，則可以省略資料集名稱，只要撰寫 {category} 或 {desc} 即可。

不論您使用何種方法來定義區域內容，HTML 程式碼都會新增下列幾行：

• 顯示欄：這是使用者在瀏覽器上檢視頁面時所看到的內容。

• 值欄：這是傳送至背景伺服器的實際值。

例如，您可以建立美國各州的清單，向使用者顯示 Alabama 和 Alaska，但卻傳送 AL 或 AK 至伺服器。您也可以使用 SELECT 來做為導覽工具，並對使用者顯示 “Adobe Dreamweaver” 和 “Adobe Acrobat” 等產品名稱，但傳送 “support/products/dreamweaver.html” 和 “support/products/acrobat.html” 等 URL 至伺服器。