個人網站的設計與制作

摘要:如今互聯網已成為人們快速獲取、發布和傳遞信息的重要渠道。網站在互聯網的應用中也越來越受到人們的重視，網絡大發展的趨勢就是向個人網站發展。如今個人網站已成為表達自我的自由天地，也給不少人創造了財富。本文圍繞個人網站的設計步驟、原則、制作、開發工具等方面展開了討論。

關鍵詞:個人網站;網站設計;網站制作

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

1 對個人網站的認識

個人網站是指個人或團體因某種興趣、擁有某種專業技術、提供某種服務或把自己的作品、商品展示銷售而制作的具有獨立空間域名的網站。個人網站一直是多元化互聯網世界的一支重要力量，它是以一個人為中心、不需要強大的資歷背景，且低成本運作，因此個人網站多屬于草根類型，吸引了眾多愛好者和追隨者。

目前最流行的一類是根據個人愛好設置的個人網站，這類網站是給個人一個展示自我的空間，同時利用制作頁面來達到熟悉網站制作的目的;一類是網站的內容基本上與計算機的軟硬件有關，也會拿如何制作網站、各類軟件、MP3和圖片下載來當內容的;另一類就是在內容上力求單一，在未來發展上力求商業化的網站，這類網站通過廣告宣傳，推銷商品等營銷手段，達到網上開店的目的。這類個人網站隨著電子商務的普及，具有廣泛的市場與前景。

2 個人網站設計與制作

網站的開發是一個系統工程，有自己特定的工作流程，只有遵循這個步驟，按部就班地一步步來，才能設計出一個滿意的網站。

2.1 網站的規劃

個人網站的規劃好比建一座大樓的設計圖，它包含了建立網站目的、目標用戶、組織結構和導航結構、使用的多媒體元素、用戶界面、版面設計等內容。

1) 明確網站開發目的、目標用戶、網站主題和構思創意。個人網站可以根據自己的興趣愛好或自己關注的話題來確定網站的主題，如科普知識推廣、文學筆者交流、計算機軟硬件的疑難問題討論，又或者直截做個人推銷等等。網站應根據用戶需求的不同而采用不同的形式，如有只提供簡潔文本信息的，也有用多媒體表現手法，提供圖像、動畫、聲音和視頻的。要做到網站主題鮮明突出，要點明確，以簡單明確的語言和畫面體現主題。調動一切手段充分表現網站的個性和情趣，辦出網站的特點。

2) 相關主題材料的搜集和整理。個人網站的選材需要小而精。收集的內容包括網站徽標、背景圖片、按鈕圖片以及其他展示的相關內容。

3) 規劃網站功能模塊，確定網站的框架、組織結構和導航結構的設計。對個人網站需要設計的欄目和版塊有明確的劃分。所有的超鏈接應清晰無誤地向讀者標識出來，導航性質的設置，如圖片按扭都要有清晰的標識;鏈接文本的顏色最好用約定俗成的:未訪問的，藍色;點擊過的，紫色;清晰的導航條還要求:用戶進入目的頁面的點擊次數不能超過三次。

4) 網站開發工具和開發平臺的選擇。根據設計者實際情況和個人喜好選擇，目前常用的工具是Frontpage、網頁三劍客Dreamweaver、Flash、Fireworks和ASP或ASP.net等等。

2.2 網站的開發

1) 框架的開發。用樹狀結構把每個網頁的內容大綱列出來，特別是制作一個較大的網站(頁面很多)的時候，要把框架規劃好，同時也要考慮到以后擴充的可能性，免得做好以后反復更改整個網站的構架。整體框架的設計確保網站格式統一和層次清晰，首頁中提供各個頁面的鏈接，并簡要介紹網站的內容和主題。二級網頁中設計好主要內容，針對欄目要求提供相應的三級頁面內容鏈接。

2) 多媒體元素包括文字、圖形圖像、動畫、聲音和視頻的文件制作。充分利用軟件工具將需要展示的內容以新鮮有趣的方式做出來。這也是吸引瀏覽者注意力的有效方式之一，可以將頁面的內容用三維動畫、FLASH等形式來表現，增加趣味性，同時考慮客戶端的傳輸速度。

3) 內容的增加。保證內容的準確性和合法性。網頁設計是一種視覺語言，講究編排和布局的合理性，使瀏覽者有一個流暢的視覺體驗。運用對比與調和、對稱與平衡、節奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關系建立整體的均衡狀態，產生和諧的美感。首頁是整個網站精華的匯集，因此首頁的設計也是個人網站建設中最難最花功夫的工作。

2.3 網站的實現與維護

1) 網站測試與調試。制作出的網站可以先在本地進行測試，檢查站點的瀏覽器兼容性已經可能存在的錯誤鏈接等，發現錯誤及時調試，然后再測試，直到無誤。

2) 空間、域名申請與網站上傳。在互聯網上根據網站大小申請，選擇一個相對速度快、性能穩定、網絡環境適合的免費空間上傳，也可申請收費空間。然后將網頁通過上傳工具(cuteftp， flashfxp)傳至服務器指定的目錄中去。建議申請個自己的域名，這樣不管你走到哪里，你的虛擬空間換到什么地方，域名始終如一，朋友還是訪客都能一樣找到你。

4) 宣傳推廣與維護更新。為提高網站的知名度，可在搜索引擎上注冊、登記，參加廣告交換，也可以與其他網站友情鏈接，在各大論壇參與熱點討論等，提高訪客點擊率。網站最大特點就是更新快，因此網站更新維護需及時。

3 網站設計制作工具

主要介紹下常用的網頁三劍客Dreamweaver、Flash、Fireworks和ASP.net:

1) Dreamweaver。是做網站、網頁的基本框架結構的。建立 Web 站點和應用程序的專業工具，將可視布局工具、應用程序開發功能和代碼編輯支持組合在一起，其功能強大，使得各個層次的開發人員和設計人員都能夠快速創建界面吸引人的基于標準的網站和應用程序。從對基于 CSS 的設計的領先支持到手工編碼功能，Dreamweaver 提供了專業人員在一個集成、高效的環境中所需的工具。開發人員可以使用 Dreamweaver 及所選擇的服務器技術來創建功能強大的 Internet 應用程序，從而使用戶能連接到數據庫、Web服務和舊式系統

2) Flash。設計網站中所需要的動畫文件的。是交互式矢量圖和Web動畫的標準。設計者使用Flash能創建漂亮的、可改變尺寸的、以及極其緊密的導航界面、技術說明以及其他奇特的效果。

3) Fireworks。加工處理圖片的工具。在直觀、可定制的環境中創建和優化用于網頁的圖像并進行精確控制。業界領先的優化工具，在最佳圖像品質和最小壓縮大小之間達到平衡。它與Dreamweaver 和 Flash共同構成的集成工作流程可以創建并優化圖像，同時又能避免由于進行 Roundtrip 編輯而丟失信息或浪費時間。

4) ASP或ASP.net。ASP全稱Active Server Pages，“動態服務器網頁”，所產生的執行結果都是標準的HTML格式，而且這些程序是在網絡服務端中執行，使用一般的瀏覽器(如IE或Netscape)都可以正確地獲得ASP的“執行”結果。ASP.net不僅僅是ASP的下一個版本，而且是一種建立在通用語言上的程序構架，能被用于一臺Web服務器來建立強大的Web應用程序。ASP.net提供許多比現在的Web開發模式強大的優勢。

4 網站建設中要注意的其它問題

1) 網頁保存和代碼輸入過程中文件名和輸入法不能使用中文，它可能導致上傳到網上后由于系統無法識別而無法顯示，且必須使用小寫字母。

2) 統籌考慮網頁的整體配色，與文字的選色要協調。

3) 圖片最好用GIF格式，文件小，網速慢的時候打開也快，否則用戶等不及就將網頁關了，或換到其他快的網站了，你的訪問量也會越來越少，形成惡性循環。

4) 圖片處理。建議網頁制作過程中標簽中不要帶上width和height兩個屬性，這是因為在制作過程中，圖片往往需要反復修改，這樣可以避免人為干預圖片顯示的尺寸，盡可能的發揮瀏覽器自身的功能，在網頁制作的最后給附上width和height屬性，防止抖動現象發生。

5) 文字處理。使用CSS樣式表來定義整個網站文字風格。為了保證不同瀏覽器上字號保持一致，字號建議用點數pt或像素px來定義，pt一般使用中文宋體的9pt和11pt，px一般使用中文宋體12px和14.7px，這是經過優化的字號，黑體字或者宋體字加粗時，一般選用11pt和14.7px的字號比較合適。

參考文獻:

[1] Colleen Coorough and Jim Shuman. Multimedia For the Web Revealed. Deluxe Education Edition.

[2] 孫江宏.計算機網頁制作與設計應用教程[M].北京:北京工業大學出版社，2003.

[3] 陳強.網頁制作教程[M].北京:人民郵電出版社.2004.