針對「網頁設計必須用 Photoshop」的迷思，作者完整示範 Fireworks 從畫布規劃、元件繪製、紋理運用到切片導出的全流程，證明 FW 同樣能產出專業級網頁設計稿。

最終效果圖

1. 畫布與安全區規劃

考慮 1024×768 解析度下瀏覽器可視寬度約 1000px，主內容限制在 770px 內，770-1000px 放置輔助資訊，兼顧 800×600 用戶體驗。

2. 頂部選單與徽章狀裝飾

矩形+圓形組合 + 線性漸變做選單底；多邊形工具繪製獎狀式徽章，鎖定圖層防誤移。

3. 紋理與細節加分

• 左側漸變區：矩形 + 線性漸變 + 「對角線」紋理 + 降低透明度。

• 產品資訊框：矩形 + 紅色描邊 + 內部發光（淺灰）。

• 右上角網格底紋：矩形 + 蒙版漸變遮罩。

Fireworks 內建豐富紋理、樣式面板集中管理、向量/位圖混合編輯，讓網頁平面設計「三下五除二」搞定。