利用dw制作漂亮的導(dǎo)航欄效果

利用dw制作漂亮的導(dǎo)航欄效果瀏覽：1031次最近論壇中很多網(wǎng)友問到各種菜單和導(dǎo)航的制作方法，下面我們就網(wǎng)上常見的一些菜單和導(dǎo)航效果做簡(jiǎn)單的介紹?？紤]到滿漢全席的菜單應(yīng)該是最全的了，我們就以此為名，來頓super大餐。Let'sGo!一、進(jìn)門點(diǎn)心：利用DreamweaverMX制作最基本的下拉菜單實(shí)現(xiàn)下拉菜單的思路是首先建立一個(gè)相對(duì)定位的層，調(diào)整其位置，并設(shè)置其顯示屬性為隱藏，然后通過給鏈接文本或圖象添加onclick（點(diǎn)擊）或者onmouseover（鼠標(biāo)劃過）的事件來觸發(fā)"顯示-隱藏層”的行為，顯示隱藏的層，并且在鼠標(biāo)劃出層時(shí)隱藏層，實(shí)現(xiàn)下拉菜單的完整效果。下面介紹在Dreamweaver中的具體操作步驟：1?使用菜單在頁面中插入一個(gè)層，這個(gè)層是相對(duì)定位的層，然后再在其中插入一個(gè)子層，因?yàn)樽訉拥奈恢檬窍鄬?duì)于父層而言，所以只要父層的位置不發(fā)生變化，改變子層的位置和大小不會(huì)改變其相對(duì)性，效果如圖1所示。圖片如下:竽篥簞冷圖1為了父層不占據(jù)頁面空間，可以設(shè)置其寬和高為0,因?yàn)橐院笠{(diào)整子層的位置，所以先不設(shè)定子層的顯示屬性為隱藏，而是到確定子層到合適位置后再設(shè)置。2?選中導(dǎo)航條上的鏈接文本。使用快捷鍵Shift+F3激活行為面板，單擊行為面板中的加號(hào)按鈕，在彈出的行為下拉菜單中選擇“顯示-隱藏層”，在彈出的設(shè)置對(duì)話框中選中子層，單擊顯示按鈕，如圖2所示。圖片如下:圖2顯示層設(shè)置完畢后單擊確定按鈕，修改其觸發(fā)事件為onmouseover，即當(dāng)鼠標(biāo)劃過文本時(shí)顯示層。接下來還需要設(shè)置鼠標(biāo)劃出文本后的行為，繼續(xù)使用行為面板，選擇“顯示-隱藏層”，在彈出的對(duì)話框中選中子層，單擊隱藏按鈕，如圖3所示。圖片如下:

顯示隱除層2SJ命名的層：I層 顯示隱除層2SJ命名的層：I層 圖3隱藏層設(shè)置完畢后單擊確定按鈕，在行為面板中修改該行為的觸發(fā)事件為onmouseout，即鼠標(biāo)劃出時(shí)隱藏子層。3.拖動(dòng)子層，調(diào)整其位置到和導(dǎo)航條貼近并垂直位于導(dǎo)航文本的下方的位置。層在編輯頁面中的位置和在瀏覽器頁面中的位置是有差異的，所以需要多次調(diào)整并在瀏覽器中預(yù)覽效果，只到達(dá)到合適的位置。4?設(shè)置子層的顯示屬性為隱藏。按F12鍵在瀏覽器中預(yù)覽頁面，下拉菜單效果如圖4所示。圖片如下:默認(rèn)狀態(tài)圖片如下:默認(rèn)狀態(tài)圖片如下:務(wù)無標(biāo)題立若-MicrosoftInternet.jJ文件（日編輯?查看（刃收藏伯wjJ菜單―子菜單館子菜單2子菜單3子菜單&a我的電腦鼠標(biāo)劃過狀態(tài)圖4下拉菜單效果至此應(yīng)該說基本實(shí)現(xiàn)了所要求的下拉菜單的效果，但是當(dāng)把鼠標(biāo)光標(biāo)移動(dòng)到層上，要選擇子菜單時(shí)，層卻消失了。這是因?yàn)椤帮@示-隱藏層”的行為是設(shè)置在文本“菜單1”上，鼠標(biāo)劃出文本區(qū)域后，當(dāng)然就響應(yīng)了隱藏層的行為。所以還需要進(jìn)一步的設(shè)置，給子層也加上“顯示-隱藏層”行為。利用行為面板，給子層加上“顯示-隱藏層”行為，更簡(jiǎn)單的方法是在鏈接文本的HTML代碼中拷貝如下代碼：onMouseOver二"MM_showHideLayers('layer2','','show')"onMouseOut二"MM_showHideLayers('layer2','','hide')"在子層的DIV標(biāo)簽內(nèi)粘貼以上代碼即可。按F12在瀏覽器中預(yù)覽，當(dāng)鼠標(biāo)劃過映射時(shí)彈出下拉菜單，通過鼠標(biāo)可以在下拉菜單中選擇，鼠標(biāo)劃出映射和下拉菜單區(qū)域時(shí)，下拉菜單消失，完全實(shí)現(xiàn)了預(yù)定的效果。小節(jié)：1?導(dǎo)航條的下邊框線與子層的上邊框應(yīng)該重合，否則當(dāng)鼠標(biāo)光標(biāo)移動(dòng)到文本和層之間的空白區(qū)域時(shí)，層就會(huì)隱藏，達(dá)不到應(yīng)有的效果；2?對(duì)于有多個(gè)下拉菜單時(shí)，可以將多個(gè)子層放在一個(gè)父層中。為保持位置的統(tǒng)一，在調(diào)整完第一個(gè)子層的位置后，記下層距上和距左的值。當(dāng)導(dǎo)航圖像為水平方向時(shí)，所有子層的距上的值都是相同的；當(dāng)導(dǎo)航圖像為垂直方向時(shí)，所有子層的距左的值都是相同的；3?調(diào)整完全部子層的位置后，再設(shè)置層的顯示屬性，有助于保持所有子層格式的統(tǒng)一；4?在層中插入圖像或動(dòng)畫等頁面元素可以制作出更酷的菜單效果。{$page}二、三道茶：使用DreamweaverMX中的行為使用“顯示彈出式菜單”行為，可以快捷在頁面中創(chuàng)建出自定義樣式的彈出菜單。具體的做法如下：創(chuàng)建一個(gè)空白HTML文檔，保存文件。選中頁面中的鏈接(文本或圖象)打開行為面板，單擊加號(hào)按鈕，選擇動(dòng)作菜單中的“顯示彈出式菜單”，彈出設(shè)置彈出式菜單對(duì)話框，內(nèi)容窗口圖5所示。圖片如下：圖5設(shè)置菜單項(xiàng)目對(duì)話框文本、鏈接、目標(biāo)的意義都很容易理解。菜單：?jiǎn)螕艏犹?hào)按鈕可以添加菜單項(xiàng)目，選中菜單項(xiàng)目后單擊減號(hào)按鈕可以刪除相應(yīng)的菜單項(xiàng)目；選中菜單項(xiàng)目，單擊按鈕可以轉(zhuǎn)換到上級(jí)菜單，單擊按鈕可以轉(zhuǎn)換到下級(jí)菜單；單擊上、下箭頭按鈕可以調(diào)整菜單項(xiàng)目的相對(duì)位置關(guān)系。設(shè)置完菜單項(xiàng)目后單擊“外觀”選項(xiàng)卡可設(shè)置菜單的外觀，如圖6所示。

□R■r^-aI卑出?*lI圖片如下:□R■r^-aI卑出?*lI圖片如下:卯出曇早E圖片如下:_廊畑圖7設(shè)置菜單高級(jí)屬性對(duì)話框前幾個(gè)選項(xiàng)和一般表格參數(shù)的意義一致文本縮進(jìn)：菜單項(xiàng)目文本在單元格中的縮進(jìn)距離（單位：像素）；菜單延遲：打開彈出菜單的延遲時(shí)間（單位：毫秒）；彈出式菜單邊框：選中“顯示邊框”就可以對(duì)邊框顏色進(jìn)行設(shè)置；不選中，就不會(huì)顯示邊框;設(shè)置完菜單高級(jí)屬性后，單擊“位置”選項(xiàng)卡設(shè)置菜單的位置，如圖8所示。圖6設(shè)置菜單外觀對(duì)話框在第一個(gè)下拉列表中選擇彈出菜單的樣式為垂直菜單或者水平菜單，下面幾個(gè)按鈕可以設(shè)置文本的狀^態(tài)。一般狀態(tài)：在顏色選擇器中選擇菜單項(xiàng)目文本和單元格在默認(rèn)狀態(tài)下的顏色；滑過狀態(tài)：在顏色選擇器中選擇當(dāng)鼠標(biāo)光標(biāo)滑過單元格時(shí)菜單項(xiàng)目文本和單元格的顏色；設(shè)置完菜單外觀后，單擊“高級(jí)”選項(xiàng)卡設(shè)置菜單的高級(jí)屬性，如圖7所示。MftM.r[Sjf卓曲gtr~ Ir—s單出式工■口apItHMiptffKM論4吐t1聲出]EF在夏主曲艸,通#.爭(zhēng)幗小超師單圖8設(shè)置菜單位置對(duì)話框在菜單位置中選擇不同的按，鈕可以設(shè)置菜單與設(shè)定網(wǎng)頁元素之間的位置關(guān)系。單擊回按鈕設(shè)置彈出菜單位于網(wǎng)頁元素的右下角；單擊已按鈕設(shè)置彈出菜單一位于網(wǎng)頁元素的下方并靠近左邊緣；單擊硼按鈕設(shè)置彈出菜單位于網(wǎng)頁元素的上方并靠近左邊緣；單擊底按鈕設(shè)置彈出菜單位于網(wǎng)頁元素的右上角；在X和Y文本框中可以設(shè)定菜單的相對(duì)與網(wǎng)頁元素左上角的距離（單位：像素）；選中“在發(fā)生onmouseout事件時(shí)隱藏菜單”復(fù)選框，當(dāng)鼠標(biāo)光標(biāo)劃出菜單時(shí)菜單隱藏，實(shí)際上就是應(yīng)用了隱藏彈出式菜單的動(dòng)作。設(shè)置完彈出菜單所有的屬性后，單擊確定按鈕即可在頁面中插入彈出式菜單，按F12鍵在瀏覽器中預(yù)覽效果，如圖9所示。文件迫編拓聞查看｛百收靄龜）&文件迫編拓聞查看｛百收靄龜）&|圖9彈出式菜單效果使用顯示彈出式菜單時(shí)，如果使用的網(wǎng)頁元素為圖像，需要首先給圖像文件命名。體現(xiàn)在HTML代碼中就是在img標(biāo)簽中加上id屬性，這樣才可以給圖像應(yīng)用上顯示彈出式菜單的動(dòng)作。一種細(xì)膩的導(dǎo)航效果的制作方法瀏覽：133次首先分析效果的組成，鼠標(biāo)經(jīng)過時(shí)背景發(fā)生變化，小圖象轉(zhuǎn)動(dòng)。Ok!考慮使用dw中的swapimage（翻轉(zhuǎn)圖）+背景圖象變化（CSS定義）應(yīng)該可以實(shí)現(xiàn)效果。準(zhǔn)備4張gif圖象分別為：鼠標(biāo)經(jīng)過時(shí)的背景圖象（在fw中使用animate可以很簡(jiǎn)單的實(shí)現(xiàn)漸變效果，本圖象透明度由0%漸變到100%）動(dòng)態(tài)小圖象靜止小圖象（在fw中設(shè)置圖象格式為gif后保存即可）瀆1.背景效果實(shí)現(xiàn)使用CSS定義兩個(gè)類：.style1{background-image:url（bg.gif）}.style2{background-image:url（b.gif）} 分別用于鼠標(biāo)經(jīng)過和劃出時(shí)的背景圖象然后在單元格中添加如下代碼：onmouseover="this.className='style1'"onmouseout="this.className='style2'" 就可以實(shí)現(xiàn)鼠標(biāo)經(jīng)過時(shí)背景漸變出現(xiàn)，移開后背景漸變消失的效果。2?翻轉(zhuǎn)圖效果實(shí)現(xiàn)在單元格中插入靜止小圖象，使用行為添加swapimage效果，設(shè)置鼠標(biāo)經(jīng)過后翻轉(zhuǎn)為動(dòng)態(tài)小圖象。為更貼近效果，需要把翻轉(zhuǎn)圖效果應(yīng)用到單元格上，在靜止小圖象代碼中剪切如下代碼：onMouseOver="MM_swapImage（Tmage2',",'2.GIF',1）"onMouseOut="MM_swapImgRestore（）" 粘貼到單元格代碼td標(biāo)簽中。就可以實(shí)現(xiàn)鼠標(biāo)經(jīng)過單元格時(shí)圖象翻轉(zhuǎn)，產(chǎn)生動(dòng)態(tài)的效果。至此即可實(shí)現(xiàn)全部的效果。在這個(gè)例子中，使用dw實(shí)現(xiàn)的效果幾乎可以與flash制作的效果媲美，甚至更好一點(diǎn)（我們實(shí)現(xiàn)了鼠標(biāo)劃出單元格時(shí)背景漸變消失的效果）。小節(jié)：1?在fw中精心制作漸變的背景圖象（我只是隨便做了兩個(gè)漸變圖象）+對(duì)導(dǎo)航單元格修飾可以使效果更加細(xì)膩，出色；2?在使用該方法制作導(dǎo)航效果時(shí)，需要使用到多個(gè)單元格，注意swap效果不能被拷貝，拷貝代碼后需要修改兩處代碼：onMouseOver="MM_swapImage（Tmage3',",'2.GIF',1）"<imgsrc="/UploadFile/20090111/20090111132022332.gif"name="Image3"width="15"height="15"border="0"id="Image3">修改翻轉(zhuǎn)圖的name為不同的值即可。3?這個(gè)例子的技術(shù)含量并不是很高；而且偶不是很熟悉flash，不知道制作起來用dw或flash哪種更簡(jiǎn)單一些，這里提出來只是給大家提供一種解決問題的方法。4?兩個(gè)簡(jiǎn)單效果的疊加就可以制作出比較酷的效果，希望對(duì)大家能有所啟示補(bǔ)充一點(diǎn)：制作動(dòng)畫背景圖象時(shí)，為實(shí)現(xiàn)效果，需要設(shè)置gif動(dòng)畫的循環(huán)為nolooping（不循環(huán)）:）巧用樣式表，讓文本框與按鈕變個(gè)樣瀏覽：35次

確定I在網(wǎng)頁制作中，表單中的對(duì)象總是給人一種單調(diào)與沉悶的感覺，比如說按鈕、文本框等，它們一成不變的模樣與顏色出現(xiàn)在您的主頁上時(shí)，或多或少都會(huì)破壞主頁的美觀程度，那么可不可以改變它們的模樣呢？我的回答是，這當(dāng)然可以啊，下面我們就一起來動(dòng)手來改變吧。確定I在網(wǎng)頁制作中，表單中的對(duì)象總是給人一種單調(diào)與沉悶的感覺，比如說按鈕、文本框等，它們一成不變的模樣與顏色出現(xiàn)在您的主頁上時(shí)，或多或少都會(huì)破壞主頁的美觀程度，那么可不可以改變它們的模樣呢？我的回答是，這當(dāng)然可以啊，下面我們就一起來動(dòng)手來改變吧。先看看在網(wǎng)頁中經(jīng)常出現(xiàn)的按鈕與文本框的本來面目吧！如下圖：對(duì)照上圖，我們?cè)趺礃硬拍芨淖兾谋究蚺c按鈕的模樣呢？那在下面我為大家提供兩種文本框與按鈕樣式作為例子參考，第一種是文本框與按鈕無立體感，只是有線條顏色與填充顏色的，這種效果大家可能在很多網(wǎng)站上都看見過，給人一種特別的感覺，很不錯(cuò)的，第二種效果就比較特殊了，是將文本框做成一種類似于下劃線的效果并且是彩色的，同時(shí)按鈕的背景色也不再是灰色，而是彩色的，可以說這是一種非常酷的效果，好了，下面我就來說說這兩種效果實(shí)現(xiàn)的詳細(xì)操作步驟吧。第一種效果：無立體效果的文本框與按鈕那我們就通過在DW3中網(wǎng)頁的編輯操作為例來進(jìn)行說明，首先我們已經(jīng)在網(wǎng)頁中插入了相應(yīng)的表單對(duì)象，比如插入一個(gè)文本框與一個(gè)按鈕，此時(shí)，我們?cè)诎聪拢跢10］鍵，顯示出網(wǎng)頁源代碼編輯窗口，那我們?cè)诰W(wǎng)頁的〈head〉與〈/head〉標(biāo)簽之間插入這個(gè)樣式表：〈styletype="text/css"〉input.smalllnput{border:1solidblack;FONT-SIZE:9pt;FONT-STYLE:normal;FONT-VARIANT:normal;FONT-WEIGHT:normal;HEIGHT:18px;LINE-HEIGHT:normal}〈/style〉好了第一步就完成了，下一步我們就分別在文本框與按鈕的htm語句中加上這一句代碼：type="text"name="textfield"type="submit"name="Submit"value="平面按鈕"height=35src='7UploadFile/20090111/20090111132308874.gif"width=220>怎么樣，比起前面那張圖中的標(biāo)準(zhǔn)按鈕來說是不是美觀多了，要實(shí)現(xiàn)起來其實(shí)也不是太難吧。第二種效果：帶顏色的下劃線式文本框與按鈕效果同樣，我們也需要樣式表的幫助來實(shí)現(xiàn)這個(gè)效果，和第一種效果的操作步驟一樣在網(wǎng)頁的（head〉與〈/head〉標(biāo)簽之間插入樣式表，〈styletype="text/css"〉input.smallInput{background:#ffffff;border-bottom-color:#ff6633;border-bottom-width:1px;border-top-width:0px;border-left-width:0px;border-right-width:0px;solid#ff6633;color:#000000;FONT-SIZE:9pt;FONT-STYLE:normal;FONT-VARIANT:normal;FONT-WEIGHT:normal;HEIGHT:18px;LINE-HEIGHT:normal}input.buttonface{BACKGROUND:#ffcc00;border:1solid#ff6633;COLOR:#ff0000;FONT-SIZE:9pt;FONT-STYLE:normal;FONT-VARIANT:normal;FONT-WEIGHT:normal;HEIGHT:18px;LINE-HEIGHT:normal}〈/style〉大家從上面的樣式表中可以看出，這個(gè)效果的實(shí)現(xiàn)是通過兩個(gè)樣式來實(shí)現(xiàn)的，一個(gè)是文本框的，一個(gè)是按鈕的，所以在文本框與按鈕的htm語句中就需要插入兩句不同的代碼，在文本框中插入的是如例子〈inputtype="text"name="textfield"type="submit"name="Submit"value="彩色按鈕"height=39src='7UploadFile/20090111/20090111132308563.gif"width=225>看看上面的效果，還會(huì)不會(huì)讓您想起那單調(diào)的文本框與按鈕呢？以上兩種效果的方法都是通過樣式表來實(shí)現(xiàn)的，使用方法也十分的簡(jiǎn)單，不要對(duì)我說這很難喔，最真心的希望能通過這篇文章介紹的方法能讓你的主頁多一點(diǎn)精彩。否則就對(duì)不起我這雙為了研究它們而成的黑眼圈了。Dreamweaver未必了解的5個(gè)小技巧瀏覽：22次讓DW支持中文文件名Dreamweaver可以插入以中文命名的素材、也可以鏈接以中文命名的網(wǎng)頁。在插入素材或鏈接網(wǎng)頁后切換到代碼窗口，將亂碼文件名改為相應(yīng)