先看下最后效果：

html 效果

1、打開FW 8.0 (我用的是8.0，當(dāng)然其它版本也是可以的了)

2、新建一個(gè)穩(wěn)當(dāng)大小760X400

3、用矩形工具畫一個(gè)漸變的矩形，這里這個(gè)矩形是要做為導(dǎo)航條的背景，所以你可以調(diào)配自己喜歡的顏色。

4、然后我用直線工具畫了兩條線見(jiàn)下圖，做為分隔線來(lái)用。

5、然后按住Shift G把這兩條線組合成對(duì)象，復(fù)制這個(gè)對(duì)象，從窗口對(duì)齊面板最后見(jiàn)下圖：

6、呵呵下來(lái)這幾部就比較要害了，按下快捷鍵Ctrl f8,調(diào)出新建元件窗口選擇“按鈕”

假如你看見(jiàn)這個(gè)對(duì)話框那么你這步是正確的的了。

7、來(lái)讓我們?cè)谶@里創(chuàng)作按鈕吧！用圓角矩形工具畫下圖，漸變見(jiàn)下圖，邊框?yàn)橐粋€(gè)像素。

8、然后復(fù)制這個(gè)圖形去掉邊框，調(diào)節(jié)大小使按鈕有凸出的感覺(jué)

9、現(xiàn)在我們來(lái)做下面那個(gè)三角形我用的是路徑。

（1）在剛才那個(gè)圖形的上面點(diǎn)右鍵選折取消組合

（2）選折鋼筆工具在下面路徑加三個(gè)節(jié)點(diǎn)見(jiàn)下圖

選擇白箭頭工具,向下拖拉中間的節(jié)點(diǎn)成三角型

（3）寫上文字

（4）到這里其實(shí)我們直徑完成了70%的工作量。不急往下看

看見(jiàn)元件編輯區(qū)這里的滑過(guò)，按下。。。。。。

分別點(diǎn)擊滑過(guò)，按下。。。。

并且每步都要選者復(fù)制彈起時(shí)的圖形，這個(gè)在什么地方見(jiàn)下圖：

假如還找不到的話，你就睜大眼睛使勁找了！

（5）這里先不急著點(diǎn)完成，而是先回到釋放狀態(tài)下把按鈕的背景圖形刪除，不要把文字也刪了?。?/P>

（6）點(diǎn)完成

10、呵呵現(xiàn)在我們又回到場(chǎng)景下，按F11打開庫(kù)面板拖出按鈕從庫(kù)里

11、你可以根據(jù)你要做的數(shù)目拖出你需要的按鈕數(shù)

12、分別選擇按鈕，在屬性欄輸入不同的文字

13。調(diào)節(jié)好按鈕之間的距離

14。選擇“文件”---》“導(dǎo)出”

這里一定要選擇“將圖像防入字文件夾"，要不你的圖片就到出是了。

好了用瀏覽器看下是不是可以了，當(dāng)然你還可以倒到DW處理下代碼，我這里就不多說(shuō)了。

推薦:Fireworks視頻教程