- 相關(guān)推薦
網(wǎng)頁(yè)設計的規則經(jīng)驗談
隨著(zhù)網(wǎng)頁(yè)設計技術(shù)的發(fā)展，豐富多彩的個(gè)人網(wǎng)頁(yè)越來(lái)越多地出現在網(wǎng)上，但是，網(wǎng)頁(yè)下載速度受到帶寬和通訊線(xiàn)路等因素的制約。網(wǎng)頁(yè)設計者應該知道，客戶(hù)是用昂貴的通訊費用在換取您的信息，除了網(wǎng)頁(yè)的內容要受益于客戶(hù)外，對下載速度的考慮也應該放在網(wǎng)頁(yè)設計規劃時(shí)的重要位置。如果您正在做網(wǎng)頁(yè)，那么下面的一些規則與技巧或許對您有所幫助。
方法/步驟
1
控制頁(yè)面的總規模
----要想把網(wǎng)頁(yè)做得精彩，內容必定要豐富，但不要把所有的內容都放在一個(gè)頁(yè)面上，應控制頁(yè)面的總規模。首先統計頁(yè)面中的每個(gè)對象，如文字、圖像、ActiveX或Java代碼以及HTML文本的大小。用28.8Kbps的Modem粗略地估計一下，按每秒3KB的速度下載整頁(yè)所需的時(shí)間，如果整頁(yè)有5KB的HTML代碼和30KB的圖像，下載該頁(yè)大約需要12秒，這一般能滿(mǎn)足訪(fǎng)問(wèn)者的要求。
2
分解大型表格
----盡可能避免用大型表格，因為瀏覽器必須等待整個(gè)表格的內容全部到達客戶(hù)端，才能顯示這個(gè)表格的內容，而文本或圖像則是一邊下載一邊顯示。如果頁(yè)面中必須使用表格，可將大表格分解成若干小表格，瀏覽器下載后面的表格時(shí)，客戶(hù)可以閱讀已經(jīng)下載完的前一個(gè)表格。用客戶(hù)瀏覽信息的時(shí)間去代替等待下載的時(shí)間，這一技巧在任何時(shí)候都適用。
3
不用圖片來(lái)敘述內容
----為了解決不同的語(yǔ)言平臺上不能正常顯示本國文字的問(wèn)題(比如簡(jiǎn)體中文平臺不能顯示BIG5碼的文字信息)，有些設計者將本國文字的敘述內容用圖像文件來(lái)表示，而不用文本，這樣雖然解決了因內碼不同導致的亂碼問(wèn)題，但卻給頁(yè)面增加了負擔，因為同樣的文字內容，用文本存儲比圖片文件小得多。另外，一些文字性的圖像按鈕也盡量少用，如果必須要用，也應包含Alt解釋文本，這樣即使客戶(hù)關(guān)閉了瀏覽器的圖像顯示功能，也可以明白按鈕的意思。
4
標記圖像的大小
----在HTML代碼中，最好標記出圖像的顯示高度和寬度，在下載頁(yè)面時(shí)，瀏覽器會(huì )按這個(gè)高度和寬度留出圖像的位置，在圖像下載完畢之前及時(shí)地顯示其周?chē)奈淖謨热�。否則，讓瀏覽器按圖像本身的高度和寬度顯示，那么只能等待圖像全部下載完畢后，才顯示圖像及其周?chē)钠渌淖中畔�，無(wú)疑造成客戶(hù)的等待。
5
重用圖像
----如果多次使用同一圖像文件，客戶(hù)端瀏覽器的C e對此有所幫助。瀏覽器將從它的Cache中找出先前下載的那個(gè)圖像文件并調入顯示，而無(wú)需再從Web站點(diǎn)上下載，即使它們不在同一頁(yè)面中，這樣調入圖像就不受帶寬的約束。因此各頁(yè)面的背景圖案可使用同一圖像文件，既統一了頁(yè)面的風(fēng)格，又可節省圖像下載的時(shí)間。如果您再次調入的圖像文件只有尺寸有點(diǎn)變化，那么使用圖像高度和寬度標記(Tags)即可改變圖像的大小。
----順便談一下客戶(hù)端，從技術(shù)上講，增大瀏覽器的Cache，可提高瀏覽的速度，但是，事實(shí)并非如此。有時(shí)，我們清除Cache中的內容后下載的速度則快些。原因是每次下載頁(yè)面文本或圖像時(shí)，瀏覽器總要到Cache中去搜索相應的頁(yè)面或圖像，這樣Cache中的內容越多，搜索的時(shí)間就越長(cháng)，如果比下載更費時(shí)，那么這時(shí)應該及時(shí)清除Cache中的內容。
6
選擇合適的格式
----JPEG格式是網(wǎng)上非常流行的圖像格式，它對于大型圖像的壓縮率特別高，而GIF格式更適合小圖像和藝術(shù)線(xiàn)條一類(lèi)的圖像。對于同樣內容的4KB以下的圖像文件，GIF格式比JPEG格式效果更好，如果不信，您可比較一下兩種格式的小圖像文件的大小和質(zhì)量。
7
減少圖像的數目
----不要使用太多的圖像文件。圖像文件的數量和大小對頁(yè)面是很重要的，因為每下載一個(gè)圖像文件，瀏覽器都將向Web服務(wù)器請求一次連接，所以圖像文件越多意味著(zhù)頁(yè)面下載的時(shí)間越長(cháng)�？梢試L試用一個(gè)圖像代替多個(gè)分散的小圖形(如多個(gè)按鈕)，從而盡可能地減少圖像文件的數目。
8
對大型圖像的處理
----當頁(yè)面必須有大型圖像時(shí)，有兩種處理方案可供參考：其一，建立一個(gè)縮圖圖像文件置于主頁(yè)中，將它鏈接到原始的大型圖像;其二，先創(chuàng )建一個(gè)同原始圖像一樣大小的但降低了色彩和分辨率的圖像文件，使用低源標記，讓該圖像文件首先下載。這種方法的優(yōu)點(diǎn)是使客戶(hù)不需下載大型圖像文件，就能快速地了解到圖像的大概內 容。
9
使用JavaScript
----能用HTML和JavaScript完成的事情，最好不用JavaApplet和ActiveX來(lái)做。很少的JavaScript代碼就可在4.0以上版本的Internet Explorer和Navigator瀏覽器上做出驚人的效果來(lái)，它比同樣大小的Java/ActiveX或動(dòng)態(tài)GIF文件要節省更多的下載時(shí)間。
10
少用背景音樂(lè )
----雖然目前版本的HTML語(yǔ)言具有在網(wǎng)頁(yè)中加入背景音樂(lè )的功能，但奉勸諸位少用為妙，它會(huì )降低您的網(wǎng)頁(yè)下載到客戶(hù)端的速度，除非您正在創(chuàng )建一個(gè)有關(guān)音樂(lè )的網(wǎng)站，否則只會(huì )給人以華而不實(shí)的感覺(jué)。如果非要加入背景音樂(lè )，那么音樂(lè )文件最好使用MIDI格式，而不用WAV格式。
注意事項
總之，網(wǎng)頁(yè)設計者應該對自己的頁(yè)面精雕細刻，盡可能減少每一個(gè)字節，以提高網(wǎng)頁(yè)下載的速度，千萬(wàn)不要用龐大的網(wǎng)頁(yè)去愚弄客戶(hù)的耐性。牢記魯迅先生的名言：浪費別人的時(shí)間，無(wú)異于謀財害命。
【網(wǎng)頁(yè)設計的規則經(jīng)驗談】相關(guān)文章：
網(wǎng)頁(yè)設計總結11-09
網(wǎng)頁(yè)設計報告07-31
怎樣網(wǎng)頁(yè)設計03-30
普通網(wǎng)頁(yè)設計與淘寶網(wǎng)頁(yè)設計有什么不同？07-09