1、Dreamweaver CS3 中用“ spry 菜單欄”制作縱向導航菜單摘要：網頁導航菜單是指引和方便瀏覽者訪問所需內中使用“ Spry容的快速通道。該文介紹了 Dreamweaver CS3菜單欄”控件創建縱向的導航菜單，通過“屬性”面板編輯Spry 菜單欄”控件，以及通過修改對應SpryMenuBarVertical.css 文檔中的 CSS 規則來更改菜單欄的 外觀。關鍵詞： Dreamweaver CS3； spry 菜單欄；網頁縱向導航菜單中圖分類口號：TP311 文獻標識碼： A 文章編號：1009-3044（2014）17-4129-031 概述 網頁導航菜單是指引和方便瀏覽者

2、訪問所需內容的快速通道。 Dreamweaver CS3 提供“ Spry 菜單欄”控件，可以 創建縱向的網頁下拉或彈出菜單。網頁導航菜單的樣式和風 格是網站樣式的一個重要的組成部分，好的網頁導航菜單可 以在確定網站風格的同時，清晰網站的層次。2 創建網頁縱向導航菜單欄 利用“ Spry 菜單欄”控件創建網頁縱向導航菜單欄1）將光標定位到要插入網頁縱向導航菜單欄的位置。2）單擊“插入記錄” |“Spry”|“Spry 菜單欄”。3）單擊“垂直”單選按鈕，再單擊確定。3 編輯網頁縱向導航菜單欄1）選擇頁面中的“ Spry 菜單欄”控件。2）展開“屬性”面板，在其中對“Spry 菜單欄”控件進行編

3、輯，主要是增刪菜單項目，設置菜單項目的名稱和菜單項鏈接的網頁地址等。3）在“屬性”面板中完成對“Spry 菜單欄”控件的編輯后，在文檔編輯區中可以觀察到“Spry 菜單欄”控件的變化。但是要想預覽“ Spry 菜單欄”控件的完整效果，必須先保存網頁文檔。選擇“文件” |“保存”命令，彈出“復制相關文件”對話框，如圖 1“復制相關文件”對話框所示。單擊“確定”按鈕， Dreamweaver 就會自動將這些文件復制到站點的 SpryAssets 文件夾中。4）按 F12 鍵預覽網頁效果。4 更改網頁縱向導航菜單欄外觀樣式 菜單控件的 HTML 文檔中包含一個外部 ul 標簽，該標簽中對于每個頂級菜

4、單項都包含一個 li 標簽，而頂級菜單項li 標簽） 又包含用來為每個菜單項定義子菜單的 ul 和 li 標 簽，子菜單中同樣可以包含子菜單。頂級菜單和子菜單可以 包含任意多個子菜單項。盡管可以使用“屬性”面板編輯“ Spry 菜單欄”控件，但是“屬性”面板并不支持自定義菜單欄外觀樣式的設置任 務。要想更改菜單欄外觀，必須修改對應SpryMenuBarVertical.css 文檔中的 CSS 規則。容有 4 個文件， 其中圖 1 “復制相關文件”對話框中顯示自動要求復制的內2 個文件為圖片， SpryMenuBar.js 文件 是賦予文件功能的， SpryMenuBarVertical.cs

5、s 文件中包含設 置控件樣式的全部信息。面從六個方面描述如何更改網頁縱向導航菜單欄。圖2 為用 Spry 菜單欄自動生成的網頁縱向導航菜單欄。1)網頁縱向導航菜單欄菜單背景修改 1) 打開 SpryMenuBarVertical.css 文件2) 找到代碼段：ul.MenuBarVertical border ： 1px solid #CCC ； 修改 border 屬性的值， 即可修改網頁縱向導航菜單欄的最外面的菜單容器的所有邊框顏色。現將border 的值改為1px solid #1B4065 。3) 找到代碼段：ul.MenuBarVertical ul border ： 1px sol

6、id #CCC ； 修改 border 屬性的值， 即可修改網頁縱向導航菜單欄的子菜單的菜單容器的所有邊框顏色。現將border 的值改為1px solid #1B4065 。4) 找到代碼段：ul.MenuBarVertical a display ： block ；cursor： pointer ；background-color ： #EEE； padding： 0.5em 0.75em； color ： #333； text-decoration ： none；修改 background-color 屬性的值，即可修改網頁縱向導航菜單欄的菜單容器的所有背景顏色。 現將 backgrou

7、nd-color的值改為 #1B4065 。2)網頁縱向導航菜單欄菜單文本顏色修改 1) 打開 SpryMenuBarVertical.css 文件2) 找到代碼段：ul.MenuBarVertical a display ： block ；cursor： pointer ；background-color ： #EEE； padding： 0.5em 0.75em； color ： #333； text-decoration ： none；修改 color 屬性的值，即可修改網頁縱向導航菜單欄的文本顏色。現將 color 的值改為 1px solid #FFFFFF 。3）網頁縱向導航菜單欄

8、有鼠標經過或焦點的菜單項的背景修改1) 打開 SpryMenuBarVertical.css 文件2） 找到代碼段：ul.MenuBarVertical a ：hover ， ul.MenuBarVertical a ：focusbackground-color ： #33C；color ： #FFF； 修改 background-color 屬性的值，即可修改網頁縱向導航菜單欄的菜單項的背景顏色。現將 background-color 的值 改為 #1B4065。4）網頁縱向導航菜單欄有鼠標經過或焦點的菜單項的文本顏色修改1) 打開 SpryMenuBarVertical.css 文件2）

9、找到代碼段：ul.MenuBarVertical a ：hover ， ul.MenuBarVertical a ：focusbackground-color ：#33C；color ： #FFF； 修改 color 屬性的值，即可修改網頁縱向導航菜單欄的菜單項的文本顏色。現將color 的值改為 #FFFF00。5）網頁縱向導航菜單欄中子菜單有鼠標經過或焦點時父菜單項的背景顏色修改1) 打開 SpryMenuBarVertical.css 文件2) 找到代碼段：ul.MenuBarVertical a.MenuBarItemHover ，ul.MenuBarVertical a.MenuBa

10、rItemSubmenuHover ，ul.MenuBarVertical a.MenuBarSubmenuVisiblebackground-color ： #33C； color ： #FFF； 修改 background-color 屬性的值，即可修改網頁縱向導航菜單欄中子菜單有鼠標經過或焦點時父菜單項的背景顏 色。現將 background-color 的值改為 #1B4065 。6) 網頁縱向導航菜單欄中子菜單有鼠標經過或焦點時父菜單項的文本顏色修改1) 打開 SpryMenuBarVertical.css 文件2) 找到代碼段：ul.MenuBarVertical a.MenuBa

11、rItemHover ，ul.MenuBarVertical a.MenuBarItemSubmenuHover ，ul.MenuBarVertical a.MenuBarSubmenuVisiblebackground-color ： #33C； color ： #FFF； 修改 color 屬性的值，即可修改網頁縱向導航菜單欄中子菜單有鼠標經過或焦點時父菜單項的文本顏色。現將 color的值改為 #FFFFFF 。5 總結Dreamweaver CS3中使用“Spry 菜單欄”控件可以創建縱向的網頁下拉或彈出菜單，通過Spry菜單欄”控件，以及通過修改對應SpryMenuBarVertical.css單J.中國教育技術裝備，2009 (18): 71-72.文檔中的 CSS 規則來更改菜單欄的外觀。 該文從“網頁縱向 導航菜單欄菜單背景修改” 、“網頁縱向導航菜單欄菜單文本 顏色修改”、“網頁縱向導航菜單欄有鼠標經過或焦點的菜單 項的背景修改” 、“網頁縱向導航菜單欄有鼠標經過或焦點的 菜單項的文本顏色修改” 、“網頁縱向導航菜單欄中子菜單有 鼠標經過或焦點時父菜單項的背景顏色修改”和“網頁縱向 導航菜單欄中子菜單有鼠標經過或焦點時父菜單項的文本 顏色修改”等六個方面描述了如何更改網頁縱向導航菜單欄 的外觀。圖