每個網站的設計者都希望自己所設計的網頁能讓瀏覽者一見傾心,為實現這一目標,在進行網頁設計時設計者常有追求盡善盡美的傾向。因此將網頁設計得異常復雜,并使用大量的圖片和動畫,以期對瀏覽者產生感染力。這雖然無可非議,但網站設計的最終目的不是孤芳自賞,而是以滿足瀏覽者訪問需求為最終目的。對瀏覽者而言,他們希望網站提供精美內容的同時,首先必須保證一定的訪問速度,否則即使網站內容精彩絕倫,但卻千呼萬喚始出來,同樣會使瀏覽者因無法忍受漫長的等待而棄之。

就目前國內網絡現狀來看,網絡帶寬仍是瓶頸,擁塞現象非常嚴重。低帶寬依然是網站設計時必須正視的現實(除非您所設計的網站只在單位內部的局域網中使用),因此如何使自己的網站適應低帶寬網絡環境成為不少網站設計者面臨的主要挑戰。從技術角度而言,若想使自己的網站在低帶寬環境下同樣有出色的表現,無外乎是在不影響網站功能的前提下,盡量減少帶寬消耗因素,讓瀏覽者能夠得到較為理想的訪問速度。

1.減小圖片尺寸

圖片可能是扼殺您的網頁的兇手!精美的圖片有時自然可以成為網站設計的畫龍點睛之筆,但更多時候卻耗蝕了瀏覽者有限的帶寬。一幅圖片所占用的空間通常需要成千上萬字節,您在制作網頁時可能感覺不到什么,但是對于瀏覽者來說就顯得太大了。您到網上看看就會發現,大塊的等待時間是由圖片下載造成的。網頁的瀏覽者往往是沒有耐心等待的,您的圖片再精美,但如果對于網絡速度來說過于龐大,則大多數瀏覽者在沒有看到您的圖片時就已經轉向別處。因此在非必要的情況下,盡量減少圖片的使用是提高網站訪問速度的要訣之一。

如果必須使用圖片,則應設法將圖片的尺寸減到最小。圖片尺寸除了受畫面大小的影響外,色彩數的多少也是關鍵因素,因而減少圖片中的色彩數也可以得到較為顯著的瘦身效果。在不影響網站設計初衷的前提下,將圖片色彩從真彩調整為256色或16色就可以讓多數體態臃腫的圖片苗條不少,而這種色彩調整一般通過常用的圖片編輯軟件就可以輕松搞定。

另外,在圖片使用較多的情況下,將圖片分割成小塊,然后再進行組合也不失為一種行之有效的瘦身途徑。您可以將網頁上的圖片一幅幅進行比較,找出相同的部分,將其分割出來,這樣瀏覽者在訪問您的網頁時,相同部分的圖片只要下載一次即可了,如果使用巧妙,可以大大節省下載時間。

2.盡量不用圖片來代替文字

現在,有很多網頁制作者喜歡用圖片來代替文字,這樣雖然可以美化網頁的版面,但卻帶來網絡帶寬資源的耗蝕。因此,能使用文字的地方盡量不用圖片,這幾乎成了設計網頁的基本準則。

對于那些需要強調的內容,或需要營造某種特殊的視覺效果以引起瀏嵬者的興趣時,可以通過特殊字摹等顯示技術加以實現。這一技術的缺點是在不同類型的瀏覽器中的效果可能會有所不同,設計時需要進行相關的測試,但它卻是加快網站訪問速度行之有效的途徑。

3.少用動畫

動畫是加強網頁視覺效果和吸引注意力的有效手段。活潑有趣、動感十足的畫面有時可以收到出奇制勝效果,但您必須意識到,動畫對網絡帶寬的要求更為苛刻,濫用動畫的結果可能會導致許多瀏覽者對其望而生畏。如果感覺網站上的動畫必不可少,則應通過一定的動畫編輯技術盡量壓縮動畫尺寸,以免彩響訪問速度。如果動畫與訪問速度出現較大的沖突時,對其忍痛割愛當為明智之舉。例如,將按鈕的圖片從動態改為靜態就可以明顯地加快訪問速度。

4.表格使用技巧

表格在網頁制作中幾乎是必不可少的,網頁的排版大部分都是通過表格來實現的。但在使用表格時需要注意的是,設計者對表格的不同處理方式將會給網頁的加載速度帶來截然不同的后果。

將整個網頁放置于一個單一表格內并將表格嵌套使用,會導致網頁無法在瀏覽者的瀏覽器上逐行顯示,而只有等到整個表格下載完畢,且瀏覽器根據計算確定不同表格元素的位置后才能一次性顯示。這會讓瀏覽者因等待時間過長而轉向其他網站,適當地分割表格并減少表格嵌套層數可使瀏覽器在網頁全部下載完之前就能夠顯示部分內容,不致出現長。時間的網頁顯示停滯現象。另外,給出固定的表格單元格尺寸,則可以在需要較長時間下載的內容前先顯示文字等內容。

5.兼容性

除了上面提到的訪問速度外,網頁的兼容性也是非常重要的。設計網頁時必須考慮到瀏覽者所使用的瀏覽器是各式各樣的,可能有人還在使用早期的瀏覽器。雖然一些新技術可以讓您的網頁大放光彩,但如果您不想失去這部分瀏覽者的話,就不要使用那些新瀏覽器才增加的功能。

文章名稱：制作網頁的注意事項(一)
網站地址：http://www.2m8n56k.cn/news/64736.html

成都網站建設公司_創新互聯，為您提供企業建站、網站設計公司、網站導航、網站策劃、微信公眾號、App設計

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯