試論網頁設計的基本規范和常用技巧

孫小英 黃岡職業技術學院

試論網頁設計的基本規范和常用技巧

孫小英 黃岡職業技術學院

網絡技術的迅速發展，帶動了諸多產業的進步，網頁的科學設計對信息的有效傳播有著積極作用，在進行網頁設計的時候就要充分重視技巧的運用，并要遵循相應的規范，如此才能提高網頁設計的質量。本文主要就網頁設計的基本規范以及常用技巧進行詳細分析，希望能借助此次的理論研究，有助于實際網頁設計工作的順利開展。

網頁設計 規范 設計技巧

網絡時代的到來人們對網絡信息的瀏覽量也大大增加，網頁設計是平面設計和信息技術的結合，通過網頁的科學設計能帶給瀏覽者良好的印象，能促進信息瀏覽的效率。在實際的網頁設計中涉及到的內容比較多，這就需要對每個設計環節的細節質量控制加強重視，保障網頁設計的科學。

1 網頁設計的基本規范和注意事項

1.1 網頁設計的基本規范

網頁設計的內容比較多，對每個設計內容都要保持規范。對于網頁的基本屬性設計過程中就要按照規范進行設計。網頁設計總寬度無固定局限，可參考常規尺寸。在當前的網絡技術的迅速發展下，傳統網頁寬度已不再適應當前人們對頁面的要求，當前比較普遍的是采用1024×768，在進行網頁的寬度設計中，就要按照這一尺寸或者是更大的尺寸進行設計，當前常用網頁寬度為960像素。

網頁的設計中對于基本模塊的設計也要按照相應的規范進行設計。如對于標準導航和搜索區的規范設計，就要強調文字鏈接部分，導航文字鏈接內容在背景區要垂直居中，文字鏈接內容上下部能適當的留有相應空白，這樣從整體的視覺效果上看就比較的標準。網頁導航設計中就要考慮服務器貸款成本以及用戶體驗，可使用文字鏈接進行制作導航。門戶站點頁面搜索區分成選項框以及文本輸入框和搜索按鈕，在將其放置一起的時候就要將間隙相等設計，通常設置6像素。而對于標準底部的規范設計，主要是注明版權和附加內容的，要對頁面平衡感進行檢查，底部文字上下部進行留白。內容區的規范設計中，就通常包含欄目標題以及文字內容和模塊框，四邊要將留白相等設計。在文字的規范設計過程中，就要將頁面的字體以及顏色等和實際網頁的內容相結合選擇。再有就是對圖片屬性規范設計方面，注意圖片的形式和大小，不同的圖片形式在比例上是不同的，對于焦點圖尺寸可自定義。

對于網頁的版塊布局設計過程中，也要遵循相應的規范，主要的網頁布局有三個版塊，也就是頂部版塊和內容版塊以及底部版塊。對于網頁版塊間隙的設計也是有著嚴格標準的，例如在MSN中所使用的橫向間隙是10像素，縱向間隙8像素。要注重統一化，將間隙的像素能保持一致，這樣才能保證網頁的頁面更加的規范。進行頂部和底部間隙的設計方面。就要比內容版塊間間隙大，從而能從整體上顯示出明晰化。例如在網頁總寬度是936像素的，在內容區域就要是930像素，能夠留有相應的像素留白，這一留白的運用就要得以重視，尤其網頁左右側距離屏幕顯示邊緣要留有距離，保持整體的頁面規整。

1.2 網頁設計的注意事項

網頁設計過程中要注意幾個重要的事項，對網頁導航設計務必要保證清晰，將超鏈接清晰的標識出。如導航性質設置以及圖像按鈕等，都要保證其清晰，讓瀏覽者能一目了然。對于連接文本顏色的選擇按照約定俗成的色彩進行設計，沒有訪問的顯示藍色，點擊過的選紫色或是栗色。要想對網站導航的設計進行優化，就要將字體以及字號進行優化設計，只有保證文本鏈接和頁面的其他文字進行明顯區分。另外，對于網頁的頁面大小設計要遵循相應的原則，對網頁瀏覽的速度要能保證，注重對網頁文件大小的合理控制。首頁不能超過35K內容頁不超過50K。對于特殊的網頁設計的時候，就要提示下載時間方便瀏覽者取舍。根據相關的研究發現，網頁的主體在十五秒內不能顯示就會影響讀者對網站的興趣度。

網頁設計中的色彩處理環節要加強重視，注重遵循相應的原則。色彩對人的心理會產生影響，也是人的視覺比較敏感的要素，色彩處理不好就會影響瀏覽者的心情。在進行色彩設計方面就要按照總體協調和局部對比的原則設計，小范圍地方可通過色彩強烈對比。對于色彩的運用就要能結合實際網頁的內容來選擇應用，采用不同的色調。色彩有著象征性，也有著民族性，由于環境和文化等因素的不同，人們對色彩的喜好也有著不同。要充分了解色彩的特性，結合網頁的主題進行選擇，就能提高網頁的文化品位。對于網頁的底色的運用就要注重高調和低調的應用，底色通常比較深，文字顏色要淺，這樣能夠有明度變化。

網頁設計的時候要注意將風格進行準確定位和保證風格的統一。明確網頁設計的目的，按照目的進行設計。任何網頁的設計都有著自己的風格，這就需要在風格定位方面加以重視。將風格進行統一，網頁上的圖像以及文字和動畫等，都要能統一風格，這樣才能帶給人舒適順暢的瀏覽感覺。如網頁每個頁面的文字顏色不同，或是部分網頁圖片使用超鏈接，另一部分網頁圖片不用超鏈接，這樣就比較容易出現閱讀障礙的問題，所以在風格上要進行統一化。

2 網頁設計的常用技巧

網頁的設計過程中有諸多的小技巧可以運用，這是提高網頁設計質量的重要方法。對于優秀網頁設計人員來說，能夠選擇正確的格式進行優化網頁的圖片，保障圖片的清晰度，并且下載的體積比較小，這樣就能方便用戶的瀏覽。在網頁設計中運用到圖片的時候，就要充分重視，對于單色的圖片就可將其保存成PNG或者是GIF的格式。對于圖片是連續性色調，就要將其保存或轉化為JPG的格式，這樣就能方便用戶瀏覽，并且在體積上比較小。

網頁的設計中提高設計的質量就要從各種小細節著手，優秀網頁設計人員設計的網頁整體上是比較規整的，看上去也能給人賞心悅目的感覺，對用戶的體驗比較重視。也就是要保證網頁的設計可用性強的特征體現，避免用戶在瀏覽網頁的時候出現混淆以及復雜的現象。如果設計中使用過多網站功能以及組件，在進行瀏覽的時候就比較分散用戶的注意力，很難達到聚焦目光的效果。在具體的網頁設計的時候，要和用戶瀏覽習慣相結合。對于設計比較特殊的網頁，就要避免出現模糊難懂的情況出現，網頁的設計還是要以簡潔為主。

網頁的設計過程中時間特效技巧的應用比較重要，這是比較常用的技巧，動態時間顯示以及倒計時等，可采用常用的腳本程序//將此代碼放入出現動態時間的地方即可，lt;font size=”2”id=”Dtime” color=”#009900”gt;lt;/fontgt;

lt;scriptgt;setInterval(“Dtime．innerHTML=new Date()．toLocaleString()+’ 星期 ‘+’ 日一二三四五六 ‘．charAt(new Date()．getDay());”,1000);

lt;/scriptgt;這樣就能完成時間的特效，增加網頁的功能。

為了能夠增加網頁的吸引力，就要添加一些技巧，可采用變換圖像的導航條，導航條欄目通過圖片進行制作的，在鼠標滑過相應欄目就會變成另一欄目圖片，可通過編輯客戶端腳本完成。或者是運用網頁設計的工具Dreamweaver MX中導航條命令，通常一個欄目需要設置四張圖片，圖片數量少可選擇鼠標經過的圖片來進行命令實現變換圖像，這一命令要兩張圖像。

對于文件和文件夾的命名方面，文件夾命名通常是使用英文，長度在二十字符內，使用小寫字母命名。常見的文件夾命名有,uscrfilcs,temp，style,scripts等。文件夾使用按名稱排列命令的時候，同一大類文件排列一起。

3 結語

綜上所述，網頁的設計過程中需要按照規范進行設計，對于設計中所運用到的技巧也要選擇性的使用，總體上要和網頁的主題相結合，保證網頁設計的風格統一。通過此次對網頁設計的相關理論研究分析，希望能為實際的網頁設計提供有益思路，促進網頁設計的整體質量水平提高。

[1]小甜新.如何留住精彩網頁[J].電腦愛好者.2016(18)

[2]秋思.收藏一個網頁只需一個文件[J].電腦愛好者(普及版).2015(05)

[3]唐永明.淺議網頁設計與制作[J].科技信息.2016(20)

[4]花的神明.追尋網頁上閃動的音樂[J].電腦迷.2015(12)

[5]啟動.淺談網頁文件引用[J].網絡與信息.2015(05)

[6]小叢.教你輕松抓取無法滾屏的網頁[J].計算機與網絡.2016(08)

孫小英（1973—），女，黃岡職業技術學院，本科，副教授，研究方向：計算機網絡專業教學和研究。