1、Dreamweaver CS3 中用“ spry 菜單欄”制作縱向?qū)Ш讲藛握壕W(wǎng)頁導(dǎo)航菜單是指引和方便瀏覽者訪問所需內(nèi)中使用“ Spry容的快速通道。該文介紹了 Dreamweaver CS3菜單欄”控件創(chuàng)建縱向的導(dǎo)航菜單，通過“屬性”面板編輯Spry 菜單欄”控件，以及通過修改對應(yīng)SpryMenuBarVertical.css 文檔中的 CSS 規(guī)則來更改菜單欄的 外觀。關(guān)鍵詞： Dreamweaver CS3； spry 菜單欄；網(wǎng)頁縱向?qū)Ш讲藛沃袌D分類口號：TP311 文獻(xiàn)標(biāo)識碼： A 文章編號：1009-3044（2014）17-4129-031 概述 網(wǎng)頁導(dǎo)航菜單是指引和方便瀏覽者

2、訪問所需內(nèi)容的快速通道。 Dreamweaver CS3 提供“ Spry 菜單欄”控件，可以 創(chuàng)建縱向的網(wǎng)頁下拉或彈出菜單。網(wǎng)頁導(dǎo)航菜單的樣式和風(fēng) 格是網(wǎng)站樣式的一個重要的組成部分，好的網(wǎng)頁導(dǎo)航菜單可 以在確定網(wǎng)站風(fēng)格的同時，清晰網(wǎng)站的層次。2 創(chuàng)建網(wǎng)頁縱向?qū)Ш讲藛螜?利用“ Spry 菜單欄”控件創(chuàng)建網(wǎng)頁縱向?qū)Ш讲藛螜?）將光標(biāo)定位到要插入網(wǎng)頁縱向?qū)Ш讲藛螜诘奈恢谩?）單擊“插入記錄” |“Spry”|“Spry 菜單欄”。3）單擊“垂直”單選按鈕，再單擊確定。3 編輯網(wǎng)頁縱向?qū)Ш讲藛螜?）選擇頁面中的“ Spry 菜單欄”控件。2）展開“屬性”面板，在其中對“Spry 菜單欄”控件進(jìn)行編

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

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

5、s 文件中包含設(shè) 置控件樣式的全部信息。面從六個方面描述如何更改網(wǎng)頁縱向?qū)Ш讲藛螜凇D2 為用 Spry 菜單欄自動生成的網(wǎng)頁縱向?qū)Ш讲藛螜凇?)網(wǎng)頁縱向?qū)Ш讲藛螜诓藛伪尘靶薷?1) 打開 SpryMenuBarVertical.css 文件2) 找到代碼段：ul.MenuBarVertical border ： 1px solid #CCC ； 修改 border 屬性的值， 即可修改網(wǎng)頁縱向?qū)Ш讲藛螜诘淖钔饷娴牟藛稳萜鞯乃羞吙蝾伾，F(xiàn)將border 的值改為1px solid #1B4065 。3) 找到代碼段：ul.MenuBarVertical ul border ： 1px sol

6、id #CCC ； 修改 border 屬性的值， 即可修改網(wǎng)頁縱向?qū)Ш讲藛螜诘淖硬藛蔚牟藛稳萜鞯乃羞吙蝾伾，F(xiàn)將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 屬性的值，即可修改網(wǎng)頁縱向?qū)Ш讲藛螜诘牟藛稳萜鞯乃斜尘邦伾?現(xiàn)將 backgrou

7、nd-color的值改為 #1B4065 。2)網(wǎng)頁縱向?qū)Ш讲藛螜诓藛挝谋绢伾薷?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 屬性的值，即可修改網(wǎng)頁縱向?qū)Ш讲藛螜诘奈谋绢伾，F(xiàn)將 color 的值改為 1px solid #FFFFFF 。3）網(wǎng)頁縱向?qū)Ш讲藛螜?/p>

8、有鼠標(biāo)經(jīng)過或焦點的菜單項的背景修改1) 打開 SpryMenuBarVertical.css 文件2） 找到代碼段：ul.MenuBarVertical a ：hover ， ul.MenuBarVertical a ：focusbackground-color ： #33C；color ： #FFF； 修改 background-color 屬性的值，即可修改網(wǎng)頁縱向?qū)Ш讲藛螜诘牟藛雾椀谋尘邦伾，F(xiàn)將 background-color 的值 改為 #1B4065。4）網(wǎng)頁縱向?qū)Ш讲藛螜谟惺髽?biāo)經(jīng)過或焦點的菜單項的文本顏色修改1) 打開 SpryMenuBarVertical.css 文件2）

9、找到代碼段：ul.MenuBarVertical a ：hover ， ul.MenuBarVertical a ：focusbackground-color ：#33C；color ： #FFF； 修改 color 屬性的值，即可修改網(wǎng)頁縱向?qū)Ш讲藛螜诘牟藛雾椀奈谋绢伾，F(xiàn)將color 的值改為 #FFFF00。5）網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的背景顏色修改1) 打開 SpryMenuBarVertical.css 文件2) 找到代碼段：ul.MenuBarVertical a.MenuBarItemHover ，ul.MenuBarVertical a.MenuBa

10、rItemSubmenuHover ，ul.MenuBarVertical a.MenuBarSubmenuVisiblebackground-color ： #33C； color ： #FFF； 修改 background-color 屬性的值，即可修改網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的背景顏 色。現(xiàn)將 background-color 的值改為 #1B4065 。6) 網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的文本顏色修改1) 打開 SpryMenuBarVertical.css 文件2) 找到代碼段：ul.MenuBarVertical a.MenuBa

11、rItemHover ，ul.MenuBarVertical a.MenuBarItemSubmenuHover ，ul.MenuBarVertical a.MenuBarSubmenuVisiblebackground-color ： #33C； color ： #FFF； 修改 color 屬性的值，即可修改網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的文本顏色。現(xiàn)將 color的值改為 #FFFFFF 。5 總結(jié)Dreamweaver CS3中使用“Spry 菜單欄”控件可以創(chuàng)建縱向的網(wǎng)頁下拉或彈出菜單，通過Spry菜單欄”控件，以及通過修改對應(yīng)SpryMenuBarVertical.css單J.中國教育技術(shù)裝備，2009 (18): 71-72.文檔中的 CSS 規(guī)則來更改菜單欄的外觀。 該文從“網(wǎng)頁縱向 導(dǎo)航菜單欄菜單背景修改” 、“網(wǎng)頁縱向?qū)Ш讲藛螜诓藛挝谋?顏色修改”、“網(wǎng)頁縱向?qū)Ш讲藛螜谟惺髽?biāo)經(jīng)過或焦點的菜單 項的背景修改” 、“網(wǎng)頁縱向?qū)Ш讲藛螜谟惺髽?biāo)經(jīng)過或焦點的 菜單項的文本顏色修改” 、“網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡?鼠標(biāo)經(jīng)過或焦點時父菜單項的背景顏色修改”和“網(wǎng)頁縱向 導(dǎo)航菜單欄中子菜單有鼠標(biāo)經(jīng)過或焦點時父菜單項的文本 顏色修改”等六個方面描述了如何更改網(wǎng)頁縱向?qū)Ш讲藛螜?的外觀。圖