活用Firework4製作下拉式功能表

菜單|下拉 Firework4的一個新增加的功能就是能輕易地製作下拉式功能表。下拉式功能表是目前比較熱門的一種網頁互動方式之一。仿Windows介面的下拉式功能表非常流行。但是由於製作菜單需要懂得一定的Javascript語言或者操作步驟比較麻煩。因此在一段時間內還很少有人製作這樣的東東。現在有了Fireworks就簡單了。

　　閑話休提，言歸正傳。新版本的firework4.0，在介面上，跟firework3.0沒有多大區別。開啟firework4，建立一個文檔，（記住頁面大少要象素800×600）你利用一些基本作圖技術，製作出幾個按鈕。如圖1，我就搞了這樣幾個按鈕。

　　接著點擊左邊工具列slice tool(小刀工具)，將幾個按鈕割開。如圖2：

右擊“我的曆程”按鈕，選取add pop-up Menu選項；然後右擊“我的曆程”，選擇“pop-up memu”於是調跳出一個新視窗，如圖3：

　　在文字欄中填上你菜單內容，串連在欄中填入你所要串連的頁面，之後按加號添加。按類似的方法，再添加幾個，在本文例子中填入四欄！之後，按next鍵繼續。如圖4

　　在此，讓我詳細地介紹一下以上視窗的內容。Cell欄：那是菜單選項的格式，html是html文字格式設定，而image是指圖片格式。選擇不同，會有不同的效果。在此，本人較贊成用圖片格式，因為那看起來較漂亮些。下面的是字型和字型大小的選擇，這隨你喜歡啦！up state是指滑鼠放到按鈕時的字型設定和菜單格的設定，overstate是指滑鼠放到功能表列時字型的設定和菜單格的設定。你可以選擇一種你喜歡的格式。Preview是預覽列，因為該軟體對中文支援不好，所以顯示為不正確，你可以不管它，因為匯出時是正常的。之後，按“finish”搞定。完成這些設定後，按[檔案] 功能表的export選項，匯出html檔案，這樣你可以預覽啦！嘩，是不是很酷呢！如圖5

　　要說明一下的是，如果你製作圖片時，圖片的大少底於象素800×600的話，你的頁面的按鈕和圖象就會靠到左上方了。你要校正這些又要花些時間了，不過很容易的，你仔細研究一下代碼就可以輕鬆搞定。我們這裡用dreamweaver4.0將它開啟，如圖6。

　　選中外面的大表格，在工具列中的align中選取center，將表格置中。但是，你要注意，你把按鈕的位置改變了，而下拉式功能表的位置。 卻沒有改變，所以你務必將菜單的位置定位改過來。點擊左上方的show code view按鈕，進入代碼編輯介面（如圖7）。

　　觀察綠色代碼，找到代碼<a href="#" >,9是菜單的橫座標位置，117是縱座標位置。你可以作一些調試，本人這裡把9改144就行了。嗯，一切就這樣快捷,ok搞定！

　　如果你再想改菜單格的寬和高的話，你可以改該頁中head裡的代碼：window.fw_menu_0 = new Menu("root",113,25,"Times New Roman, Times, serif",18,"#0000ff","#ffffff","#666666","#000000");其中113，25兩個數字分別指的是菜單的寬和高，你可以作些改正，再預覽一下，直到你滿意為止！
Ok，dreamweaver和firework的綜合運用――製作下拉式功能表篇就談到這裡，以後再見！

轉自：動態網製作指南 www.knowsky.com