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

【關鍵詞】Dreamweaver CS3；網頁導航菜單；spry菜單欄

一、引言

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

二、創(chuàng)建網頁導航菜單欄

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

（1）將光標定位到要插入水平網頁導航菜單欄的位置。

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

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

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

（1）將光標定位到要插入水平網頁導航菜單欄的位置。

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

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

三、編輯網頁導航菜單欄

五、總結

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

參考文獻

[1]張新成，繆亮.Dreamweaver網頁制作實用教程（第二版）[M]北京：清華大學出版，2012.

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

[3]曲燕萍.使用Dreamweaver和Flash制作網頁下拉菜單[J].中國教育技術裝備，2009（18）：71-72.

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