Dreamweaver中多種菜單樣式的實現(xiàn)方法

上海邦德職業(yè)技術(shù)學(xué)院 馬 恒

一、引言

凡是瀏覽過網(wǎng)頁的人都知道：導(dǎo)航菜單是一個網(wǎng)站不可缺少的部分，它不僅直觀的體現(xiàn)出了這個網(wǎng)站的整體結(jié)構(gòu)，更是指引和方便瀏覽者訪問所需內(nèi)容的快速通道。故而，網(wǎng)站導(dǎo)航菜單的設(shè)計和實現(xiàn)就體現(xiàn)得尤為重要了，良好的網(wǎng)站導(dǎo)航會使網(wǎng)站更易于訪問、更加吸引瀏覽者。導(dǎo)航條的樣式和風(fēng)格是網(wǎng)站樣式的一個重要的組成部分，好的導(dǎo)航條可以在確定網(wǎng)站風(fēng)格的同時，清晰網(wǎng)站的層次。

二、導(dǎo)航菜單樣式的實現(xiàn)

1.普通的導(dǎo)航菜單樣式

普通的導(dǎo)航菜單樣式適合下級鏈接頁面不多，結(jié)構(gòu)也不是很復(fù)雜的網(wǎng)站，使用Dreamweaver面板中提供的層或者表格直接編輯鏈接就可以了。

以表格的制作方式為例，我們創(chuàng)建一個水平的導(dǎo)航菜單，插入1行多列的表格(一個菜單項為一列)，在每個單元格中輸入具體的菜單項或者也可使用自己設(shè)計制作圖片為菜單，在屬性面板中編輯超鏈接的地址。若我們需要制作側(cè)邊菜單欄，可以采用垂直的導(dǎo)航菜單樣式，插入多行1列的表格進行編輯，在單元格中添加文字或圖片，編輯超鏈接即可。

但是，無論是水平還是垂直導(dǎo)航菜單都有美中不足：編輯過超鏈接的文字會出現(xiàn)的藍色的下劃線，我們可以通過之間添加代碼來解決：

2.帶滑塊效果的導(dǎo)航菜單樣式

當(dāng)鼠標(biāo)指向?qū)Ш讲藛蔚哪骋徊藛雾棔r，該菜單項的顏色就會變成與其他菜單項不相同。與上面的菜單樣式比較，這種菜單的視覺效果比較好，美觀性強、生動活潑、動感性強，吸引人們的注意力。其實現(xiàn)方式有以下有兩種：

第一種方式：通過翻轉(zhuǎn)圖片來實現(xiàn)。

(1)設(shè)計好的導(dǎo)航菜單的菜單項，再將每個菜單項制作成像素大小一致的圖片，將菜單項制作成圖片的好處不僅僅是為了方便實現(xiàn)上述的翻轉(zhuǎn)樣式，由于圖片可以根據(jù)自己喜歡的設(shè)計風(fēng)格來選擇顏色、背景、字體，所以制作的菜單更為美觀。

(2)為每個菜單項制作翻轉(zhuǎn)圖(鼠標(biāo)指向菜單項時，想要顯示的與其他菜單不同顏色的那張圖片)，制作時需注意不僅翻轉(zhuǎn)圖的像素尺寸大小要與第一步制作的菜單項圖片一致，而且為了網(wǎng)站的美觀效果盡量顏色有所反差。將每個菜單項圖以及它們的翻轉(zhuǎn)圖都保存在網(wǎng)站存放圖片的目錄下。

(3)使用表格來布局菜單項，插入1行多列的表格，每個單元格中插入原始的菜單項圖片。

(4)打開Dreamweaver的行為面板，選中某一菜單項圖片，在行為面板張?zhí)砑有袨椋航粨Q圖像，此時出現(xiàn)對話框，對話框“設(shè)定原始檔為：”中瀏覽、選擇制作好的該菜單項的翻轉(zhuǎn)圖片，并勾選“鼠標(biāo)滑開時恢復(fù)圖像”。

這時，我們看到行為面板里添加了兩個動作：“onMouseOver交換圖像”和“onMouseOut恢復(fù)交換圖像”。每個菜單項都需要如此制作。然后編輯每個導(dǎo)航菜單的菜單項的超鏈接，由于現(xiàn)在的菜單項都是圖片形式的，若直接選中圖片編輯超鏈接，圖片周圍會出現(xiàn)藍色的邊框，這是我們不想見到的，所以我們一般使用圖片屬性窗口中的“地圖”熱點工具，繪制熱點來編輯超鏈接。

第二種方式：通過代碼來實現(xiàn)。

(1)制做導(dǎo)航菜單項背景圖以及鼠標(biāo)指向菜單項時顯示的效果背景圖，圖片像素不用很大，將這兩張圖片保存在網(wǎng)站存放圖片的目錄下即可。

(2)在之間添加如下代碼：

上述代碼中text-decoration∶ none;定義鏈接的文字不帶下劃線，#borderlinks a{}中定義的是鼠標(biāo)沒有指向時，導(dǎo)航菜單的顯示樣式(字體大小、行高、背景樣式)，#borderlinks a∶hover{}中定義的是鼠標(biāo)指向?qū)Ш讲藛螘r，菜單顯示的樣式(字體大小、行高、背景樣式)，其中代碼background-image∶url(images/bnck02.jpg);指定背景圖片樣式。

(3)使用表格來布局導(dǎo)航菜單的菜單項，插入1行多列的表格，在每一單元格中輸入菜單項。

(4)在導(dǎo)航菜單的區(qū)塊前，引用上述樣式，代碼為：

……

(5)為導(dǎo)航菜單項文字編輯超鏈接。

以上兩種方法，同為實現(xiàn)滑塊效果的導(dǎo)航菜單，不同之處在于：第一種方法是用圖片來制作菜單項，視覺效果比較美觀，但是一旦需要增加或者刪除菜單項時，就必須調(diào)整每個菜單項以及它的翻轉(zhuǎn)圖的像素尺寸；第二種方法中菜單項僅僅是文字，美觀效果依賴于背景圖片以及網(wǎng)頁的整體設(shè)計，但遇到增刪菜單的情況其處理起來就比較簡單，只需要調(diào)整單元格的尺寸即可。

3.帶下拉菜單的導(dǎo)航菜單樣式

當(dāng)鼠標(biāo)指向?qū)Ш讲藛蔚哪骋徊藛雾棔r，該菜單項會顯示出隱藏的子菜單，瀏覽者可以直接在子菜單中直接選擇要訪問的頁面，這樣既節(jié)約了排版空間，又使網(wǎng)頁布局簡潔有序。該子菜單有下拉菜單有垂直和水平兩種。我們以垂直菜單為例，其實現(xiàn)亦有2種常見的方法：

第一種：通過行為面板的顯示隱藏層來實現(xiàn)，其原理比較簡單，它利用了行為面板中的內(nèi)置方法Show-Hide Layers(隱藏-顯示層)方法，并用onMouseOver(鼠標(biāo)移至)和onMouseOut(鼠標(biāo)移開)來觸發(fā)層的隱藏和顯示。

具體的實現(xiàn)方法如下：

(1)在表格中布局好具體的導(dǎo)航菜單項。

(2)在某導(dǎo)航菜單的菜單項下添加一個層，在層中編輯隱藏的子菜單的內(nèi)容、字體、鏈接、背景等，將層的屬性設(shè)置為“hidden”，如此設(shè)置，使這個層平時為不可見的隱藏層。要注意的是：下拉選單所在的層的位置非常重要（屬性面板中由L和T兩個參數(shù)決定）。它們的上邊線應(yīng)該緊貼導(dǎo)航條的下邊線，這樣才能保證在后面我們完成第三個步驟后，菜單能正常使用。因為如果遠離導(dǎo)航條的話，鼠標(biāo)一離開導(dǎo)航條，菜單就消失了。

(3)選中該菜單項，在行為面板中添加行為“顯示-隱藏層”：OnMouseOver顯示隱藏層（顯示），以及行為：OnMouseOut顯示隱藏層（隱藏），在添加行為時注意層的編號。

(4)每個菜單項都需要如此制作。

(5)根據(jù)自己的需要和網(wǎng)站的整體風(fēng)格對菜單和層進行美化和修飾。

第二種：通過行為面板的顯示彈出式菜單實現(xiàn)。

(1)使用表格布局導(dǎo)航菜單項。

(2)選中某一菜單項，在行為面板中添加行為：OnMouseOver顯示彈出式菜單。

(3)雙擊行為面板中的顯示彈出式菜單，彈出對話框，可以對子菜單的內(nèi)容、鏈接、外觀、位置、邊框、字體顏色、字體大小、背景顏色等進行編輯。其中，“菜單延遲”編輯框默認(rèn)設(shè)置為1000相當(dāng)于1秒；使用“位置”選項設(shè)置彈出式菜單相對于觸發(fā)圖像或鏈接的顯示位置。

(4)單擊“位置”標(biāo)簽；在“菜單位置”區(qū)選擇“觸發(fā)器在右上邊緣”按鈕；確保選中了“在發(fā)生onmouseout事件時隱藏菜單”復(fù)選框。此設(shè)置的效果是當(dāng)用戶將鼠標(biāo)指針移開觸發(fā)器之后該菜單項自動隱藏。

(5)編輯完成，確定后，行為面板中自動生成：OnMouseOut隱藏彈出式菜單。現(xiàn)在行為面板列表中顯示了兩個動作。

(6)每個菜單項都需要如此制作。

若想生成的菜單為水平式樣，以某菜單項生成的代碼段舉例：

window.mm_menu_0107124954_0=new Menu("root",88,18,"",12,"#FFFFFF","#FFFFFF","#4682B4","#1E90FF","cente r","middle",3,0,1000,-5,7,true,fals e,true,0,true,true);

mm_menu_0107124954_0.addMenuItem(“學(xué)生社團”,”location=’xysh/shetuan.htm’”);

mm_menu_0107124954_0.addMenuItem(“學(xué)生管理”,”location=’xysh/xsguanli.htm’”);

mm_menu_0107124954_0.addMenuItem(“學(xué)生服務(wù)”,”location=’xysh/xsfuwu.htm’”);

mm_menu_0107124954_0.hideOn-MouseOut=true;

mm_menu_0107124954_0.bgColor='#555555';

mm_menu_0107124954_0.menuBorder=1;

mm_menu_0107124954_0.menuLite-BgColor='#FFFFFF';

mm_menu_0107124954_0.menuBorder-BgColor='#777777';

只需將上述代碼中：window.mm_menu_0107124954_0=new Menu("root",88,1 8,"",12,"#FFFFFF","#FFFFFF","#4682B4","#1E90FF","center","middle",3,0,1000,-5,7,true,false,true,0,true,true);最后的3個true改為false即可。

第二種方法比第一種方法制作出來的菜單更為美觀，它不只是簡單實現(xiàn)了下拉菜單效果，同時還可以實現(xiàn)顯示子菜單的延時時間、鼠標(biāo)指向某子菜單式時顯示的反差背景色，還可以將子菜單進行多個位置的定位。

具體選用垂直子菜單還是水平子菜單是根據(jù)實際情況來的，水平子菜單需要考慮菜單的項目數(shù)不能過多，超出網(wǎng)頁頁面范圍就顯得不合適了，相對而言垂直子菜單就不用考慮這一點，更有甚者，有的網(wǎng)站還設(shè)有三級菜單，這種情況，使用垂直子菜單更為合適。

三、菜單的組合

菜單的樣式不是獨立存在或是一成不變的。可以講上面的幾種菜單組合起來使用，以實現(xiàn)不同的效果。例如，要實現(xiàn)帶滑塊效果的水平下拉菜單，只需要將上面的第二種和第三種相結(jié)合，就可以實現(xiàn)這個效果。如果美化的效果不夠理想，可以通過定義CSS樣式來解決。

[1]胡崧,吳曉煒,李勝林.Dreamweaver CS6中文版從入門到精通[M].中國青年出版社.

[2]李睦芳,肖新容.Dreamweaver CS5 +ASP動態(tài)網(wǎng)站開發(fā)與典型實例[M].清華大學(xué)出版社.