試論網(wǎng)頁設計的基本規(guī)范和常用技巧

孫小英 黃岡職業(yè)技術學院

試論網(wǎng)頁設計的基本規(guī)范和常用技巧

孫小英 黃岡職業(yè)技術學院

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

網(wǎng)頁設計 規(guī)范 設計技巧

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

1 網(wǎng)頁設計的基本規(guī)范和注意事項

1.1 網(wǎng)頁設計的基本規(guī)范

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

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

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

1.2 網(wǎng)頁設計的注意事項

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

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

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

2 網(wǎng)頁設計的常用技巧

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

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

網(wǎng)頁的設計過程中時間特效技巧的應用比較重要，這是比較常用的技巧，動態(tài)時間顯示以及倒計時等，可采用常用的腳本程序//將此代碼放入出現(xiàn)動態(tài)時間的地方即可，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;這樣就能完成時間的特效，增加網(wǎng)頁的功能。

為了能夠增加網(wǎng)頁的吸引力，就要添加一些技巧，可采用變換圖像的導航條，導航條欄目通過圖片進行制作的，在鼠標滑過相應欄目就會變成另一欄目圖片，可通過編輯客戶端腳本完成?；蛘呤沁\用網(wǎng)頁設計的工具Dreamweaver MX中導航條命令，通常一個欄目需要設置四張圖片，圖片數(shù)量少可選擇鼠標經(jīng)過的圖片來進行命令實現(xiàn)變換圖像，這一命令要兩張圖像。

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

3 結語

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

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

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

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

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

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

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

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