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

謝 宜

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

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

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

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

2 網(wǎng)頁布局

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

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

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

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

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

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

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

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

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

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

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

5 常用工具介紹

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

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

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

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

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

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

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

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

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

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

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