英文版 CS4 已經上市，中文版也將於12月登台，Fireworks 大進化的功能之一，就是能將設計稿直接匯出，變成使用 div+CSS 架構的標準 html 文件檔案！你的設計稿可以是 psd，也可以是 png，Fireworks CS4 將完整開啟這些檔案並轉換，即使是使用 Photoshop 製作的設計稿！
那麼，實際上該如何設計一份 Fireworks 讀的懂，然後完全按照設計者的想法匯出成為一個 html 文件呢？以下我就自己實際製作的心得整理幾個方向給大家參考。
開始設計
先在腦子裡規劃好網站的基本版型，例如：一般會有放識別 logo 的top 或是 header，側邊欄位的 sidebar，放置主要內容的 content，還有最後版權宣告、聯絡資訊的 footer。然後在 Fireworks 裡面開啟一個圖層資料夾，取名為「div元素」，將上述各區塊，按照版型排列，使用「矩形工具」繪製於版面上。並將每個繪製出來的區塊元素打上名字，請務必以英文命名，因為這些名字在匯出成 html 之後，會成為元素的 id，而這些矩形區塊則是支撐整個網站架構的 div 配置！
設計
在「div元素」資料夾之上，新增所需的圖層資料夾，將你的創意與設計繪製在這些圖層上。當然，已經繪製好的「div元素」也可以改變形狀，除了方正矩形之外，你也能改成具有4邊圓角的矩形，只要在之後使用「分割工具」切圖注意幾個要點即可。這部份待後文介紹。
當需要放置「表單」元素的時候，例如：會員登入欄位、核取方塊等，必須打開「視窗」>「通用元件庫」，找到「HTML」分類，開啟後拖拉使用裡面的元件來製作。Fireworks 將自動識別這類元件，匯出成為具有<form>標籤的表單元素。
另外，html裡面標題元素：<h1>~<h6>等，也能使用「通用元件庫」裡的「標題1」~「標題6」來對應。需要針對上述元件設定詳細屬性，則開啟「視窗」>「元件屬性」來設定。字型、字級、顏色、行高，將會轉成CSS樣式。
分割切圖
這個部份必須注意幾點。首先，我們不需要整個網站切滿分割區域才能匯出，只需要針對元素、屬性製作分割區域即可。例如：要變成背景「圖片」的部份，只需要切一塊小方塊，在「分割屬性」的部份選擇「背景影像」，設定是某重複，或是沿著 x 軸 repeat，這樣 Fireworks 自動會將 CSS 的 background 屬性指向這張小圖片。
另外，文字的部份，除非是具有特殊字型與效果的字體，可以圖片形式匯出之外，其餘會以「電腦字」型態出現的文字，都不需要「分割」！在Fireworks 設定的字體屬性將會自動轉成 CSS。
在「設計」部份，如有使用元件庫製作「表單元件」，也不需要作分割。如上所述，Fireworks 將自動判定，匯出成為具有 form 標籤的表單。
如果需要製作自動依照內文延伸的圓角區塊，切圖的時候必須將區塊分為「上」、「中」、「下」3個部份，並且將「中」區塊的圖片設定為「背景影像」。例如：一個 id 為 sidebar 的圓角矩形，上方左右2個圓角為一張圖片，下方左右則為另一張圖片，中間則另外輸出成背景影像，一個具有圓角的div 區塊就完成了！
匯出
文件完成之後，選擇「檔案」>「匯出」，類型選擇「CSS 和影像(.htm)」，也可以指定圖片存放的資料夾，然後按下「儲存」，一個具有標準html 與 CSS 的網頁就完成了！
附上 Adobe 官方教學影片，可以更加清楚整個過程唷！
發表文章
