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