網(wǎng)頁(yè)制作的方法與技巧研究

謝 宜

（昆明藝術(shù)職業(yè)學(xué)院 傳媒學(xué)院，云南 昆明 650228）

1 網(wǎng)頁(yè)制作流程

（1）制作步驟。對(duì)于網(wǎng)站來(lái)說(shuō)，內(nèi)容和圖片缺一不可，而進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)就是讓整個(gè)網(wǎng)站的頁(yè)面風(fēng)格以及色彩、整體布局和網(wǎng)站內(nèi)容進(jìn)行全面創(chuàng)作。對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)，在設(shè)計(jì)時(shí)需要考慮的因素很多，如排版變化、文字安排、圖片格式等，同時(shí)還要關(guān)注網(wǎng)站的主體選擇，瀏覽者劃分以及對(duì)網(wǎng)站的促銷(xiāo)等等。①草稿。在進(jìn)行網(wǎng)頁(yè)草稿設(shè)計(jì)時(shí)，可以打開(kāi)思路，天馬行空。在這個(gè)階段，一切都可以按照自己的設(shè)想來(lái)進(jìn)行設(shè)計(jì)，進(jìn)行網(wǎng)頁(yè)草稿創(chuàng)造可以借助工具PHOTOSHOP來(lái)完成。②布局。完成草稿后，再把需要的功能模塊放到頁(yè)面上。此時(shí)的設(shè)計(jì)就需要按照一定的原則來(lái)進(jìn)行。網(wǎng)站標(biāo)志、導(dǎo)航條和廣告條的設(shè)計(jì)都是有要求和規(guī)范的，對(duì)模塊內(nèi)容的安置也是要規(guī)定執(zhí)行的。③定稿。在網(wǎng)頁(yè)設(shè)計(jì)完成時(shí)，要把簡(jiǎn)略化的東西細(xì)致化，這樣，才算完成了全部設(shè)計(jì)工作。網(wǎng)頁(yè)制作需要看設(shè)計(jì)的網(wǎng)頁(yè)是否表達(dá)了客戶(hù)的意思。當(dāng)?shù)玫娇蛻?hù)同意后，再進(jìn)行后面的設(shè)計(jì)。整個(gè)網(wǎng)頁(yè)設(shè)計(jì)完成后，需要經(jīng)過(guò)客戶(hù)的首肯之后才能由程序員完成最后的程序設(shè)計(jì)。

（2）常用參數(shù)、圖片質(zhì)量與下載速度。網(wǎng)絡(luò)傳播是因?yàn)楦鞣N限制而使得速度快慢不一，所以在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)，要充分考慮網(wǎng)速和圖片大小之間的關(guān)系，太大的網(wǎng)頁(yè)在低網(wǎng)速計(jì)算機(jī)前的速度是驚人地慢，這樣會(huì)使瀏覽者沒(méi)有觀賞的耐心。①分辨率。圖片的分辨率對(duì)文件大小和下載速度有很大的關(guān)系，目前。大多數(shù)顯示器使用的是1024×768的分辨率，因此在設(shè)計(jì)網(wǎng)頁(yè)時(shí)1024×768就是一道不可逾越的紅線，如果分辨率過(guò)高，不但影響網(wǎng)頁(yè)圖片觀賞質(zhì)量，還會(huì)影響下載的速度。②位圖。位圖也就是圖像，在設(shè)計(jì)圖像時(shí)，要考慮亮度和色彩會(huì)因?yàn)榉直媛实年P(guān)系而出現(xiàn)失真，有時(shí)還會(huì)出現(xiàn)大面積的模糊。③矢量。矢量圖是面向?qū)ο竦膱D像或繪圖圖像，在描述圖像時(shí)，常用粗線段來(lái)表示，表現(xiàn)圖形特征簡(jiǎn)單明了，而且在對(duì)圖形進(jìn)行放大處理時(shí)不會(huì)失真。④圖片格式。電腦圖片的格式有GIF、JPEG、PNG三種格式。其中，GIF是圖形交換格式，在顏色限定上是256色，因此，在設(shè)計(jì)對(duì)顏色配置要求高的圖片來(lái)說(shuō)，GIF格式就不夠用了。JPEG格式突破了顏色的限制，但其缺點(diǎn)是有時(shí)會(huì)存在明顯的壓縮痕跡；而選擇PNG格式的圖片則避免了GIF和JPEG的缺點(diǎn)。

2 網(wǎng)頁(yè)布局

（1）兩欄式結(jié)構(gòu)。這種結(jié)構(gòu)是最簡(jiǎn)單的設(shè)計(jì)，首先在醒目的位置設(shè)計(jì)網(wǎng)站標(biāo)識(shí)，然后再放置廣告條；再就是在下面風(fēng)味左右兩欄，一邊是導(dǎo)航或者欄目信息，一邊是具體的欄目?jī)?nèi)容。

（2）三欄式結(jié)構(gòu)。這是最普遍的設(shè)計(jì)結(jié)構(gòu)，廣告條在最顯眼的頂端位置，網(wǎng)頁(yè)的內(nèi)容兩旁也是放置廣告的地方。這樣的設(shè)計(jì)不需要過(guò)多的數(shù)據(jù)構(gòu)建，是很多網(wǎng)站喜歡采用的。

（3）“三”型結(jié)構(gòu)。這種結(jié)構(gòu)基本在國(guó)外網(wǎng)站都很普遍，好處在于簡(jiǎn)單清晰，導(dǎo)航部分在左邊，相對(duì)的就是內(nèi)容顯示。這種網(wǎng)頁(yè)設(shè)計(jì)結(jié)構(gòu)就是清晰，一目了然。而且在設(shè)計(jì)上采用Flash技術(shù)，讓人過(guò)目不忘，視覺(jué)效果明顯。

3 網(wǎng)頁(yè)色彩的要求

不同的色彩給人的感覺(jué)是不一樣的，所以，設(shè)計(jì)者在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，要巧用色彩對(duì)觀賞者造成的影響，使他們對(duì)網(wǎng)站有興趣。一般來(lái)說(shuō)，設(shè)計(jì)游戲網(wǎng)頁(yè)時(shí)要用紅色來(lái)刺激視覺(jué)；設(shè)計(jì)新聞網(wǎng)站時(shí)，適用黑色和深藍(lán)色較好；在為網(wǎng)購(gòu)網(wǎng)站設(shè)計(jì)網(wǎng)頁(yè)時(shí)，色彩不能過(guò)于艷麗；因此，在色彩選擇上要偏重于柔和。在進(jìn)行網(wǎng)頁(yè)色彩搭配時(shí)，要盡量避免產(chǎn)生單調(diào)的感覺(jué)。

4 網(wǎng)頁(yè)設(shè)計(jì)的細(xì)節(jié)把握

（1）顏色。在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)，顏色的使用是最關(guān)鍵的。一般來(lái)說(shuō)，網(wǎng)頁(yè)都會(huì)選用一種主色調(diào)，然后圍繞著主色調(diào)再挑選配色。這樣，網(wǎng)頁(yè)層次就會(huì)分明，不會(huì)雜亂無(wú)序，給人以清爽和舒服的感覺(jué)。

（2）線條的運(yùn)用。在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)，要注意巧妙使用線條進(jìn)行過(guò)渡，這樣觀賞者在觀看網(wǎng)頁(yè)時(shí)，就會(huì)感覺(jué)自然流暢。

（3）圖標(biāo)。為了讓網(wǎng)頁(yè)的效果更加突出，在網(wǎng)頁(yè)的各個(gè)標(biāo)題前面最好加一些圖標(biāo)進(jìn)行點(diǎn)綴。這樣，瀏覽者在觀賞時(shí)會(huì)覺(jué)得網(wǎng)頁(yè)的效果非常出彩。不過(guò)也不能靠許多圖標(biāo)出奇取勝，要防止圖標(biāo)過(guò)多也會(huì)造成顏色混亂。

（4）文字。網(wǎng)站的內(nèi)容是用文字來(lái)顯示的，因此文字處理第一要素是要把文字的顏色和背景區(qū)分開(kāi)來(lái)，防止瀏覽網(wǎng)頁(yè)的人看不清楚。其次，字體的使用要統(tǒng)一，不要胡亂用不常用的字體。因?yàn)闉g覽者使用的計(jì)算機(jī)或許在配置上達(dá)不到要求，如果文字使用過(guò)于混亂，配置低的計(jì)算機(jī)就打不開(kāi)網(wǎng)頁(yè)了。第三，文字與文字之間的間隔要適當(dāng)，便于觀看。

（5）主題要鮮明。在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)，主體明確是基本要求。每個(gè)瀏覽者在瀏覽網(wǎng)頁(yè)是都是尋找自己最需要的內(nèi)容，如果主題龐雜，瀏覽者就會(huì)選擇離開(kāi)；在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，要讓網(wǎng)頁(yè)一打開(kāi)就能給人以強(qiáng)烈的印象。

5 常用工具介紹

網(wǎng)頁(yè)設(shè)計(jì)所需要的制圖軟件已經(jīng)開(kāi)發(fā)了許多，所以，在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)，只要善于使用制圖軟件，就會(huì)輕松許多。現(xiàn)在通常使用的軟件是photoshoop和fire works。在制作效果圖時(shí)，設(shè)計(jì)者要節(jié)省時(shí)間最好使用自己最熟悉和運(yùn)用最熟練的制圖軟件。

photoshoop是一款非常好用的平面設(shè)計(jì)軟件。由Adobe公司開(kāi)發(fā)設(shè)計(jì)，其用戶(hù)界面簡(jiǎn)單明了，所有功能都具備，對(duì)于設(shè)計(jì)者來(lái)說(shuō)，是一個(gè)很好的幫手。所以很多網(wǎng)頁(yè)設(shè)計(jì)者都會(huì)選擇Photo shop來(lái)進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)。Photo shop最大的好處就是設(shè)計(jì)了很多快捷鍵，H鍵、TABLE鍵、D鍵、X鍵可都可以實(shí)現(xiàn)一鍵完成任務(wù)。快捷鍵地設(shè)置，簡(jiǎn)化了設(shè)計(jì)步驟，提高了設(shè)計(jì)速度。

fire works是網(wǎng)頁(yè)開(kāi)發(fā)圖形處理工具，需要矢量圖形的設(shè)計(jì)者可以采用，而且它簡(jiǎn)單易學(xué)，只需要操作兩、三遍就可以輕松使用了。所以，很多網(wǎng)頁(yè)設(shè)計(jì)者都喜歡用它。

[1]鄧文淵.網(wǎng)頁(yè)制作高手[M].北京：人民郵電大學(xué)出版，2007.

[2]李憲廣.網(wǎng)頁(yè)制作邊學(xué)邊用[M].北京：清華大學(xué)出版社，2009.

[3]許凌云，柳勇良.網(wǎng)頁(yè)設(shè)計(jì)全方位學(xué)習(xí)[M].北京：清華大學(xué)出版社，2008.

[4]焦慧.網(wǎng)頁(yè)制作基礎(chǔ)與典型范例[M].北京：電子工業(yè)出版社，2008.

[5]戎馬工作室.Dreamweaver 8與asp動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)[M].北京：機(jī)械工業(yè)出版社，2006.

[6]戴一波.Dreamweaver CS3網(wǎng)站制作炫例精講[M].北京：電子工業(yè)出版社，2008.

[7]何秀芳.網(wǎng)頁(yè)制作與網(wǎng)站建設(shè)課堂實(shí)錄[M].北京：人民郵電出版社，2009.

[8]孫連三.新編網(wǎng)頁(yè)制作與網(wǎng)站建設(shè)入門(mén)與提高[M].北京：人民郵電出版社，2008.