淺談網頁制作的技巧及常見問題的解決

[摘要]二十一世紀是網絡的時代，網頁制作已成為中專學生必須掌握的一項技能，主要介紹網頁制作中的一些技巧以及學生在制作網頁過程中常見的一些問題和解決方法。

[關鍵詞]網頁制作 技巧 問題 解決方法

中圖分類號：TP3文獻標識碼：A文章編號：1671－7597（2009）0120051－01

在素質教育與終身教育成為必然的今天，人們對信息的需求有了更新、更高的要求，網頁由于其所具有的信息量大、傳遞快速、沒有時空限制等特點，恰好滿足這種需求而逐漸成為一種新興的教育資源。這使得制作網頁成為學習者必須要掌握的一種技術。通過多年的《網頁制作》課程的教學，在此談幾點網頁制作的技巧及學生在制作網頁時常見的問題和解決方法。

一、網頁中顏色的選用

顏色是藝術表現的要素之一，在網頁設計中少不了顏色，網站的標準顏色是決定網站視覺效果的重要元素，標準顏色主要用于網站的標志、標題、主菜單和主色塊，給人以整體的感覺。顏色搭配要協調一致，避免出現影響整體視覺效果的大面積、高對比度的色塊。在整個站點的顏色選擇上應盡量使用同一色系的，顏色種類一般不要超過四種。由于很多學習《網頁制作》課程的學生沒有專門學習過美術，對顏色的選擇還很欠缺，所以建議學生在選擇背景顏色的時候盡量使用同一種顏色加以漸變處理，比如從深藍到淺藍的漸變。另外文本顏色和背景顏色的差別要明顯一些，如深色背景配淺色的文本，淺色背景配深色的文本。更要注意的是所選的標準色一定要突出主題，如主題為詩歌散文的網站最好用一些淡雅的顏色，淺藍、淺粉、淺綠等；主題為天文的網站一般采用黑色以表現天空宇宙的浩瀚；一個影視網站適用于任何顏色，但考慮到人們看電視、電影一般都在黑暗下觀看，所以網頁上使用深色比較符合人們的習慣。

二、表格的定位功能

表格在網頁制作中除了可以起到表格本身的作用外，它最主要的作用是定位頁面中的元素。運用表格可以自由控制文本和圖像在網頁上出現的具體位置，而不用擔心不同的對象之間的影響，從而使整個網頁看上去緊湊統一。使用表格定位頁面元素時要注意以下幾點：

1．一個網頁要盡量避免用整個一張大表格，所有的內容都嵌套在這個大表格之內。因為瀏覽器解釋HTML頁面的順序是自上而下依次逐行解釋和顯示，但當碰到表格時，瀏覽器會讀取表格中所有的元素后才將結果在頁面中顯示出來，在頁面內容較多而瀏覽者瀏覽的速度又較慢的情況下，瀏覽器的這種解釋次序將明顯表露出來，只有等到瀏覽器解釋到了頁面的最后，才會將整個頁面的內容在瀏覽者眼前顯示出來，而在瀏覽器解釋過程中瀏覽者將看到一片空白。我們在采用表格進行定位時，可以一行使用一個表格，并且盡量不使用表格的嵌套。

2．有的學生在使用表格定位時，在頁面視圖下顯示沒有一點問題，可在瀏覽器中預覽的時候會出現頁面元素錯位的現象，這個問題就在于表格寬度的設置上，表格寬度的設置有兩種，一種是百分比，一種是像素，如采用百分比就會出現在不同分辨率下顯示效果不同的現象，而將表格的寬度都更換成像素，就可以解決這個問題了。

三、網頁中文字亂碼的處理

現在不少學校開設的網頁制作相關課程，不僅有“所見即所得”的網頁制作工具如Dreamweaver或FrontPage，還開設了HTML語言。學生在制作網頁時，喜歡自己編寫一些代碼。有時，學生編寫的網頁在瀏覽器上常出現亂碼的情況。解決這個問題的辦法是：在HTML語言的和標簽之間添加標簽來定制語言，語句如下：

＜meta http-equiv="Content-language" Content="zh-CN"＞

＜meta http-equiv="Content-Type" content="text/html;charset=gb2

312"＞

這兩條語句可將網頁編碼設置為簡體中文GB碼，瀏覽時就不會出現亂碼。

四、文件的命名

在制作網頁的過程中，學生經常會遇到這樣一些問題：網頁中插入的圖片在瀏覽時無法顯示、做好的鏈接不能正常應用等。分析原因，我們常常發現，是因為文件使用了中文名稱。學生為了便于記憶和查看明了，總是喜歡給自己網站中的文件起一個中文名稱，正是這些中文名稱導致了網頁瀏覽中的一些問題，解決的方法就是將文件名改為英文。為了便于記憶可以使用漢語拼音或是中文的英譯，如背景圖片文件可命名為background.gif或bg.gif。

五、圖像的無縫拼接

圖像是網頁中必不可少的元素，它起到美化頁面的作用。圖像的格式有很多種，但在網頁中常用的只有三種格式：GIF、JPG和PNG。圖像的大小在很大程度上影響網頁的下載速度，所以在使用圖片之前要先用圖形處理軟件（如PhotoShop）對圖片進行優化處理，在不影響顯示效果的情況下盡量使用小尺寸的圖片。如需使用大圖片，我們可以采用圖像的無縫拼接技術，所謂圖像的無縫拼接就是在圖形處理軟件中將一個大的圖片分割成幾個小的圖片，然后在網頁制作軟件中再把幾個小圖片拼合成一個大的圖片，拼合后的圖像跟原來的圖像顯示效果一樣，看不出拼接的痕跡。完成拼接主要利用了表格的定位功能，把幾個小的圖片分別放在表格的各個單元格中，設置表格的邊框、單元格的間距和邊距均為零，然后再手動調整一下，就可以完成圖像的無縫拼接了，這樣處理雖然比較麻煩，但卻既能使用效果好的大圖片又解決了圖片下載速度的問題。

六、個人站點中導航按鈕的設計

學生學習完網頁制作課程后都會動手制作自己的網站，所作的類型基本上屬于個人網站?；ヂ摼W上的個人網站有很多，要想擁有更多的點擊率，個人網站除在內容上要吸引瀏覽者外，在視覺上更要有新意，要突出個性。這就要求要有一個別出心裁的導航按鈕。導航按鈕通常放在主頁上，是瀏覽者訪問你的網站首先看到的部分?？梢允褂孟铝蟹椒ㄔO計一個新穎的導航按鈕：

1．使用現成的大圖片。根據站點的主題選用一個與主題相關的圖片，利用圖片的各部分做成導航，如制作一個文學網站，可以選用一本書作為導航，書的目錄就是站點的欄目。

2．使用Photoshop或Flash來制作自己的導航按鈕。采用這種方法，要求學生熟練掌握圖形處理軟件及動畫制作軟件的使用，并具有創新性，自己動手設計并使用相關軟件完成。這樣創作出的導航系統就會具有新意，會吸引更多的瀏覽者。

七、結束語

網頁制作中有很多的技巧，只有在不斷的實踐中才會總結出更多更好的制作網頁的方法，所以學生在知道了一些技巧之后一定要付諸于實踐，這樣才能更好地掌握，把別人的知識變成自己的知識。

參考文獻：

[1]王為正、何小翠、應紅，《計算機網頁制作中幾個疑難問題研究》，金華市：金華職業技術學院學報.

[2]張鳴，《關于網頁設計與制作方法的探討》，長春市：長春大學學報.

[3]陳欣，《Dreamweaver Mx教程》，清華大學出版社.

作者簡介：

馮雪蓮，女，包頭鐵道職業技術學院，講師。