做網(wǎng)頁(yè)的第一步就是從美工那邊獲取到網(wǎng)頁(yè)的模板（*.PSD文件），在網(wǎng)頁(yè)頁(yè)面的制作之前，我們需要對(duì)其進(jìn)行切片處理。
為什么要切片？可能很多人一開始都會(huì)有這樣的疑問(wèn)，網(wǎng)頁(yè)上的圖片最后要呈現(xiàn)給用戶的就是一個(gè)完整的樣子，為什么要浪費(fèi)大量時(shí)間和精力，又承擔(dān)著排版布局極容易出錯(cuò)的風(fēng)險(xiǎn)來(lái)做這項(xiàng)“無(wú)用功”？最主要的問(wèn)題是效率。大家都知道，頁(yè)面的呈現(xiàn)過(guò)程是先有客戶端（用戶瀏覽器輸入U(xiǎn)RL）向服務(wù)器遞交瀏覽申請(qǐng)，然后服務(wù)器獲取URL相對(duì)應(yīng)的資源在通過(guò)網(wǎng)絡(luò)返還給客戶端。這中間就存在了一個(gè)下載資源的過(guò)程。而整張圖片或者大塊圖片的下載很顯然可能導(dǎo)致下載過(guò)程中頁(yè)面出現(xiàn)難看的條痕等影響界面友好度的問(wèn)題，而小圖片的下載效率在多年來(lái)的測(cè)試中已經(jīng)被所有網(wǎng)頁(yè)設(shè)計(jì)者認(rèn)可。除此之外，切片后的頁(yè)面能更好的對(duì)頁(yè)面元素進(jìn)行定位，你能想象用類似坐標(biāo)定位的方法在一整張圖片上面去定位每一個(gè)頁(yè)面元素的位置是一個(gè)什么樣的工程嗎？
切片時(shí)很重要的環(huán)節(jié)。切片的時(shí)候是一個(gè)意識(shí)上對(duì)整個(gè)頁(yè)面進(jìn)行布局分析的過(guò)程，同樣的一張模板，不同的人會(huì)有不同的切法，理由很簡(jiǎn)單，因?yàn)槊總€(gè)人都有自己的布局習(xí)慣，有些人習(xí)慣table布局，有些人則擅長(zhǎng)div+css，也有人習(xí)慣介于兩者之間的布局方式（關(guān)于table和div+css的對(duì)比，暫且放下不談）。由于兩者對(duì)布局設(shè)計(jì)思想的要求完全不同，切片時(shí)就可能出現(xiàn)很多細(xì)節(jié)上的不同。由此也就能推斷，網(wǎng)頁(yè)的切片會(huì)影響整個(gè)頁(yè)面的排布，只有在切片階段仔細(xì)考慮到后期排布的問(wèn)題，才能使后面的工作有條不紊的展開。
具體切片的方法，我在這里只是說(shuō)一下我一直以來(lái)用的方法。
1.拿到一個(gè)模板，先盡可能用最簡(jiǎn)單的一個(gè)table把它的各個(gè)板塊劃開，然后直接用PS生成一個(gè)頁(yè)面1。
2.用DW打開生成的HTML，把圖片全部轉(zhuǎn)為背景（有技巧可以偷懶的哦，別傻傻的一個(gè)一個(gè)去換啊）
3.在用PS打開相應(yīng)的一小塊一小塊的gif圖片進(jìn)行最終的切片并生成一個(gè)個(gè)html，復(fù)制里面的table放置到頁(yè)面1相應(yīng)的td中就能達(dá)到最終拼完頁(yè)面的效果了。

可能整個(gè)過(guò)程看來(lái)簡(jiǎn)單，但具體的操作還是需要多聯(lián)系才能真正體會(huì)到拼圖的技巧。希望這篇文章能對(duì)大家學(xué)習(xí)切片拼頁(yè)面有所幫助。也希望有更有效直接的方法能說(shuō)出來(lái)哦。

名稱欄目：做網(wǎng)站編程的初期準(zhǔn)備工作
地址分享：http://jinyejixie.com/news9/114659.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xià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í)需注明來(lái)源： 創(chuàng)新互聯(lián)