Dreamweaver CS3中用“spry菜單欄”制作網(wǎng)頁(yè)導(dǎo)航菜單

【摘要】網(wǎng)頁(yè)導(dǎo)航菜單是一個(gè)網(wǎng)站的主線，是指引和方便瀏覽者訪問(wèn)所需內(nèi)容的快速通道。本文介紹了Dreamweaver CS3中使用“Spry菜單欄”控件創(chuàng)建橫向或縱向的網(wǎng)頁(yè)下拉或彈出菜單，通過(guò)“屬性”面板編輯“Spry菜單欄”控件，以及通過(guò)修改對(duì)應(yīng)SpryMenuBarHorizontal.css或SpryMenuBarVertical.css文檔中的CSS規(guī)則來(lái)更改菜單欄的外觀。

【關(guān)鍵詞】Dreamweaver CS3；網(wǎng)頁(yè)導(dǎo)航菜單；spry菜單欄

一、引言

隨著Internet的日益盛行，網(wǎng)頁(yè)制作水平也在不斷提高，網(wǎng)頁(yè)導(dǎo)航菜單是一個(gè)網(wǎng)站的主線，是指引和方便瀏覽者訪問(wèn)所需內(nèi)容的快速通道，菜單的設(shè)計(jì)非常重要。Dreamweaver CS3提供“Spry菜單欄”控件，可以創(chuàng)建橫向或縱向的網(wǎng)頁(yè)下拉或彈出菜單。網(wǎng)頁(yè)導(dǎo)航菜單的樣式和風(fēng)格是網(wǎng)站樣式的一個(gè)重要的組成部分，好的網(wǎng)頁(yè)導(dǎo)航菜單可以在確定網(wǎng)站風(fēng)格的同時(shí)，清晰網(wǎng)站的層次。

二、創(chuàng)建網(wǎng)頁(yè)導(dǎo)航菜單欄

1.利用“Spry菜單欄”控件創(chuàng)建水平網(wǎng)頁(yè)導(dǎo)航菜單欄

（1）將光標(biāo)定位到要插入水平網(wǎng)頁(yè)導(dǎo)航菜單欄的位置。

（2）單擊“插入記錄”|“Spry”|“Spry菜單欄”。

（3）單擊“水平”單選按鈕，再單擊確定。

2.利用“Spry菜單欄”控件創(chuàng)建垂直網(wǎng)頁(yè)導(dǎo)航菜單欄

（1）將光標(biāo)定位到要插入水平網(wǎng)頁(yè)導(dǎo)航菜單欄的位置。

（2）單擊“插入記錄”|“Spry”|“Spry菜單欄”。

（3）單擊“垂直”單選按鈕，再單擊確定。

三、編輯網(wǎng)頁(yè)導(dǎo)航菜單欄

五、總結(jié)

Dreamweaver CS3中使用“Spry菜單欄”控件可以創(chuàng)建橫向或縱向的網(wǎng)頁(yè)下拉或彈出菜單，通過(guò)“屬性”面板編輯“Spry菜單欄”控件，以及通過(guò)修改對(duì)應(yīng)SpryMenu-BarHorizontal.css或SpryMenuBarVertical.css文檔中的CSS規(guī)則來(lái)更改菜單欄的外觀。圖3顯示了用Spry菜單欄自動(dòng)生成的水平網(wǎng)頁(yè)導(dǎo)航菜單欄經(jīng)更改后的效果。對(duì)于縱向的網(wǎng)頁(yè)下拉菜單更改方法與橫向的下拉菜單更改方法相類似這里不再詳述。

參考文獻(xiàn)

[1]張新成，繆亮.Dreamweaver網(wǎng)頁(yè)制作實(shí)用教程（第二版）[M]北京：清華大學(xué)出版，2012.

[2]馬恒.Dreamweaver中多種菜單樣式的實(shí)現(xiàn)方法[J].電子世界，2013（2）：148-149.

[3]曲燕萍.使用Dreamweaver和Flash制作網(wǎng)頁(yè)下拉菜單[J].中國(guó)教育技術(shù)裝備，2009（18）：71-72.

作者簡(jiǎn)介：趙東晉（1982—），男，講師，研究方向：人工智能、教育信息化。