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

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

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

一、引言

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

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

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

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

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

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

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

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

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

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

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

五、總結(jié)

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

參考文獻(xiàn)

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

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

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

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