瀏覽人數19568 | 字級:
利用 Dreamweaver CS3 的『Spry 組件』製作各種互動式選單
「Spry 組件」 是以 HTML、Javascript 與 CSS 撰寫而成的互動式元素,在Dreamweaver 中,舉凡彈出式選單、摺疊式面版、標籤切換面板、…等,都只需簡單幾個步驟,即可透過內建的 「Spry 組件」 來完成。接下來就帶您實際體驗「Spry 組件」 的魅力!
【文/《Dreamweaver CS3 魔法書》】

「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 摺疊式所會用到的檔案。

【旗標電腦知識報】


相關新聞:
新聞臉譜 (投下你對這則新聞的感覺)
回 應 文 章
0 篇回應文章 我要回應

社群回應載入中

作者登入 線上投稿
最新活動看板
 
  • 好友分享
  • 聯合新聞網粉絲團
訂閱電子報
黑麵的攝影之路
udn資訊科技電子報
udn 3C消費資訊報
udn 手機充電報
電玩優報
NOVA情報誌
數位之牆電子報
數位出版電子報
SOGI手機快報
旗標電腦知識報