Dreamweaver 中的 Spry 是以 HTML、Javascript、CSS 三種語法撰寫而成的互動式元素，讓某些不會撰寫程式語法的人也能夠輕易地做出效果性十足的互動式網頁。在 Spry 中的選單列、摺疊式面版、標籤面板、可收合面板、工具提示等，都只需簡單幾個步驟，即可由 Dreamweaver 透過內建的 Spry 組件來完成且修改容易。
我們以 Spry 選單列為例，在設計網頁時，只要網頁上顯示幾個主要的連結功能表，當滑鼠移到某一個項目上時，再顯示出含有更多連結的子功能表，這就是所謂的 Spry 選單列。在 Dreamweaver 中，可利用 Spry 選單列來完成上述的效果。製作大型專案時，就如購物網站、社群網站…等，便可使用此種效果來呈現。這樣一來，可節省頁面連結內容的分佈並達到與使用者互動的趣味性。接下來就帶您實際體驗 Spry 選單列的魅力！
各位可點選下方的 Demo 連結以檢視成品展示。
以下幾個網站都是有使用類似的方式呈現，但不一定是使用 Dreamweaver – Spry 選單列做的喔！
我們就以現有的網頁版型來加入 Spry 選單列。大致上分為兩大階段，分別是：
- 使用 Dreamweaver 的 Spry 組件插入選單列。
- 修改 CSS 以美化 Spry 選單列。
使用 Dreamweaver 的 Spry 組件插入選單列
Step. 1
請將游標停留在所需插入的位置（位於 <h1> 與 <img> 中間）並點選 Spry \ Spry 選單列。
Step. 2
此時，會出現一對話視窗詢問您要以水平或垂直來呈現。
Step. 3
插入後，請點選 Spry 選單列的藍色標籤即可在屬性列中修改其文字內容、連結位置與子選單連結（最多達三層）。
Step. 4
儲存檔案後，會將所需之影像、CSS、Javascript 一併加入到您的資料夾中。
Step. 5
至於儲存到我們的資料夾哪裡呢？如下圖所示，就在 Dreamweaver 幫我們產生的 SpryAssets 資料夾中。
修改 CSS 以美化 Spry 選單列
各位所插入的 Spry 選單列是最陽春的呈現狀態，若要美化它就必須動用到 CSS 了。
Step. 1
首先，請在 HTML 中加上一些標籤，如 <br>、<span>。在為某些標籤套用我們所設定好的 Class（類別），如
<ul class=”resetSpace”>、<li class=”color1″>、<li class=”color2″>、<li class=”color3″>、<li class=”color4″>。若不熟悉請看下圖所示：
Step. 2
由於 Spry 組件幫我們產生出來的 CSS 相當地複雜，故我們把不需要使用的 CSS 都清除掉並修改為欲呈現之效果。
就這樣囉 ! 如果看不太懂的同學們請多多複習一下 CSS 喔 !
當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！