楊金花

（西安鐵路職業(yè)技術(shù)學(xué)院陜西西安710014）

網(wǎng)絡(luò)上的所有信息都是以網(wǎng)頁(yè)的形式呈現(xiàn)給瀏覽者的。網(wǎng)頁(yè)制作技術(shù)伴隨著網(wǎng)絡(luò)的快速發(fā)展而快速興起。目前網(wǎng)絡(luò)公司制作網(wǎng)頁(yè)用的主流工具是DREAMWEAVER[1]。在網(wǎng)頁(yè)制作時(shí)，不能將美工設(shè)計(jì)的網(wǎng)頁(yè)效果圖直接插入到網(wǎng)頁(yè)中，而是首先用圖形圖像處理軟件Photoshop、Flash、Firework等提供的切片工具，將美工設(shè)計(jì)的效果圖進(jìn)行切圖，將一幅大圖生成一系列的小切片，導(dǎo)出一個(gè)網(wǎng)頁(yè)文件和多個(gè)圖形文件，分別存儲(chǔ)在網(wǎng)站的站點(diǎn)下，然后在網(wǎng)頁(yè)制作軟件DREAMWEAVER中打開站點(diǎn)。導(dǎo)出的這個(gè)網(wǎng)頁(yè)文件是不能用于網(wǎng)頁(yè)制作[2]。如果使用導(dǎo)出的網(wǎng)頁(yè)文件，或者直接將網(wǎng)頁(yè)效果插入到網(wǎng)頁(yè)中，就會(huì)產(chǎn)生以下問題：一是網(wǎng)頁(yè)的頁(yè)面大小無法控制，由此原因就造成了一個(gè)網(wǎng)站的網(wǎng)頁(yè)大小不能統(tǒng)一；二是網(wǎng)頁(yè)從服務(wù)器下載到瀏覽器上需要的時(shí)間過長(zhǎng)。由于是一張圖，每當(dāng)在網(wǎng)頁(yè)上顯示一個(gè)圖片時(shí)，瀏覽器與網(wǎng)頁(yè)服務(wù)器之間產(chǎn)生一個(gè)request連接，圖片越大，需要從服務(wù)器上下載的信息量就越大，它們之間連接的時(shí)間就長(zhǎng)，進(jìn)而造成一個(gè)網(wǎng)頁(yè)下載到瀏覽器端所需要的時(shí)間過長(zhǎng)[3]。如果把一幅大圖，分割成一系列的小圖片，當(dāng)瀏覽器下載這幅大圖時(shí)，就變成了下載多幅小圖，瀏覽器與服務(wù)器之間就存在多個(gè)request[3]，因此下載的速度就快了；三是網(wǎng)頁(yè)顯示方式應(yīng)該是從上而下，從左而右，而不應(yīng)該頁(yè)面顯示亂跳著顯示；四是頁(yè)面應(yīng)該滿足這樣的要求，即當(dāng)頁(yè)面大小發(fā)生變化時(shí)，頁(yè)面的各部分也應(yīng)該能相對(duì)自由地伸縮，進(jìn)而頁(yè)面不會(huì)發(fā)生錯(cuò)亂或變形等問題。在行業(yè)中規(guī)定，一般是設(shè)定網(wǎng)頁(yè)的寬度，網(wǎng)頁(yè)的高度可以任意[2]。切圖技術(shù)可以解決以上問題。

1 切圖技術(shù)

切圖就是指在網(wǎng)頁(yè)制作過程中，用圖形圖像處理軟件提供的切片工具，將美工設(shè)計(jì)的網(wǎng)頁(yè)效果圖這種大幅圖像，分割成為一系列小的圖像，這些小圖像稱為原大幅圖像的切片。一張圖可以有多種切圖方案，但不是所有的切圖方案都適合后期的網(wǎng)頁(yè)制作的[4]。因此需要在眾多切圖方案中，找出一種適合后期網(wǎng)頁(yè)編程的最佳切圖方案。本文中所說的切圖技術(shù)，就是指的實(shí)現(xiàn)最佳切圖方案的切圖技術(shù)。由于它遵循一些切圖原則和技巧，所以它能夠?qū)崿F(xiàn)最佳切圖方案。

由于切圖時(shí)，圖像的最小單位是像素，矩形對(duì)邊上的像素個(gè)數(shù)應(yīng)該是相同，或者遇到圓角應(yīng)該是銳化的。但是在人工操作時(shí)，可能會(huì)發(fā)生像素個(gè)數(shù)的變化，或者圓角產(chǎn)生頓挫角。因此，在切圖時(shí)，將原圖采用300%以上的放大倍數(shù)切圖[4]。切完整個(gè)大圖后，把一系列的切片全部選中，接著利用軟件中的圖像優(yōu)化工具，即菜單欄中“窗口”下拉菜單“優(yōu)化”命令對(duì)所有的小切片進(jìn)行優(yōu)化來解決以上問題[2]。然后利用文件菜單下的“導(dǎo)出”命令生成HTML網(wǎng)頁(yè)和圖像，最后在網(wǎng)頁(yè)制作軟件DREAMWEAVER中建立站點(diǎn)，將上面導(dǎo)出的網(wǎng)頁(yè)和小圖像都放在網(wǎng)站里。導(dǎo)出的網(wǎng)頁(yè)文件是不能用的。因?yàn)橐粋€(gè)網(wǎng)站的頁(yè)面大小要求統(tǒng)一。因此，接下來的工作是在網(wǎng)頁(yè)制作軟件中制作表格。用分塊的思想來看整個(gè)網(wǎng)頁(yè)的布局，一個(gè)塊就是一個(gè)表格。把網(wǎng)頁(yè)看成是多個(gè)獨(dú)立的表格組成的。將導(dǎo)出的圖片插入到單元格中。日常工作中常用的圖形圖像處理軟件有Photoshop、Flash、Firework等，這些軟件中都有切片工具，但是在網(wǎng)頁(yè)制作時(shí)，圖形圖像處理軟件首選使用Firework[3]。因?yàn)镈REAMWEAVER中只要對(duì)圖像雙擊，系統(tǒng)會(huì)自動(dòng)調(diào)用Firework軟件。

2 切圖原則

一張圖可以有多種相關(guān)的切圖方案，但不是所有的切圖方案都是合適網(wǎng)頁(yè)編程的。所以在切圖技術(shù)中，應(yīng)該保證實(shí)現(xiàn)的是最佳切圖方案，因此切圖技術(shù)中還涉及了切圖的原則和切圖的技巧。

2.1 塊與切片的概念

在本文中所說的一個(gè)塊與切片概念是不同的。塊和切片都是網(wǎng)頁(yè)中的一部分，但是塊指的范圍比切片大。塊中可以包含一個(gè)或多個(gè)切片。塊是指在網(wǎng)頁(yè)上內(nèi)容相關(guān)的區(qū)域范圍。切片是從圖中相關(guān)范圍中分割出來的一小圖形。如果轉(zhuǎn)換成網(wǎng)頁(yè)后，塊對(duì)應(yīng)了網(wǎng)頁(yè)中的表格，而切片對(duì)應(yīng)的是表格中的單元格。

2.2 分塊的原則一：以相關(guān)內(nèi)容為一塊

根據(jù)原圖中相關(guān)內(nèi)容，確定整體的切分策略，即切分要有分塊的思想，把整個(gè)網(wǎng)頁(yè)看成是多個(gè)塊構(gòu)成的，每個(gè)塊就是一個(gè)table，塊中每一個(gè)細(xì)節(jié)內(nèi)容就是table中單元格中內(nèi)容。即將整個(gè)網(wǎng)頁(yè)看成是由多個(gè)table組成的，然后在具體到每個(gè)table，去考慮里面應(yīng)該如何切。必須強(qiáng)調(diào)的是，應(yīng)該把整個(gè)網(wǎng)頁(yè)看成是多個(gè)獨(dú)立的塊構(gòu)成，切片是塊中的內(nèi)容。依據(jù)這種思想去切圖，然后在網(wǎng)頁(yè)制作軟件中，插入多個(gè)表格。塊對(duì)應(yīng)成了網(wǎng)頁(yè)中的表格，切片對(duì)應(yīng)成表格中的單元格內(nèi)容。在切圖時(shí)，同一塊中的內(nèi)容是完整的，也就是說，要保證完整的一部分在一個(gè)塊內(nèi)，例如某區(qū)域的標(biāo)題文字，網(wǎng)頁(yè)的LOGO，網(wǎng)頁(yè)的廣告，網(wǎng)頁(yè)的導(dǎo)航區(qū)等可以分別是一個(gè)獨(dú)立的塊，這樣做的目的是方便日后網(wǎng)頁(yè)編程和修改[5]。

2.3 分塊的原則二：盡量分成大行，平行的切

當(dāng)一個(gè)網(wǎng)頁(yè)的內(nèi)容比較多時(shí)，在顯示網(wǎng)頁(yè)時(shí)是有時(shí)間差的，這時(shí)要求內(nèi)容的顯示是從上而下從左到右逐行顯示網(wǎng)頁(yè)的內(nèi)容，決不允許一個(gè)網(wǎng)頁(yè)上的內(nèi)容雜亂的跳出來。因此，在分塊時(shí)也應(yīng)該貫穿逐行分塊的原則。切圖的時(shí)候要盡量平行的切[4]，也就是說，分成大行，然后再逐行的切[5]。如果一個(gè)網(wǎng)頁(yè)的顯示頁(yè)面是由多個(gè)表格構(gòu)成的，這樣做的目的是當(dāng)客戶端瀏覽一個(gè)網(wǎng)頁(yè)時(shí)，由于它是由多個(gè)表格構(gòu)成的，因此，客戶端與網(wǎng)頁(yè)服務(wù)器會(huì)生成多個(gè)request請(qǐng)求，多個(gè)表格同時(shí)下載信息，因此網(wǎng)頁(yè)下載的速度就會(huì)相對(duì)快。避免出現(xiàn)把網(wǎng)頁(yè)整個(gè)頁(yè)面看成一個(gè)塊，然后塊里又分塊，出現(xiàn)塊中嵌套塊。因?yàn)檫@種結(jié)構(gòu)在由切片轉(zhuǎn)換成網(wǎng)頁(yè)后就出現(xiàn)了表格的嵌套，表格的嵌套影響了客戶端網(wǎng)頁(yè)瀏覽的速度。

2.4 切片的原則：以屬性相同為依據(jù)

一般切圖原則是：屬性相同的區(qū)域適合分為一個(gè)切片。屬性相同主要是指顏色和形狀都沒有變化，或者在X或在Y方向上沒有變化。屬性漸變的區(qū)域適合分為一個(gè)切片，漸變有兩種表現(xiàn)形式顏色漸變，形狀漸變[4]。

3 切圖的技巧

切圖也有技巧。構(gòu)成一張圖片的信息量是非常大的，因此在服務(wù)器中存儲(chǔ)一張圖片時(shí)占的容量也是很大的，同時(shí)從服務(wù)器里下載圖片到客戶端也需要時(shí)間也就相當(dāng)長(zhǎng)。因此，在利用切片轉(zhuǎn)換成網(wǎng)頁(yè)時(shí)，可以利用一些技巧，即減少切片個(gè)數(shù)和減小切片的大小，可以解決以上存在的問題。

3.1 減少切片的個(gè)數(shù)

網(wǎng)頁(yè)上的文字與圖片信息都是存儲(chǔ)在網(wǎng)頁(yè)服務(wù)器上的，一個(gè)切片就是一張小的圖片。根據(jù)顯示的點(diǎn)陣原理可以知道，對(duì)于同一張大圖像來說，切片數(shù)減少，存儲(chǔ)在網(wǎng)頁(yè)服務(wù)器上這張圖的信息量也就減少了，也就是說在網(wǎng)頁(yè)服務(wù)器上占的空間減少。所以當(dāng)切片的背景是單一顏色，切片的文字沒有效果，這時(shí)就可以采取這種特殊的處理方式對(duì)此切片進(jìn)行處理。即可以將單一顏色和文字沒有效果的切片丟掉[4-6]，在DREAMWEAVER中打開站點(diǎn)，插入表格，在對(duì)應(yīng)的單元格中，利用DREAMWEAVER軟件提供的設(shè)置單元格的背景色，直接從鍵盤上輸入文字內(nèi)容[2]。這種做法實(shí)現(xiàn)了切片的效果，同時(shí)可以使網(wǎng)頁(yè)服務(wù)上存儲(chǔ)的切片數(shù)減少了。以“京東商城特賣新”網(wǎng)頁(yè)頁(yè)面為例，在實(shí)驗(yàn)中保證網(wǎng)頁(yè)頁(yè)面效果相同的情況下，采用減少切片個(gè)數(shù)和未采用減少切片個(gè)數(shù)方法，可以得到下面表中的數(shù)據(jù)。從下面表中的數(shù)據(jù)可以看出兩種處理辦法造成的結(jié)果是：未采用減少切片個(gè)數(shù)方法時(shí)，圖片總?cè)萘繛?02 MB，而采用減少切片個(gè)數(shù)方法后，圖片總?cè)萘繛?0.3 MB，明顯前后圖片的總?cè)萘孔兓艽螅档锰岢@種做法。

表1 采用減少切片個(gè)數(shù)和未采用減少切片個(gè)數(shù)的參數(shù)對(duì)照表Tab.1 Reduce section number and not by reducing the number of parameters section table

3.2 減小切片大小

大面積的顏色相同的，或者形狀相同圖塊，可以只從原圖中切出一個(gè)像素的切片，然后在DREAMWEAVER里面，用切片平鋪形成所需要的圖[2，6]。例如，圖1是一個(gè)帶圓角的矩形，這時(shí)可以切出三個(gè)切片，在DREAMWEAVER中插入一個(gè)一行三列的表格，左邊切片是圓角矩形的左圖，右邊切片是圓角矩形的右圖，圓角矩形中間部分是利用中間的小切片在單元格中平鋪形成。以圖1為例，在實(shí)驗(yàn)中未采用減小切片大小和采用減小切片大小方法，可以得到下面表中的數(shù)據(jù)。從下面表中的數(shù)據(jù)可以看出兩種處理辦法造成的結(jié)果是：未采用減少切片個(gè)數(shù)方法時(shí)，圖片總?cè)萘繛?2 KB，而采用減小切片大小方法后，圖片總?cè)萘繛?4.71 KB。

表2 采用減小切片大小和未采用減小切片大小的參數(shù)對(duì)照表Tab.2 By reducing the section size and scale without using parameters reduce the section size

4 結(jié)束語(yǔ)

切圖技術(shù)是把美工設(shè)計(jì)的網(wǎng)頁(yè)效果圖轉(zhuǎn)換成網(wǎng)頁(yè)時(shí)所用的技術(shù)[2，4]，切圖技術(shù)中貫穿了分塊和切片的思想。分塊與網(wǎng)頁(yè)的布局和網(wǎng)頁(yè)的內(nèi)容有關(guān)[7]。對(duì)于同一張網(wǎng)頁(yè)效果圖，經(jīng)過多次的實(shí)驗(yàn)研究表示，不同的切圖方案就會(huì)有不同的網(wǎng)頁(yè)布局。也就是說，不是所有的切圖方案都適合網(wǎng)頁(yè)編程的[8]。本文所指的切圖技術(shù)實(shí)現(xiàn)的是最佳網(wǎng)頁(yè)編程結(jié)構(gòu)。同時(shí)經(jīng)過大量的實(shí)驗(yàn)研究，在保證美工的效果圖轉(zhuǎn)換成網(wǎng)頁(yè)后效果仍不變，采用減少切片個(gè)數(shù)和減小切片大小方法，能使頁(yè)面占的容量減小，這樣加快了瀏覽網(wǎng)頁(yè)的速度，同時(shí)又能實(shí)現(xiàn)控制網(wǎng)頁(yè)頁(yè)面的大小，同時(shí)又保證了頁(yè)面大小發(fā)生變化時(shí)，頁(yè)面的各部分也能相對(duì)自由地伸縮，不會(huì)發(fā)生圖形的走樣。

[1] 李蘭友，楊波，姚楠.網(wǎng)頁(yè)設(shè)計(jì)技術(shù)[M].北京：清華大學(xué)出版社，2013.

[2] 胡崧.Dreamweaver8完美網(wǎng)頁(yè)設(shè)計(jì)[M].北京：中國(guó)青年出版社，2006.

[3] 張翔.Internet網(wǎng)站建設(shè)及網(wǎng)頁(yè)制作[J].攀枝花學(xué)院學(xué)報(bào)，2004（10）：108-111.ZHANG Xiang.Internet website construction and webpage making[J].Journal of Panzhihua University，2004（10）：108-111.

[4] Jc Wang.PS切圖的相關(guān)技巧[EB/OL]http://www.cnblogs.com/opaljc/archive/2012/04/02/2430064.htm l，2012-04-19/2013-08-08.

[5] 李哲.網(wǎng)頁(yè)制作技巧：從切圖到網(wǎng)頁(yè)生成全攻略[EB/OL]http://www.enet.com.cn/article/2005/0513/A20050513414618.shtm l，2005-05-13/2013-07-25.

[6] 孫飛.網(wǎng)站制作的切圖技巧[EB/OL]http://www.admin5.net/thread-5357660-1-1.html，2012-07-15/2013-08-01.

[7] 周琦.關(guān)于網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù)的探討[J].電腦知識(shí)與技術(shù)，2009（5）：7376-7378.ZHOU Qi.On the technology of webpage design and making[J].Computer Knowledge and Technology，2009（5）：7376-7378.

[8] 劉一田，孔震，李萌.Web應(yīng)用中故障檢測(cè)機(jī)制的研究與改進(jìn)[J].陜西電力，2012（11）：66-69.LIU Yi-tian，KONG Zhen，LI Meng.Research and improvement of failure detection mechanism for Web applications[J].Shaanxi Electric Power，2012（11）：66-69.