2021-07-04 分類: 做網(wǎng)站
設(shè)計(jì)效果圖–》切圖+制作靜態(tài)html模板–》嵌套至CMS,這些是一般的網(wǎng)站制作步驟流程,不過切圖雖然是最簡單的那一步,但其中也會(huì)有很多技巧的,根據(jù)以往的經(jīng)驗(yàn)我總結(jié)了以下幾點(diǎn):
總體上,把握一個(gè)原則,能用css寫的,堅(jiān)決不要用圖片。想必大家都知道,首頁如果放有很多圖片的話,那么網(wǎng)站打開的速度就會(huì)很慢,因?yàn)閳D片多,需要下載的文件體積就增大,還有每一個(gè)圖片下載都會(huì)對(duì)服務(wù)器有一個(gè)請(qǐng)求的,增大了瀏覽器與服務(wù)端的交互次數(shù),如果能把純色的部分用css來寫,而不因?yàn)槭∈轮苯忧袌D,就會(huì)極大提高網(wǎng)站的運(yùn)行效率,我最早開始學(xué)習(xí)制作網(wǎng)站時(shí),就想當(dāng)然的認(rèn)為怎么樣能加快制作速度就怎么來,于是把一個(gè)導(dǎo)航條的背景直接切成圖片,后來老板看到我寫的html代碼,告訴我不能這么干,用div定義好寬和高設(shè)置背景色和邊框,一行代碼就搞定。如果遇到有漸變色的背景,可以沿著與漸變色相同方向切一個(gè)像素的條紋,用css中background的repeat-x或repeat-y來自動(dòng)填充。
對(duì)于有圓角的導(dǎo)航條圖片,可以將兩邊的圓角部分單獨(dú)切出來,中間如果有漸變色,也是只切一個(gè)像素的條紋,切出來的三個(gè)條紋可以合并到一張圖片里(上、中、下),使網(wǎng)頁中使用的時(shí)候用css中的positon屬性來定位圖片出現(xiàn)的位置。
其實(shí)呢,切割效果圖的過程對(duì)于圖片的保存格式也是很有講究的,一般來講,用圖像工具(如photoshop)制作的色彩絢麗的按鈕或圖標(biāo)一般都存成png格式,而用相機(jī)拍攝的風(fēng)景或人物、物體圖像多用jpg格式保存,gif一般用來存儲(chǔ)含有簡單動(dòng)畫效果的圖像,另外需要注意一點(diǎn)的是,如果圖片中使用了透明效果,要存儲(chǔ)成png-8的格式,png的其他格式要么不支持透明,要么保存時(shí)文件要大很多,png-8是”性價(jià)比”高的。
其實(shí)有很多命名圖片都是有規(guī)則而無意義的,如,index_02_01、 index_01、index_02這些,不要覺得圖片命名的重要性不大,一定要養(yǎng)成一個(gè)良好的習(xí)慣,把切好圖片的命名也看重一些,最好做到見名知意。
在進(jìn)行網(wǎng)站改版和網(wǎng)站維護(hù)的時(shí)候,如果要更換某些網(wǎng)站圖片,就需要一個(gè)一個(gè)從瀏覽器中右鍵查看圖片地址,記下每一個(gè)長長的沒有規(guī)律的圖片名稱,這會(huì)讓技術(shù)人員十分崩潰(也可能就是你自己),所以,在保存圖片時(shí)就給它寫上有意義的名字是很必要的。
以上是個(gè)人總結(jié)的在做網(wǎng)站時(shí)的一些切圖技巧,希望對(duì)廣大菜鳥級(jí)的朋友給點(diǎn)怎么樣做網(wǎng)站的一些建議,或者是對(duì)于想從事網(wǎng)頁設(shè)計(jì)的朋友的一些提示吧,歡迎朋友們來相互學(xué)習(xí)交流!
文章題目:做網(wǎng)站制作的時(shí)候切片排版有哪些技巧
URL網(wǎng)址:http://www.rwnh.cn/news/118920.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站制作、做網(wǎng)站等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容