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

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

一、引言

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

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

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

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

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

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

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

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

第一種方式：通過(guò)翻轉(zhuǎn)圖片來(lái)實(shí)現(xiàn)。

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

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

(3)使用表格來(lái)布局菜單項(xiàng)，插入1行多列的表格，每個(gè)單元格中插入原始的菜單項(xiàng)圖片。

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

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

第二種方式：通過(guò)代碼來(lái)實(shí)現(xiàn)。

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

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

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

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

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

……

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

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

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

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

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

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

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

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

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

(4)每個(gè)菜單項(xiàng)都需要如此制作。

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

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

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

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

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

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

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

(6)每個(gè)菜單項(xiàng)都需要如此制作。

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

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é)生社團(tuán)”,”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個(gè)true改為false即可。

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

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

三、菜單的組合

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

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

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