Fireworks 的 Pages（頁面）面板是製作多頁網站的利器，支援圖層共享、切片管理、頁面連結與一鍵匯出。本教學以實例引導你從新建文件、佈局母版、建立子頁、共享背景圖層、添加切片連結，到最終匯出完整站點。

實作流程

1. 新建文件與畫布設定

新建 Fireworks 文件，畫布寬 932px、高 538px，背景白色。

2. 佈局母版頁（index）

• 匯入背景素材，將圖層命名為「背景」。
• 在「背景」圖層製作左側按鈕、圖片廣告、右上角導航背景等共用元素。
• 新增圖層「內容」，製作導航文字與右下角正文內容。

3. 開啟 Pages 面板並建立子頁

選單【視窗】→【Pages (頁面)】（快捷鍵 F5）。
點擊面板右下角「新增頁面」建立三個新頁，共四頁（對應四個導航按鈕）。
重新命名頁面（如 index、webdesign、about、contact），名稱即為匯出後的 HTML 檔名。

4. 共享「背景」圖層至所有頁面

選取 index 頁，開啟圖層面板（F2），右鍵「背景」圖層選擇【共享圖層到頁面】。
在對話框中將所有頁面加入「包含」清單，確定。此後所有頁面皆顯示相同背景，圖層標題列會變黃色標示共享狀態。

5. 在各子頁製作獨立內容

切換至 webdesign 頁，在圖層面板新增「內容」圖層（不共享），製作該頁專屬內容。其餘頁面同理操作。

6. 添加切片並共享導航切片

• 在 index 頁用切片工具為四個導航按鈕建立切片。
• 切片預設僅存在當前頁。為共享至所有頁，需在圖層面板中於「網頁層」下建立子圖層，將切片拖入子圖層，再對該子圖層執行【共享圖層到頁面】。

7. 設定頁面連結

選取切片，在屬性面板的【Link】欄輸入對應頁面檔名（如 webdesign.html），建立導航跳轉。

8. 優化與匯出整站

使用優化面板調整切片輸出品質。
選單【檔案】→【匯出】（Ctrl+Shift+X），設定：
• Export：HTML and Images
• 取消「僅匯出目前頁面」
• 勾選「將圖片放入子資料夾」
點擊【儲存】，Fireworks 自動產生所有 HTML 與圖片資源。

操作技巧總結

• 製作母版時將不變動元素（背景、導航、Logo）置於獨立圖層，便於共享。
• 網頁層本身不可直接共享，必須建立子圖層承載切片後再共享。
• 「主頁面」功能類似 Dreamweaver 模板，設定後所有頁面自動套用主頁面內容，適合大型專案維護。