軟體更新換代日新月異，Fireworks 4.0 最令人稱道的是強化後的 Behavior（行為）功能，只需滑鼠拖拽即可做出炫目互動效果。本文介紹如何製作動態頁面效果（實際效果可參考：https://981622.class.netbig.com）。

一、構思與版面規劃

首先進行構思（此處略過），版面結構如圖一所示。此處使用 WMP 7.0 版本的皮膚素材，讀者可自行尋找類似資源。

二、切割圖片

版面完成後，切換至 Slice View 模式，使用 Slice 工具切割：

• 五個按鈕（對應五個欄目）。
• 顯示欄目內容的黃色背景區域（預置「981622」藝術字）。
• 其他空白處也要切割，可減小整體檔案體積。

三、新增 Frame 與內容

點擊 Frame 標籤，從三角選單選「Add Frames」，在當前 Frame 後新增 5 個 Frame（對應五欄目）。然後在每個 Frame 的黃色背景上添加對應欄目簡介（如圖二）。

四、設定 Behavior 行為

回到 Frame 1，點擊第一個按鈕，按鈕中心出現符號。將此符號拖拽至黃色背景區域，彈出對話框選擇 Frame 2。此時按鈕與顯示區之間出現藍色曲線，表示 Behavior 添加成功。其他按鈕依此類推，分別連結 Frame 2、3、4、5。

五、預覽與輸出

完成後建議先儲存並預覽。按 F12（同 DreamWeaver 操作）可在瀏覽器查看實際效果。若需輸出至 DreamWeaver 進一步修改，選擇 File → Export，選 Export HTML File，建議勾選 Put images to subfolder 並設子目錄為「images」，避免圖片散落根目錄。

六、總結

Fireworks 專為網頁圖形設計，擁有此類互動功能，較 Photoshop 更強大。還有許多功能待深入探討。