孫小英 黃岡職業(yè)技術(shù)學(xué)院

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

孫小英 黃岡職業(yè)技術(shù)學(xué)院

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

網(wǎng)頁的設(shè)計過程中時間特效技巧的應(yī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)頁的吸引力，就要添加一些技巧，可采用變換圖像的導(dǎo)航條，導(dǎo)航條欄目通過圖片進行制作的，在鼠標滑過相應(yīng)欄目就會變成另一欄目圖片，可通過編輯客戶端腳本完成。或者是運用網(wǎng)頁設(shè)計的工具Dreamweaver MX中導(dǎo)航條命令，通常一個欄目需要設(shè)置四張圖片，圖片數(shù)量少可選擇鼠標經(jīng)過的圖片來進行命令實現(xiàn)變換圖像，這一命令要兩張圖像。

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

3 結(jié)語

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

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

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

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

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

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

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

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