Fireworks MX製作下拉式功能表

菜單|下拉 隨著網站頁面極其功能的複雜化，越來越多的網站使用下拉式功能表進行導航。熟悉Javascript的朋友都知道，所謂下拉式功能表其實是通過Javascript控制每一個元素的可見屬性實現的，當然這需要專門編寫大段的代碼。但是要是使用Fireworks　MX就不需要這麼麻煩，所有的代碼都是由Fireworks MX自動產生的，你要做的只是美化一下介面，再簡單的設定一下下拉式功能表的選項就可以了。

　　下面就來看看怎樣使用Fireworks MX增強下拉式功能表功能製作出讓人羨慕的下拉式功能表。

　　步驟1：

　　開啟一個卡通人物圖形，在工具列上選擇Text Tool寫入文字：Click。並將其放置在圖形的左上方（如圖1）。

　　步驟2：

　　在工具列上選擇Slice Tool（切片工具），在文字上畫一個矩形。切片工具的功能是製作小圖片，以及將一張大圖切成數張小圖後以表格的形式進行發布，以增快下載的速度。每一個切片都可以添加連結或者是做為按鈕。切片後的地區以綠色表示，我們可以在下方的Properties面板上精確調整切片的位置與大小（如圖2）。

　　步驟3：

　　滑鼠右鍵單擊切片的綠色地區，在彈出的菜單中選擇Add Pop-Up Menu（添加下拉式功能表）（如圖3）。

　　步驟4：

　　彈出的Pop-up Menu Editor（下拉式功能表編輯器）對話方塊包含四個標籤，分別對應不同的功能（如圖4）。

　　單擊Text標籤下的地區，輸入菜單的名稱，例如：選項一。再單擊加號，重複以上操作，即可添加所有的菜單選項，如果輸入錯誤的話，點擊減號就可以刪除這一個選項（如圖5）。

　　同樣在Link標籤下的地區可以輸入此菜單選項的連結地址。

　　由於只是個練習，我們輸入"#"符號，在Html標記語言中，連結地址為"#"代錶鏈接到自身，也就是說是這樣一個連結不論你如何點擊你看到的都將是當前的頁面，不會出現"頁面不存在"的錯誤，很適合測試使用。
　　步驟5：

　　但是有的時候我們將使用到不止一級的菜單，可能在一級菜單的某個選項下還有二級菜單，甚至還會有三級菜單的存在，該如何面對如此複雜的情況呢？很簡單，在此面板上有兩個按鈕分別是：Outdent Menu與Indent Menu，可以用來設定某一菜單選項下的子選項。你只需要先選擇一個選項，再點擊Indent Menu就可以將其設定為二級菜單，再點擊Outdent Menu就可以將其恢複為一級菜單（如圖6）。

　　以這樣的方法你可以做出結構非常複雜的下拉式功能表來。

　　步驟6：

　　在輸入並設定好菜單選項後，選擇Appearance選項卡。在這裡，我們可以設定下拉式功能表的外觀屬性。大家自己試一下就會熟悉，而值得注意的是Up State與Over State代表的是菜單的兩種狀態。在正常顯示時是UP State而當滑鼠移動到菜單選項上時就以Over State狀態顯示。我們可以分別在Style中為這兩種狀態設定不同的顯示風格（如圖7）。

　　步驟7：

　　選擇Advanced選項卡，在這裡可以進一步設定菜單的外觀風格，主要是表格的屬性，如邊框的寬度，顏色，以及菜單內容與邊框的距離等。請按照你自己的喜好進行修改（如圖8）。

　　步驟8：

　　最後選擇Position選項卡，在這裡可以調整菜單彈出的位置與方向。你可以在Fireworks MX提供的效果中直接選擇，也可以自己輸入數值。注意Menu Position是一級菜單彈出的位置，而Submenu Position則是次級菜單的彈出位置設定（如圖9）。

　　步驟9：

　　 所有的設定都完成後，點擊ok按鈕，即可看到如圖所示效果（如圖10）。

　　我們可以直接從圖上看出此下拉式功能表彈出的位置，選項的個數等基本情況。在工具列上選擇Slice Tool ,在圖形上拖曳滑鼠就可以拉出綠色地區，每一個綠色地區在輸出時將單獨成為一個小圖片，這樣可以加快下載的速度（如圖11）。

　　不斷的切割圖片，直至效果如圖所示（如圖12）。

　　步驟10：

　　Fireworks MX具有非常優良的效果預覽功能，我們只要按下F12鍵就它就會自動產生一張網頁讓我們參看效果（如圖13）。

　　步驟11：

　　現在我們已經完成了下拉式功能表的製作，但是該怎樣將其發布為網頁的形式或者是直接輸出到Dreamweaver中進行下一步的編輯呢？我們可以使用功能表命令File－＞Export來輸出製作好的效果（如圖14）。

　　但是更方便的是直接點擊開啟圖形框上的Quick Export按鈕，在這裡你可以將檔案輸出到Dreamweaver、Flash乃至Director。

　　步驟12：

　　我們選擇輸出到Dreamweaver並且Export Html…（如圖15）。

　　將彈出一個檔案儲存對話方塊，尤其要注意的是在檔案類型的選擇框中我們應當選擇Html and Images，這樣才會即輸出網頁也輸出切割好的圖片。如果在Include Area without Slice前的選擇框打鉤，可以將沒有進行切片的圖形部分一起輸出。不打鉤就只輸出圖形的切片（如圖16）。

　　總結：

　　Fireworks MX的特點使其大大的方便了圖形設計師製作複雜的網頁效果，你不需要懂得程式語言就可以輕鬆的駕馭它，得到滿意的效果。另外Fireworks、Flash、Dreamweaver被稱為網頁製作三劍客，它們功能相輔相成。每一種軟體都可以輕鬆的與其它兩種軟體配合使用，而且都具有另外兩種軟體的一些常用功能，這一點，在Macromedia這一次推出的MX系列可以更明顯的感覺到。我們可以用Fireworks MX製作網頁，用Dreamweaver MX製作簡單的Flash，用Flash MX加工Fireworks的Png格式圖片，以製作動畫。 因此如果我們能熟練掌握這三款軟體的使用方法，那麼我們的網頁製作將非常方便。

　　練習：
　　使用Fireworks MX製作一個帶有三層子功能表的快顯功能表，並且設定子功能表的彈出方向。

　　提示：
　　在content選項卡中使用Outdent與Indent來實現三級菜單功能，而在Position選項卡中來調節菜單彈出的位置。