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

Presentation on theme: "14 Spry工具集與資料集的使用 認識 Spry 關於版面配置 Spry 工具集 Spry 選單列 Spry 標籤面板"— Presentation transcript:

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

2 14-1 認識 Spry Ajax 的技術隨著 Web 2.0 時代的來臨而普及在許多網站之中。Adobe 推出了 Spry 做為 Dreamweaver 開發 Ajax 網頁功能的主要函式庫，不僅設定上簡單，效果更是強大。 什麼是 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 14-2 關於 Spry 工具集 關於插入 \ Spry 面板
在 Dreamweaver 中使用 Spry 的功能，Spry 面板 的使用是非常重要的。這裡先介紹 Spry 面板 的內容，並說明存放 Spry 功能相關檔案的 Spry 資源資料夾。 關於插入 \ Spry 面板 Spry 工具集 是一個結合了 HTML、CSS 和 JavaScript 技術讓使用者能輕易 互動的網頁元素。於 插入 面板切換至 Spry 項目，Spry 工具集 大致可以分為三 類：

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

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

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

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

10

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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