淺談網頁設計的基本規范和常用技巧

摘要：隨著Internet應用的迅速發展和普及，現在越來越多的人開始學習網頁設計，但很多設計者，特別是初學者，由于沒有掌握網頁設計的基本規范，經常會出現所制作的網頁無法按要求正常運行。而網頁中缺少技巧的應用，則會使得網頁比較單調、枯燥無味。通過介紹一些基本規范和常用技巧，有利于初學者方便、快捷的掌握，從而提高網頁設計的質量。

關鍵詞：網頁設計；規范；技巧

中圖分類號：TP393文獻標識碼：A文章編號：1009-3044(2008)23-1084-02

On the Web Page Design and the Basic Norms of Common Skills

LI Zhong-ming

(Department of Computer Science，Top Shaoxing Information Vocational and Technical College， Shaoxing 312000， China)

Abstract: With the rapid development of Internet applications and universal， now more and more people begin to learn Web design， but many designers， particularly beginners， do not have the basic norms of web design， often in the website can not be produced on request in normal operation. And the lack of skills in web applications， web page will be made relatively monotonous and dull. By introducing some of the basic norms and commonly used techniques to beginners convenient， fast control， thereby enhancing the quality of web design.

Key words: web design; norms; skills

1 引言

網絡發展日新月異，越來越多的信息通過Web網站發布，網頁設計也隨之走進人們的生活。人們可以通過一些簡單、方便的網頁設計工具制作符合自己要求的網頁。

網頁設計工具有很多，如：Macromedia的Dreamweaver MX，Microsoft的office中FrontPage等。個人認為Dreamweaver MX界面清晰，功能強大完整，設計和制作網頁一般選擇此工具。

目前一些網頁設計工具使用起來非常簡便，如同使用Word一般，但要真正設計出好的網頁，牢固掌握網頁設計的一些基本規范和常用技巧還是非常必要的。

2 網頁設計基本規范

2.1 文檔規范

一個網站由各類網頁文檔組成。網頁設計中首先要掌握的是文檔規范，它包括結構規范和命名規范。規范的文檔結構會使網頁功能明確、文件分類合理。而規范的命名可以讓網頁編輯起來更方便，查找文件更容易，而且可以減少非技術原因造成的網頁或內容不能正常顯示。所以遵循基本的文檔規范是非常必要的，可以說它是優秀網頁設計的基礎。

2.1.1 結構規范

合理的文檔結構便于網站的維護，方便內容的更新和移動，在建立文檔結構時應遵循以下規范。

首先，要建立網站根目錄文件夾，存放所有的網頁文檔。

其次，要在根目錄下建立公用子目錄。如Images、Function等，其中Images用于存放網站設計制作的所有公用圖片，Function一般用于存放一些公用特效程序、樣式表等。如有需要還可以建立多媒體文件夾Multimedia，存放Flash、視頻、音頻等媒體文件。

然后，在根目錄下建立各欄目文件夾。根據需要可以在每一個欄目中新建images等子目錄，用來存放該欄目專用圖片。如果這個欄目的內容特別多，又分出很多子欄目，可以相應的再建立其他目錄。

2.1.2 命名規范

網頁設計中各類文檔命名一般應遵循以下規范：

盡量將所有目錄、文件的名稱用小寫英文字母、數字、下劃線的組合，其中不得包含漢字、空格和特殊字符；一般目錄名稱所用的英文具有一定的實際意思，便于日后修改。如有必要，建議用文本文件（Read.txt），將所有的目錄、網頁文件加以注解。

對網頁命名，網站首頁一般取名index或Default，新聞類頁可以用news等。

圖片的命名原則一般如下：

放置在頁面的廣告圖案等取名為banner，標志性的圖片取名為logo，在頁面上帶有鏈接的小圖片取名為button，主欄目和子欄目的圖片取名menu，修飾用的照片取名pic，動態網頁中的圖片可以用時間數字組合命名，如2008210101201.gif等.

2.2 設計規范

2.2.1 布局規范

一張漂亮的網頁，除了內容豐富、圖片漂亮以外，還需要合理的頁面布局。合理的布局會使你的網頁中心突出、頁面均衡、更讓瀏覽者爽心悅目。

常用的網頁布局方式有表格，框架和層。作為網頁設計初學者一般建議采用表格布局。

表格布局時一般應注意以下幾點：

一個頁面要盡量避免使用整張大表格。如果一張網頁是嵌套在一個大表格之內，當用戶輸入網址后，將等待較長時間才同時顯示網頁內容。這是因為瀏覽器在解釋頁面的元素時，是以表格為單位逐一顯示。

布局表格一般設置邊框為虛線，間距和填充都為0，表格的高度一般不作設置。

表格嵌套盡量不要超過3層。

表格盡量少的使用合并或拆分單元格。如果有過多的拆分合并會不方便日后的網頁更新。

2.2.2 內容規范

網頁的基本組成部分包括文本、圖片、多媒體、腳本、樣式和超級鏈接等元素。合理規范的使用這些元素，會使主題鮮明、風格一致，更能不斷地吸引瀏覽者進行訪問。

1）文字和圖片規范：文字是網頁的主體，傳達各類信息。而圖片常用來裝飾、美化，增添信息的視覺效果。

網頁文字一般分正文、標題等，這些內容通常采用不同的字號、樣式和顏色來改善文字效果。為了保證在不同瀏覽器上字號保持一致，字號建議用點數pt來定義，一般正文宋體使用9pt和11pt。標題字號可按照具體情況設置。

網頁中圖片的使用增添了活力，豐富了內容，但圖片使用的時候也要講究規范。圖片在網頁中最好不要使用“Width、height”兩屬性來設置寬度、高度，即不要改變圖片的原始大小。如改變了，會使圖片失真。圖片一般要加上替代文字，作用一是當圖片無法顯示時，可以顯示替代文字，二是鼠標停在圖片上后出現替代文字，相當于圖片的說明。

2）超鏈接設置規范：超鏈接是一個網站的靈魂，通過它用戶可以在網站上的各個頁面之間進行跳轉。為了保證網頁之間的正常鏈接，方便網站移植，通常將站內各網頁間的超鏈接路徑采用相對路徑，不能寫成如這樣的形式。一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名。

一般在新聞類的鏈接會加上標題，顯示新聞主題、作者、時間等。

如：＜a href=\"news/view1.htm\" title=\"標題：xxxxx，作者：xxx，時間：xxx\"＞

站外鏈接都采用絕對路徑，如友情鏈接等。

3)CSS規范

為了保證某些內容的風格一致，可以使用層疊樣式表（CSS）來分別定制樣式。樣式表一般分三種形式，即外鏈式、內聯式和內嵌式。

一般將公用的樣式全部保存在一個樣式表文件（*.css）中，然后在需要用樣式的網頁中通過＜link＞標記鏈接此文件。如果只在某張網頁中應用樣式，可以使用內聯式形式；如果只在某個標記內用，可以采用內嵌式形式。

3 網頁設計技巧

網頁設計中為了增強網頁的吸引力，常引入一些具有特殊效果的網頁設計技巧。這些技巧不僅增加了網頁的色彩，更加方便了瀏覽者。

3.1 應用變換圖像的導航條

導航條的欄目都是由一些圖片制作而成，當鼠標放滑過對應的欄目時會變成另外一張欄目圖片。可以通過編寫一段客戶端腳本來完成這一技巧，也可以使用網頁設計工具Dreamweaver MX中的“導航條”命令。一般導航條的一個欄目需要設置四張圖片。如果圖片較少，可以選擇使用“鼠標經過的圖片”命令實現變換圖像，此命令只需要兩張圖像。

3.2 時間特效

時間特效也是網頁設計中常見的技巧應用，如動態的時間顯示，倒記時等。動態的時間顯示常用的腳本程序如下：

//將此代碼放入出現動態時間的地方即可。

＜font size=\"2\" id=\"Dtime\" color=\"#009900\"＞＜/font＞

＜script＞setInterval(\"Dtime.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());\"，1000); ＜/script＞

3.3 “添加到收藏夾”和“設置為首頁”

“添加到收藏夾”和“設置為首頁”等技巧的應用可以方便瀏覽者記住你的網站，推廣網站。

“添加到收藏夾”技巧實現步驟如下：

添加下面代碼在＜head＞區域

＜script type=\"text/javascript\"＞

function addFavorite()

{window.external.addFavorite('http://網址'，'說明');}

＜/script＞

對“添加到收藏夾”設置超鏈接，在\"Href\"中輸入\"javascript:addFavorite()\"

“設置為首頁”技巧實現步驟如下：

首先對“設置為首頁”設置空鏈接，然后在＜a＞標簽中添加如下代碼：

onClick=\"this.style.behavior='url(#default#homepage)';this.setHomePage('http://網址');return(1);\"

3.4 滾動字幕效果

在網站首頁的公告制作常使用滾動字幕效果，這樣可以增加視覺效果。利用＜Marquee＞標記可以實現滾動字幕，代碼參考如下：

＜marquee behavior=\"alternate\" bgcolor=\"#0033FF\" direction=\"down\" height=\"100\" width=\"100\" scrollamount=\"2\" scrolldelay=\"100\"＞＜/marquee＞

其中behavior表示字幕滾動的方式，direction表示字幕滾動方向，scrollamount表示字幕滾動速度，scrolldelay 表示字幕滾動延時。

網頁設計技巧還有很多，如關閉窗口，改變內容的字體大小，雙擊屏幕滾動等。但是這些技巧要用得恰到好處，而且一張網頁中不能使用太多，多了就會讓瀏覽者覺得該網頁太雜亂。

4 結束語

網頁設計講究團體協作，規范的網頁設計可以讓其他的合作者清楚的瀏覽、方便的編輯，也可以使頁面顯得更加的簡潔、大方、整齊。簡單又具有特點的網頁技巧的應用，又可以使網頁增添更多的魅力。本文所介紹的一些基本規范和常用技巧，有利于初學者方便、快捷的掌握，從而提高網頁設計的質量。合理運用常見技巧，可以使你設計制作的網頁功能更強大，訪問更方便，更具吸引力。

參考文獻：

[1] 張瑞萍，王澤波.網頁設計三劍客[M].北京:清華大學出版社，2006:1-35.

[2] 吳濤.網站全程設計技術[M].北京:清華大學出版社，2003:108-114.

[3] 胡艷潔.HTML標準教程[M].2版.北京:中國青年出版社，2004:307-314.