淺談網(wǎng)頁(yè)制作的技巧及常見(jiàn)問(wèn)題的解決

[摘要]二十一世紀(jì)是網(wǎng)絡(luò)的時(shí)代，網(wǎng)頁(yè)制作已成為中專學(xué)生必須掌握的一項(xiàng)技能，主要介紹網(wǎng)頁(yè)制作中的一些技巧以及學(xué)生在制作網(wǎng)頁(yè)過(guò)程中常見(jiàn)的一些問(wèn)題和解決方法。

[關(guān)鍵詞]網(wǎng)頁(yè)制作 技巧 問(wèn)題 解決方法

中圖分類號(hào)：TP3文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：1671－7597（2009）0120051－01

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

一、網(wǎng)頁(yè)中顏色的選用

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

二、表格的定位功能

表格在網(wǎng)頁(yè)制作中除了可以起到表格本身的作用外，它最主要的作用是定位頁(yè)面中的元素。運(yùn)用表格可以自由控制文本和圖像在網(wǎng)頁(yè)上出現(xiàn)的具體位置，而不用擔(dān)心不同的對(duì)象之間的影響，從而使整個(gè)網(wǎng)頁(yè)看上去緊湊統(tǒng)一。使用表格定位頁(yè)面元素時(shí)要注意以下幾點(diǎn)：

1．一個(gè)網(wǎng)頁(yè)要盡量避免用整個(gè)一張大表格，所有的內(nèi)容都嵌套在這個(gè)大表格之內(nèi)。因?yàn)闉g覽器解釋HTML頁(yè)面的順序是自上而下依次逐行解釋和顯示，但當(dāng)碰到表格時(shí)，瀏覽器會(huì)讀取表格中所有的元素后才將結(jié)果在頁(yè)面中顯示出來(lái)，在頁(yè)面內(nèi)容較多而瀏覽者瀏覽的速度又較慢的情況下，瀏覽器的這種解釋次序?qū)⒚黠@表露出來(lái)，只有等到瀏覽器解釋到了頁(yè)面的最后，才會(huì)將整個(gè)頁(yè)面的內(nèi)容在瀏覽者眼前顯示出來(lái)，而在瀏覽器解釋過(guò)程中瀏覽者將看到一片空白。我們?cè)诓捎帽砀襁M(jìn)行定位時(shí)，可以一行使用一個(gè)表格，并且盡量不使用表格的嵌套。

2．有的學(xué)生在使用表格定位時(shí)，在頁(yè)面視圖下顯示沒(méi)有一點(diǎn)問(wèn)題，可在瀏覽器中預(yù)覽的時(shí)候會(huì)出現(xiàn)頁(yè)面元素錯(cuò)位的現(xiàn)象，這個(gè)問(wèn)題就在于表格寬度的設(shè)置上，表格寬度的設(shè)置有兩種，一種是百分比，一種是像素，如采用百分比就會(huì)出現(xiàn)在不同分辨率下顯示效果不同的現(xiàn)象，而將表格的寬度都更換成像素，就可以解決這個(gè)問(wèn)題了。

三、網(wǎng)頁(yè)中文字亂碼的處理

現(xiàn)在不少學(xué)校開(kāi)設(shè)的網(wǎng)頁(yè)制作相關(guān)課程，不僅有“所見(jiàn)即所得”的網(wǎng)頁(yè)制作工具如Dreamweaver或FrontPage，還開(kāi)設(shè)了HTML語(yǔ)言。學(xué)生在制作網(wǎng)頁(yè)時(shí)，喜歡自己編寫(xiě)一些代碼。有時(shí)，學(xué)生編寫(xiě)的網(wǎng)頁(yè)在瀏覽器上常出現(xiàn)亂碼的情況。解決這個(gè)問(wèn)題的辦法是：在HTML語(yǔ)言的和標(biāo)簽之間添加標(biāo)簽來(lái)定制語(yǔ)言，語(yǔ)句如下：

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

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

312"＞

這兩條語(yǔ)句可將網(wǎng)頁(yè)編碼設(shè)置為簡(jiǎn)體中文GB碼，瀏覽時(shí)就不會(huì)出現(xiàn)亂碼。

四、文件的命名

在制作網(wǎng)頁(yè)的過(guò)程中，學(xué)生經(jīng)常會(huì)遇到這樣一些問(wèn)題：網(wǎng)頁(yè)中插入的圖片在瀏覽時(shí)無(wú)法顯示、做好的鏈接不能正常應(yīng)用等。分析原因，我們常常發(fā)現(xiàn)，是因?yàn)槲募褂昧酥形拿Q。學(xué)生為了便于記憶和查看明了，總是喜歡給自己網(wǎng)站中的文件起一個(gè)中文名稱，正是這些中文名稱導(dǎo)致了網(wǎng)頁(yè)瀏覽中的一些問(wèn)題，解決的方法就是將文件名改為英文。為了便于記憶可以使用漢語(yǔ)拼音或是中文的英譯，如背景圖片文件可命名為background.gif或bg.gif。

五、圖像的無(wú)縫拼接

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

六、個(gè)人站點(diǎn)中導(dǎo)航按鈕的設(shè)計(jì)

學(xué)生學(xué)習(xí)完網(wǎng)頁(yè)制作課程后都會(huì)動(dòng)手制作自己的網(wǎng)站，所作的類型基本上屬于個(gè)人網(wǎng)站?；ヂ?lián)網(wǎng)上的個(gè)人網(wǎng)站有很多，要想擁有更多的點(diǎn)擊率，個(gè)人網(wǎng)站除在內(nèi)容上要吸引瀏覽者外，在視覺(jué)上更要有新意，要突出個(gè)性。這就要求要有一個(gè)別出心裁的導(dǎo)航按鈕。導(dǎo)航按鈕通常放在主頁(yè)上，是瀏覽者訪問(wèn)你的網(wǎng)站首先看到的部分?？梢允褂孟铝蟹椒ㄔO(shè)計(jì)一個(gè)新穎的導(dǎo)航按鈕：

1．使用現(xiàn)成的大圖片。根據(jù)站點(diǎn)的主題選用一個(gè)與主題相關(guān)的圖片，利用圖片的各部分做成導(dǎo)航，如制作一個(gè)文學(xué)網(wǎng)站，可以選用一本書(shū)作為導(dǎo)航，書(shū)的目錄就是站點(diǎn)的欄目。

2．使用Photoshop或Flash來(lái)制作自己的導(dǎo)航按鈕。采用這種方法，要求學(xué)生熟練掌握?qǐng)D形處理軟件及動(dòng)畫(huà)制作軟件的使用，并具有創(chuàng)新性，自己動(dòng)手設(shè)計(jì)并使用相關(guān)軟件完成。這樣創(chuàng)作出的導(dǎo)航系統(tǒng)就會(huì)具有新意，會(huì)吸引更多的瀏覽者。

七、結(jié)束語(yǔ)

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

參考文獻(xiàn)：

[1]王為正、何小翠、應(yīng)紅，《計(jì)算機(jī)網(wǎng)頁(yè)制作中幾個(gè)疑難問(wèn)題研究》，金華市：金華職業(yè)技術(shù)學(xué)院學(xué)報(bào).

[2]張鳴，《關(guān)于網(wǎng)頁(yè)設(shè)計(jì)與制作方法的探討》，長(zhǎng)春市：長(zhǎng)春大學(xué)學(xué)報(bào).

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

作者簡(jiǎn)介：

馮雪蓮，女，包頭鐵道職業(yè)技術(shù)學(xué)院，講師。