旗標知識網 Banner Advertisement
     
 
Dreamweaver CS3 魔法書
Dreamweaver CS3 魔法書

作者:施威銘研究室著
書號:FS400
附件:附1片光碟片
定價:490 元
 
 
 
 
 
 
 
利用『Spry 組件』製作各種互動式選單

利用『Spry 組件』製作各種互動式選單

「Spry 組件」 是以 HTML、Javascript 與 CSS 撰寫而成的互動式元素, 在Dreamweaver 中, 舉凡彈出式選單、摺疊式面版、標籤切換面板、…等, 都只需簡單幾個步驟, 即可透過內建的 「Spry 組件」 來完成。接下來就帶您實際體驗 「Spry 組件」 的魅力!

多層次的 Spry 選單列

在設計網頁時, 只要網頁上顯示幾個主要的連結功能表, 當滑鼠移到某一個項目上時, 再顯示出含有更多連結的子功能表, 這就是所謂的「彈出式功能表」。在 Dreamweaver 中, 您可利用 『Spry 選單列』 來完成上述的效果。


滑鼠指標移開後, 次選單自動消失

 

Step 1 我們要利用 Spry 面板來製作 Spry 選單列

TIP:若您是新增尚未存檔的空白的 HTML 檔案來製作, 則在使用 Spry 面板的功能鈕時, 會先出現警告交談窗要求您先儲存檔案, 請按下確定鈕將檔案儲存後即可繼續。

 

Step 2 在交談窗中選取選單列的形式。本書範例網站是使用橫式的選單列, 因此請選擇水平


選單列產生了

 

Step 3目前的選單文字並不是我們想要的, 因此接下來要修改選單列文字, 例如要將"項目 1" 改成 "推薦行程"。請選取剛剛建立好的 Spry 選單列, 接著利用屬性面板來作修改:

 

Step 4 接下來, 請重複步驟 3 的做法, 陸續完成彈出式選單的其他選項, 請參考下圖的資料名稱變更選項, 並依照下表替選項設定超連結。

第1層選項 連結 第2層選項 連結 第3層選項 連結
推薦行程 # 關東 # 東京超人氣五日由 ../travel.html
    關西 #    
    北海道•九州 #    
日本簡介 ../aboutjapan.html        
日本寫真館 ../photo.html        
旅遊日誌分享 ../blog.html        
相關連結 ../link.html        

 

Step 5 完成後將網頁存檔, 此時會出現複製相關檔案交談窗, 告訴您使用 Spry 所需的檔案, 請按下確定鈕繼續, Dreamweaver 會自動在您的網站架構下建立 SpryAssets 資料夾, 並將這些檔案存到該資料夾中, 方便日後管理 (不只 Spry 選單列, 所有建立 Spry 元素所需的檔案都會儲存在 SpryAssets 資料夾中)。當你要上傳網站時, 記得也要將此資料夾一起上傳, Spry 選單才能正常使用。

TIP:預設所有的 Spry 選單列都會使用相同的 CSS 檔案與 Javascript 檔案, 由於本練習檔案資料夾中已經包含範例網站所建立的 Spry 選單列檔案, 故不會出現上述交談窗。

 

任意切換的 Spry 標籤面板

當網頁內容一多時, 瀏覽者在觀看時勢必得不停地捲動頁面, 才能看到更多的內容, 也因此在頁面較下方的內容往往可能被忽略。若網頁中同時有多個重要的內容想要呈現在頁面上方時, 您可利用 『Spry 標籤面板』 以切換的方式來顯示不同的內容。

以下我們來實際練習建立Spry 標籤面板

Step 1 利用 Spry 面板來製作 Spry 標籤面板

 

Step 2 目前的選單文字並不是我們想要的, 因此接下來要修改選單列文字, 例如要將 "索引標籤 1" 改成 "時尚東京"、"索引標籤 2" 改成 "浪漫京阪神"、"索引標籤 3" 改成 "戀戀北海道"。請比照編輯網頁文字的方式, 直接選取索引標籤來 修改即可:

切換及編輯標籤面板內容

Spry 標籤面板可以整合多個面板, 要切換不同的標籤面板內容, 只要將滑鼠移到標籤上, 並按下出現的 「眼睛」 圖示即可切換標籤以編輯內容:

TIP:若滑鼠移到標籤上時未出現 「眼睛」 圖示, 表示您現在正切換到該標籤。

 

Step 3 完成後將網頁存檔, 此時會出現複製相關檔案交談窗, 告訴您使用 Spry 所需的檔案, 請按下確定鈕繼續, Dreamweaver 會將檔案存到 SpryAssets 資料夾, 方便日後管理:


檔名開頭為 "SpryTabbedPanels" 的檔案, 即為 Spry 標籤面板所會用到的檔案

 

多層折疊式的 Spry 面板

在設計網頁時, 妥善安排版面空間是一件十分重要的事, 當網頁內容越來越多時, 為了不使畫面看起來太過繁複, 您可使用 『Spry 摺疊式』 來歸納內容的呈現。

 

Step 1 利用 Spry 面板來製作 Spry 摺疊式

 

Step 2 標籤標題文字的修改方式跟 Spry 標籤面板一樣, 直接比照編輯網頁文字的方式, 選取 "標籤標記 1" 文字即可修改, 當滑鼠移到標籤上時會出現 「眼睛」 圖示, 按下即可切換標籤以編輯各自的內容。完成後將網頁存檔, 此時一樣會出現複製相關檔案交談窗, 請按下確定鈕繼續:

 

單層可收合式的 Spry 面板

Spry 組件中還有另一個跟 Spry 摺疊式很類似的組件, 即 『Spry 可收合面板』 , 也可用來收納網頁內容。不同的是, Spry 摺疊式可以有多個組合;而 Spry 可收合面板只能有 1 個層級, 當其收合起來時, 下方的資料也會跟著往上提升。

按下 Spry 面板的 Spry 可收合面板鈕 , 即可插入 Spry 可收合面板

存檔後在 SpryAssets 資料夾中, 檔名開頭為 "SpryCollapsiblePanel" 的檔案, 即為 Spry 摺疊式所會用到的檔案。

 
Down Logo 旗 標 出 版 股 份 有 限 公 司   100 台北市中正區杭州南路一段15-1號19樓 TEL: 02-2396-3257
Copyright © 2005 Flag Publishing Co.,Ltd. All Rights Reserved    版權所有聯絡我們合作提案隱私權政策
 
現在購買《DSLR 完全探索》《數位相片編修聖經》《數位列印/輸出聖經》《數位相機Raw檔聖經》四書,超值優惠2299元 下載訂購單