深圳網站制作之下拉菜單全攻略
來源: | 作者:szhuhang | 發布時間: 813天前 | 237 次瀏覽 | 分享到:

Dreamweaver是制作下拉菜單最常用的工具,方法簡單,控制自由,可以最大限度地隨心打造菜單樣式,是制作下拄菜單的必修課。
  用Dreamweaver制作下拉菜單的原理很簡單,它利用了Behaviors(行為)面板中的內置方法Show-Hide Layers(隱藏-顯示層)方法,并用onMouseOver(鼠標移至)和onMouseOut(鼠標移開)來觸發層的隱藏和顯示,而將要出現的菜單就在層中。


  因此,我們可以分四步來制作下拉菜單,首先我們需要一個導航條,它用來放置首先出現在瀏覽者眼前的主菜單;然后再制作開始隱藏著而將會出現的下拉選單;接著,進行最關鍵的一步,為主菜單和下拉選單添加上隱藏和顯示層的效果;最后,我們進行菜單的美化修飾。最終看到的效果如圖,您也可以訪問以下地址:menu.htm


  相信你已經等不急了,那就讓我們馬上開始吧!一、 導航條的制作首先進行一些必要的前期工作,按CTRL+J,打開Page Properties(頁面屬性)窗口,參數設置如圖二,這一設置對菜單的位置將有影響,所以請如圖設置。


按CTRL+F2打開Objects面板,點擊層按鈕


后在頁面中按住鼠標不放拖出一個層,然后在層的Properties(屬性)面板中設置各參數,Layer ID框填入title,L、T、W、H框分別填入8、15、480、15,背景色填入#006699,如圖。


將光標移至層內,點擊Objects面板上的表格按鈕,插入一個一行四列的表格,設置如圖。


按住CTRL鍵不放點取表格的四個單元格,然后設置它們的寬度為120,并在前兩個單元格中輸入文字,就是你的主菜單名,可按自己想要的名字輸入,我用"經典論壇"和"天極網"為例,并加上鏈接。


二、 下拉選單的制作現在開始制作將要下拉出現的菜單,同樣用層來制作。
再次從Objects面板插入一個層到前面我們做好的導航條的下方,各項參數填為:Layer ID框填入menu1,L、T、W、H框分別填入8、34、120、80,背景色填入#999966,其中L和T兩個參數是設置這個層距離窗口左邊框和上邊框的距離,一定不能填錯,不然菜單將會錯位,也將影響完成后的可用性。


這時候,我們便可以在menu1這個層中輸入我們所要的菜單內容。為了排版方便,我在這還是使用表格來做菜單。這個層將作為"經典論壇"的下拉選單出現,填入你所需要的菜單鏈接。同樣的方法,再為"天極網"也做一個下拉選單(層menu2)。


這一步要注意的地方就是下拉選單所在的層(menu1、menu2)的位置非常重要(由L和T兩個參數決定)。它們的上邊線應該緊貼導航條的下邊線,這樣才能保證在后面我們完成第三個步驟后,菜單能正常使用。因為如果遠離導航條的話,鼠標一離開導航條,菜單就消失了。
按F2打開LAYER(層)面板,其中列出了網頁中的三個層,點menu1和menu2的前面一格,出現閉著的眼睛圖標,這兩個層便隱藏起來了。操作這一步是因為下拉菜單的初始狀態是不可見的。三、 顯示和隱藏效果的添加這一步驟是化腐朽為神奇的關鍵一步,大家仔細跟我來做。
本步驟分為兩部分:第一,對導航條中的主菜單添加控制顯示隱藏的命令;第二,給下拉選單本身添加顯示隱藏的命令。
1.導航條部分
首先按CTRL鍵不放點擊導航條中的第一個單元格,現按Shift+F3打開Behaviors窗口,點5按鈕,在下拉選項中選中"Show-Hide Layers"(如圖)。如果選項中沒有這一項,則選擇Show Events For下的IE 5.0后,重新點 按鈕,此時"Show-Hide Layers"將出現。

2這時將會彈出一個窗口,如下圖。在Named Layers框中會列出當前網頁所有的層,選中" layer "menu1" ",因為我們想要menu1這個層對"經典論壇"響應。然后點下面的"show"按鈕,OK。

3這時會回到Behaviors窗口,窗口中出現如下圖所示字樣,點擊Events下的文字"onClick",會出現一個向下的小箭頭,點擊它,在下拉選項中選中onMouseOver。這一步的作用是實現當鼠標移至第一個單元格時,下拉選單menu1的狀態變為顯示(Show)。

4下一步是讓下拉選單menu2在鼠標移至第二個單元格時再變加隱藏狀態。
再點

5按鈕,在下拉選項中選中"Show-Hide Layers",在彈出窗口中選中" layer "menu1" ",因為我們想要menu1這個層對"經典論壇"響應。然后點下面的"hide"按鈕,OK。


6回到Behaviors窗口,點擊向下的小箭頭,在下拉選項中選中onMouseOut。2.下拉選單部分
先選中層menu1,方法是點擊層的邊緣或在LAYER面板中點擊menu1,用與導航條部分同樣的方法在Behaviors窗口中為它添加顯示與隱藏自己的命令。這樣做的效果是當鼠標移出層menu1時,層menu1就自動隱藏。最后層menu1的狀態如圖所示。.重復以上兩部分,為導航條的第二個主菜單"天極網"和層menu2添加顯示、隱藏層命令。

四、 下拉菜單的美化修飾到這里,下拉菜單的功能效果已經實現了,你現在按F12就可以看到。不過你一定也發現菜單有點難看,字不夠精細,菜單選項的默認鏈接色不好看,菜單也沒有邊框,那就讓我們來稍稍為它美容一下。


1.定義菜單字體樣式
按Shift+F11打開CSS (樣式)面板,點擊面板下面的4按鈕

在彈出的"New "窗的Tag框內選中td標簽,Type選第二項Redefine HTML Tag,Define選This Document Only,如圖。9此時彈出設置窗口,不管其它的,只在右邊的Size框里選中12,單位為pixels。

02.定義菜單鏈接樣式
在樣式面板中,點擊面板下面的 按鈕,在彈出窗中, Type選第三項Use CSS Selector,Tag框內選中a:hover標簽,Define選This Document Only,如圖。
1點擊OK后在彈出窗中,Color填#ff9933,Decoration選none,點OK。
2返回到樣式面板,點擊面板下面的
3按鈕,在彈出窗中, Type選第三項Use CSS Selector,Tag框內選中a:link標簽,Define選This Document Only。
點擊OK后在彈出窗中,Color填#ffffff,Decoration選none,點OK。又返回到樣式面板,點擊面板下面的4按鈕,在彈出窗中, Type選第三項Use CSS Selector,Tag框內選中a:visited標簽,Define選This Document Only。


點擊OK后在彈出窗中,Color填#ffffff,Decoration選none,點OK。3.定義菜單邊框樣式
在樣式面板中,點擊面板下面的 按鈕,在彈出窗中, Tag框內選中td標簽,Type選第二項Redefine HTML Tag,Define選This Document Only,如圖。


5彈出設置窗口,在左邊的列表中選Border,右邊四條邊寬度都輸入為1,顏色設為黑色#000000,選為solid。


6到此,我們就大告成功了。趕快用到你的網頁上去吧

想了解更多深圳網站制作知識請登錄http://www.9680947.live

乐赢彩票首页 心悦辽宁麻将官网 期期精准无错三头中特 哈灵浙江麻将最新版 江西多乐彩11选五走势图 nba央视 浙江快乐彩12选5 熊猫麻将官方手机版 黑龙江6+1玩法说明 云南11选5走势图 jdb电子龙王捕鱼漏洞