泉州信息職業(yè)技術(shù)學(xué)院畢題 目：姓 名：學(xué) 號： 090003029專 業(yè)：班 級： 09指導(dǎo)教師： 業(yè) 設(shè) 計 個人網(wǎng)站的設(shè)計

泉州信息職業(yè)技術(shù)學(xué)院

畢

題 目：

姓 名：

學(xué) 號： 090003029

專 業(yè)：

班 級： 09

指導(dǎo)教師： 業(yè) 設(shè) 計 個人網(wǎng)站的設(shè)計與實現(xiàn) 徐惠聰 計算機應(yīng)用技術(shù) 計應(yīng) 王源慶老師

2012年5月20日

泉州信息職業(yè)技術(shù)學(xué)院畢業(yè)論文（設(shè)計）

目 錄

前言 ................................................ 錯誤！未定義書簽。

一、個人網(wǎng)站設(shè)計需求分析 ................................................ ５

1.1、個人網(wǎng)站的問題定義與可行性分析 ................................. ５

1.1.1、功能定義 ................................................. ５

1.1.2、可行性分析 ............................................... ５

1.2、個人網(wǎng)站整體要求 ................................................ ６

1.2.1 功能要求 .................................................. ６

1.2.2、系統(tǒng)性能要求 ............................................. ６

1.2.3、關(guān)于未來需求 ............................................. ６

二、個人網(wǎng)站建立的步驟 .................................................. ６

2.1、確定網(wǎng)站主題 ................................................... ６

2.2、選擇好域名 ..................................................... ７

2.3、掌握建網(wǎng)工具 ................................................... ７

2.4、確定網(wǎng)站界面 ................................................... ８

2.6、 推廣自己的網(wǎng)站 ............................................. １１

三、網(wǎng)站開發(fā)環(huán)境及工具介紹 ............................................ １１

3.1、 個人網(wǎng)站開發(fā)環(huán)境 ............................................ １１

3.2、IIS 服務(wù) ...................................................... １１

3.3、ASP 及其特點 .................................................. １１

3.4、Dreamweaver 簡述 .............................................. １２

3.6、 Flash簡介 ................................................... １２

4.2、 網(wǎng)站結(jié)構(gòu)圖 .................................................. １３

２

泉州信息職業(yè)技術(shù)學(xué)院畢業(yè)論文（設(shè)計）

個人網(wǎng)站的設(shè)計與實現(xiàn)

09計應(yīng) 徐惠聰

摘 要

21世紀是Internet 飛速發(fā)展的時代，網(wǎng)絡(luò)也已經(jīng)越來越普及，很多人也已經(jīng)意識到網(wǎng)絡(luò)的強大生命力和它在未來將處于的重要地位，互聯(lián)網(wǎng)為我們提供了一個新的空間，新的領(lǐng)域，讓我們充分的表達自我，使得網(wǎng)站也不再僅僅為企業(yè)或公司等大型結(jié)構(gòu)所擁有，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟、生活等各個方面發(fā)揮著重要的作用。而在這其中，個人網(wǎng)站已經(jīng)日漸普及，而且發(fā)展到今天，創(chuàng)建一個能充分體現(xiàn)自我風(fēng)格和特色的個人網(wǎng)站已經(jīng)成為互聯(lián)網(wǎng)用戶的新追求。 本文主要是對個人網(wǎng)站的設(shè)計與實現(xiàn)進行研究和探討。

關(guān)鍵詞：個人網(wǎng)站 設(shè)計 實現(xiàn)

３

泉州信息職業(yè)技術(shù)學(xué)院畢業(yè)論文（設(shè)計）

前言

隨著科技的進步，時代的發(fā)展，計算機信息行業(yè)的逐步壯大，人們也越來越離不開各種各樣的信息了，人們對信息的追求也越來越迫切了?；ヂ?lián)網(wǎng)作為信息技術(shù)的通信橋梁連接著全球的計算機，而網(wǎng)站作為網(wǎng)絡(luò)信息主要的表現(xiàn)形式而且還是互聯(lián)網(wǎng)信息的主要承載者，在Internet 上表現(xiàn)出極其重要的地位，并發(fā)揮著極其重要的作用。Internet 的日益興起和以網(wǎng)頁為載體的網(wǎng)絡(luò)信息的廣泛傳播和應(yīng)用，使得網(wǎng)站的建設(shè)及網(wǎng)頁制作得到發(fā)展的空間，大至大型企業(yè)的產(chǎn)品推銷、售后服務(wù)、解決方案，小至個人Web 頁面開發(fā)，形形色色，五彩繽紛，網(wǎng)站建設(shè)和網(wǎng)頁制作也成為計算機網(wǎng)絡(luò)領(lǐng)域最熱門的話題。

個人網(wǎng)站設(shè)計是一種建立在新型媒體之上的新型設(shè)計，它與傳統(tǒng)媒體相比有許多的不同，它在信息傳播方面具有聲、像、圖、文、視覺、聽覺、互動的特點，通過視覺傳達各種各樣的個性化信息，而且更新和修正較為快捷方便，可以在任何時間更新，而不受時間和地域的限制。

４

一、個人網(wǎng)站設(shè)計需求分析

需求分析最根本的任務(wù)是確定“為了滿足客戶的需要，系統(tǒng)必須做什么”。具體的說，應(yīng)該確定系統(tǒng)必須具有的功能和性能，系統(tǒng)要求的運行環(huán)境，并且預(yù)測系統(tǒng)發(fā)展的前景。必須仔細分析系統(tǒng)中的資料，既要分析系統(tǒng)中的數(shù)據(jù)流，又要分析長期使用的資料儲存。該階段不是確定系統(tǒng)怎樣完成它的工作，而僅僅是確定系統(tǒng)必須完成哪些工作，也就是對目標系統(tǒng)提出完整、準確、清晰、具體的要求。

1.1、個人網(wǎng)站的問題定義與可行性分析

通常情況下，架設(shè)個人網(wǎng)站主要是為了通過互聯(lián)網(wǎng)表達個人在商業(yè)、科技、交際、生活等方面的信息需求或者進行信息的交流，具有較強的目的性，我的個人網(wǎng)站一般體現(xiàn)在：為了展示自己的風(fēng)采，讓大家和我一起分享我的心得與經(jīng)驗，讓和我有共同愛好的朋友有一個傾訴的地方。

1.1.1、功能定義

（1）管理員權(quán)限：修改所有頁面內(nèi)容、增刪改文章、管理評論、修改公告、修改管理員自身信息、編輯各頁面欄目、添加刪除圖片、添加刪除音樂、修改版權(quán)信息等。

（2）瀏覽者權(quán)限：閱讀所有頁面內(nèi)容、添加評論、添加留言、瀏覽文章、瀏覽圖片、瀏覽音樂等。

1.1.2、可行性分析

系統(tǒng)可行性分析主要從經(jīng)濟可行性、技術(shù)可行性和操作可行性三方面去分析。

（1）經(jīng)濟可行性分析

從系統(tǒng)的開發(fā)和效益關(guān)系上講，采用asp 這個可以開發(fā)出交互、高性能Web 數(shù)據(jù)庫應(yīng)用的技術(shù)進行開發(fā)，效率較高。該系統(tǒng)的開發(fā)不需要花費太多的經(jīng)費，只需在域名和服務(wù)器空間租用上有開銷，因為個人網(wǎng)站不涉及超大容量的文件存儲和龐大的訪問量，因此對于服務(wù)器來講，要求不會太高，開銷不會很大。因此，從經(jīng)濟性分析是可行的。

（2）技術(shù)可行性分析

根據(jù)現(xiàn)有的技術(shù)設(shè)備條件，在技術(shù)上實現(xiàn)也是可行的。在設(shè)備方面，前期系統(tǒng)開發(fā)在本地端制作完成，只需通過ftp 軟件上傳至服務(wù)器端即可，而軟件開發(fā)所需條件相對

泉州信息職業(yè)技術(shù)學(xué)院畢業(yè)論文（設(shè)計）

較低，對于系統(tǒng)開發(fā)及運行環(huán)境均不造成任何困難。對于系統(tǒng)開發(fā)人員基本具備了計算機專業(yè)知識，有一定的編程基礎(chǔ)，熟悉和掌握數(shù)據(jù)庫及網(wǎng)絡(luò)相關(guān)知識，具備開發(fā)條件。

（3）操作可行性

該系統(tǒng)操作上非常簡單，對于用戶來說，只要具備IE 瀏覽器5.5版本以上即可通過域名搜索即可登錄本站。

1.2、個人網(wǎng)站整體要求

1.2.1 功能要求

（1）頁面風(fēng)格簡潔明快，給人以較好的視覺印象。

（2）用戶瀏覽、操作均便捷，迅速。

（3）用戶權(quán)限、功能的設(shè)置要準確無誤。

1.2.2、系統(tǒng)性能要求

在目前硬件設(shè)備條件下，要求處理程序的速度相對較快。因此，在程序設(shè)計階段，優(yōu)化代碼，降低處理時間是需要考慮的問題。

1.2.3、關(guān)于未來需求

由于系統(tǒng)開發(fā)時間較短，可能不是很完善，在運行過程中還會遇到一些問題，所以應(yīng)在系統(tǒng)設(shè)計過程中對未來可能需要的擴充和修改做好準備，以便及時變更。

二、個人網(wǎng)站建立的步驟

2.1、確定網(wǎng)站主題

制作網(wǎng)站，首先必須要解決的就是網(wǎng)站內(nèi)容問題，即確定網(wǎng)站的主題。如果自己在某些方面有興趣，或掌握的資料較多，也可以做一個自己感興趣的東西，一者，你可以有自己的見解，做出自己的特色；二者，在制作網(wǎng)站時不會覺得無聊或者力不從心。興趣是制作網(wǎng)站的動力，沒有創(chuàng)作熱情，很難設(shè)計制作出優(yōu)秀的作品。

對于內(nèi)容主題的選擇，要做到小而精，主題定位要小，內(nèi)容要精。不要去試圖制作一個包羅萬象的站點，這往往會失去網(wǎng)站的特色，也會帶來高強度的勞動，給網(wǎng)站的及時更新帶來困難。

６

泉州信息職業(yè)技術(shù)學(xué)院畢業(yè)論文（設(shè)計）

2.2、選擇好域名

域名是網(wǎng)站在互聯(lián)網(wǎng)上的名字。一個非產(chǎn)品推銷的純信息服務(wù)網(wǎng)站，其所有建設(shè)的價值，都凝結(jié)在其網(wǎng)站域名之上。失去這個域名，所有前期工作就將全部落空。

目前，做個人網(wǎng)站的很多都依賴免費個人空間，其域名也是依賴免費域名指向，如網(wǎng)易的虛擬域名服務(wù)，其實這對個人網(wǎng)站的推廣與發(fā)展很為不利，不光是它“適時”開啟的窗口妨礙了瀏覽者的視線和好感，讓人一看就知道是個人網(wǎng)站，而且也妨礙了網(wǎng)頁的傳輸速度。所以，就我個人觀點來說，首先花點錢去注冊一個域名，獨立的域名就是個人網(wǎng)站的第一筆財富，要把域名起得形象、簡單、易記。

2.3、掌握建網(wǎng)工具

網(wǎng)絡(luò)技術(shù)的發(fā)展帶動了軟件業(yè)的發(fā)展，所以用于制作Web 頁面的工具軟件也越來越豐富。從最基本的HTML 編輯器到現(xiàn)在非常流行的Flash 互動網(wǎng)頁制作工具，各種各樣的Web 頁面制作工具，下面是幾款具有代表性的網(wǎng)頁制作器：

1、 HTML 編輯器。雖然HTML 代碼復(fù)雜，編輯和調(diào)試要花費大量的時間，但因HTML 的穩(wěn)定性、廣泛支持性及可創(chuàng)建復(fù)雜的頁面效果，仍受高級網(wǎng)頁制作人員的青睞。就目前來說，有眾多的編輯器供選擇，這些編輯器廣泛支持復(fù)雜頁面創(chuàng)建及高級HTML 規(guī)范，使用較為普遍的有Hotdog 等專業(yè)HTML 編輯器。

2、所見即所得的網(wǎng)頁編輯器。其中以Microsoft Frontpage 為代表，它具有如Word 一樣的操作界面，熟知Word 功能的操作者，只要稍加培訓(xùn)就能輕松編制網(wǎng)頁。而且，F(xiàn)rontpage 還能解析網(wǎng)頁的HTML 源代碼，并提供了預(yù)覽支持。但Frontpage 的一些特殊顯示功能并不能在其它非IE 瀏覽器下實現(xiàn)。所以Frontpage 是一款非常適合初、中級網(wǎng)頁制作人員使用的工具軟件。

3、Flash 互動網(wǎng)頁制作工具。這是一款功能非常強大的交互式矢量多媒體網(wǎng)頁制作工具。能夠輕松輸出各種各樣的動畫網(wǎng)頁，它不需要特別繁雜的操作，也比JAVA 小巧精悍！但它的動畫效果、互動效果、多媒體效果十分出色。而且還可以在Flash 動畫中封裝Mp3音樂、填寫表單等；并且由于Flash 編制的網(wǎng)頁文件比普通網(wǎng)頁文件要小得多，所以大大加快了瀏覽速度。這是一款十分適合動態(tài)Web 制作的工具。

當然，互聯(lián)網(wǎng)還是一個免費的資料庫。編制網(wǎng)頁需要多種多樣的按鈕、背景還有各種各樣圖形、圖片。如果這些都要靠自己完成，既浪費時間又浪費金錢，而且還需要強大的圖形、圖片制作技術(shù)。所以，為了省卻這些麻煩，網(wǎng)站制作者完全可以從網(wǎng)上下載各種精美實用的圖片、按鈕、背景等網(wǎng)頁素材。

７

泉州信息職業(yè)技術(shù)學(xué)院畢業(yè)論文（設(shè)計）

2.4、確定網(wǎng)站界面

界面就是網(wǎng)站給瀏覽者的第一印象，往往決定著網(wǎng)站的可看性，在確定網(wǎng)站的界面時要注意以下三點：

2.4.1、欄目與板塊編排

構(gòu)建一個網(wǎng)站就好比寫一篇論文，首先要列出題綱，才能主題明確、層次清晰。網(wǎng)站建設(shè)初學(xué)者，最容易犯的錯誤就是：確定題材后立刻開始制作，沒有進行合理規(guī)劃。從而導(dǎo)致網(wǎng)站結(jié)構(gòu)不清晰，目錄龐雜混亂，板塊編排混亂等。結(jié)果不但瀏覽者看得糊里糊涂，制作者自己在擴充和維護網(wǎng)站也相當困難。所以，我們在動手制作網(wǎng)頁前，一定要考慮好欄目和板塊的編排問題。

網(wǎng)站的題材確定后，就要將收集到的資料內(nèi)容作一個合理的編排。比如，將一些最吸引人的內(nèi)容放在最突出的位置或者在版面分布上占優(yōu)勢地位。欄目的實質(zhì)是一個網(wǎng)站的大綱索引，索引應(yīng)該將網(wǎng)站的主體明確顯示出來。在制定欄目的時候，要仔細考慮，合理安排。在欄目編排時需要注意的是：

◆ 盡可能刪除那些與主題無關(guān)的欄目；

◆ 盡可能將網(wǎng)站內(nèi)最有價值的內(nèi)容列在欄目上；

◆ 盡可能從訪問者角度來編排欄目以方便訪問者的瀏覽和查詢；輔助內(nèi)容，如站

點簡介、版權(quán)信息、個人信息等大可不必放在主欄目里，以免沖淡主題。

另外，板塊的編排設(shè)置也要合理安排與劃分。板塊比欄目的概念要大一些，每個板塊都有自己的欄目。一般來說，個人站點內(nèi)容較少，只要分個欄目也就夠了，不需要設(shè)置板塊。如果有必要設(shè)置板塊的，應(yīng)該注意：

◆ 各板塊要有相對獨立性；

◆ 各板塊要有相互關(guān)聯(lián)；

◆ 各板塊的內(nèi)容要圍繞站點主題；

2.4.2、目錄結(jié)構(gòu)與鏈接結(jié)構(gòu)

網(wǎng)站的目錄是指建立網(wǎng)站時創(chuàng)建的目錄。目錄的結(jié)構(gòu)是一個容易忽略的問題，大多數(shù)站長都是未經(jīng)規(guī)劃，隨意創(chuàng)建子目錄。目錄結(jié)構(gòu)的好壞，對瀏覽者來說并沒有什么太大的感覺，但是對于站點本身的維護，以后內(nèi)容的擴充和移植有著重要的影響。所以建立目錄結(jié)構(gòu)時也要仔細安排。

８

泉州信息職業(yè)技術(shù)學(xué)院畢業(yè)論文（設(shè)計）

另需要注意的還有：目錄的層次不要太深，不要超過3層；不要使用中文目錄，使用中文目錄可能對網(wǎng)址的正確顯示造成困難；不要使用過長的目錄，太長的目錄名不便于記憶；盡量使用意義明確的目錄，以便于記憶和管理。

網(wǎng)站的鏈接結(jié)構(gòu)是指頁面之間相互鏈接的拓撲結(jié)構(gòu)。它建立在目錄結(jié)構(gòu)基礎(chǔ)之上，但可以跨越目錄。形象的說：每個頁面都是一個固定點，鏈接則是在兩個固定點之間的連線。一個點可以和一個點連接，也可以和多個點連接。更重要的是，這些點并不是分布在一個平面上，而是存在于一個立體的空間中。一般的，建立網(wǎng)站的鏈接結(jié)構(gòu)有兩種基本方式：

◆ 樹狀鏈接結(jié)構(gòu)（一對一），這類似DOS 的目錄結(jié)構(gòu)，首頁鏈接指向一級頁面，一

級頁面鏈接指向二級頁面。這樣的鏈接結(jié)構(gòu)瀏覽時，一級級進入，一級級退出，條理比較清晰，訪問者明確知道自己在什么位置，不會“不知身在何處”，但是

瀏覽效率低，一個欄目下的子頁面到另一個欄目下的子頁面，必須回到首頁再

進行。

◆ 星狀鏈接結(jié)構(gòu)（一對多），類似網(wǎng)絡(luò)服務(wù)器的鏈接，每個頁面相互之間都建立有

鏈接。這樣瀏覽比較方便，隨時可以到達自己喜歡的頁面。但是由于鏈接太多，容易使瀏覽者迷路，搞不清自己在什么位置，看了多少內(nèi)容。

因此，在實際的網(wǎng)站設(shè)計中，總是將這兩種結(jié)構(gòu)混合起來使用。網(wǎng)站希望瀏覽者既可以方便快速地達到自己需要的頁面，又可以清晰地知道自己的位置。所以，最好的辦法是：首頁和一級頁面之間用星狀鏈接結(jié)構(gòu)，一級和二級頁面之間用樹狀鏈接結(jié)構(gòu)。關(guān)于鏈接結(jié)構(gòu)的設(shè)計，在實際的網(wǎng)頁制作中是非常重要一環(huán)，采用什么樣的鏈接結(jié)構(gòu)直接影響到版面的布局。

2.4.3、進行形象設(shè)計

網(wǎng)站的設(shè)計可以從以下幾點出發(fā)：

◆ 設(shè)計網(wǎng)站標志(LOGO)。LOGO 是網(wǎng)站的標志，可以是中文、英文字母，也可以是

符號、圖案等。LOGO 的設(shè)計創(chuàng)意應(yīng)當來自網(wǎng)站的名稱和內(nèi)容。比如：網(wǎng)站內(nèi)有

代表性的人物、動物、植物，可以用它們作為設(shè)計的藍本，加以卡通化或者藝

術(shù)化；專業(yè)網(wǎng)站可以以本專業(yè)有代表的物品作為標志。最常用和最簡單的方式

是用自己網(wǎng)站的英文名稱作標志，采用不同的字體、字母的變形、字母的組合

可以很容易制作好自己的標志。

９

泉州信息職業(yè)技術(shù)學(xué)院畢業(yè)論文（設(shè)計）

◆ 設(shè)計網(wǎng)站色彩。網(wǎng)站給人的第一印象來自視覺沖擊，不同的色彩搭配產(chǎn)生不同

的效果，并可能影響到訪問者的情緒。“標準色彩”是指能體現(xiàn)網(wǎng)站型象和延伸

內(nèi)涵的色彩，要用于網(wǎng)站的標志，標題，主菜單和主色塊。給人以整體統(tǒng)一的

感覺。至于其它色彩也可以使用，但應(yīng)當只是作為點綴和襯托，絕不能喧賓奪

主。一般來說，一個網(wǎng)站的標準色彩不超過3種，太多則讓人眼花繚亂。一般

適合于網(wǎng)頁標準色的顏色有：藍色，黃/橙色，黑/灰/白色三大系列色。

◆ 設(shè)計網(wǎng)站字體。和標準色彩一樣，標準字體是指用于標志，標題，主菜單的特

有字體。一般網(wǎng)頁默認的字體是宋體。為了體現(xiàn)站點的“與眾不同”和特有風(fēng)

格，可以根據(jù)需要選擇一些特別字體。制作者可以根據(jù)自己網(wǎng)站所表達的內(nèi)涵，

選擇更貼切的字體。需要說明的是：使用非默認字體只能用圖片的形式，因為

很可能瀏覽者的計算機里沒有安裝特別字體，那么辛苦設(shè)計制作便可能付之東

流了。

◆ 設(shè)計網(wǎng)站宣傳語。也可以說是網(wǎng)站的精神、主題與中心，或者是網(wǎng)站的目標，

用一句話或者一個詞來高度概括。用富有氣勢的話或詞語來概括網(wǎng)站，進行對

外宣傳，可以收到比較好的結(jié)果。

2.5、確定網(wǎng)站風(fēng)格

“風(fēng)格”是抽象的，是指站點的整體形象給瀏覽者的綜合感受。這個“整體形象”包括站點的CI （標志，色彩，字體，標語）、版面布局、瀏覽方式、交互性、文字、語氣、內(nèi)容價值等等諸多因素，網(wǎng)站可以是平易近人的、生動活潑的也可以是專業(yè)嚴肅的。不管是色彩、技術(shù)、文字、布局，還是交互方式，只要你能由此讓瀏覽者明確分辨出這是你網(wǎng)站獨有的，這就形成了網(wǎng)站的“風(fēng)格”。

風(fēng)格是有人性的，通過網(wǎng)站的色彩、技術(shù)、文字、布局、交互方式可以概括出一個站點的個性：是粗獷豪放，還是清新秀麗；是溫文儒雅，還是執(zhí)著熱情。

總之，有風(fēng)格的網(wǎng)站與普通網(wǎng)站的區(qū)別在于：在普通網(wǎng)站上你看到的只是堆砌在一起的信息，你只能用理性的感受來描述，在有風(fēng)格的網(wǎng)站上你可以獲得除內(nèi)容之外的更感性的認識。

在明確自己想給人以怎樣的印象后，要找出網(wǎng)站中最有特色的東西，就是最能體現(xiàn)網(wǎng)站風(fēng)格的東西。并以它作為網(wǎng)站的特色加以重點強化、宣傳?？傊L(fēng)格的形成不是一次定位的，你可以在實踐中不斷強化、調(diào)整、改進。

１０