(吉林師范大學(xué) 博達學(xué)院，吉林 四平 136000)

摘要:隨著互聯(lián)網(wǎng)的蓬勃發(fā)展，出現(xiàn)了許多優(yōu)秀的企業(yè)主頁和個人網(wǎng)頁，它們以獨特的藝術(shù)設(shè)計吸引著大量的網(wǎng)友訪問。該文著重地闡述了建立優(yōu)秀網(wǎng)頁所必須注意的內(nèi)容事項以及網(wǎng)頁制作的步驟。

關(guān)鍵字:超文本標記語言;網(wǎng)頁三劍客;數(shù)據(jù)庫;Internet信息服務(wù)

中圖分類號:TP393 文獻標識碼:A文章編號:1009-3044(2009)28-7891-02

Design and Techniques for the Web Page

CHEN Zhuo-ran

(Boda College of Jilin Normal University， Siping 136000， China)

Abstract: With booming development of the internet， lots of the enterprises homepage and personal web pages have be made.They attract lots of User to access beacause of their unique idea and design of art.This article mainly elaborate the attentions of seting up excellent web pages and the step of webpage making.

Key words: hyper text markup language; web three musketeers; databases; internet information services

因特網(wǎng)是世界上發(fā)展速度最快、應(yīng)用最廣泛和最大的公共計算機信息網(wǎng)絡(luò)系統(tǒng)。隨著網(wǎng)絡(luò)的普及與發(fā)展，企業(yè)在因特網(wǎng)上擁有著自己的站和主頁已經(jīng)是必然趨勢。企業(yè)將產(chǎn)品宣傳、售后服務(wù)等環(huán)節(jié)以網(wǎng)站主頁的形式展現(xiàn)，另外網(wǎng)上的個人主頁更是如雨后春筍般蓬勃發(fā)展，各以絢麗的顏色，獨特的構(gòu)思吸引網(wǎng)友的訪問。如果要設(shè)計出質(zhì)量高，操作性強的網(wǎng)頁，就要將文字編輯、板式設(shè)計、圖片的處理、加工、動畫制作、數(shù)據(jù)庫技術(shù)等各個方面加以綜合應(yīng)用。

1 網(wǎng)站制作語言和工具的選取

如何又快又好制作出自己滿意的網(wǎng)站呢?對于目前制作網(wǎng)站的語言、工具有很多，例如:html、asp、asp.net、jsp、php等?？吹竭@么多專業(yè)性很強的編程語言，很多都會望而生畏。其實，若要制作簡單網(wǎng)站，并不一定要掌握這么多的語言，只要懂得少量的軟件操作技巧和簡單的html基礎(chǔ)知識，就可做出自己滿意的網(wǎng)站內(nèi)容了。

1.1 掌握簡單html語言

html(超文本標記語言)是web制作中的基礎(chǔ)內(nèi)容，它是web制作的核心，是一種以標簽為表現(xiàn)形式的語言。html對于多個平臺都兼容，學(xué)習(xí)起來非常容易，比任何一種計算機語言都簡單。并且html設(shè)計沒有特殊要求，用windows自帶的記事本就可以進行編輯。這里我們簡單介紹html里面的幾個常用標簽和如何使用html建立簡單網(wǎng)頁。…網(wǎng)頁文檔定義標簽、…h(huán)ead>文檔頭、文檔體、

換行為單標簽，可以單獨出現(xiàn)。掌握html語言，在進行網(wǎng)頁編輯時，可直接將網(wǎng)上部分的源代碼直接插入到自己的網(wǎng)頁代碼中去[1]。比如，網(wǎng)頁中的鼠標跟隨效果，網(wǎng)頁中的隨機飄浮的圖片等都可直接將源代碼直接復(fù)制，并粘貼到自己網(wǎng)頁中代碼的相應(yīng)部分，然后做出相應(yīng)的修改，將所鏈接的圖片，文字或網(wǎng)址等按格式自行修改。保存的方式:在記事本中錄入代碼后，啟動文件中的保存，然后在保存里將文件屬性改為.htm或.html即可。這時，保存的位置中會出現(xiàn)相應(yīng)的網(wǎng)頁文件了，直接打開，就可看到網(wǎng)頁的效果。但是單由記事本編輯出的網(wǎng)頁在效果上會過于簡單，不美觀，或功能不是很完善，這就需要我們在簡單掌握html語言后，利用其它的，更為直觀的網(wǎng)頁制作工具來進行網(wǎng)頁的制作了。

1.2 掌握網(wǎng)頁三劍客和簡單的數(shù)據(jù)庫使用

何為網(wǎng)頁三劍客?是目前比較流行的制作網(wǎng)頁的三個工具軟件，Dreamweaver、Fireworks和Flash。其中Dreamweaver可用來制作靜態(tài)網(wǎng)頁、動態(tài)網(wǎng)頁、創(chuàng)建和管理網(wǎng)站、制作樣式表等等，功能強大，應(yīng)用范圍很廣。Fireworks是圖像處理軟件，不僅具備復(fù)雜的圖像處理功能，并且能輕松地把圖形輸出到第三方的應(yīng)用程序中，它最大的特點是，應(yīng)用網(wǎng)頁制作方面的切片功能，使網(wǎng)頁圖片處理起來更方便，快捷了。Flash動畫制作軟件，目前，大大小小的網(wǎng)頁中，都有flash動畫存在著，給網(wǎng)頁增添了精彩的效果，使網(wǎng)頁更加精致，還可利用flash制作出有趣的游戲，留言板，聊天室等等，是功能強大的應(yīng)用軟件。

網(wǎng)頁中經(jīng)常會用到聊天室、留言板、用戶注冊、網(wǎng)上問答等等內(nèi)容，這樣網(wǎng)頁就被分成了動態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁二種，不使用服務(wù)器相關(guān)內(nèi)容，不使用數(shù)據(jù)庫鏈接的網(wǎng)頁被稱為靜態(tài)網(wǎng)頁，直接使用Dreamweaver來進行編輯就可以了，它的文件名中的擴展名為.htm或.html。而動態(tài)網(wǎng)頁正是相對于靜態(tài)網(wǎng)頁來說的，它的擴展名一般為.asp或.php等等。這種網(wǎng)頁要使用相應(yīng)的服務(wù)器技術(shù)，并用到數(shù)據(jù)庫和數(shù)據(jù)庫鏈接知識。常用的數(shù)據(jù)庫有Access數(shù)據(jù)庫、SQL Server數(shù)據(jù)庫等[2]。

3 網(wǎng)頁內(nèi)容的選取

網(wǎng)頁的內(nèi)容是靈魂，制作的網(wǎng)頁是否受歡迎，是否能吸引訪問者的眼球，是否能達到預(yù)期的效果。這些都是網(wǎng)頁制作時我們必須要預(yù)先考慮的問題。

那么如何完成內(nèi)容的定位泥?

① 在定位網(wǎng)站內(nèi)容時，要做到小而精，切忌包羅萬象。把你認為最精彩的東西都放在上面，那么往往會事與愿違，給人以內(nèi)容泛泛，大而空的感覺.最好做比較專一的內(nèi)容。試想，如果我們將自己最擅長的某種知識或技術(shù)等內(nèi)容做到網(wǎng)頁中，建立一個專題的站點，那么一旦有訪問者第一次在這里一下子就找到了他想找的內(nèi)容的話。那么如果再有這方面的需求，首先就會想到你的站點。

② 如果是個人網(wǎng)頁，那就一定要突出自身的個性，當(dāng)今社會是提倡張揚個性的時代，除了別人都有的內(nèi)容之外，自己還要融入一些自身的特點，是內(nèi)容要有亮點，配色也可不拘一格，大膽用色。從各個角度烘托出制作者的獨特性格。

③ 如果是企業(yè)的站點，要注意的是:企業(yè)的運營宗旨是否能完好體現(xiàn)，能否在網(wǎng)頁中最大限度體現(xiàn)企業(yè)網(wǎng)站功能和用戶最需要的內(nèi)容，用戶的操作是否簡便等;要做到網(wǎng)頁內(nèi)容主次分明，結(jié)構(gòu)要清晰簡潔。

④ 對于能留住訪問者的另一個重要問題，就是網(wǎng)頁的速度。對于一個瀏覽頁面時間超長的網(wǎng)頁，我想不會讓人有再次訪問的想法。對于線路和網(wǎng)路本身的速度我們不能控制，但我們可以在網(wǎng)頁設(shè)計中避免一些影響速度的因素。好的網(wǎng)頁應(yīng)是越簡單易讀越好。我們可以從以下幾個方面來考慮。首先，影響瀏覽速度的最重要因素之一是圖片容量大小，漂亮的圖片、絢麗的動畫效果，會使你的主頁增光添彩，但圖片的容量大小卻是直接導(dǎo)致瀏覽速度慢嚴重后果。盡管你的內(nèi)容精彩絕倫，網(wǎng)頁漂亮，但打開你的網(wǎng)頁需要等上半天，在這時間就是金錢的時代，誰會再次的光顧呢?可利用圖片制作工具將圖片進行加工，在不太影響效果的前提下，可利用修改存儲格式，降低像素，分辨率，減少動畫應(yīng)用等途經(jīng)來達到目的。

4 網(wǎng)頁制作步驟

制作網(wǎng)頁和裝修差不多，先從整體的角度構(gòu)思出網(wǎng)頁的內(nèi)容、色彩等，然后利用相應(yīng)的軟件進行實際操作。

① 網(wǎng)站定位

先確定所要建立的網(wǎng)站的類型，確定網(wǎng)站風(fēng)格，網(wǎng)站色調(diào)，網(wǎng)站層次，將網(wǎng)站結(jié)構(gòu)先確立出來。

② 收集素材

現(xiàn)在的互聯(lián)上的資源非常豐富，各種各樣的圖片資源、動畫資源等多媒體資源比比皆是，就所確定的網(wǎng)站風(fēng)格等因素，收集相關(guān)素材。

③ 使用Fireworks等圖型制作軟件將網(wǎng)頁先畫出來

這一步驟很關(guān)鍵，無論使用哪種網(wǎng)頁制作軟件，在進行編輯時經(jīng)常用到表格，用表格來定位圖片，用表格來定位文本，用表格來組合被切割的小圖片等。因為網(wǎng)頁發(fā)布時經(jīng)常會出現(xiàn)發(fā)布后位置更改的現(xiàn)象，使用表格來規(guī)劃網(wǎng)頁，會得到事半功倍的效果。另外，小圖片的下載速度要比一整張大圖片的下載速度快的多，所以在網(wǎng)頁中多是將大的圖片切割成小部分后，利用無邊框，無間距的表格將小圖片組合成一張大圖。那么，第一步，在使用表格制作前，應(yīng)用圖片處理軟件進行網(wǎng)頁設(shè)計，將整個網(wǎng)頁的效果圖片畫出來。第二步，利用Fireworks的切片工具，將所畫出的效果圖切成適合的小圖片，以備使用。

④ 利用Flash動畫制作軟件制作LOGO和Banner動畫

LOGO是網(wǎng)站的標識，是一個站點的象征，是網(wǎng)站形象的重要體現(xiàn)。一個精美的LOGO可以很好地樹立網(wǎng)站的形像。LOGO一般放在網(wǎng)頁的左上角，大小有三種常用規(guī)格:88×31、120×60和120×90。Banner被稱為網(wǎng)幅廣告、旗幟廣告或橫幅廣告，是網(wǎng)絡(luò)廣告的主要形式，一般使用GIF格式的圖像文件，也可以使用靜態(tài)圖形，也可用多幀圖像拼接為動畫圖像等[2]。

⑤ 添加相應(yīng)的服務(wù)技術(shù)

網(wǎng)頁如果被制作成動態(tài)網(wǎng)頁形式，首先要添加相應(yīng)的服務(wù)技術(shù)，在我們常用的windows系統(tǒng)中，先要添加IIS網(wǎng)絡(luò)服務(wù)組件，這是windows系統(tǒng)的組件，需要到控制面板中的添加或刪除程序?qū)υ捒蛑?，選擇添加刪除windows組件一項中進行internet信息服務(wù)(IIS)的添加，這時需要我們在光驅(qū)中放入系統(tǒng)，或者可以到網(wǎng)絡(luò)上進行下載。

⑥ 創(chuàng)建數(shù)據(jù)庫

網(wǎng)頁中留言板、信息反饋、用戶注冊等等內(nèi)容都要通過數(shù)據(jù)庫對其內(nèi)容進行存儲，以備網(wǎng)頁調(diào)用[3]。一般的asp動態(tài)網(wǎng)頁使用Access做為數(shù)據(jù)庫，Access使用起來很方便，可以根據(jù)向?qū)韯?chuàng)建數(shù)據(jù)庫內(nèi)容。

⑦ 使用Dreamweaver制作網(wǎng)頁

所有的準備工作已經(jīng)差不多了，我們現(xiàn)在要做的是，用Dreamweaver網(wǎng)頁制作軟件將已有的圖片、文本、數(shù)據(jù)庫等等內(nèi)容組合到一起，形成我們的網(wǎng)站。首先，創(chuàng)建一個新的站點，在站點內(nèi)新建網(wǎng)頁，一般使用index.htm或index.asp做主頁名稱。其次，在網(wǎng)頁中插入表格，將已經(jīng)完成的圖片、動畫等多媒體內(nèi)容插入到網(wǎng)頁中。然后，加入相應(yīng)的圖片效果、鼠標經(jīng)過、超級鏈接等內(nèi)容。最后添加相應(yīng)的樣式表內(nèi)容，還可以利用行為面板，給網(wǎng)頁加入一些特效，如彈出窗口、時間軸特效等。還可以從網(wǎng)站上下載插件，安裝在Dreamweaver中，以增添效果。如果動態(tài)網(wǎng)頁內(nèi)容需要添加數(shù)據(jù)庫鏈接內(nèi)容，那我們就要在Dreamweaver中的數(shù)據(jù)庫面板中進行操作，添加數(shù)據(jù)源、綁定數(shù)據(jù)、記錄集和服務(wù)器等內(nèi)容。使網(wǎng)頁更具有實效性。

5 結(jié)束語

網(wǎng)頁設(shè)計是一個注重實踐操作和設(shè)計的課程，需要我們在制作中不斷的學(xué)習(xí)，不斷的探索;在互聯(lián)網(wǎng)應(yīng)用如此廣泛的今天，網(wǎng)頁制作的是否精美、實用，是否有訪問量等等是評價網(wǎng)頁優(yōu)劣的最好方法。讓我們在實踐中進步，在實踐中走出一條屬于自己的路。

參考文獻:

[1] 丁桂芝.ASP動態(tài)網(wǎng)頁設(shè)計教程[M].北京:中國鐵道出版社，2005:16-18.

[2] 肖嘉.網(wǎng)頁設(shè)計與網(wǎng)站開發(fā)基礎(chǔ)教程[M].西安:西安電子科技大學(xué)出版社，2005:43-46.

[3] 何海霞.Dreamweaver8完美網(wǎng)頁設(shè)計—白金案例篇[M].北京:中國電力出版社，2006:20-23.