織夢論壇（http://www.it365cn.com/bbs/）上有不少人問關于切片的問題,同樣也有不少人寫這樣的教程,其中也有像本文這樣通過實例來講解的,看了一些之後覺得,如果是純文字的經驗之談對初學者而言有些地方會不大明白,而一部分實例教程則是FW直接生成htm文件然後在DW導入,這當然不失為一種方法但是本人不喜歡,覺得會生成一些不必要的代碼,也不便于調整.所以自己又寫一個,不知道以前有沒有這樣的,我沒找到過,希望不是多此一舉。
Fireworks部分
1.在FW里處理好圖片.圖片大小為506*125
2.切割圖片.先不忙著一頓亂切,我們先來看一下規律.
圖片四周是色彩簡單而且沒有什麼變化的邊框,上下左右都是一些重復的漸變和灰色點.把視圖放大來切.先切四個角大小均是13*13
再切上下左右四邊.其中上\下兩個切片的大小為13*3,左/右兩個切片的大小為3*13.
有人也許會奇怪,為什麼要這麼切成這樣,不是13*4,4*13而偏要把大小定得這麼死.再仔細瞧瞧__發現了吧,上面和下面的邊框每隔3個像素寬就重復一次,而左邊和右邊的邊框則是每隔3個像素高就重復一次.這樣一來就可以在DW的表格里把它們作為一格的背景圖了(如果還是不大清楚,請暫時照著做,繼續往下面看就自然明白了)
最後切中間的大圖,把整個圖包在里面,大小就是整個圖片的大小減去邊框所佔的大小,寬為506-2*13=480;高為125-2*13=99.
3.設置各個切片的輸出格式和質量並命名
這一步最好把FW切換到2-UP模式(左邊為原圖,右邊為輸出的預覽效果),同時結合Optimize(優化)面板.最終目的是讓圖片的輸出質量最佳,容量最小.有的人也許會說,干脆都設成JPEG格式的,質量為100豈不是又方便又好?如果是有一個無限大的空間給你,這當然無所謂,但是如果是給別人或公司做,別人一定會要圖片的所佔容量越小越好.並且,如果圖片質量沒多大區別的話,讓圖片容量最小又何樂而不為呢!而給每個圖片命名,這是本人喜歡的一種方式,這樣便于在DW里導入圖片時辨認.如果不想自己命名,FW也會自動生成一個名字.
邊框顏色少,雖有發光效果形成的陰影漸變,但仍沒多大變化,所以選擇輸出GIF格式的圖片,並在Project(屬性)面板中給切片命名.(如果漸變很復雜,那還是得輸出為JPEG,否則看起來就是一塊一塊的了)
下圖就是我設置的圖片大小\名字\格式
4.輸出
返回Original(原始?)模式,一一選中切片,右擊,選擇第一項Expert Selected Slice...(輸出所選擇熱區...)進入導出
Dreamweaver部分
1.在DW里插入表格.3行3列,506象素寬(圖片的寬度),其余參數為0
2.插入圖片，在上下左右四個角和中間插入圖片,這樣,九個格子就有五個是滿的了
3.設置背景圖
給剩下的四個格子設置背景圖.因為表格的背景圖是平鋪的,所以作為設置作為背景的圖片(如圖中的engine_top)只需要3*13或13*3的尺寸.
0
在DW里看來,似乎就這樣好了.那按F12預覽一下看看:
1
為什麼在DW里看是好的預覽時卻是這樣呢?
4.查看源代碼.
把視圖切換到"Code and Design(源碼和設計?)"模式,看到表格對應的代碼如下:
<table width="506" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="engine_top_left.gif" width="13" height="13"></td>
<td background="engine_top.gif">& n b s p;</td>
<td><img src="engine_top_right.gif" width="13" height="13"></td>
</tr>
<tr>
<td background="engine_left.gif">& n b s p;</td>
<td><img src="engin_mid.jpg" width="480" height="99"></td>
<td background="engine_right.gif"> </td>
</tr>
<tr>
<td><img src="engine_bottom_left.gif" width="13" height="13"></td>
<td background="engine_bottom.gif">& n b s p</td>
<td><img src="engine_bottom_right.gif" width="13" height="13"></td>
</tr>
</table>
那些我們只設了背景圖而並沒插入任何東西的格子里都有一個:& n b s p;用DW畫表格如果不插入任何東西就會有這樣的一串代碼,反映到瀏覽器上就會是一個空格,因為有了空格,就把表格撐開了,我們只需手動在源代碼里把這些東西刪掉就行了.
再預覽一下,OK了!
另外,你也會發現,中間那個圖可以是任何尺寸的圖片,不僅僅是480*99. 源文件下載