本教程將利用FWMX2004做一個分割圖片以及在DW中如何排版的示范，希望能幫到一些對分割圖片還存有疑問的人。教程中如有什么不妥之處，請各位指證。

　 　圖片的分割主要用在兩個方面，第一是把較大的圖像分割成小圖，意在減少瀏覽者下載圖片的時間，第二是把圖像分割后要在其中的某一部分錄入文字，或者是之 前做了整頁設(shè)計現(xiàn)在要分割開來填入具體的內(nèi)容。對于第一種分割比較簡單，而第二種分割除了要考慮第一種分割時將大圖化小的要求之外，還要注意分割要填內(nèi)容 的部分并且要保證在網(wǎng)頁中輸入預(yù)想的內(nèi)容時不會變形。由于第一種包含在第二種之中了，今天我就以第二種分割為例舉個例子。

　　大家首先看這一幅底稿，這就是要分割的圖片，目標是要把這幅圖片分割之后在虛線框內(nèi)能輸入文字內(nèi)容，而且無論文字有多少行、一行有多少字都保持虛線框完整不變形：

　?、僭贔WMX2004中打開圖片，選擇工具，將圖片分割如下：

　　注意圖中的ABCD四個部分，分割時必須將圖片的四個角分開，在網(wǎng)頁中我們將把ABCD四個部分作為背景圖片，以保持虛線框不變形。

　?、诜指詈弥螅褪菍?dǎo)出圖片了。選擇“文件”>“導(dǎo)出”，或者導(dǎo)出按鈕，彈出“導(dǎo)出”對話框，選擇保存的位置和名稱(這里為topic.htm)，其它請按圖中設(shè)置：

　?、墼贖TML后面點擊“選項”，“常規(guī)”中選擇“Dreamweaver HTML”，在“表格”一項中，分別設(shè)置為“嵌套表格，無間格符”和“無”。“文檔特定信息”中可以指定圖片的命名規(guī)則和Alt信息：

　?、茉O(shè)置完成后確定，再在“導(dǎo)出”對話框中點擊“保存”。在FW中的工作已經(jīng)完成了。下面我們進入Dreamweaver，看看怎么利用導(dǎo)出的圖片。在DW中，在要插入剛才的圖片的表格中點擊按鈕，在彈出的對話框中“瀏覽”選擇剛才導(dǎo)出的topic.htm文件，點擊確定：

　 ?、莠F(xiàn)在先切換到代碼視圖，按下Ctrl+F，將代碼中的 border="undefined" cellpadding="undefined" cellspacing="undefined"全部替換為 border="0" cellpadding="0" cellspacing="0"，這個代碼是FWMX2004生成的表格代碼，如果不改這里，在網(wǎng)頁預(yù)覽的時候?qū)a(chǎn)生變形。（在FWMX中都沒有出現(xiàn)這 種情況，不知道為何2004中會出現(xiàn)，目前為止除了在DW中修改之外我還沒有發(fā)現(xiàn)在FW2004中的設(shè)置方法，如果哪位仁兄發(fā)現(xiàn)了還請告訴小弟）：

（如果只是第一種分割，也就是只需要把大圖割小的，到這一步已經(jīng)完成了。）

　　⑥先選擇中間作文字背景的圖片，記下它的寬和高，這里是283、191：

　　點擊標簽選擇器中前面的標簽，將屬性中的寬和高修改為283、191，這樣把這個圖片換作背景之后表格也不會變形。然后將這個圖片刪除并在單元格的背景中添加這個圖片的地址：

　?、呷缓髮⒅皥D中ABCD四個部分都重復(fù)第⑥步的步驟，不過A和D兩個地方的圖片刪除了之后，背景要加在中。這里有一點要注意，要將表格的右上和右下兩個角上的單元格的對齊方式改為右對齊，這樣右上角和右下角的圖片才會一直靠右。

　?、喱F(xiàn)在，你可以在中間的單元格中輸入文字測試一下，看看是不是表格就算被撐大了虛線框仍然沒有變形？