如何用Fireworks cs5製作下拉導航條

很多網頁設計人員經常會用到下拉導航，網上有很多現成的例子，下載即可使用。但是如果想和自己製作的網頁比較兼容，就需要不停的進行修改設置，比較麻煩，那麼有沒有比較方便的方法來實現下拉導航的製作呢?今天我就來分享一下采用FIREWORKS CS5製作下拉導航(菜單)的方法

工具/原料

FIREWOKRS CS5

電腦一台

方法/步驟

1下載安裝FIREWOKRS CS5(我目前電腦上已經安裝)並啟動軟件，建議大家購買正版軟件，此處不做過多説明。

2新建一個寬950像素X35像素，分辨率為72像素的畫布，並且點確定，如下圖二

3選擇矩形工具，在畫布上拖動出一個大小為950X35像素黑白漸變的圖形

4漸變的顏色大家可以根據自己網頁的風格進行調整)，單擊屬性面板中的油漆桶工具，調整顏色為紅色漸變，調整完畢，畫布上的矩形圖形的顏色已經發生了變化。

5選擇矢量工具內的文本工具，鍵入導航上需要顯示的文字，為了演示方便，我只打了幾個導航的.文字。

6下邊我們開始正式製作下拉導航，也就是平時常説的下拉菜單。選擇切片工具，一次切好對應的大小

7點擊產品展示這個切片中心位置的圓形圖形，彈出下拉菜單選擇“添加彈出菜單”選項，

8選擇後台在彈出的面板分別添加產品分類1，產品分類2，產品分類3等下拉菜單的文字內容。鏈接和打開窗口大家可以根據自己的需要手動添加即可。

9下拉導航添加完成後，在彈出菜單編輯器面板點擊繼續，分別進行外觀、高級、及位置設置，最後點擊完成。如下圖2所示

10下拉導航的顯示位置需要手動拖動進行簡單的調整，如下圖，用鼠標左鍵選中紅色方框框選的內容，進行左右或者上下拖動，將下拉內容顯示的合適的位置進行顯示，此處需要進行多次調整並通過導出的頁面文件進行測試，直到顯示完美即可。

11回到FW主界面，在畫布外的任意位置，點擊鼠標右鍵，彈出菜單選擇“全選”，全選的目的是為了保證每個切邊的狀態為選中。

12這裏有三種全選的方法，大家可以採取任意一種：

方法1：直接在FW主界面，按下快捷鍵“CTRL+A”進行快速全選(圖示略);

方法2：即上面提到的方法(圖示略);

方法3：在畫布外的任意位置，按下鼠標左鍵不放，拖動選擇，將畫布上的內容可以全部選中，如下圖所示：

13導出選項如下圖1，導出後的文件如下圖2

14雙擊導出的未命名這個文件進行瀏覽，最終效果如下。

注意事項

用FW製作導航時，需要注意導航的風格要與網頁的風格統一

製作好的導航需要應用時，記得將導出的文件需要全部完整拷貝到網頁文件夾對應的目錄