14 Spry工具集與資料集的使用 認識 Spry 關於版面配置 Spry 工具集 Spry 選單列 Spry 標籤面板

14-1 認識 Spry Ajax 的技術隨著 Web 2.0 時代的來臨而普及在許多網站之中。Adobe 推出了 Spry 做為 Dreamweaver 開發 Ajax 網頁功能的主要函式庫，不僅設定上簡單，效果更是強大。 什麼是 Ajax ？ Ajax 是由 HTML、JavaScript、 DHTML、DOM 與 XML ...等技 術所組成，主要目的是為了提高網 頁介面的操作人性化，增強網頁程 式應用的易用性。非同步的載入資 料的應用更是 Ajax 的技術核心， 這個概念能夠免除網頁重新載入的 動作，減少伺服器負擔，也加快了 操作上的速度。

什麼是 Spry framework？ Spry framework 是 Adobe 為了開發 Ajax 技術所研發的一套 JavaScript 函式庫， 程式設計師可以藉由 Spry framework，輕易的開發出更豐富、更有趣，並且更 容易互動的 Ajax 網頁。

Dreamweaver 與 Spry 的關係 在 Dreamweaver 中為了讓使用者可以輕鬆開發 Ajax 的網頁，新增一系列 Spry 的工具集與行為特效，以對話方塊的導引讓人在不知不覺中為設計的作品注入 Ajax 的應用。 在 Dreamweaver CS5 中所搭載的 Spry framework 為 1.61 版，但是在 Adboe Labs 中對於 Spry 的研發不會停步，會一直釋出新的版本。在本章的作品中， 我們會依據狀況提出相關的建議。

14-2 關於 Spry 工具集 關於插入 \ Spry 面板 在 Dreamweaver 中使用 Spry 的功能，Spry 面板 的使用是非常重要的。這裡先介紹 Spry 面板 的內容，並說明存放 Spry 功能相關檔案的 Spry 資源資料夾。 關於插入 \ Spry 面板 Spry 工具集 是一個結合了 HTML、CSS 和 JavaScript 技術讓使用者能輕易 互動的網頁元素。於 插入 面板切換至 Spry 項目，Spry 工具集 大致可以分為三 類：

Spry 相關檔案存放資料夾 每個 Spry 工具集 功能都擁有其所屬的 HTML 結構，並利用所屬的 JavaScript 控 制它的變化，配置所屬的 CSS 來設計顯示的外觀。所以在 Dreamweaver 中插 入 Spry 工具集 功能時，程式會自動檢查網站中是否已經加入相關的 JavaScript 與 CSS 檔，如果沒有會自動將該檔存放在預設資料夾中。 在 Dreamweaver 中，Spry 相關檔案存放資料夾就是 Spry 資源資料夾，預設是 放置在定義網站根目錄之下的 <SpryAssets> 資料夾中。

14-3 Spry 選單列 Spry 選單列 可以在網頁中以網站的整個結構，加入下拉式選單。使用者可以很清楚的看到整個網站的結構，也能很快速的切換至所要的頁面，是一種很推薦的網站導覽方式。

14-3-1 關於 Spry 選單列 在過去 Dreamweaver 中有一項十分受到歡迎的行為：彈出式選單，它能在網 頁上加入如一般應用程式下拉式功能表，讓整個網站可以藉此整理出整個架構。 但是令人驚訝的是在目前 Dreamweaver 的版本中這項行為已經不再使用。為 什麼有這樣的變化？因為出現了一個更好的功能來取代，那就是 Spry 選單列。

14-3-2 分析選單結構 加入 Spry 選單列 之前，分析整個網站的架構，整理出選項的名稱與連結前往的 頁面，這個動作對於設定是很重要的。 請開啟 <tokyolayout.htm>，這個頁面是之前用來製作網站樣版的頁面。這裡 將使用 Spry 選單列 取代原來上方的導覽列圖示，讓整個網站的導覽更加的流暢。 以下是「映象東京」網站在進入首頁後整個網站的架構與頁面名稱：

14-3-3 加入 Spry 選單列 請進入「映象東京」範例網站開啟 <tokyolayout.htm> 檔案，首先要清除 原來的選單列： 接著要在 <div#menuList> 標籤中加入 Spry 選單列： 加入自訂的選項及設定連結： 請選按功能表列 檔案 \ 儲存檔案，再按 F12 鍵預覽看看，即可看到 Spry 選 單列 的效果了！

14-3-4 自訂 Spry 選單列樣式的修改方式 設計者可以藉由變更 Spry 選單列 的 CSS 規則，建立所喜愛的樣式選單列。 在建立 Spry 選單列 時 Dreamweaver 都會將這些 CSS 檔案儲存在網站的 <SpryAssets> 資料夾中。要注意的是：依照插入的 Spry 選單列 時所使用的 CSS 樣式檔也不同，水平的為 <SpryMenuBarHorizontal.css>，垂直的是 <SpryMenuBarVertical.css>。

變更選單項目文字樣式 若要變更選單項目的文字樣式，請使用下表找出適合的 CSS 規則，然後變更預設 值：

變更選單項目背景顏色 若要變更選單項目的背景顏色，請使用下表找出適合的 CSS 規則，然後變更預設 值：

變更選單項目尺寸 如果要變更選單項目的尺寸，請變更選單項目的 <li> 和 <ul> 標籤的寬度屬性。 找出 ul.MenuBarVertical li 或 ul.MenuBarHorizontal li 規則，將寬度屬性變 更為所要的寬度，或者將屬性變更為 auto 以移除固定寬度。 找出 ul.MenuBarVertical ul 或 ul.MenuBarHorizon 規則，將寬度屬性變更 為所要的寬度，或者將屬性變更為 auto 以移除固定寬度。 子選單的位置是由子選單 <ul> 標籤上的邊界屬性所控制。找出 ul.MenuBarVertical ul 或 ul.MenuBarHorizontal ul 規則，將 margin 預設值 變更為所要的值。

14-3-5 進行 Spry 選單列樣式的修改 請開啟 <tokyolayout.htm> 繼續進行 Spry 選單列 的修改，首先是選單平時 與滑鼠滑過時的樣式。請開啟 CSS 樣式 面板，選按 全部 鈕。 首先設定選項平時的樣式，包含了顯示字型與背景圖片： 接著設定滑鼠滑過時的項目樣式： 接著設定有子選項的項目在滑過時的樣式： 接著設定主選單選項的寬度，這裡要設定固定寬度為 92 px： 接著設定子選單選項的寬度，這裡要設定固定寬度為 110 px： 接著設定子選單選項外框的寬度，這裡要設定固定寬度為 110 px： 至此相關的 <SpryMenuBarHorizontal.css> 已經調整完畢，請儲存該檔案。

14-4 Spry 標籤面板 標籤面板就是讓不同單元的內容放置於同一區域中，在區域上方加上標籤供使用者切換。在 Dreamweaver 中也提供了一個 Spry 標籤面板 功能來達到這個效果，使用上相當方便。

14-4-1 加入 Spry 標籤面板 有越來越多的網站將許多不同單元的內容放置在同一個區域中，但是會在區域的 上方加上標籤，讓使用者可選擇不同的標籤切換不同的內容。 開啟範例檔案 請進入「映象東京」範例網站開啟 <info_more.htm> 檔案，這個頁面的資料與 「相關資訊」頁面一樣，但是為豐富製作的內容增加了「相關DVD」、「相關 CD」、「日本旅遊問與答」與「台灣近六年國民出國目的地人數統計」單元， 其中資料與格式已經設定完畢，若有需要可以使用這個頁面取代原來的「相關資 訊」。這裡將要使用 Spry 標籤面板 將「相關網站」、「相關書籍」、「相關 DVD」與「相關CD」四個區域內的資料整合在一個區域中。

加入 Spry 標籤面板 設定顯示標籤 接下來要設定顯示的標籤與文字： 設定顯示內容 接著要為每個標籤區域中加入內容。

瀏覽執行結果 請選按功能表列 檔案 \ 儲存檔案，再按 F12 鍵預覽看看，即可看到 Spry 標籤面 板 的效果了！

14-4-2 自訂 Spry 標籤面板樣式的修改方式 變更標籤面板文字樣式 設計者可以藉由變更 Spry 標籤面板 的 CSS 規則，建立喜愛的樣式。Spry 標籤 面板 所使用的 CSS 樣式檔為 <SpryTabbedPanels.css >，也是這裡修改的標的。 變更標籤面板文字樣式 若要變更 Spry 標籤面板 的文字樣式，請使用下表找出適合的 CSS 規則，然 後變更預設值：

變更標籤面板背景顏色 若要變更 Spry 標籤面板 的背景顏色或圖片，請使用下表找出適合的 CSS 規則， 然後變更預設值： 限制標籤面板寬度 Spry 標籤面板 預設會展開至所有可用空間， 不過只要設定折疊式容器的寬度屬 性，就可以限制標籤面板的寬度。寬度設定的地方在 CSS 檔案 <SpryTabbedPanels.css> 中的 .TabbedPanels CSS 規則，這項規則定義了 Spry 標籤面板 主要容器元素的屬性。

14-4-3 進行 Spry 標籤面板樣式的修改 請繼續於 <info_more.htm> 進行 Spry 標籤面板 的修改。在範例的設計上這 裡將去除 Spry 標籤面板 預設的灰色邊框，除了將標籤文字變大外，並在 <images> 放置了三張圖片：<tab01.gif>、<tab02.gif>與<tab03.gif>，分別 顯示在標籤預設、滑鼠滑過及選取時變更標籤背景。請開啟 CSS 樣式 面板，選 按 全部 鈕再進行以下設定： 首先設定整個 Spry 標籤面板 區域的寬度： 接著設定標籤平時的樣式，包含了顯示字型與背景圖片： 接著設定標籤在滑鼠滑過時的樣式，這裡要置換背景圖片： 接著設定標籤在選取時的樣式，這裡要置換背景圖片： 回到原畫面時，在設定的頁面上已經看到 Spry 標籤面板 完成的樣子。 請選按功能表列 檔案 \ 儲存檔案，再按 F12 鍵預覽看看，即可看到 Spry 標籤 面板 的效果了！

14-5 Spry 可收合面板 Dreamweaver 中 Spry 可收合面板 與 Spry 折疊式 能將版面上的資訊隱藏收合起來，在選按標題時會開啟並顯示，再次選按即會隱藏起來，對於版面的配置有很靈活的幫助。

14-5-1 加入 Spry 可收合面板 加入 Spry 可收合面板 設定 Spry 可收合面板的開啟狀態 Spry 可收合面板 能在區域中放置一個單元，選按標題可顯示或是隱藏顯示內容。 使用 Dreamweaver 來達到這個效果，而且設定的過程十分簡單，範例說明如下： 加入 Spry 可收合面板 請開啟 <info_more.htm>，這個頁面中的「日本旅遊問與答」單元將要使用 Spry 可收合面板 將單元內的資料整合起來。 設定 Spry 可收合面板的開啟狀態 範例中規劃 Spry 可收合面板 預設狀態是關閉的，只留下標題供使用者選按後再 開啟回答內容，以下將進行設定：

瀏覽執行結果 請選按功能表列 檔案 \ 儲存檔案，再按 F12 鍵預覽看看，即可看到 Spry 可收合 面板 的效果了！

14-5-2 自訂 Spry 可收合面板樣式的修改方式 設計者可以藉由變更 Spry 可收合面板 的 CSS 規則，建立喜愛的樣式。Spry 可 收合面板 所使用的 CSS 樣式檔為 <SpryCollapsiblePanel.css>，也是這裡修改 的標的。 變更可收合面板文字樣式 若要變更 Spry 可收合面板 的文字樣式，請使用下表找出適合的 CSS 規則，然後 變更預設值：

變更可收合面板背景顏色 限制可收合面板寬度 若要變更 Spry 可收合面板 的背景顏色或圖片，請使用下表找出適合的 CSS 規則， 然後變更 預設值： 限制可收合面板寬度 Spry 可收合面板 預設會展開至所有可用空間，不過只要設定折疊式容器的寬度 屬性，就可以限制標籤面板的寬度。 寬度設定的地方在 CSS 檔案 <SpryCollapsiblePanel.css > 中 的 .CollapsiblePanel CSS 規則，這項規則定義了 Spry 可收合面板 主要容器元 素的屬性。

14-5-3 進行 Spry 可收合面板樣式的修改 請繼續於 <info_more.htm> 進行 Spry 可收合面板 修改。在範例的設計上這 裡將去除 Spry 可收合面板 預設的灰色邊框與底色，除了將標籤文字變大外，並 在 <images> 放置了二張圖片：<icon_a.gif> 與 <icon_q.gif>，分別顯示在標 題及內容的左方。請開啟 CSS 樣式 面板，選按 全部 鈕再進行以下設定： 首先設定整個的 Spry 可收合面板 區域的寬度與背景顏色： 接著設定 Spry 可收合面板 標題平時的樣式，包含了顯示字型與背景圖片： 接著設定 Spry 可收合面板 展開時內容的樣式： 最後設定 Spry 可收合面板 滑鼠滑過以及作用中的狀態，這裡將使用 CSS 面板 直接設定： 請選按功能表列 檔案 \ 儲存檔案，再按 F12 鍵預覽看看，即可看到 Spry 可收 合面板 的效果了！

14-6 Spry 折疊式 Spry 折疊式 與 Spry 可收合面板 十分類似，都能將版面上的資訊隱藏收合起來，在選按標題時會開啟並顯示。不同的是 Spry 折疊式 可以設定多個區域，一次卻只能開啟一個。

14-6-1 加入 Spry 折疊式 Spry 折疊式 能在區域中放置多個單元，選按標題可顯示或是隱藏顯示內容，但 是一次只能顯示一個單元。使用 Dreamweaver 來達到這個效果，而且設定的過 程十分簡單，範例說明如下： 請開啟 <tokyolayout.htm> 檔案，這裡將要使用 Spry 折疊式 將右側的單元： 「推薦景點」的資料整合在起來。 加入標籤並設定標籤標題文字： 接著要由下方表格中複製資料，一一加入到每個對應的項目內容中：

14-6-2 自訂 Spry 折疊式樣式的修改方式 變更折疊式文字樣式 設計者可以藉由變更 Spry 折疊式 的 CSS 規則，建立所喜愛的樣式。Spry 折疊 式 所使用的 CSS 樣式檔為 <SpryAccordion.css>，也是這裡修改的標的。 變更折疊式文字樣式 若要變更 Spry 折疊式 的文字樣式，請使用下表找出適合的 CSS 規則，變更預設 值：

變更折疊式背景顏色 若要變更 Spry 折疊式 的背景顏色或圖片，請使用下表找出適合的 CSS 規則，然 後變更預設值：

限制折疊式寬度 Spry 折疊式 預設會展開至所有可用空間，不過只要設定折疊式容器的寬度屬性， 就可以限制標籤面板的寬度。 寬度設定的地方在 CSS 檔案 <SpryAccordion.css> 中的 .Accordion CSS 規則， 這項規則定義了 Spry 折疊式 主要容器元素的屬性。

14-6-3 進行 Spry 折疊式樣式的修改 請繼續於 <tokyolayout.htm> 進行 Spry 折疊式 的修改。在範例的設計上這裡 將去除 Spry 折疊式 標題預設的灰色邊框與底色，除了將標題文字變大外，並在 <images> 放置了二張圖片：<headback1.jpg> 與 <headback2.jpg>，顯示 在標題後方背景。請開啟 CSS 樣式 面板，選按 全部 鈕再進行以下設定： 首先設定 Spry 折疊式 標題平時的樣式，包含了顯示字型與背景圖片： 接著設定 Spry 折疊式 滑鼠滑過標題時的變化： 接著設定 Spry 折疊式 開啟的標籤滑鼠滑過時以及作用中的狀態，這裡將使用 CSS 面板直接設定： 最後設定 Spry 折疊式 內容顯示區域的樣式： 請選按功能表列 檔案 \ 儲存檔案，再按 F12 鍵預覽看看，即可看到 Spry 折疊 式 修改後的效果了！

14-7 認識 Spry 資料集 14-7-1 什麼是 Spry 資料集？ Spry 資料集 的使用是網頁資料互動的一大幫手，藉由 Spry 資料集 的幫忙設計師能由外部匯入 XML 或是網頁表格的資料，除了在頁面上顯示資料，還能對資料進行排序等進一步的應用。 14-7-1 什麼是 Spry 資料集？ Spry 函式庫不僅能夠應用在靈活的版面配置、實用的表單檢查與迷人的特效應 用，程式設計師還能應用 Spry 與 XML 或是 HTML 表格資料來源連結，將互動 資料載入到頁面中應用，在不需要頁面重整的狀態下達到顯示資料，甚至更換內 容，排列順序等複雜的工作。

關於 XML 資料來源 XML 是 Spry 資料集 一個重要的資料來源。XML的全名是 可擴展標記語言 (eXtensible Markup Language)，它是利用標記來建立包含結構化格式資料的 文件。XML 的結構類似 HTML，舉例來說：

XML 檔案都是以純文字的方式來儲存，一般副檔名為 「 XML 檔案都是以純文字的方式來儲存，一般副檔名為 「*.xml」。使用者可以 直接以瀏覽器開啟它，目前大部份的瀏覽器都能正確的閱讀它的內容。 如右圖瀏覽器顯示了 XML 資料中的巢狀標籤，可以使用一旁的 「-」 號來折 疊資料的內容。

在建立 XML 檔案時建議遵守下列的原則，以確保能產生格式良好的 XML 檔： 只有一個根元素(root element)：文件只能擁有唯一的根元素，例如上方的範 例中的根元素為「班級」。 XML 的標籤一定要成對：一個起始的標籤一定要有一個對稱的結尾標籤，如 <姓名>...</姓名>。組成上要維持適當的巢狀崁套，以維護資料結構的建全。 沒有成對的標籤在右端的大於符號 (>) 前面要有個 (/)：此類標籤一般稱為空 白標籤，在標籤結束的「>」要改為「/>」 XML 文件中大小寫視為不同：無論是 XML 的標籤 (element types) 與屬型 名稱(attribute names) 都要區分大小寫，如 <DW> 與 <dw> 視為不同的標籤。 標籤的屬性值一定要用引號包覆：例如 <學生 座號="1">。

關於 HTML 資料來源 在 Dreamweaver CS5 中的 Spry 新增了 HTML 資料來源，只要有以下 HTML 標 籤，如 表格、Div、清單...等標籤，建立結構化格式資料的文件，都可以當作資 料來源。 這個功能對於不熟悉 XML 文件操作的人來說，可以說是一大福音。因為他們可 以藉由熟悉的 HTML 來製作相關的資料來源，完成 Spry 資料集的工作。

14-7-2 關於 Spry 資料集的應用 簡單來說，Spry 資料集 最主要的工作就是在網頁上連結 XML 資料或是 HTML 資料，並將資料放置在頁面上的指定區域，以設計者放置的方式顯示，甚至排列 順序。 Spry 資料集 運作的基本步驟如下： 設定網頁連結到資料來源。 在網頁中指定顯示區域。 經由連結的資料來源繫結出所需要的 Spry 資料集。 將繫結的 Spry 資料集 放置到主要或詳細區域。 依據需求設定重複區域將所有資料讀出。 Spry 資料集 各個工具也是遵守這些步驟來設計，在依循這些步驟時都能對應使 用到所屬的工具。

14-8 Spry 資料集的應用 Spry 資料工具集 中提供了不少工具，能簡化資料匯入在本頁中顯示的操作，以下將示範使用 Spry 資料集 的使用，能利用精靈的引導，快速完成一個動態表格。

14-8-1 插入 Spry 資料集 在 「 映 象 東 京 」 範 例 網 站 中 有 一 個 <traveldata.xml>，其中記錄了台灣 近六年前往亞洲地區各國的人數統計。在範例中將連結這個資料集匯入到頁面上 顯示，使用者除了能觀看表格中所提供的資訊外，還能選按各欄的表頭，快速得 知每年台灣到各國人數的排名。 這裡將使用 Spry 資料集，它會以精靈的方式引導直到完成工作。

設定資料來源：載入並設定 XML 資料檔結構 請開啟 <info_more.htm> 檔案，於 插入 面板切換至 Spry 項目，選按 Spry 資料集 鈕進入設定精靈，首先要 設定資料來源。 設定資料欄位的類型 接著要設定欄位的類型，預設每一欄的資料類型皆為「字串」。在資料中除了地 區名稱之外，其他的欄位都應是數字型態的「編號」，如此一來各個欄位才能依 數據的方式進行排序。 選擇插入選項 到此資料來源的連結與顯示資料欄位的類型都已經設定完畢，接下來要設定連結 的資料要以何種方式顯示在頁面上。在範例中，這裡希望可以使用表格的方式顯 示在頁面上。

14-8-2 調整表格的格式並進行預覽 套用 CSS 規則 修改欄位名稱並儲存檔案 14-8-2 調整表格的格式並進行預覽 目前插入的 Spry 資料集 表格雖然已經可以預覽使用，但是在顯示上仍然未到達 完美的標準，在範例中設定了 .datatable 的 CSS 規則來定義表格中表頭、儲存 格的顯示樣式，請依下述步驟進行操作： 套用 CSS 規則 修改欄位名稱並儲存檔案 在資料表格中，每一欄的欄名會使用 XML 資料來源中定義的名稱，但是如此閱 讀起來實在不是很清楚，請直接修改表格的欄名如下：

14-9 將完成作品修改為範本 在本章之中又為範本原來的檔案 <tokyolayout.htm> 加入了許多特效，也更改了「相關資訊」頁面的內容。這裡將介紹如何將新的 <tokyolayout.htm> 製作為範本，並更新整個網站。

製作新的範本檔 更新整個網站套用範本的頁面 請進入「映象東京」範例網站開啟 <tokyolayout.htm> 檔案，首先要修改上 方 Spry 選單列 中「相關資訊」頁面的連結： 接著要在頁面上插入可編輯區，Dreamweaver 會自動將頁面轉為範本檔： 套用新的範本檔到新的「相關資訊」頁面： 更新整個網站套用範本的頁面 完成範本的製作後，接著更新整個網站。