網站製作的切圖技巧

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

一般的網站製作步驟大體上為：設計效果圖-->切圖+製作靜態html範本-->嵌套至CMS，其中，切圖雖然是很簡單的一個步驟，但其中也有很多技巧，以下是我個人總結出來的幾點。

總體上，把握一個原則，能用css寫的，堅決不要用圖片。 經驗告訴我們，首頁圖片很多的網站打開會很慢，一是因為圖片多，需要下載的檔體積就增大，二是每一個圖片下載都會對伺服器有一個請求，增大了瀏覽器與服務端的交互次數，如果能把純色的部分用css來寫，而不因為省事直接切圖， 就會極大提高網站的運行效率，我最早開始學習製作網站時，就想當然的認為怎麼樣能加快製作速度就怎麼來，於是把一個導航條的背景直接切成圖片，後來老闆看到我寫的html代碼，告訴我不能這麼幹，用div定義好寬和高設置背景色和邊框 ，一行代碼就搞定。 如果遇到有漸變色的背景，可以沿著與漸變色相同方向切一個圖元的條紋，用css中background的repeat-x或repeat-y來自動填滿。

巡覽列效果圖

對於有圓角的導航條圖片，可以將兩邊的圓角部分單獨切出來，中間如果有漸變色，也是只切一個圖元的條紋，切出來的三個條紋可以合併到一張圖片裡(上、中、下)，使網頁中使用的時候用css中的positon屬性來定點陣圖片出現的位置。

在切割效果圖的過程中，對於圖片的保存格式也有講究，一般來說，用圖像工具(如photoshop)製作的色彩絢麗的按鈕或圖示一般都存成png格式，而用相機拍攝的風景或人物、物體圖像多用jpg格式保存， gif一般用來存儲含有簡單動畫效果的圖像，另外需要注意一點的是，如果圖片中使用了透明效果，要存儲成png-8的格式，png的其他格式要麼不支援透明，要麼保存時檔要大很多，png-8是"性價比"最高的。

圖示一般用png格式

對於用作背景或襯托效果的顏色較多的圖片，保存圖片時盡可能從清晰度和圖片大小中找到一個平衡，既保證圖片盡可能小又不失真，這點就要憑個人經驗了，因為每個人的標準不同，千萬不能不壓縮圖片直接放上去， 然後靠width和height來進行限制，這樣做是自欺欺人，瀏覽器會先把大圖片下載到本地，然後用樣式強制將它壓縮，顯示不但不會更清楚，反而會失真，曾經我就遇到過有個網站首頁都打開了，唯有一個局部是個空白的方形， 過了好幾秒才載入出來一張圖片，好奇的下載了這張圖片，竟然有2M多...... 這一點不光是首頁切圖，在網站的內容上傳時最好也要養成良好的習慣，特別是新聞的配圖，現在的相機效果越來越好，拍出來的圖片動不動好幾兆，一定要對圖片尺寸進行處理後再上傳，一般處理圖片的寬度為500-600圖元之間， 高度自動等比例即可。

切好圖片的命名也要養成良好的習慣，最好的命名習慣就是見名知意，我見多數網站的圖片使用切圖工具軟體批量切割的，命名很不規範，比如index_01、index_02、index_02_01等有規則但無意義的圖片， 也許你說圖片命名本身的意義並不是很大，因為這個名字只有瀏覽器載入的時候才會用，但是，對於一個擴充性強的網站來說，在進行改版和維護的時候，如果要更換某些網站圖片，就需要一個一個從瀏覽器中右鍵查看圖片位址， 記下每一個長長的沒有規律的圖片名稱，這會讓技術人員十分崩潰(也可能就是你自己)，所以，在保存圖片時就給它寫上有意義的名字是很必要的。

以上是個人總結的在網站切圖時的一些技巧，希望對廣大菜鳥級的或者想從事網站製作行業的朋友一些建議，歡迎學習交流!

本文來自獨立博客HTTP://www.sunfei.net，轉載或引用請注明來源。