我要投稿
  • 您當前的位置:中國教育資源網 -> 技術教程 -> 網站建設教程 -> Dreamweaver教程 -> 教程內容
  • [ 收藏本頁教程 ]
  • 下拉菜單全攻略-用Dreamweaver制作下拉菜單DW教程

    教程作者:佚名    教程來源:不詳   教程欄目:Dreamweaver教程    收藏本頁
    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窗口,點按鈕,在下拉選項中選中"Show-Hide Layers"(如圖)。如果選項中沒有這一項,則選擇Show Events For下的IE 5.0后,重新點 按鈕,此時"Show-Hide Layers"將出現。

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

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

    下一步是讓下拉選單menu2在鼠標移至第二個單元格時再變加隱藏狀態。
    再點按鈕,在下拉選項中選中"Show-Hide Layers",在彈出窗口中選中" layer "menu1" ",因為我們想要menu1這個層對"經典論壇"響應。然后點下面的"hide"按鈕,OK。

    回到Behaviors窗口,點擊向下的小箭頭,在下拉選項中選中onMouseOut。

    2.下拉選單部分
    先選中層menu1,方法是點擊層的邊緣或在LAYER面板中點擊menu1,用與導航條部分同樣的方法在Behaviors窗口中為它添加顯示與隱藏自己的命令。這樣做的效果是當鼠標移出層menu1時,層menu1就自動隱藏。最后層menu1的狀態如圖所示。

    3.重復以上兩部分,為導航條的第二個主菜單"天極網"和層menu2添加顯示、隱藏層命令。

    四、 下拉菜單的美化修飾

    到這里,下拉菜單的功能效果已經實現了,你現在按F12就可以看到。不過你一定也發現菜單有點難看,字不夠精細,菜單選項的默認鏈接色不好看,菜單也沒有邊框,那就讓我們來稍稍為它美容一下。
    1.定義菜單字體樣式
    按Shift+F11打開CSS Style(樣式)面板,點擊面板下面的按鈕

    在彈出的"New Style"窗的Tag框內選中td標簽,Type選第二項Redefine HTML Tag,Define選This Document Only,如圖。

    此時彈出設置窗口,不管其它的,只在右邊的Size框里選中12,單位為pixels。

    2.定義菜單鏈接樣式
    在樣式面板中,點擊面板下面的 按鈕,在彈出窗中, Type選第三項Use CSS Selector,Tag框內選中a:hover標簽,Define選This Document Only,如圖。

    點擊OK后在彈出窗中,Color填#ff9933,Decoration選none,點OK。

    返回到樣式面板,點擊面板下面的按鈕,在彈出窗中, Type選第三項Use CSS Selector,Tag框內選中a:link標簽,Define選This Document Only。
    點擊OK后在彈出窗中,Color填#ffffff,Decoration選none,點OK。

    又返回到樣式面板,點擊面板下面的按鈕,在彈出窗中, 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,如圖。

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

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

    我要投稿   -   廣告合作   -   關于本站   -   友情連接   -   網站地圖   -   聯系我們   -   版權聲明   -   設為首頁   -   加入收藏   -   網站留言
    Copyright © 2009 - 20012 www.mmogirl.net All Rights Reserved.中國教育資源網 版權所有  
     
    潘甜甜七夕果冻传媒在线_月夜影视在线观看免费完整_国产成人18黄网站视频_亚洲无?码国产精品