利用 Fireworks 8 強大的「按鈕元件」功能，可零代碼快速製作帶滑鼠交互狀態(正常、滑過、按下、彈起)的滑動導航選單，並一鍵匯出含 JavaScript 交互代碼的 HTML 與切圖。本教學完整演示從繪製背景、分隔線、建立按鈕元件四狀態、編輯滑過/按下態、放入場景、匯出網頁的全流程。

最終效果

核心步驟

1. 新建 760×400 文檔，繪製導航背景漸變矩形 + 兩條分隔線，群組對齊分佈。
2. Ctrl+F8 新建元件，類型選「按鈕」。進入元件編輯模式：
   - 繪製圓角矩形按鈕主體(漸變+1px描邊)。
   - 複製主體去描邊縮小疊加，營造凸起感。
   - 鋼筆工具在底部添加三角形指示器(取消群組→加錨點→白箭頭下拉)。
   - 輸入文字。
   - 關鍵： 分別點擊元件編輯區上方標籤「滑過」、「按下」、「彈起」，每個狀態下複製「彈起」狀態圖形並微調(如顏色加深、位移、高光變化)。
   - 返回「彈起」狀態，刪除按鈕背景圖形(保留文字與三角形)，使按鈕透明化，僅文字與指示器響應交互。
   - 點擊「完成」返回場景。

3. 場景中從庫面板 (F11) 拖入所需數量按鈕實例，屬性面板修改各實例文字標籤。
4. 調整按鈕間距對齊。
5. 檔案 > 匯出，格式選「HTML 與圖片」，務必勾選「將圖像放入子文件夾」，避免圖片混亂。

此工作流「設計 → 元件封裝交互邏輯 → 實例化複用 → 一鍵匯出代碼」是 Fireworks 作為「網頁設計一體化工具」的精髓所在，至今仍具參考價值。