Dreamweaver下拉式功能表全攻略

來源:互聯網
上載者:User
dreamweaver|菜單|攻略|下拉 下拉式功能表是網上最常見到的效果之一,用滑鼠輕輕一點或是移過去,就出現一個更加詳細的菜單,它不僅節省了網頁排版上的空間、使網頁布局簡潔有序,而且一個新穎美觀的下拉式功能表,更是為您的網頁增色不少。

  製作下拉式功能表的方法多種多樣,本期專欄將為您介紹四種常用的製作方法,讓您隨心打造自己的下拉式功能表。

   用Dreamweaver製作下拉式功能表

  Dreamweaver是製作下拉式功能表最常用的工具,方法簡單,控制自由,可以最大限度地隨心打造菜單樣式,是製作下拄菜單的必修課。

   用Dreamweaver製作下拉式功能表的原理很簡單,它利用了Behaviors(行為)面板中的內建方法Show-HideLayers(隱藏-顯示層)方法,並用onMouseOver(滑鼠移至)和onMouseOut(滑鼠移開)來觸發層的隱藏和顯示,而將要出現的菜單就在層中。

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

  相信你已經等不急了,那就讓我們馬上開始吧!1

   一、 導航條的製作

  首先進行一些必要的前期工作,按CTRL+J,開啟PageProperties(頁面屬性)視窗,參數設定如圖二,這一設定對菜單的位置將有影響,所以請如圖設定。

  按CTRL+F2開啟Objects面板,點擊層按鈕後在頁面中按住滑鼠不放拖出一個層,然後在層的Properties(屬性)面板中設定各參數,LayerID框填入title,L、T、W、H框分別填入8、15、480、15,背景色填入#006699,如圖。

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

  2

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

   二、 下拉選單的製作

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

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

  這一步要注意的地方就是下拉選單所在的層(menu1、menu2)的位置非常重要(由L和T兩個參數決定)。它們的上邊線應該緊貼導航條的下邊線,這樣才能保證在後面我們完成第三個步驟後,菜單能正常使用。因為如果遠離導航條的話,滑鼠一離開導航條,菜單就消失了。按F2開啟LAYER(層)面板,其中列出了網頁中的三個層,點menu1和menu2的前面一格,出現閉著的眼睛表徵圖,這兩個層便隱藏起來了。操作這一步是因為下拉式功能表的初始狀態是不可見的。

   三、 顯示和隱藏效果的添加

  這一步驟是化腐朽為神奇的關鍵一步,大家仔細跟我來做。本步驟分為兩部分:第一,對導航條中的主菜單添加控制顯示隱藏的命令;第二,給下拉選單本身添加顯示隱藏的命令。3

  1.導航條部分首先按CTRL鍵不放點擊導航條中的第一個儲存格,現按Shift+F3開啟Behaviors視窗,點按鈕,在下拉選項中選中Show-HideLayers(如圖)。如果選項中沒有這一項,則選擇ShowEvents For下的IE 5.0後,重新點按鈕,此時Show-Hide Layers將出現。

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

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

  下一步是讓下拉選單menu2在滑鼠移至第二個儲存格時再變加隱藏狀態。再點按鈕,在下拉選項中選中Show-HideLayers,在快顯視窗中選中layer menu1,因為我們想要menu1這個層對經典論壇響應。然後點下面的hide按鈕,OK。

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

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

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

   四、 下拉式功能表的美化修飾

  到這裡,下拉式功能表的功能效果已經實現了,你現在按F12就可以看到。不過你一定也發現菜單有點難看,字不夠精細,菜單選項的預設連結色不好看,菜單也沒有邊框,那就讓我們來稍稍為它美容一下。1.定義菜單字型樣式按Shift+F11開啟CSSStyle(樣式)面板,點擊面板下面的按鈕在彈出的NewStyle窗的Tag框內選中td標籤,Type選第二項RedefineHTML Tag,Define選This DocumentOnly,如圖。

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

  5

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

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

  返回到樣式面板,點擊面板下面的按鈕,在彈出窗中, Type選第三項UseCSSSelector,Tag框內選中a:link標籤,Define選This Document Only。

  又返回到樣式面板,點擊面板下面的按鈕,在彈出窗中, Type選第三項UseCSSSelector,Tag框內選中a:visited標籤,Define選ThisDocumentOnly。點擊OK後在彈出窗中,Color填#ffffff,Decoration選none,點OK。

  3.定義菜單邊框樣式在樣式面板中,點擊面板下面的 按鈕,在彈出窗中,Tag框內選中td標籤,Type選第二項RedefineHTML Tag,Define選This DocumentOnly,如圖。

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


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



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。