近來有許多人問筆者如何利用 DW 中的功能設定在滑鼠指向選單時彈出時的子主題)
那麼現在就提供一個簡單的教學給大家

一個網站需要主題定位, 而每一個頻道主頁內也會分出子區域, 最後是內容頁.
所以, 你需要先定下你的網站需要的每個主題, 而建立主選單的好處是可以讓瀏覽者快速知道您的網站提供的主要內容
主選單內顯示出來的文字則愈簡愈好, 若是內容頁, 附加內容或題外內容就避免在主選單中出現,
讓瀏覽者自行進入他們想要的資訊, 藉以增加了忠誠度或停留率, 但連結卻不要太過複雜,
例如網站的主要內容是文章, 就不要將文章放得太過深入, 否則瀏覽者會找不到, 最後放棄瀏覽你的網站.

導覽列設計概念:
主題 -> 頻道主頁 -> 內容頁

通常在一些商業性的網頁會有公司簡介, 產品方案, 公司位置及聯絡方法, 夥伴關係等等
而個人網頁可能會有個人介紹, 個人興趣, 交友及留言板等
以上都最好在首頁中顯示出來, 清晰而快捷的配合瀏覽者需要
其餘的就是自己的構思, 現在筆者會教大家如何製作一個導覽列:
需要的軟件是圖片編輯軟件, 及網頁編輯軟件,
而在這節會利用 Adobe Dreamweaver CS3(英文版) 和 Adobe PhotoShop7.0 作範例.

開始製作
Step 1:
定下了主題名稱後, 先為它繪圖. 例如現在要做的其中一個主題是"公司介紹"
Dreamweaver CS3 的其中一個新功能, 就是利用 Spry Menu Bar 去取代以往的 PopUpMenu

1) 開啟 Insert 面板, 選擇 Spry 選項, 然後選擇 Spry Menu Bar, 如下圖
Fig. 1


2) 按下後系統會提示你先選擇選單列水平方式,
筆者會以 Horizontal 作範例

Fig. 2


Step 2:
以後 Spry Menu Bar 會插入於 Design 面板中
Fig.3


選擇 Spry Menu Bar: MenuBar1"
Fig.4


1) 定義主選單的文字為公司介紹,
2) 定義子選單的文字為公司歷史, 店舖位置, 聯絡方法 (可在上方的 + 號加入新的項目)
3) 定義選單的連結
4) 其餘的 Item 也同樣方法做一次

最後成功建立了 Spry 多層選單列
Fig.5


當你儲存時系統會替你建立一個 SpryAssets 檔案, 你可以透過內裡的 SpryAccordion.css 去更改選單列的樣式