工具介紹

Fireworks 內建「按鈕製作嚮導」 (Step-by-step Button Maker) 可快速生成具備 Up/Over/Down/Over While Down 四種狀態的互動按鈕，支援樣式預設、行為綁定、批量匯出。

步驟 1：新建文檔

啟動 Fireworks → 工具欄「新建文檔」按鈕 → 確定打開空白頁面。

步驟 2：啟動按鈕嚮導

「Insert」→「New Button」 → 彈出按鈕編輯器視窗，包含：
• 樣式頁籤：預設樣式庫 (立體/扁平/玻璃/金屬等)
• 狀態頁籤：四狀態預覽與編輯 (正常/滑過/按下/滑過按下)
• 文字頁籤：按鈕文案、字體、顏色、對齊
• 行為頁籤：鏈接/JS 函數/切片導出設定

後續完整流程

1. 選擇基礎樣式 → 自定義四狀態視覺差異 (顏色/邊框/發光/陰影)
2. 輸入按鈕文字 → 設定字體排版
3. 綁定超鏈接/JS 行為
4. 預覽測試四狀態切換效果
5. 「檔案」→「匯出」→ 選擇「HTML 和圖片」/「僅圖片」→ 設定切片命名規則 → 獲得完整按鈕組圖與 HTML 代碼

優勢

• 零代碼生成標準 CSS/JS 滑鼠交互
• 狀態一致性有保障，避免手寫 CSS 疏漏
• 批量生成同風格按鈕組，維護設計系統統一性
• 原生支援無障礙屬性 (alt/title/aria-label)