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

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

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

切圖的誤區(qū)

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

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

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

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

切圖的優(yōu)勢

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

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

切圖的工具

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

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