Dreamweaver使您可以輕鬆地為您的網站創建下拉菜單。 但是像所有的HTML表單一樣，它們可能有點棘手。 本教程將引導您完成在Dreamweaver中創建下拉菜單的步驟。
Dreamweaver跳轉菜單
Dreamweaver 8還提供了一個嚮導，用於創建用於在Web站點中導航的跳轉菜單。 與基本的下拉式菜單不同，當您完成後，此菜單實際上會執行某些操作。 您不必編寫任何JavaScript或CGI來讓您的下拉式表單正常工作。 本教程還介紹如何使用Dreamweaver 8嚮導創建跳轉菜單。
01 20
首先創建表單
有關HTML表單和Dreamweaver的重要說明：
除了像跳轉菜單這樣的特殊嚮導外，Dreamweaver不會幫助您使HTML表單“工作”。 為此，您需要一個CGI或JavaScript。 請參閱我的教程使HTML表單工作以獲取更多信息。
當您在網站上添加下拉菜單時，首先需要的是一個包圍它的窗體。 在Dreamweaver中，轉到插入菜單並單擊表格，然後選擇“表格”。
02之20
窗體顯示在設計視圖中
Dreamweaver在設計視圖中以可視化方式顯示您的表單位置，因此您知道將表單元素放在哪裡。 這很重要，因為下拉菜單標籤在表單元素之外無效（並且不會工作）。 正如您在圖像中看到的那樣，表單在設計視圖中是紅色虛線。
03 20
選擇列表/菜單
下拉菜單在Dreamweaver中稱為“列表”或“菜單”項。 所以要添加一個到你的表單，你需要進入插入菜單的表單菜單並選擇“列表/菜單”。 確保您的光標位於表單框的紅色虛線內。
04之20
特殊選項窗口
在Dreamweaver選項中，有一個關於輔助功能的屏幕。 我選擇讓Dreamweaver顯示所有可訪問性屬性。 而這個屏幕就是這個結果。 表單是許多Web站點無法訪問的地方，通過填寫這五個選項，您的下拉菜單將立即變得更易於訪問。
05 20
表單輔助功能
可訪問性選項是：
標籤
這是該領域的名稱。 它將顯示為表單元素旁邊的文本。
寫下你想要調用的下拉菜單。 這可以是下拉菜單將回答的問題或短語。
樣式
HTML包含一個標籤標籤，用於標識瀏覽器的表單標籤。 您的選擇是將下拉菜單和標籤文本與標籤一起打包，以便使用標籤標籤上的“for”屬性來標識其引用哪個表單標籤，或根本不使用標籤標籤。
我更喜歡使用for屬性，因為如果因為某些原因需要移動標籤，它仍然會附加到正確的表單域。
位置
您可以在下拉菜單之前或之後放置標籤。
訪問密鑰
這是可以與Alt或Option鍵一起使用以直接訪問該表單字段的關鍵。 這使得您的表單非常容易使用，而無需鼠標。 如何在HTML中設置訪問密鑰
Tab索引
這是在使用鍵盤通過網頁選項卡時應該訪問表單字段的順序。 了解Tabindex
當您更新了輔助功能選項後，請點擊確定。
06年20月
選擇菜單
在設計視圖中顯示下拉菜單後，您需要添加各種元素。 首先點擊它，選擇下拉菜單。 Dreamweaver將在下拉菜單中放置另一條虛線，以表明您已選擇它。
07的20
菜單屬性
屬性菜單將變為該下拉菜單的列表/菜單屬性。 在那裡你可以給你的菜單一個ID（它說“選擇”），決定你是否希望它是一個lis或一個菜單，從你的樣式表給它一個樣式類，並給下拉列表賦值。
列表和菜單有什麼區別？
Dreamweaver會調用一個菜單下拉菜單，任何只允許一個選擇的下拉菜單。 “列表”允許在下拉菜單中進行多項選擇，並且可以多項選擇。
如果您希望下拉菜單為多行高，請將其更改為“列表”類型，並且不選中“選擇”框。
08 20
添加新的列表項目
要將新項目添加到菜單中，請單擊“列表值...”按鈕。 這將打開上述窗口。 在第一個框中輸入您的項目標籤。 這將顯示在頁面上。 如果您將該值留空，那麼也將在表單中發送該值。
09年20月
添加更多並重新排序
點擊加號圖標添加更多項目。 如果您想在列錶框中重新排列它們，請使用右側的向上和向下箭頭。
10 20
給所有物品值
正如我在步驟8中所提到的，如果您將值留空，標籤將被發送到表單。 但是你可以給你所有的物品值 - 發送替代信息到你的表格。 你會用這個很多的東西，如跳躍菜單。
11 20
選擇一個默認
網頁默認顯示哪個下拉列表首先列為默認項目。 但是如果你想選擇不同的一個，在屬性菜單的“最初選擇”框中突出顯示它。
12 20
在設計視圖中查看您的列表
完成編輯屬性後，Dreamweaver將以選定的默認值顯示您的下拉列表。
13 20
在代碼視圖中查看您的列表
如果切換到代碼視圖，則可以看到Dreamweaver使用非常乾淨的代碼添加了下拉菜單。 唯一的額外屬性是我們添加了輔助功能選項的屬性。 代碼全部縮進，非常容易閱讀和理解。 它甚至放入了selected =“selected”屬性，因為我告訴Dreamweaver我默認編寫XHTML。
14 20
保存並在瀏覽器中查看
如果您保存文檔並在Web瀏覽器中查看它，則可以看到您的下拉菜單看起來就像您所期望的那樣。
15 20
但它沒有做任何事情
我們上面創建的菜單看起來很好，但它什麼也沒做。 為了讓它做些什麼，你需要在表單本身上設置一個表單動作，這是一個完全的其他教程。
幸運的是，Dreamweaver具有內置的下拉菜單形式，您可以立即在網站上使用，無需了解表單，CGI或腳本。 這就是所謂的跳轉菜單。
Dreamweaver跳轉菜單設置了一個包含名稱和URL的下拉菜單。 然後，您可以選擇菜單中的項目，網頁將移至該位置，就像點擊鏈接一樣。
轉到插入菜單並選擇表格，然後跳轉菜單。
20 20
跳轉菜單窗口
與標準下拉菜單不同，跳轉菜單打開一個新窗口，為您命名菜單項並添加有關窗體應如何工作的詳細信息。
對於第一項，將文本“untitled1”更改為您希望它讀取的內容，並添加該鏈接應該到達的URL。
20 20
將項目添加到您的跳轉菜單
點擊添加項目添加一個新項目到您的跳轉菜單。 根據需要添加盡可能多的項目。
18 20
跳轉菜單選項
一旦你添加了你想要的所有鏈接，你應該選擇你的選項：
在中打開網址
如果您有框架集，可以在不同的框架中打開鏈接。 或者，您可以將主窗口的選項更改為特殊目標，以便URL將在新窗口或其他位置打開。
菜單名稱
為您的菜單提供該頁面的唯一ID。 這是必需的，這樣腳本才能正常工作。 它也允許你在一種形式中有多個跳轉菜單 - 只需給他們所有不同的名字。
在菜單後插入Go按鈕
我喜歡選擇它，因為有時腳本在菜單更改時不起作用。 它也更容易訪問。
選擇URL更改後的第一項
如果您有諸如“選擇一個”之類的提示作為第一個菜單項，請選擇此項。 這將確保該項目在頁面上保持默認。
19 20
跳轉菜單設計視圖
就像使用第一個菜單一樣，Dreamweaver會在設計視圖中設置您的跳轉菜單，並顯示默認項目。 然後，您可以像其他人一樣編輯下拉菜單。
如果您確實要編輯它，請確保不要更改項目上的任何ID，否則腳本可能無法使用。
20 20
在瀏覽器中跳轉菜單
保存文件並按F12將在您的首選瀏覽器中顯示該頁面。 在那裡你可以選擇一個選項，點擊“開始”，跳轉菜單起作用！