設(shè)計(jì)效果圖–》切圖+制作靜態(tài)html模板–》嵌套至CMS，這些是一般的網(wǎng)站制作步驟流程，不過(guò)切圖雖然是最簡(jiǎn)單的那一步，但其中也會(huì)有很多技巧的，根據(jù)以往的經(jīng)驗(yàn)我總結(jié)了以下幾點(diǎn)：

總體上，把握一個(gè)原則，能用css寫(xiě)的，堅(jiān)決不要用圖片。想必大家都知道，首頁(yè)如果放有很多圖片的話，那么網(wǎng)站打開(kāi)的速度就會(huì)很慢，因?yàn)閳D片多，需要下載的文件體積就增大，還有每一個(gè)圖片下載都會(huì)對(duì)服務(wù)器有一個(gè)請(qǐng)求的，增大了瀏覽器與服務(wù)端的交互次數(shù)，如果能把純色的部分用css來(lái)寫(xiě)，而不因?yàn)槭∈轮苯忧袌D，就會(huì)極大提高網(wǎng)站的運(yùn)行效率，我最早開(kāi)始學(xué)習(xí)制作網(wǎng)站時(shí)，就想當(dāng)然的認(rèn)為怎么樣能加快制作速度就怎么來(lái)，于是把一個(gè)導(dǎo)航條的背景直接切成圖片，后來(lái)老板看到我寫(xiě)的html代碼，告訴我不能這么干，用div定義好寬和高設(shè)置背景色和邊框，一行代碼就搞定。如果遇到有漸變色的背景，可以沿著與漸變色相同方向切一個(gè)像素的條紋，用css中background的repeat-x或repeat-y來(lái)自動(dòng)填充。

對(duì)于有圓角的導(dǎo)航條圖片，可以將兩邊的圓角部分單獨(dú)切出來(lái)，中間如果有漸變色，也是只切一個(gè)像素的條紋，切出來(lái)的三個(gè)條紋可以合并到一張圖片里（上、中、下），使網(wǎng)頁(yè)中使用的時(shí)候用css中的positon屬性來(lái)定位圖片出現(xiàn)的位置。

其實(shí)呢，切割效果圖的過(guò)程對(duì)于圖片的保存格式也是很有講究的，一般來(lái)講，用圖像工具（如photoshop）制作的色彩絢麗的按鈕或圖標(biāo)一般都存成png格式，而用相機(jī)拍攝的風(fēng)景或人物、物體圖像多用jpg格式保存，gif一般用來(lái)存儲(chǔ)含有簡(jiǎn)單動(dòng)畫(huà)效果的圖像，另外需要注意一點(diǎn)的是，如果圖片中使用了透明效果，要存儲(chǔ)成png-8的格式，png的其他格式要么不支持透明，要么保存時(shí)文件要大很多，png-8是”性價(jià)比”最高的。

其實(shí)有很多命名圖片都是有規(guī)則而無(wú)意義的，如，index_02_01、 index_01、index_02這些，不要覺(jué)得圖片命名的重要性不大，一定要養(yǎng)成一個(gè)良好的習(xí)慣，把切好圖片的命名也看重一些，最好做到見(jiàn)名知意。

在進(jìn)行網(wǎng)站改版和網(wǎng)站維護(hù)的時(shí)候，如果要更換某些網(wǎng)站圖片，就需要一個(gè)一個(gè)從瀏覽器中右鍵查看圖片地址，記下每一個(gè)長(zhǎng)長(zhǎng)的沒(méi)有規(guī)律的圖片名稱，這會(huì)讓技術(shù)人員十分崩潰（也可能就是你自己），所以，在保存圖片時(shí)就給它寫(xiě)上有意義的名字是很必要的。

以上是個(gè)人總結(jié)的在做網(wǎng)站時(shí)的一些切圖技巧，希望對(duì)廣大菜鳥(niǎo)級(jí)的朋友給點(diǎn)怎么樣做網(wǎng)站的一些建議，或者是對(duì)于想從事網(wǎng)頁(yè)設(shè)計(jì)的朋友的一些提示吧，歡迎朋友們來(lái)相互學(xué)習(xí)交流！