在匯入到Dreamweaver之前，可以使用Fireworks對效果圖進行切片和優化，然後才能夠把優化好的切片輸出到Dreamweaver的站點中進行佈局。切片的目的是為了獲得影象素材，也就是說能夠通過寫XHTML語言指令碼實現效果的部分，就不需要切片，而必須用影象的地方，則一定要切片。以下是小編為大家搜尋整理的firework切片工具切網頁模板的方法技巧，希望能給大家帶來幫助!更多精彩內容請及時關注我們應屆畢業生考試網!
1、在Fireworks CS3中開啟製作好的網頁效果圖，如圖1-23所示。
圖1-23 在Fireworks CS3中開啟製作好的效果圖
【說明】效果圖中的輔助線是在效果圖設計之初就新增完畢的。
2、選擇Fireworks CS3中的【切片】工具，對效果圖進行切片，切片完成後的效果如圖1-24所示。
圖1-24 切片完成後的效果
【說明】切片的時候，儘量保證所有的切片和被切片的影象尺寸一致，不要切片大於或者小於被切片的影象，同時切片之間儘量保持不要重疊。
3、幾個特別需要注意的地方來詳細給大家說一下，首先是在內容區域，文字的前方有小的黑色三角箭頭，這是用影象來製作的，所以必須要切片，但是由於所有文字前方的箭頭圖示都是一樣的，所以只需要切一張即可。如圖1-25所示。
圖1-25 切片小圖示
4、同樣的道理，在這個效果圖中，有很多的圓角效果，但是在切片的時候同樣的效果仍舊只切片一張即可。如圖1-26所示。
圖1-26 切片圓角影象
5、切片完成後，選擇Fireworks CS3中的【2幅】視窗，如圖1-27所示。在這個視窗的左側，是可編輯的原圖，而在這個視窗的右側，則是優化以後的.影象。在這個視窗的下方，可以看到詳細的關於每一個切片的檔案量和下載時間等資訊。
圖1-27 Fireworks的【2幅】視窗
6、按快捷鍵【F6】，開啟Fireworks CS3的【優化】面板，使用【指標】工具，在【2幅】視窗的左側依次選擇切片，然後在【優化】面板中進行相應的優化操作，最終優化後的影象效果，可以在【2幅】視窗的右側進行觀察，如圖1-28所示。
圖1-28 對切片進行優化
7、對每一張切片進行優化後，就可以匯出所有的影象素材了。選擇【檔案】@@【匯出】命令(快捷鍵為【Ctrl+Shift+R】)，會彈出Fireworks CS3的【匯出】對話方塊，如圖1-29所示。
圖1-29 Fireworks CS3的【匯出】對話方塊
8、在【匯出】對話方塊中的【匯出】下拉列表中選擇【HTML和影象】選項，這樣可以啟用面板右下角的【選項】按鈕，單擊【選項】按鈕，開啟【HTNL設定】對話方塊，如圖1-30所示。
圖1-30【HTML設定】對話方塊
9、切換到【文件特定資訊】選項卡，設定匯出後所有切片的命名規則，可以使用文件名稱加切片序號的方式來命名，這樣做的目的是為了儘量讓切片的名稱變得簡短，如果切片名稱太長，在網頁中寫指令碼的時候字元數量就會增加，網頁檔案的檔案量也就會隨之增加，如圖1-31所示。設定完畢後，點選【確定】按鈕，返回【匯出】對話方塊。
圖1-31 在【HTML設定】對話方塊中選擇【文件特定資訊】選項卡
10、更改【匯出】對話方塊中的【匯出】型別為【僅影象】。這樣匯出以後只會根據切片來生成影象而不會生成網頁，在【檔名】文字框中輸入希望的檔名稱，建議命名規則簡單易記，如圖1-32所示。
圖1-32 Fireworks CS3的【匯出】對話方塊
11、在【儲存在】下拉列表中選擇需要儲存的位置，習慣上我們會把所有切片生成的影象儲存到站點的影象資料夾內。在【切片】下拉列表中選擇【匯出切片】，但是不要勾選下方的【包含無切片區域】和【當前頁面】複選框，如圖1-32所示。
12、全部設定完畢後，點選【儲存】按鈕即可把這個頁面中的所有切片匯出到Dreamweaver的站點中去了，生成的影象如圖1-33所示。
圖1-33 匯出到站點中的切片
學識谷
