- 相關(guān)推薦
用DW MX制作導(dǎo)航下拉菜單
導(dǎo)語：用Dreamweaver做網(wǎng)頁，下拉菜單是最常見的功能，下面就由小編為大家介紹一下如何用Dreamweaver MX制作導(dǎo)航下拉菜單，歡迎大家閱讀!
Dreamweaver從出道以來，其簡(jiǎn)便易用而又功能強(qiáng)大的“行為”(Behavior)一直是大家所關(guān)注的熱點(diǎn)之一。在Dreamweaver MX(DW MX)中，對(duì)這一功能又有了擴(kuò)充與改進(jìn)。
在DW MX中，行為指的是為了響應(yīng)某一事件(Event)而采取的一個(gè)操作(Action)。其中Event 指的是瀏覽器的事件，比如窗口刷新、鼠標(biāo)移動(dòng)等。而 Action 指的是后臺(tái)響應(yīng)事件的 JavaScript 代碼，可以完成相應(yīng)的操作，比如播放聲音、翻轉(zhuǎn)圖片等。
圖1
首先制作好導(dǎo)航條(圖1中的“產(chǎn)品中心”那一欄)，隨后添加一個(gè)層，作為下拉菜單將要顯示的位置，并填入下拉菜單的對(duì)應(yīng)欄目。
接下來，打開“Behaviors”面板，同時(shí)選中“產(chǎn)品中心”鏈接(注意，這個(gè)時(shí)候不能夠選中剛剛建好的層，否則無法應(yīng)用“Show-Hide Layers”行為)，單擊“+”號(hào)，選擇“Show-Hide Layers”，就可以看到我們剛剛建好的層在選擇項(xiàng)中，可以設(shè)定為隱藏或者顯示(如圖2)。
圖2
行為的妙用主要體現(xiàn)在：如果我們要實(shí)現(xiàn)下拉菜單，關(guān)鍵就是讓鼠標(biāo)移到“產(chǎn)品中心”鏈接上時(shí)，使層顯示;而鼠標(biāo)離開鏈接時(shí)，使層隱藏。根據(jù)這種思想，我們首先為這個(gè)層設(shè)立兩個(gè)Action，一個(gè)選擇Hide，一個(gè)選擇Show。然后，調(diào)整Event，將Hide Layer的Event設(shè)為OnMouseOut，即為鼠標(biāo)離開鏈接;而將Show Layer的Event設(shè)為OnMouseOver，即為鼠標(biāo)選中鏈接。按“F12”預(yù)覽，就可看到我們期盼的效果。
這樣，平時(shí)我們覺得很神秘的導(dǎo)航下拉菜單就可以輕易在行為中實(shí)現(xiàn)。還可以在導(dǎo)航鏈接上繼續(xù)應(yīng)用 “Swap Image”行為，實(shí)現(xiàn)鼠標(biāo)點(diǎn)選鏈接時(shí)出現(xiàn)圖片翻轉(zhuǎn)效果。
行為不是一個(gè)個(gè)孤立的特效，可以由多個(gè)行為組合疊加實(shí)現(xiàn)復(fù)雜的功能，除了DW MX默認(rèn)設(shè)置好的行為外，我們還可以從www.mcromedia.com上下載更多更酷的第三方行為，我們只需將它們直接復(fù)制到DreamweaverMXConfigurationBehaviorsActions目錄下即可，從而使DW MX的這一閃光點(diǎn)更加眩目。
【用DW MX制作導(dǎo)航下拉菜單】相關(guān)文章：
DW制作網(wǎng)頁的基本步驟06-26
Dw網(wǎng)頁設(shè)計(jì)制作小技巧07-16
用Dreamweaver MX 2004與SQL數(shù)據(jù)庫相連07-22
怎樣用DW設(shè)計(jì)限時(shí)自動(dòng)關(guān)閉網(wǎng)頁08-05
Dreamweaver MX的小技巧08-08
使用PhotoShop制作斜紋質(zhì)感網(wǎng)頁導(dǎo)航按鈕教程06-03
基于css3的屬性transition制作菜單導(dǎo)航效果07-19
Excel下拉菜單怎樣做07-19