华南俳烁实业有限公司

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

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

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

　�、僭贔WMX2004中打開(kāi)圖片，選擇工具，將圖片分割如下：

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

　�、诜指詈弥�后，就是導(dǎo)出圖片了。選擇“文件”>“導(dǎo)出”，或者導(dǎo)出按鈕，彈出“導(dǎo)出”對(duì)話框，選擇保存的位置和名稱(chēng)(這里為topic.htm)，其它請(qǐng)按圖中設(shè)置：

　　③在HTML后面點(diǎn)擊“選項(xiàng)”，“常規(guī)”中選擇“Dreamweaver HTML”，在“表格”一項(xiàng)中，分別設(shè)置為“嵌套表格，無(wú)間格符”和“無(wú)”�！拔臋n特定信息”中可以指定圖片的命名規(guī)則和Alt信息：

　�、茉O(shè)置完成后確定，再在“導(dǎo)出”對(duì)話框中點(diǎn)擊“保存”。在FW中的工作已經(jīng)完成了。下面我們進(jìn)入Dreamweaver，看看怎么利用導(dǎo)出的圖片。在DW中，在要插入剛才的圖片的表格中點(diǎn)擊

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

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

　�、尴冗x擇中間作文字背景的圖片，記下它的寬和高，這里是283、191：

　　點(diǎn)擊標(biāo)簽選擇器中

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

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