Dreamweaver CS3中用“spry菜單欄”制作縱向?qū)Ш讲藛?/h1>
2014-07-28 05:15劉靖屏
電腦知識與技術(shù) 2014年17期
劉靖屏
摘要：網(wǎng)頁導(dǎo)航菜單是指引和方便瀏覽者訪問所需內(nèi)容的快速通道。該文介紹了Dreamweaver CS3中使用“Spry菜單欄”控件創(chuàng)建縱向的導(dǎo)航菜單，通過“屬性”面板編輯“Spry菜單欄”控件，以及通過修改對應(yīng)SpryMenuBarVertical.css文檔中的CSS規(guī)則來更改菜單欄的外觀。
關(guān)鍵詞：Dreamweaver CS3；spry菜單欄；網(wǎng)頁縱向?qū)Ш讲藛?/p>
中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2014）17-4129-03
1 概述
網(wǎng)頁導(dǎo)航菜單是指引和方便瀏覽者訪問所需內(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ū)Ш讲藛螜?/p>
利用“Spry菜單欄”控件創(chuàng)建網(wǎng)頁縱向?qū)Ш讲藛螜?/p>
1）將光標(biāo)定位到要插入網(wǎng)頁縱向?qū)Ш讲藛螜诘奈恢谩?/p>
2）單擊“插入記錄”|“Spry”|“Spry菜單欄”。
3）單擊“垂直”單選按鈕，再單擊確定。
3 編輯網(wǎng)頁縱向?qū)Ш讲藛螜?/p>
1）選擇頁面中的“Spry菜單欄”控件。
2）展開“屬性”面板，在其中對“Spry菜單欄”控件進(jìn)行編輯，主要是增刪菜單項目，設(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)簽中對于每個頂級菜單項都包含一個li標(biāo)簽，而頂級菜單項（li標(biāo)簽）又包含用來為每個菜單項定義子菜單的ul和li標(biāo)簽，子菜單中同樣可以包含子菜單。頂級菜單和子菜單可以包含任意多個子菜單項。
盡管可以使用“屬性”面板編輯“Spry菜單欄”控件，但是“屬性”面板并不支持自定義菜單欄外觀樣式的設(shè)置任務(wù)。要想更改菜單欄外觀，必須修改對應(yīng)SpryMenuBarVertical.css文檔中的CSS規(guī)則。
圖1“復(fù)制相關(guān)文件”對話框中顯示自動要求復(fù)制的內(nèi)容有4個文件，其中2個文件為圖片， SpryMenuBar.js文件是賦予文件功能的，SpryMenuBarVertical.css文件中包含設(shè)置控件樣式的全部信息。
下面從六個方面描述如何更改網(wǎng)頁縱向?qū)Ш讲藛螜?。圖2為用Spry菜單欄自動生成的網(wǎng)頁縱向?qū)Ш讲藛螜凇?/p>
1）網(wǎng)頁縱向?qū)Ш讲藛螜诓藛伪尘靶薷?/p>
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 solid #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ū)Ш讲藛螜诘牟藛稳萜鞯乃斜尘邦伾，F(xiàn)將background-color的值改為#1B4065。
2）網(wǎng)頁縱向?qū)Ш讲藛螜诓藛挝谋绢伾薷?/p>
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ū)Ш讲藛螜谟惺髽?biāo)經(jīng)過或焦點的菜單項的背景修改
1） 打開SpryMenuBarVertical.css文件
2） 找到代碼段：
ul.MenuBarVertical a：hover， ul.MenuBarVertical a：focusendprint
{background-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） 找到代碼段：
ul.MenuBarVertical a：hover， ul.MenuBarVertical a：focus
{background-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.MenuBarItemSubmenuHover， ul.MenuBarVertical a.MenuBarSubmenuVisible
{background-color： #33C；
color： #FFF；}
修改background-color屬性的值，即可修改網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的背景顏色?，F(xiàn)將background-color的值改為#1B4065。
6）網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的文本顏色修改
1） 打開SpryMenuBarVertical.css文件
2） 找到代碼段：
ul.MenuBarVertical a.MenuBarItemHover， ul.MenuBarVertical a.MenuBarItemSubmenuHover， ul.MenuBarVertical a.MenuBarSubmenuVisible
{background-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文檔中的CSS規(guī)則來更改菜單欄的外觀。該文從“網(wǎng)頁縱向?qū)Ш讲藛螜诓藛伪尘靶薷摹?、“網(wǎng)頁縱向?qū)Ш讲藛螜诓藛挝谋绢伾薷摹薄ⅰ熬W(wǎng)頁縱向?qū)Ш讲藛螜谟惺髽?biāo)經(jīng)過或焦點的菜單項的背景修改”、“網(wǎng)頁縱向?qū)Ш讲藛螜谟惺髽?biāo)經(jīng)過或焦點的菜單項的文本顏色修改”、“網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的背景顏色修改”和“網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的文本顏色修改”等六個方面描述了如何更改網(wǎng)頁縱向?qū)Ш讲藛螜诘耐庥^。圖3顯示了用Spry菜單欄自動生成的網(wǎng)頁縱向?qū)Ш讲藛螜诮?jīng)更改后的效果。
參考文獻(xiàn)：
[1] 張新成，繆亮.Dreamweaver網(wǎng)頁制作實用教程[M]. 2版.北京： 清華大學(xué)出版，2012.
[2] 馬恒.Dreamweaver中多種菜單樣式的實現(xiàn)方法[J].電子世界，2013（2）： 148-149.
[3] 曲燕萍.使用Dreamweaver和Flash制作網(wǎng)頁下拉菜單[J].中國教育技術(shù)裝備，2009（18）：71-72.endprint
{background-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） 找到代碼段：
ul.MenuBarVertical a：hover， ul.MenuBarVertical a：focus
{background-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.MenuBarItemSubmenuHover， ul.MenuBarVertical a.MenuBarSubmenuVisible
{background-color： #33C；
color： #FFF；}
修改background-color屬性的值，即可修改網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的背景顏色?，F(xiàn)將background-color的值改為#1B4065。
6）網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的文本顏色修改
1） 打開SpryMenuBarVertical.css文件
2） 找到代碼段：
ul.MenuBarVertical a.MenuBarItemHover， ul.MenuBarVertical a.MenuBarItemSubmenuHover， ul.MenuBarVertical a.MenuBarSubmenuVisible
{background-color： #33C；
color： #FFF；}
修改color屬性的值，即可修改網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的文本顏色?，F(xiàn)將color的值改為#FFFFFF。
5 總結(jié)
Dreamweaver CS3中使用“Spry菜單欄”控件可以創(chuàng)建縱向的網(wǎng)頁下拉或彈出菜單，通過“屬性”面板編輯“Spry菜單欄”控件，以及通過修改對應(yīng)SpryMenuBarVertical.css文檔中的CSS規(guī)則來更改菜單欄的外觀。該文從“網(wǎng)頁縱向?qū)Ш讲藛螜诓藛伪尘靶薷摹?、“網(wǎng)頁縱向?qū)Ш讲藛螜诓藛挝谋绢伾薷摹薄ⅰ熬W(wǎng)頁縱向?qū)Ш讲藛螜谟惺髽?biāo)經(jīng)過或焦點的菜單項的背景修改”、“網(wǎng)頁縱向?qū)Ш讲藛螜谟惺髽?biāo)經(jīng)過或焦點的菜單項的文本顏色修改”、“網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的背景顏色修改”和“網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的文本顏色修改”等六個方面描述了如何更改網(wǎng)頁縱向?qū)Ш讲藛螜诘耐庥^。圖3顯示了用Spry菜單欄自動生成的網(wǎng)頁縱向?qū)Ш讲藛螜诮?jīng)更改后的效果。
參考文獻(xiàn)：
[1] 張新成，繆亮.Dreamweaver網(wǎng)頁制作實用教程[M]. 2版.北京： 清華大學(xué)出版，2012.
[2] 馬恒.Dreamweaver中多種菜單樣式的實現(xiàn)方法[J].電子世界，2013（2）： 148-149.
[3] 曲燕萍.使用Dreamweaver和Flash制作網(wǎng)頁下拉菜單[J].中國教育技術(shù)裝備，2009（18）：71-72.endprint
{background-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） 找到代碼段：
ul.MenuBarVertical a：hover， ul.MenuBarVertical a：focus
{background-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.MenuBarItemSubmenuHover， ul.MenuBarVertical a.MenuBarSubmenuVisible
{background-color： #33C；
color： #FFF；}
修改background-color屬性的值，即可修改網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的背景顏色?，F(xiàn)將background-color的值改為#1B4065。
6）網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的文本顏色修改
1） 打開SpryMenuBarVertical.css文件
2） 找到代碼段：
ul.MenuBarVertical a.MenuBarItemHover， ul.MenuBarVertical a.MenuBarItemSubmenuHover， ul.MenuBarVertical a.MenuBarSubmenuVisible
{background-color： #33C；
color： #FFF；}
修改color屬性的值，即可修改網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的文本顏色?，F(xiàn)將color的值改為#FFFFFF。
5 總結(jié)
Dreamweaver CS3中使用“Spry菜單欄”控件可以創(chuàng)建縱向的網(wǎng)頁下拉或彈出菜單，通過“屬性”面板編輯“Spry菜單欄”控件，以及通過修改對應(yīng)SpryMenuBarVertical.css文檔中的CSS規(guī)則來更改菜單欄的外觀。該文從“網(wǎng)頁縱向?qū)Ш讲藛螜诓藛伪尘靶薷摹?、“網(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)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的文本顏色修改”等六個方面描述了如何更改網(wǎng)頁縱向?qū)Ш讲藛螜诘耐庥^。圖3顯示了用Spry菜單欄自動生成的網(wǎng)頁縱向?qū)Ш讲藛螜诮?jīng)更改后的效果。
參考文獻(xiàn)：
[1] 張新成，繆亮.Dreamweaver網(wǎng)頁制作實用教程[M]. 2版.北京： 清華大學(xué)出版，2012.
[2] 馬恒.Dreamweaver中多種菜單樣式的實現(xiàn)方法[J].電子世界，2013（2）： 148-149.
[3] 曲燕萍.使用Dreamweaver和Flash制作網(wǎng)頁下拉菜單[J].中國教育技術(shù)裝備，2009（18）：71-72.endprint
劉靖屏
摘要：網(wǎng)頁導(dǎo)航菜單是指引和方便瀏覽者訪問所需內(nèi)容的快速通道。該文介紹了Dreamweaver CS3中使用“Spry菜單欄”控件創(chuàng)建縱向的導(dǎo)航菜單，通過“屬性”面板編輯“Spry菜單欄”控件，以及通過修改對應(yīng)SpryMenuBarVertical.css文檔中的CSS規(guī)則來更改菜單欄的外觀。
關(guān)鍵詞：Dreamweaver CS3；spry菜單欄；網(wǎng)頁縱向?qū)Ш讲藛?/p>
中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2014）17-4129-03
1 概述
網(wǎng)頁導(dǎo)航菜單是指引和方便瀏覽者訪問所需內(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ū)Ш讲藛螜?/p>
利用“Spry菜單欄”控件創(chuàng)建網(wǎng)頁縱向?qū)Ш讲藛螜?/p>
1）將光標(biāo)定位到要插入網(wǎng)頁縱向?qū)Ш讲藛螜诘奈恢谩?/p>
2）單擊“插入記錄”|“Spry”|“Spry菜單欄”。
3）單擊“垂直”單選按鈕，再單擊確定。
3 編輯網(wǎng)頁縱向?qū)Ш讲藛螜?/p>
1）選擇頁面中的“Spry菜單欄”控件。
2）展開“屬性”面板，在其中對“Spry菜單欄”控件進(jìn)行編輯，主要是增刪菜單項目，設(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)簽中對于每個頂級菜單項都包含一個li標(biāo)簽，而頂級菜單項（li標(biāo)簽）又包含用來為每個菜單項定義子菜單的ul和li標(biāo)簽，子菜單中同樣可以包含子菜單。頂級菜單和子菜單可以包含任意多個子菜單項。
盡管可以使用“屬性”面板編輯“Spry菜單欄”控件，但是“屬性”面板并不支持自定義菜單欄外觀樣式的設(shè)置任務(wù)。要想更改菜單欄外觀，必須修改對應(yīng)SpryMenuBarVertical.css文檔中的CSS規(guī)則。
圖1“復(fù)制相關(guān)文件”對話框中顯示自動要求復(fù)制的內(nèi)容有4個文件，其中2個文件為圖片， SpryMenuBar.js文件是賦予文件功能的，SpryMenuBarVertical.css文件中包含設(shè)置控件樣式的全部信息。
下面從六個方面描述如何更改網(wǎng)頁縱向?qū)Ш讲藛螜?。圖2為用Spry菜單欄自動生成的網(wǎng)頁縱向?qū)Ш讲藛螜凇?/p>
1）網(wǎng)頁縱向?qū)Ш讲藛螜诓藛伪尘靶薷?/p>
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 solid #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ū)Ш讲藛螜诘牟藛稳萜鞯乃斜尘邦伾，F(xiàn)將background-color的值改為#1B4065。
2）網(wǎng)頁縱向?qū)Ш讲藛螜诓藛挝谋绢伾薷?/p>
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ū)Ш讲藛螜谟惺髽?biāo)經(jīng)過或焦點的菜單項的背景修改
1） 打開SpryMenuBarVertical.css文件
2） 找到代碼段：
ul.MenuBarVertical a：hover， ul.MenuBarVertical a：focusendprint
{background-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） 找到代碼段：
ul.MenuBarVertical a：hover， ul.MenuBarVertical a：focus
{background-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.MenuBarItemSubmenuHover， ul.MenuBarVertical a.MenuBarSubmenuVisible
{background-color： #33C；
color： #FFF；}
修改background-color屬性的值，即可修改網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的背景顏色?，F(xiàn)將background-color的值改為#1B4065。
6）網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的文本顏色修改
1） 打開SpryMenuBarVertical.css文件
2） 找到代碼段：
ul.MenuBarVertical a.MenuBarItemHover， ul.MenuBarVertical a.MenuBarItemSubmenuHover， ul.MenuBarVertical a.MenuBarSubmenuVisible
{background-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文檔中的CSS規(guī)則來更改菜單欄的外觀。該文從“網(wǎng)頁縱向?qū)Ш讲藛螜诓藛伪尘靶薷摹?、“網(wǎng)頁縱向?qū)Ш讲藛螜诓藛挝谋绢伾薷摹薄ⅰ熬W(wǎng)頁縱向?qū)Ш讲藛螜谟惺髽?biāo)經(jīng)過或焦點的菜單項的背景修改”、“網(wǎng)頁縱向?qū)Ш讲藛螜谟惺髽?biāo)經(jīng)過或焦點的菜單項的文本顏色修改”、“網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的背景顏色修改”和“網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的文本顏色修改”等六個方面描述了如何更改網(wǎng)頁縱向?qū)Ш讲藛螜诘耐庥^。圖3顯示了用Spry菜單欄自動生成的網(wǎng)頁縱向?qū)Ш讲藛螜诮?jīng)更改后的效果。
參考文獻(xiàn)：
[1] 張新成，繆亮.Dreamweaver網(wǎng)頁制作實用教程[M]. 2版.北京： 清華大學(xué)出版，2012.
[2] 馬恒.Dreamweaver中多種菜單樣式的實現(xiàn)方法[J].電子世界，2013（2）： 148-149.
[3] 曲燕萍.使用Dreamweaver和Flash制作網(wǎng)頁下拉菜單[J].中國教育技術(shù)裝備，2009（18）：71-72.endprint
{background-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） 找到代碼段：
ul.MenuBarVertical a：hover， ul.MenuBarVertical a：focus
{background-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.MenuBarItemSubmenuHover， ul.MenuBarVertical a.MenuBarSubmenuVisible
{background-color： #33C；
color： #FFF；}
修改background-color屬性的值，即可修改網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的背景顏色?，F(xiàn)將background-color的值改為#1B4065。
6）網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的文本顏色修改
1） 打開SpryMenuBarVertical.css文件
2） 找到代碼段：
ul.MenuBarVertical a.MenuBarItemHover， ul.MenuBarVertical a.MenuBarItemSubmenuHover， ul.MenuBarVertical a.MenuBarSubmenuVisible
{background-color： #33C；
color： #FFF；}
修改color屬性的值，即可修改網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的文本顏色?，F(xiàn)將color的值改為#FFFFFF。
5 總結(jié)
Dreamweaver CS3中使用“Spry菜單欄”控件可以創(chuàng)建縱向的網(wǎng)頁下拉或彈出菜單，通過“屬性”面板編輯“Spry菜單欄”控件，以及通過修改對應(yīng)SpryMenuBarVertical.css文檔中的CSS規(guī)則來更改菜單欄的外觀。該文從“網(wǎng)頁縱向?qū)Ш讲藛螜诓藛伪尘靶薷摹?、“網(wǎng)頁縱向?qū)Ш讲藛螜诓藛挝谋绢伾薷摹薄ⅰ熬W(wǎng)頁縱向?qū)Ш讲藛螜谟惺髽?biāo)經(jīng)過或焦點的菜單項的背景修改”、“網(wǎng)頁縱向?qū)Ш讲藛螜谟惺髽?biāo)經(jīng)過或焦點的菜單項的文本顏色修改”、“網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的背景顏色修改”和“網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的文本顏色修改”等六個方面描述了如何更改網(wǎng)頁縱向?qū)Ш讲藛螜诘耐庥^。圖3顯示了用Spry菜單欄自動生成的網(wǎng)頁縱向?qū)Ш讲藛螜诮?jīng)更改后的效果。
參考文獻(xiàn)：
[1] 張新成，繆亮.Dreamweaver網(wǎng)頁制作實用教程[M]. 2版.北京： 清華大學(xué)出版，2012.
[2] 馬恒.Dreamweaver中多種菜單樣式的實現(xiàn)方法[J].電子世界，2013（2）： 148-149.
[3] 曲燕萍.使用Dreamweaver和Flash制作網(wǎng)頁下拉菜單[J].中國教育技術(shù)裝備，2009（18）：71-72.endprint
{background-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） 找到代碼段：
ul.MenuBarVertical a：hover， ul.MenuBarVertical a：focus
{background-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.MenuBarItemSubmenuHover， ul.MenuBarVertical a.MenuBarSubmenuVisible
{background-color： #33C；
color： #FFF；}
修改background-color屬性的值，即可修改網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的背景顏色?，F(xiàn)將background-color的值改為#1B4065。
6）網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的文本顏色修改
1） 打開SpryMenuBarVertical.css文件
2） 找到代碼段：
ul.MenuBarVertical a.MenuBarItemHover， ul.MenuBarVertical a.MenuBarItemSubmenuHover， ul.MenuBarVertical a.MenuBarSubmenuVisible
{background-color： #33C；
color： #FFF；}
修改color屬性的值，即可修改網(wǎng)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的文本顏色?，F(xiàn)將color的值改為#FFFFFF。
5 總結(jié)
Dreamweaver CS3中使用“Spry菜單欄”控件可以創(chuàng)建縱向的網(wǎng)頁下拉或彈出菜單，通過“屬性”面板編輯“Spry菜單欄”控件，以及通過修改對應(yīng)SpryMenuBarVertical.css文檔中的CSS規(guī)則來更改菜單欄的外觀。該文從“網(wǎng)頁縱向?qū)Ш讲藛螜诓藛伪尘靶薷摹?、“網(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)頁縱向?qū)Ш讲藛螜谥凶硬藛斡惺髽?biāo)經(jīng)過或焦點時父菜單項的文本顏色修改”等六個方面描述了如何更改網(wǎng)頁縱向?qū)Ш讲藛螜诘耐庥^。圖3顯示了用Spry菜單欄自動生成的網(wǎng)頁縱向?qū)Ш讲藛螜诮?jīng)更改后的效果。
參考文獻(xiàn)：
[1] 張新成，繆亮.Dreamweaver網(wǎng)頁制作實用教程[M]. 2版.北京： 清華大學(xué)出版，2012.
[2] 馬恒.Dreamweaver中多種菜單樣式的實現(xiàn)方法[J].電子世界，2013（2）： 148-149.
[3] 曲燕萍.使用Dreamweaver和Flash制作網(wǎng)頁下拉菜單[J].中國教育技術(shù)裝備，2009（18）：71-72.endprint
