Firewroks之四--分割

目標
明白切割的用途，並理解讓網站資料「以少御多」的要領。

步驟

實例

一、前置作業

1. 下載work4.zip。
2. 解壓縮後會有個資料夾work4，內有資料夾images及img。
   

二、為index.html更名備用

1. 用Fireworks開啟index.png。
2. 「檔案」>「匯出精靈」，取名index.html。
3. 進入電腦的images資料夾，複製index_r2_c1.jpg，貼入，將新複製檔更名為left.jpg。
4. 同上，將index_r2_c8.jpg複製及貼入，更名為right.jpg。
5. 同上，將index_r3_c2.jpg複製及貼入，更名為main.jpg。
6. 在Dreamweaver開啟index.html。
   
7. 點按作業區左側的切割圖index_r2_c1.jpg，在屬性欄內之原始檔欄位內之index_r2_c1.jpg改為left.jpg；
8. 點按作業區右側的切割圖index_r2_c8.jpg，在屬性欄內之原始檔欄位內之index_r2_c8.jpg改為right.jpg；
9. 點按作業區右側的切割圖index_r3_c2.jpg，在屬性欄內之原始檔欄位內之index_r3_c2.jpg改為main.jpg。
   
10. 檔案 > 另存新檔，檔名為index1.html，路徑與index.html同。(這是重點)
    

三、在Fireworks另建新檔並做分割

1. 開啟index.png。
2. 匯入一圖片，例如書本。
3. 從工具列選用「分割工具」，在作業區加入一個分割，修正其大小及位置，使與上一步驟的圖片相同。
4. 儲存為book.bng。
5. 匯出精靈，檔名為index.html。
   這會蓋過之前做個的index_r2_c1.jpg；index_r2_c7.jpg及index_r3_c2.jpg的圖像。

四、修改index.html中的圖像，並另存新檔

1. 把名為books.jpg、love.jpg、flower.jpg、moon.jpg、fish.jpg的圖像檔置入images資料夾內。
2. 在Dreamweaver開啟index.html，另存新檔為02_book.html。
3. 選擇書本的圖像，在屬性編輯區將該圖像所對應的index_rx_cx.jpg更名為books.jpg。
4. 儲存檔案。
5. 另存新檔為03_love.html，選擇書本的圖像，在屬性編輯區將該圖像所對應的books.jpg更名為love.jpg。
6. 儲存檔案。
7. 另存新檔為04_flower.html，選擇情侶的圖像，在屬性編輯區將該圖像所對應的love.jpg更名為flower.jpg。
8. 儲存檔案。
9. 另存新檔為05_moon.html，選擇花朵的圖像，在屬性編輯區將該圖像所對應的flower.jpg更名為moon.jpg。
10. 儲存檔案。
11. 另存新檔為06_fish.html，選擇月亮的圖像，在屬性編輯區將該圖像所對應的moon.jpg更名為fish.jpg。
12. 儲存檔案。
13. 檔案>於瀏覽器中預覽>IE。

五、回復最早先的index.html

1. 開啟index1.html。
2. 另存新檔index.html，蓋過。

討論
本練習中，我們讓每個html檔共用許多的indx_rx_cx.jpg，可減少瀏覽者耗時下載之苦。