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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3 結(jié)語

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

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

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

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

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

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

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

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