淺談網頁制作的經驗與技巧

摘要：在制作網頁的過程中，會發現預想的結果和實際預覽網頁時的效果有很大的區別，比如說網頁在不同分別率預覽時發生了改變、網頁中的字體大小也在變化、圖片上傳后不能顯示等等。在幾年的網頁教學中，筆者不斷摸索，總結了一些經驗和技巧供大家借鑒。

關鍵詞：網頁制作；像素；分辨率；超鏈接

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

Brief Talking about the Experience and Skills of the Web Page Creation

DING hui1，2

(1.Jiangsu University，Zhengjiang 212013，China;2.Nanjing Forest Police College，Nanjing 210046，China)

Abstract: In the course of creating web pages，you will find there is great distinctionbetween the desired results and the actual page preview effect，for instance，pages previewed in different resolution have changed，the font size of the page also changes， picture can not be displayed after uploading and so on. In recent years of the web page teaching， the author explored continually， and had summed up some experience and skills for your reference.

Key words: web page creation; pixels; resolution; hyperlinks

隨著技術的發展網頁的制作顯得越來越為重要。無論是企業或是事業單位都已把網頁作為推銷自身的一種媒體，網頁已名副其實成為繼報紙、電臺、電視臺之后又一大傳媒。目前市場上網頁制作人才奇缺。因勢而需，各大高職院校也紛紛開設出《網頁制作課程》，我就幾年從事《網頁制作》課程的教學，總結了一些經驗和技巧供大家借鑒。

1 經驗

1.1 版面尺寸

一般來講，在800×600像素的屏幕顯示模式下，在IE安裝后默認的狀態（即工具欄地址欄等沒有改變）下，IE窗口內能看到的部分為780×435像素，而在現在經常用到的1024×768像素的屏幕顯示模式下，用戶在IE窗口看到的有效區域是1002×602像素。一般來講，以這個大小為標準就行了，但是瀏覽網頁的最佳分辨率是800×600 像素，建議在排版時插入表格時把寬度設為780像素的合適值，如果把表格的單位設為百分比，那么網頁將會隨著分辨率和顯示器的大小而放大或縮小，從而使表格內的網頁元素失去約束，網頁將會變得慘不忍睹。另外，千萬不要忘了把表格設置為居中，否則表格會默認為靠左，影響網頁美觀。至于在表格內嵌入表格，筆者個人認為使用百分比比使用像素作單位更方便一些。[1]

1.2 多分辨率的支持

隨著硬件的發展，瀏覽者所使用的顯示器也由過去的15存的顯示器逐步過渡到了17寸，同時分辨率也由800×600像素模式轉為1024×768像素的模式。由于網頁版式的隨機性，給設計者帶來了一個新的問題。就是在15寸的顯示器可以正常觀看的網頁，在17寸的顯示器上不能正常觀看。目前，大多數網站通過實踐得到的辦法是：根據800×600的分辨率模式下進行設計，然后通過居中或居左的方式固定移植到1024×768的分辨率上來，如圖1所示。這樣做的結果是在高分辨率的模式下會有一片區域的空白，我們稱之為“盲區”，如圖2中的左右區域。在這個區域中，一般不放網站內容，對網絡廣告來說，這里成為靈活使用浮動廣告的一個好地方。

1.3 外觀的設置

1) 不要先決定網頁的外觀，然后強迫自已去適應它，應該從你的訪客對像，你要傳達的訊息以及你的制網目標推導出一個最適合的網頁架構。

2) 每頁排版不要太疏或用太大的字，盡量避免看你的網頁時需要作很大的卷動，要知道在一頁的上部分是顯眼而寶貴的地方，不要只放著幾個粗大的字或圖片。

3) 不要于每頁插入太多的廣告牌。相信誰也不喜歡瀏覽一些貼滿廣告的網頁吧，要考慮到該頁內容與廣告的比例，擺放的位置亦很重要。廣告太多，只會令人煩厭。

4) 不要每頁都采用不同的背景圖片，以免每次轉頁都要花時間去下載，采用相同的底色或背景圖片還可增加網頁一致性，樹立風格。

5) 底色或背景圖片必須與文字對比強烈，易于閱讀，這并不是要求作者永遠使用鮮亮的背景配搭深色的文字，但深色背景常要求與主題配合，有較多的顧慮。若你的網頁是文章式或包含大量文字，不妨在底色與文字的配搭上下些工夫，力求讓訪者能舒適閱讀你的文章。

6) 不要把圖片白色當透明，要知道別人的作業系統不一定把內定底色設為白色，解決方法除了真的把該網頁的底色設為白色之外，最好還是以圖片編輯工具為圖片設好透明顏色。

7) 太長的一頁要使用內部聯結。

2 常用技巧

2.1 盡量不要使用中文的文件名或目錄名

最好不要在網站中使用中文的文件名或目錄名，而用英文字母、數字和下劃線等符號組合成文件名或目錄名。如果在網站中使用了中文的文件名或目錄名，那么在微軟公司的瀏覽器中可能會看不到這些文件或這些目錄內的文件，容易給瀏覽者文件不可用的誤解。

2.2 在每一個網頁中都使用標題

每一個網頁都是用來表達特定內容的，而網頁的標題（指放在之間的內容，這些內容在瀏覽器的標題欄中顯示）則可用來表達這些特定內容的濃縮，雖然這樣的標題內容可以和網頁信息放在一起， 但如果該網頁信息比較多時，與網頁信息放在一起的標題則會隨著瀏覽者往下翻閱時被隱藏起來，給瀏覽者造成了不便。

2.3 不要在一篇短文里提供太多的超鏈接

適當、有效率地使用超鏈接，是一個優良的導覽系統不可缺少的要件之一。但過份濫用超鏈接，造成短短的一篇文章里處處是超鏈接， 反而損害了網頁行文的流暢與可親性。在充斥著超鏈接的短文里，很可能其中不少是無意義、沒必要的超鏈接。

2.4 讓超鏈接的字串長短適中且走文自然

抓住能傳達主要信息的字眼當做超鏈接的錨點，可有效地控制住超鏈接的字串長度，避免字串過長（如整行、整句都是錨點字串）或過短（如僅一個字當做錨點），而不利于讀者的閱讀或點取。

2.5 注意超鏈接顏色與單純敘述文字的顏色呈現

WWW的語言—HTML允許網頁設計者特別標明單純敘述文字與超鏈接的用色，以便豐富網頁的色彩呈現。如果網站充滿知識性的信息欲傳達給訪問者，建議將網頁內的文字與超鏈接用色設計成較乾凈素雅的色調，會較有利于閱讀。純粹的敘述文字采用較暗、較深的顏色來呈現，如黑色、墨綠色、暗褐色。超鏈接文字則以較鮮明搶眼的色彩來強調如亮黃色、翠綠色、鮮橘色至于訪問過的超鏈接則采用較低于原超鏈接亮度的顏色做呈現。

2.6 在前后連續順序的文件里提供必要的鏈接

將篇幅過長的文件分隔成數篇較小的網頁，可大大地增加界面的親和性，但在導覽按鈕與超鏈接的配置上，網頁設計者則要更細心周全地安排， 使得讀者不論身處網站的哪一層，依然能夠快速便捷地通往其他任何一個頁面。

2.7 在較長的網頁內提供目錄表與大標題

理想的網頁長度以不超過三個熒幕頁面為佳。但是如果基于某些特殊理由，網頁一定要做得很長，那么不要忘了在此長篇的網頁最上頭，提供一個目錄表，網頁的內容也標上大小標題，以利清楚閱讀。

2.8 暫時不提供超鏈接到尚未完成的網頁

超鏈接或導覽按鈕應該引導讀者到一篇真正有實際內容的網頁中，如果讀者滿懷希望地點擊某個鏈接，卻根本看不到任何所期望的內容，唯一所見的，只是一張無聊的告示牌“正在建設中…”，無疑會使讀者感到失望。因此，應該先暫時別讓這些“正在建設中…”的網頁正式發布。

2.9 測試所有的超鏈接與導覽按鈕的真實可行性

信息網站基本建成后，第一件該做的事是將全部網頁放在模擬環境中，逐一測試每一頁的每一個超鏈接與每一個導覽按鈕其真實可行性。徹底檢驗有沒有失敗的超鏈接無法鏈接到該連結的網頁有沒有顯示不出來的圖片等。不要在網站信息發布后，再冒出“File Not Found”等錯誤信號出來。[2]

3 結束語

制作網頁不僅需要設計者具有相關的計算機知識，而且也應具有一定的美工、平面設計能力及一定的藝術修養，但豐富的實踐經驗與使用技巧更不可缺少。

參考文獻：

[1] 張貴明.網頁藝術設計與應用[M].北京:高等教育出版社，2004:97-99.

[2] 劉喜榮.網頁制作中值得注意的某些問題和一些實用方法[J]，微計算機應用，2003，24(3):58-60.