在網(wǎng)站制作中我們經(jīng)常會(huì)聽(tīng)到定稿后我們就好進(jìn)行切圖了，那么切圖到底是一個(gè)什么樣子的工作，讓我們專業(yè)的前端工程師告訴您。

切圖是網(wǎng)站制作過(guò)程中的一個(gè)專業(yè)術(shù)語(yǔ)、是前端工程師必備的一個(gè)基礎(chǔ)技能，切圖是將設(shè)計(jì)文稿轉(zhuǎn)化為HTML的過(guò)程。

在網(wǎng)站制作的過(guò)程中，切圖是指講設(shè)計(jì)好的PSD文稿轉(zhuǎn)化成html的工作，利用DIV+CSS將設(shè)計(jì)文稿以網(wǎng)頁(yè)的形式表現(xiàn)出來(lái)，切圖的切指的是將設(shè)計(jì)文稿中的圖片根據(jù)布局 的需要，利用Photoshop的切片工具將圖像在文稿中分離出來(lái)，配合DIV+CSS完成靜態(tài)頁(yè)面的制作。

切圖的誤區(qū)

切圖大家都有個(gè)誤區(qū)，覺(jué)得切圖就是把圖片切出來(lái)，其實(shí)并不完全是這樣，切圖中的切是將設(shè)將設(shè)計(jì)文稿中的圖片根據(jù)布局的需要，利用切片工具將圖像在文稿中分離出來(lái)。

早期的網(wǎng)頁(yè)布局大部分采用table布局，代碼繁瑣不利于管理，DIV+CSS可以做到框架和表現(xiàn)分離，容易修改而且，頁(yè)面體積較小，所以我們文匯傳媒作為一家專業(yè)的建站公司，在給客戶做網(wǎng)站的時(shí)候切圖主要以DIV+CSS為主。

那么我們?yōu)槭裁匆M(jìn)行切圖呢？

切圖是為了讓設(shè)計(jì)文稿轉(zhuǎn)化成為瀏覽器能夠識(shí)別的HTML頁(yè)面，提高頁(yè)面的加載速度。

切圖的優(yōu)勢(shì)

第一個(gè)做到圖文分離，文字和圖片分開(kāi)用戶可以自主選擇網(wǎng)頁(yè)中的圖片和文字。

第二可以增加交互性效果，頁(yè)面中增加js代碼會(huì)讓頁(yè)面產(chǎn)生動(dòng)感效果。比如這個(gè)客戶可以參考下圖片和下面的鏈接http://www.hi7788.com/d/case/xuemeng/

切圖的工具

切圖常用的工具是Photoshop 和 Fireworks 配合Dreamweaver完成DIV+CSS的布局

切圖是一項(xiàng)比較耗費(fèi)時(shí)間的工作，在濟(jì)南建站公司中有不少公司為了盡早完成網(wǎng)站的制作，只將表面上的內(nèi)容進(jìn)行一個(gè)div+css的制作，有很多可以細(xì)化的內(nèi)容給硬性忽略掉，就會(huì)導(dǎo)致頁(yè)面加載較慢，用戶體驗(yàn)較差，我們文匯傳媒保證每個(gè)頁(yè)面都會(huì)仔仔細(xì)細(xì)的進(jìn)行，也歡迎廣大客戶進(jìn)行監(jiān)督。