Spry 標籤面板

Download Report

Transcript Spry 標籤面板 

加強篇
 認識 Spry
 關於版面配置 Spry 工具集
 Spry 選單列
 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 工具集
在 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 選單列
1. 請進入「映象東京」範例網站開啟 <tokyolayout.htm> 檔案，首先要清除
原來的選單列：
2. 接著要在 <div#menuList> 標籤中加入 Spry 選單列：
3. 加入自訂的選項及設定連結：
4. 請選按功能表列 檔案 \ 儲存檔案，再按 F12 鍵預覽看看，即可看到 Spry 選
單列 的效果了！
加強篇
14-3-4 自訂 Spry 選單列樣式的修改方式
設計者可以藉由變更 Spry 選單列 的 CSS 規則，建立所喜愛的樣式選單列。
在建立 Spry 選單列 時 Dreamweaver 都會將這些 CSS 檔案儲存在網站的
<SpryAssets> 資料夾中。要注意的是：依照插入的 Spry 選單列 時所使用的
CSS 樣式檔也不同，水平的為 <SpryMenuBarHorizontal.css>，垂直的是
<SpryMenuBarVertical.css>。
加強篇
變更選單項目文字樣式
若要變更選單項目的文字樣式，請使用下表找出適合的 CSS 規則，然後變更預設
值：
加強篇
變更選單項目背景顏色
若要變更選單項目的背景顏色，請使用下表找出適合的 CSS 規則，然後變更預設
值：
加強篇
變更選單項目尺寸
如果要變更選單項目的尺寸，請變更選單項目的 <li> 和 <ul> 標籤的寬度屬性。
1.找出 ul.MenuBarVertical li 或 ul.MenuBarHorizontal li 規則，將寬度屬性變
更為所要的寬度，或者將屬性變更為 auto 以移除固定寬度。
2.找出 ul.MenuBarVertical ul 或 ul.MenuBarHorizon 規則，將寬度屬性變更
為所要的寬度，或者將屬性變更為 auto 以移除固定寬度。
3.子選單的位置是由子選單 <ul> 標籤上的邊界屬性所控制。找出
ul.MenuBarVertical ul 或 ul.MenuBarHorizontal ul 規則，將 margin 預設值
變更為所要的值。
加強篇
14-3-5 進行 Spry 選單列樣式的修改
1. 請開啟 <tokyolayout.htm> 繼續進行 Spry 選單列 的修改，首先是選單平時
與滑鼠滑過時的樣式。請開啟 CSS 樣式 面板，選按 全部 鈕。
2. 首先設定選項平時的樣式，包含了顯示字型與背景圖片：
3. 接著設定滑鼠滑過時的項目樣式：
4. 接著設定有子選項的項目在滑過時的樣式：
5. 接著設定主選單選項的寬度，這裡要設定固定寬度為 92 px：
6. 接著設定子選單選項的寬度，這裡要設定固定寬度為 110 px：
7. 接著設定子選單選項外框的寬度，這裡要設定固定寬度為 110 px：
8. 至此相關的 <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 樣式 面板，選
按 全部 鈕再進行以下設定：
1.首先設定整個 Spry 標籤面板 區域的寬度：
2.接著設定標籤平時的樣式，包含了顯示字型與背景圖片：
3.接著設定標籤在滑鼠滑過時的樣式，這裡要置換背景圖片：
4.接著設定標籤在選取時的樣式，這裡要置換背景圖片：
5.回到原畫面時，在設定的頁面上已經看到 Spry 標籤面板 完成的樣子。
6.請選按功能表列 檔案 \ 儲存檔案，再按 F12 鍵預覽看看，即可看到 Spry 標籤
面板 的效果了！
加強篇
14-5 Spry 可收合面板
Dreamweaver 中 Spry 可收合面板 與 Spry 折疊式 能將版面上的資訊隱藏
收合起來，在選按標題時會開啟並顯示，再次選按即會隱藏起來，對於版面
的配置有很靈活的幫助。
加強篇
14-5-1 加入 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 樣式 面板，選按 全部 鈕再進行以下設定：
1.首先設定整個的 Spry 可收合面板 區域的寬度與背景顏色：
2.接著設定 Spry 可收合面板 標題平時的樣式，包含了顯示字型與背景圖片：
3.接著設定 Spry 可收合面板 展開時內容的樣式：
4.最後設定 Spry 可收合面板 滑鼠滑過以及作用中的狀態，這裡將使用 CSS 面板
直接設定：
5.請選按功能表列 檔案 \ 儲存檔案，再按 F12 鍵預覽看看，即可看到 Spry 可收
合面板 的效果了！
加強篇
14-6 Spry 折疊式
Spry 折疊式 與 Spry 可收合面板 十分類似，都能將版面上的資訊隱藏收合
起來，在選按標題時會開啟並顯示。不同的是 Spry 折疊式 可以設定多個
區域，一次卻只能開啟一個。
加強篇
14-6-1 加入 Spry 折疊式
Spry 折疊式 能在區域中放置多個單元，選按標題可顯示或是隱藏顯示內容，但
是一次只能顯示一個單元。使用 Dreamweaver 來達到這個效果，而且設定的過
程十分簡單，範例說明如下：
請開啟 <tokyolayout.htm> 檔案，這裡將要使用 Spry 折疊式 將右側的單元：
「推薦景點」的資料整合在起來。
1.加入標籤並設定標籤標題文字：
2.接著要由下方表格中複製資料，一一加入到每個對應的項目內容中：
加強篇
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 樣式 面板，選按 全部 鈕再進行以下設定：
1.首先設定 Spry 折疊式 標題平時的樣式，包含了顯示字型與背景圖片：
2.接著設定 Spry 折疊式 滑鼠滑過標題時的變化：
3.接著設定 Spry 折疊式 開啟的標籤滑鼠滑過時以及作用中的狀態，這裡將使用
CSS 面板直接設定：
4.最後設定 Spry 折疊式 內容顯示區域的樣式：
5.請選按功能表列 檔案 \ 儲存檔案，再按 F12 鍵預覽看看，即可看到 Spry 折疊
式 修改後的效果了！
加強篇
14-7 認識 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 檔：
1.只有一個根元素(root element)：文件只能擁有唯一的根元素，例如上方的範
例中的根元素為「班級」。
2.XML 的標籤一定要成對：一個起始的標籤一定要有一個對稱的結尾標籤，如
<姓名>...</姓名>。組成上要維持適當的巢狀崁套，以維護資料結構的建全。
3.沒有成對的標籤在右端的大於符號 (>) 前面要有個 (/)：此類標籤一般稱為空
白標籤，在標籤結束的「>」要改為「/>」
4.XML 文件中大小寫視為不同：無論是 XML 的標籤 (element types) 與屬型
名稱(attribute names) 都要區分大小寫，如 <DW> 與 <dw> 視為不同的標籤。
5.標籤的屬性值一定要用引號包覆：例如 <學生 座號="1">。
加強篇
關於 HTML 資料來源
在 Dreamweaver CS5 中的 Spry 新增了 HTML 資料來源，只要有以下 HTML 標
籤，如 表格、Div、清單...等標籤，建立結構化格式資料的文件，都可以當作資
料來源。
這個功能對於不熟悉 XML 文件操作的人來說，可以說是一大福音。因為他們可
以藉由熟悉的 HTML 來製作相關的資料來源，完成 Spry 資料集的工作。
加強篇
14-7-2 關於 Spry 資料集的應用
簡單來說，Spry 資料集 最主要的工作就是在網頁上連結 XML 資料或是 HTML
資料，並將資料放置在頁面上的指定區域，以設計者放置的方式顯示，甚至排列
順序。
Spry 資料集 運作的基本步驟如下：
1.設定網頁連結到資料來源。
2.在網頁中指定顯示區域。
3.經由連結的資料來源繫結出所需要的 Spry 資料集。
4.將繫結的 Spry 資料集 放置到主要或詳細區域。
5.依據需求設定重複區域將所有資料讀出。
Spry 資料集 各個工具也是遵守這些步驟來設計，在依循這些步驟時都能對應使
用到所屬的工具。
加強篇
14-8 Spry 資料集的應用
Spry 資料工具集
中提供了不少工具，
能簡化資料匯入在
本頁中顯示的操作，
以下將示範使用
Spry 資料集 的使
用，能利用精靈的
引導，快速完成一
個動態表格。
加強篇
14-8-1 插入 Spry 資料集
在 「 映 象 東 京 」 範 例 網 站 中 有 一 個 <traveldata.xml>，其中記錄了台灣
近六年前往亞洲地區各國的人數統計。在範例中將連結這個資料集匯入到頁面上
顯示，使用者除了能觀看表格中所提供的資訊外，還能選按各欄的表頭，快速得
知每年台灣到各國人數的排名。
這裡將使用 Spry 資料集，它會以精靈的方式引導直到完成工作。
加強篇
設定資料來源：載入並設定 XML 資料檔結構
請開啟 <info_more.htm> 檔案，於
插入 面板切換至 Spry 項目，選按
Spry 資料集 鈕進入設定精靈，首先要
設定資料來源。
設定資料欄位的類型
接著要設定欄位的類型，預設每一欄的資料類型皆為「字串」。在資料中除了地
區名稱之外，其他的欄位都應是數字型態的「編號」，如此一來各個欄位才能依
數據的方式進行排序。
選擇插入選項
到此資料來源的連結與顯示資料欄位的類型都已經設定完畢，接下來要設定連結
的資料要以何種方式顯示在頁面上。在範例中，這裡希望可以使用表格的方式顯
示在頁面上。
加強篇
14-8-2 調整表格的格式並進行預覽
目前插入的 Spry 資料集 表格雖然已經可以預覽使用，但是在顯示上仍然未到達
完美的標準，在範例中設定了 .datatable 的 CSS 規則來定義表格中表頭、儲存
格的顯示樣式，請依下述步驟進行操作：
套用 CSS 規則
修改欄位名稱並儲存檔案
在資料表格中，每一欄的欄名會使用 XML 資料來源中定義的名稱，但是如此閱
讀起來實在不是很清楚，請直接修改表格的欄名如下：
加強篇
14-9 將完成作品修改為範本
在本章之中又為範本原來的檔案
<tokyolayout.htm> 加入了許多
特效，也更改了「相關資訊」頁
面的內容。這裡將介紹如何將新
的 <tokyolayout.htm> 製作為
範本，並更新整個網站。
加強篇
製作新的範本檔
1. 請進入「映象東京」範例網站開啟 <tokyolayout.htm> 檔案，首先要修改上
方 Spry 選單列 中「相關資訊」頁面的連結：
2. 接著要在頁面上插入可編輯區，Dreamweaver 會自動將頁面轉為範本檔：
3. 套用新的範本檔到新的「相關資訊」頁面：
更新整個網站套用範本的頁面
完成範本的製作後，接著更新整個網站。