認識 Spry 關於版面配置 Spry 工具集 Spry 選單列 Spry 標籤面板 Spry 可收合面板 Spry 折疊式 認識 Spry 資料集 Spry 資料集的應用

1. 認識 Spry • 關於版面配置 Spry 工具集 • Spry 選單列 • Spry 標籤面板 • Spry 可收合面板 • Spry 折疊式 • 認識 Spry 資料集 • Spry 資料集的應用 • 14 • Spry工具集與資料集的使用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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