|
下拉菜單是網(wǎng)上最常見到的效果之一，用鼠標輕輕一點或是移過去，就出現(xiàn)一個更加詳細的菜單，它不僅節(jié)省了網(wǎng)頁排版上的空間、使網(wǎng)頁布局簡潔有序，而且一個新穎美觀的下拉菜單，更是為您的網(wǎng)頁增色不少。
制作下拉菜單的方法多種多樣，本期專欄將為您介紹四種常用的制作方法，讓您隨心打造自己的下拉菜單。
■ 用Dreamweaver制作下拉菜單
作者：Poorfish
Dreamweaver是制作下拉菜單最常用的工具，方法簡單，控制自由，可以最大限度地隨心打造菜單樣式，是制作下拄菜單的必修課。
用Dreamweaver制作下拉菜單的原理很簡單，它利用了Behaviors（行為）面板中的內(nèi)置方法Show-Hide Layers（隱藏-顯示層）方法，并用onMouseOver（鼠標移至）和onMouseOut（鼠標移開）來觸發(fā)層的隱藏和顯示，而將要出現(xiàn)的菜單就在層中。
因此，我們可以分四步來制作下拉菜單，首先我們需要一個導航條，它用來放置首先出現(xiàn)在瀏覽者眼前的主菜單；然后再制作開始隱藏著而將會出現(xiàn)的下拉選單；接著，進行最關(guān)鍵的一步，為主菜單和下拉選單添加上隱藏和顯示層的效果；最后，我們進行菜單的美化修飾。最終看到的效果如圖，您也可以訪問以下地址：menu.htm
相信你已經(jīng)等不急了，那就讓我們馬上開始吧！
一、 導航條的制作
首先進行一些必要的前期工作，按CTRL+J，打開Page Properties（頁面屬性）窗口，參數(shù)設(shè)置如圖二，這一設(shè)置對菜單的位置將有影響，所以請如圖設(shè)置。
按CTRL+F2打開Objects面板，點擊層按鈕 后在頁面中按住鼠標不放拖出一個層，然后在層的Properties（屬性）面板中設(shè)置各參數(shù)，Layer ID框填入title，L、T、W、H框分別填入8、15、480、15，背景色填入#006699，如圖。
將光標移至層內(nèi)，點擊Objects面板上的表格按鈕 ，插入一個一行四列的表格，設(shè)置如圖。
按住CTRL鍵不放點取表格的四個單元格，然后設(shè)置它們的寬度為120，并在前兩個單元格中輸入文字，就是你的主菜單名，可按自己想要的名字輸入，我用"經(jīng)典論壇"和"天極網(wǎng)"為例，并加上鏈接。
二、 下拉選單的制作
現(xiàn)在開始制作將要下拉出現(xiàn)的菜單，同樣用層來制作。
再次從Objects面板插入一個層到前面我們做好的導航條的下方，各項參數(shù)填為：Layer ID框填入menu1，L、T、W、H框分別填入8、34、120、80，背景色填入#999966，其中L和T兩個參數(shù)是設(shè)置這個層距離窗口左邊框和上邊框的距離，一定不能填錯，不然菜單將會錯位，也將影響完成后的可用性。
這時候，我們便可以在menu1這個層中輸入我們所要的菜單內(nèi)容。為了排版方便，我在這還是使用表格來做菜單。這個層將作為"經(jīng)典論壇"的下拉選單出現(xiàn)，填入你所需要的菜單鏈接。同樣的方法，再為"天極網(wǎng)"也做一個下拉選單（層menu2）。
這一步要注意的地方就是下拉選單所在的層（menu1、menu2）的位置非常重要（由L和T兩個參數(shù)決定）。它們的上邊線應(yīng)該緊貼導航條的下邊線，這樣才能保證在后面我們完成第三個步驟后，菜單能正常使用。因為如果遠離導航條的話，鼠標一離開導航條，菜單就消失了。
按F2打開LAYER（層）面板，其中列出了網(wǎng)頁中的三個層，點menu1和menu2的前面一格，出現(xiàn)閉著的眼睛圖標，這兩個層便隱藏起來了。操作這一步是因為下拉菜單的初始狀態(tài)是不可見的。
三、 顯示和隱藏效果的添加
這一步驟是化腐朽為神奇的關(guān)鍵一步，大家仔細跟我來做。
本步驟分為兩部分：第一，對導航條中的主菜單添加控制顯示隱藏的命令；第二，給下拉選單本身添加顯示隱藏的命令。
1．導航條部分
首先按CTRL鍵不放點擊導航條中的第一個單元格，現(xiàn)按Shift+F3打開Behaviors窗口，點 按鈕，在下拉選項中選中"Show-Hide Layers"（如圖）。如果選項中沒有這一項，則選擇Show Events For下的IE 5.0后，重新點 按鈕，此時"Show-Hide Layers"將出現(xiàn)。
這時將會彈出一個窗口，如下圖。在Named Layers框中會列出當前網(wǎng)頁所有的層，選中" layer "menu1" "，因為我們想要menu1這個層對"經(jīng)典論壇"響應(yīng)。然后點下面的"show"按鈕，OK。
這時會回到Behaviors窗口，窗口中出現(xiàn)如下圖所示字樣，點擊Events下的文字"onClick"，會出現(xiàn)一個向下的小箭頭，點擊它，在下拉選項中選中onMouseOver。這一步的作用是實現(xiàn)當鼠標移至第一個單元格時，下拉選單menu1的狀態(tài)變?yōu)轱@示（Show）。
下一步是讓下拉選單menu2在鼠標移至第二個單元格時再變加隱藏狀態(tài)。
再點按鈕，在下拉選項中選中"Show-Hide Layers"，在彈出窗口中選中" layer "menu1" "，因為我們想要menu1這個層對"經(jīng)典論壇"響應(yīng)。然后點下面的"hide"按鈕，OK。
回到Behaviors窗口，點擊向下的小箭頭，在下拉選項中選中onMouseOut。
2．下拉選單部分
先選中層menu1，方法是點擊層的邊緣或在LAYER面板中點擊menu1，用與導航條部分同樣的方法在Behaviors窗口中為它添加顯示與隱藏自己的命令。這樣做的效果是當鼠標移出層menu1時，層menu1就自動隱藏。最后層menu1的狀態(tài)如圖所示。
3．重復以上兩部分，為導航條的第二個主菜單"天極網(wǎng)"和層menu2添加顯示、隱藏層命令。
四、 下拉菜單的美化修飾
到這里，下拉菜單的功能效果已經(jīng)實現(xiàn)了，你現(xiàn)在按F12就可以看到。不過你一定也發(fā)現(xiàn)菜單有點難看，字不夠精細，菜單選項的默認鏈接色不好看，菜單也沒有邊框，那就讓我們來稍稍為它美容一下。
1．定義菜單字體樣式
按Shift+F11打開CSS Style（樣式）面板，點擊面板下面的 按鈕
在彈出的"New Style"窗的Tag框內(nèi)選中td標簽，Type選第二項Redefine HTML Tag，Define選This Document Only，如圖。
此時彈出設(shè)置窗口，不管其它的，只在右邊的Size框里選中12，單位為pixels。
2．定義菜單鏈接樣式
在樣式面板中，點擊面板下面的 按鈕，在彈出窗中， Type選第三項Use CSS Selector，Tag框內(nèi)選中a:hover標簽，Define選This Document Only，如圖。
點擊OK后在彈出窗中，Color填#ff9933，Decoration選none，點OK。
返回到樣式面板，點擊面板下面的按鈕，在彈出窗中， Type選第三項Use CSS Selector，Tag框內(nèi)選中a:link標簽，Define選This Document Only。
點擊OK后在彈出窗中，Color填#ffffff，Decoration選none，點OK。
又返回到樣式面板，點擊面板下面的按鈕，在彈出窗中， Type選第三項Use CSS Selector，Tag框內(nèi)選中a:visited標簽，Define選This Document Only。
點擊OK后在彈出窗中，Color填#ffffff，Decoration選none，點OK。
3．定義菜單邊框樣式
在樣式面板中，點擊面板下面的 按鈕，在彈出窗中， Tag框內(nèi)選中td標簽，Type選第二項Redefine HTML Tag，Define選This Document Only，如圖。
彈出設(shè)置窗口，在左邊的列表中選Border，右邊四條邊寬度都輸入為1，顏色設(shè)為黑色#000000，Style選為solid。
到此，我們就大告成功了。趕快用到你的網(wǎng)頁上去吧。
下一篇我們將講如何用Fireworks來制作下拉菜單。
出處：
責任編輯：藍色
上一頁 下一頁 Fireworks篇
◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 Dreamweaver篇
第 2 頁 
