來源:無錫網(wǎng)站建設阿凡達 瀏覽次數(shù):291 發(fā)表日期:2023-06-29
優(yōu)秀網(wǎng)站制作,切圖技巧不可少。通常網(wǎng)站制作一般步驟可分為:設計效果圖,切圖+制作靜態(tài)模板嵌套至CMS,其中,切圖雖然是很簡單的一個步驟,但其中也有很多技巧。
總體上,把握一個原則,能用css寫的,堅決不要用圖片。經(jīng)驗告訴我們,首頁圖片很多的網(wǎng)站打開會很慢,一是因為圖片多,需要下載的文件體積就增大,二是每一個圖片下載都會對服務器有一個請求,增大了瀏覽器與服務端的交互次數(shù),如果能把純色的部分用css來寫,而不因為省事直接切圖,就會*大提高網(wǎng)站的運行效率,我*早開始學習制作網(wǎng)站時,就想當然的認為怎么樣能加快制作速度就怎么來,于是把一個導航條的背景直接切成圖片,后來老板看到我寫的html代碼,告訴我不能這么干,用div定義好寬和高設置背景色和邊框,一行代碼就搞定。如果遇到有漸變色的背景,可以沿著與漸變色相同方向切一個像素的條紋,用css中background的repeat-x或repeat-y來自動填充。
網(wǎng)站設計-----導航欄效果圖
對于有圓角的導航條圖片,可以將兩邊的圓角部分單獨切出來,中間如果有漸變色,也是只切一個像素的條紋,切出來的三個條紋可以合并到一張圖片里(上、中、下),使網(wǎng)頁中使用的時候用css中的positon屬性來定位圖片出現(xiàn)的位置。
在切割效果圖的過程中,對于圖片的保存格式也有講究,一般來說,用圖像工具(如photoshop)制作的色彩絢麗的按鈕或圖標一般都存成png格式,而用相機拍攝的風景或人物、物體圖像多用jpg格式保存,gif一般用來存儲含有簡單動畫效果的圖像,另外需要注意一點的是,如果圖片中使用了透明效果,要存儲成png-的格式,png的其他格式要么不支持透明,要么保存時文件要大很多,png-是”性價比”*高的。
網(wǎng)站設計-----一般用png格式
對于用作背景或襯托效果的顏色較多的圖片,保存圖片時盡可能從清晰度和圖片大小中找到一個平衡,既保證圖片盡可能小又不失真,這點就要憑個人經(jīng)驗了,因為每個人的標準不同,千萬不能不壓縮圖片直接放上去,然后靠idth和height來進行限制,這樣做是自欺欺人,瀏覽器會先把大圖片下載到本地,然后用樣式強制將它壓縮,顯示不但不會更清楚,反而會失真,曾經(jīng)我就遇到過有個網(wǎng)站首頁都打開了,*有一個局部是個空白的方形,過了好幾秒才加載出來一張圖片,好奇的下載了這張圖片,竟然有M多……這一點不光是首頁切圖,在網(wǎng)站的內(nèi)容上傳時*好也要養(yǎng)成良好的習慣,特別是新聞的配圖,現(xiàn)在的相機效果越來越好,拍出來的圖片動不動好幾兆,一定要對圖片尺寸進行處理后再上傳,一般處理圖片的寬度為-像素之間,高度自動等比例即可。
切好圖片命名也要養(yǎng)成良好的習慣,*好的命名習慣就是見名知意,我見多數(shù)網(wǎng)站的圖片使用切圖工具軟件批量切割的,命名很不規(guī)范,比如index_、index_、index__等有規(guī)則但無意義的圖片,也許你說圖片命名本身的意義并不是很大,因為這個名字只有瀏覽器加載的時候才會用,但是,對于一個擴展性強的網(wǎng)站來說,在進行改版和維護的時候,如果要更換某些網(wǎng)站圖片,就需要一個一個從瀏覽器中右鍵查看圖片地址,記下每一個長長的沒有規(guī)律的圖片名稱,這會讓技術人員十分崩潰。所以,在保存圖片時就給它寫上有意義的名字是很必要的。
技術熱線
400-189-1319
添加微信