河南農(nóng)業(yè)大學(xué) 本科生畢業(yè)論文（設(shè)計(jì)）題 目 個(gè)人動(dòng)態(tài)網(wǎng)站設(shè)計(jì) 學(xué) 院 機(jī)電工程

河南農(nóng)業(yè)大學(xué) 本科生畢業(yè)論文（設(shè)計(jì)）

題 目 個(gè)人動(dòng)態(tài)網(wǎng)站設(shè)計(jì) 學(xué) 院 機(jī)電工程學(xué)院 專業(yè)班級(jí)

學(xué)生姓名 指導(dǎo)教師

撰寫(xiě)日期：

1

摘 要

現(xiàn)在網(wǎng)絡(luò)已經(jīng)成為了我們生活中不可缺少的元素，簡(jiǎn)單的HTML 網(wǎng)頁(yè)但它已不能滿足人們想互動(dòng)或者隨時(shí)更新網(wǎng)站內(nèi)容的需求，所以應(yīng)用而生的是一種動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)。本網(wǎng)站是用ASP 語(yǔ)言和Vbscript 腳本語(yǔ)言實(shí)現(xiàn)，后臺(tái)數(shù)據(jù)選用office Access數(shù)據(jù)庫(kù)，可以實(shí)行最基本的功能如，站內(nèi)留言，寫(xiě)日志，音樂(lè)播放與下載，相冊(cè)瀏覽，網(wǎng)站瀏覽人數(shù)統(tǒng)計(jì)以及后臺(tái)管理的功能。其中留言，日志和音樂(lè)頁(yè)面用到了動(dòng)態(tài)ASP 技術(shù)，實(shí)現(xiàn)網(wǎng)站的即時(shí)更新，相冊(cè)，個(gè)人檔案等則是純粹的靜態(tài)頁(yè)面. 可以這樣理解，動(dòng)態(tài)網(wǎng)頁(yè)其實(shí)是服務(wù)器根據(jù)用戶提交的條件而生成的一個(gè)靜態(tài)頁(yè)面。

關(guān)鍵詞：ASP 技術(shù)，動(dòng)態(tài)網(wǎng)站，網(wǎng)頁(yè)

2

Personal dynamic website design

Abstract

Now the network has become indispensable elements in our life, Past simple HTML page can not satisfy us to do something like interacting or updating website content, So the dynamic web technology comes. This site has been developed by Vbscript and ASP scripting language, And the office Access database has been used, which can implemented some basic functions such as message, log, music playing or down, browsing the photos of myself, counting the visitors of my web, as well as the back-stage management. In other words, the dynamic web actually is a static page generated by the server which is based on the user’s condition .

Key Words ：ASP technology；dynamic website；web page

3

目 錄

1 引言 ............................................................. - 1 -

2開(kāi)發(fā)技術(shù).............................................................. 2

2.1 IIS ................................................................ 2

2.1.1 IIS的添加........................................................ 3

2.1.2 IIS的運(yùn)行........................................................ 3

2.2 ASP簡(jiǎn)介............................................................ 4

2.3 office Access數(shù)據(jù)庫(kù)................................................ 4

2.4 Microsoft Dreamweave 8簡(jiǎn)介........................................ 5

2.5 adode Photoshop CS ................................................. 5

3 網(wǎng)站設(shè)計(jì) ............................................................. 5

3.1數(shù)據(jù)庫(kù)的設(shè)計(jì)........................................................ 5

3.2圖片準(zhǔn)備............................................................ 7

3.3首頁(yè)的制作.......................................................... 8

3.4音樂(lè)頁(yè)面制作........................................................ 9

3.4.1音樂(lè)數(shù)據(jù)庫(kù)鏈接.................................................... 9

3.4.2播放與下載頁(yè)面................................................... 11

3.5留言頁(yè)面制作....................................................... 13

3.5.1留言模板的建立................................................... 13

3.5.2查看留言......................................................... 14

3.5.3寫(xiě)留言........................................................... 15

3.5.4管理員回復(fù)與刪除................................................. 15

3.6日志頁(yè)面制作....................................................... 17

3.7相冊(cè)頁(yè)面的制作..................................................... 18

3.8友情鏈接板塊....................................................... 19

參考文獻(xiàn) .............................................................. 20

致 謝 ................................................................. 21

附錄1：寫(xiě)留言模塊源代碼............................................... 22 4

附錄2：管理員刪除頁(yè)面源代碼..........................2錯(cuò)誤！未定義書(shū)簽。 5

1 引言

隨著科技的進(jìn)步，時(shí)代的發(fā)展，計(jì)算機(jī)信息行業(yè)的逐步壯大，加上人們也越來(lái)越離不開(kāi)各種各樣的信息，對(duì)信息的追求更是越來(lái)越迫切了，因此計(jì)算機(jī)信息的發(fā)展也必須適應(yīng)這一潮流。然而現(xiàn)代社會(huì)的人們喜歡在網(wǎng)絡(luò)上張顯自己的個(gè)性，寫(xiě)出自己的心情，記下身邊一些奇怪有趣的事，在網(wǎng)絡(luò)上粘貼自己個(gè)性的相冊(cè)，制作自己個(gè)人的網(wǎng)站，有些用于商業(yè)目的，有些用于娛樂(lè)，但最終都是滿足了自己的愛(ài)好，同時(shí)又學(xué)到了自己需要的知識(shí)。由于本人的知識(shí)水平有限，實(shí)際的經(jīng)驗(yàn)也不足，所以所制作出來(lái)的作品有許多的不足和漏洞，希望大家提出寶貴的意見(jiàn)和批評(píng)。以下是我的設(shè)計(jì)思想

第一步：確定網(wǎng)站結(jié)構(gòu)

網(wǎng)站包括那些欄目，采用怎樣的制作結(jié)構(gòu)，這些都是我們?cè)谥谱骶W(wǎng)站前要首先確定的，網(wǎng)站結(jié)構(gòu)為以后的設(shè)計(jì)奠定了基礎(chǔ)。合理的網(wǎng)站欄目結(jié)構(gòu)其實(shí)并沒(méi)有什么特別之處，但是能直觀正確的表達(dá)網(wǎng)站的基本內(nèi)容及其內(nèi)容之間的層次關(guān)系，站在用戶的角度考慮，使得用戶在網(wǎng)站瀏覽時(shí)可以方便的獲取信息，不至于迷失。

圖1-1是我個(gè)人網(wǎng)站的結(jié)構(gòu)圖：

圖1-1 網(wǎng)站結(jié)構(gòu)圖

第二步：確定網(wǎng)站風(fēng)格

.- 1 -.

風(fēng)格是抽象的，是指網(wǎng)站餓整體形象給瀏覽者的綜合感受。這個(gè)整體形象包括網(wǎng)站色彩，字體，版面布局，瀏覽方式，文字，語(yǔ)氣等諸多因素，網(wǎng)站可以是平易近人的、生動(dòng)活潑的也可以是專業(yè)嚴(yán)肅的。不管是色彩、文字、布局還是交互方式，只要能由此讓瀏覽者明確分辨出這是你網(wǎng)站獨(dú)有的，這就是網(wǎng)站的風(fēng)格。我的網(wǎng)站堅(jiān)持使用純色或者顏色比較一致的圖片做背景，這樣是讀者看起來(lái)不至于產(chǎn)生幻覺(jué)，風(fēng)格的形成不是一次定位的，我們可以在事件中不斷強(qiáng)化、改進(jìn)、調(diào)整。

第三步：給網(wǎng)站申請(qǐng)域名

域名是聯(lián)接網(wǎng)站和互聯(lián)網(wǎng)網(wǎng)址的紐帶，它像品牌、商標(biāo)一樣具有重要的識(shí)別作用，是訪問(wèn)者通達(dá)網(wǎng)站的“鑰匙”，是網(wǎng)站在網(wǎng)絡(luò)上存在的標(biāo)志，擔(dān)負(fù)著標(biāo)示站點(diǎn)和導(dǎo)向網(wǎng)站站點(diǎn)的雙重作用。 在選取域名的時(shí)候，首先要遵循兩個(gè)基本原則。

1．域名應(yīng)該簡(jiǎn)明易記，便于輸入

這是判斷域名好壞最重要的因素。一個(gè)好的域名應(yīng)該短而順口，便于記憶，最好讓人看一眼就能記住，而且讀起來(lái)發(fā)音清晰，不會(huì)導(dǎo)致拼寫(xiě)錯(cuò)誤。此外，域名選取還要避免同音異義詞。

2．域名要有一定的內(nèi)涵和意義

用有一定意義和內(nèi)涵的詞或詞組作域名，不但可記憶性好，而且有助于實(shí)現(xiàn)企業(yè)的營(yíng)銷目標(biāo)。例如個(gè)人愛(ài)好，喜歡的詞語(yǔ)或者企業(yè)網(wǎng)站的話可以選擇企業(yè)名稱、產(chǎn)品名稱等都是不錯(cuò)的選擇，這樣能更加方面記憶以及加強(qiáng)宣傳作用。一個(gè)好的域名會(huì)大大增加網(wǎng)站在互聯(lián)網(wǎng)上的知名度，本站注冊(cè)lmonkey 就取之簡(jiǎn)記, 因此，如何選取好的域名就顯得十分重要。

對(duì)于初學(xué)者來(lái)說(shuō)可以申請(qǐng)免費(fèi)域名來(lái)檢測(cè)，本站在5944.net 注冊(cè)了免費(fèi)空間，網(wǎng)站為http://lmonkey.8c8c.info/ ，因?yàn)槭敲赓M(fèi)的所以空間不太穩(wěn)定并且有一定的時(shí)間限制。

2 開(kāi)發(fā)技術(shù)

2.1 IIS

IIS 是Internet Information Server 的縮寫(xiě)，它是微軟公司主推的Web 服務(wù)器，基于運(yùn)行Microsoft Windows 的互聯(lián)網(wǎng)基本服務(wù)。最初是Windows NT 版本的可選包，隨后內(nèi)置在Windows 2000、Windows XP Professional和Windows Server 2003一起

.- 2 -.

發(fā)行，但在普遍使用的Windows XP Home版本上并沒(méi)有IIS 。IIS 意味著你能發(fā)布網(wǎng)頁(yè)，并且有ASP （Active Server Pages ）、JAVA 、VBscript 產(chǎn)生頁(yè)面，有著一些擴(kuò)展功能。它的一個(gè)重要特性是支持ASP ，IIS3.0版本以后引入了ASP ，可以很容易的張貼動(dòng)態(tài)內(nèi)容和開(kāi)發(fā)基于Web 的應(yīng)用程序。

2.1.1 IIS的添加

進(jìn)入“控制面板”，依次選“添加/刪除程序→添加/刪除Windows 組件”，將“Internet 信息服務(wù)（IIS ）”前的小鉤去掉（如有），重新勾選中后按提示操作即可完成IIS 組件的添加。用這種方法添加的IIS 組件中將包括Web 、FTP 、NNTP 和SMTP 等全部四項(xiàng)服務(wù)。

2.1.2 IIS的運(yùn)行

當(dāng)IIS 添加成功之后，再進(jìn)入“開(kāi)始→設(shè)置→控制面板→管理工具→Internet 服務(wù)管理器(Internet信息服務(wù)) ”以打開(kāi)IIS 管理器，對(duì)于有“已停止”字樣的服務(wù)，均在其上單擊右鍵，選“啟動(dòng)”來(lái)開(kāi)啟[1]。

安裝成功后的頁(yè)面如下（IIS 默認(rèn)的網(wǎng)站 http://localhost/）：

圖2-1 IIS安裝測(cè)試成功頁(yè)面

.- 3 -.

2.2 ASP簡(jiǎn)介

ASP 是一種服務(wù)器端腳本編寫(xiě)環(huán)境，可以用來(lái)創(chuàng)建和運(yùn)行動(dòng)態(tài)網(wǎng)頁(yè)或Web 應(yīng)用程序。ASP 網(wǎng)頁(yè)可以包含HTML 標(biāo)記、普通文本、腳本命令以及COM 組件等。利用ASP 可以向網(wǎng)頁(yè)中添加交互式內(nèi)容（如在線表單），也可以創(chuàng)建使用HTML 網(wǎng)頁(yè)作為用戶界面的web 應(yīng)用程序。 與HTML 相比，ASP 網(wǎng)頁(yè)具有以下特點(diǎn)：

（1）利用ASP 可以實(shí)現(xiàn)突破靜態(tài)網(wǎng)頁(yè)的一些功能限制，實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)；

（2）ASP 文件是包含在HTML 代碼所組成的文件中的，易于修改和測(cè)試；

（3）服務(wù)器上的ASP 解釋程序會(huì)在服務(wù)器端執(zhí)行ASP 程序，并將結(jié)果以HTML 格式傳送到客戶端瀏覽器上，因此使用各種瀏覽器都可以正常瀏覽ASP 所產(chǎn)生的網(wǎng)頁(yè)；

（4）ASP 提供了一些內(nèi)置對(duì)象，使用這些對(duì)象可以使服務(wù)器端腳本功能更強(qiáng)。例如可以從web 瀏覽器中獲取用戶通過(guò)HTML 表單提交的信息，并在腳本中對(duì)這些信息進(jìn)行處理，然后向web 瀏覽器發(fā)送信息；

（5）ASP 可以使用服務(wù)器端ActiveX 組件來(lái)執(zhí)行各種各樣的任務(wù)，例如存取數(shù)據(jù)庫(kù)、發(fā)送Email 或訪問(wèn)文件系統(tǒng)等。

（6）由于服務(wù)器是將ASP 程序執(zhí)行的結(jié)果以HTML 格式傳回客戶端瀏覽器，因此使用者不會(huì)看到ASP 所編寫(xiě)的原始程序代碼，可防止ASP 程序代碼被竊取。

(7)開(kāi)發(fā)需要有豐富的經(jīng)驗(yàn), 否則會(huì)留出漏洞, 讓黑客利用進(jìn)行注入攻擊.

當(dāng)在Web 站點(diǎn)中融入ASP 功能后，將發(fā)生以下事情：

1、用戶向?yàn)g覽器地址欄輸入網(wǎng)址，默認(rèn)頁(yè)面的擴(kuò)展名是.asp 。

2、瀏覽器向服務(wù)器發(fā)出請(qǐng)求。

3、服務(wù)器引擎開(kāi)始運(yùn)行ASP 程序。

4、ASP 文件按照從上到下的順序開(kāi)始處理，執(zhí)行腳本命令，執(zhí)行HTML 頁(yè)面內(nèi)容。

5、頁(yè)面信息發(fā)送到瀏覽器。 [2]

2.3 office Access數(shù)據(jù)庫(kù)

Access 是微軟公司推出的基于Windows 的桌面關(guān)系數(shù)據(jù)庫(kù)管理系統(tǒng)（RDBMS ，即Relational Database Management System），是Office 系列應(yīng)用

.- 4 -.

軟件之一。它提供了表、查詢、窗體、報(bào)表、頁(yè)、宏、模塊7種用來(lái)建立數(shù)據(jù)庫(kù)系統(tǒng)的對(duì)象；提供了多種向?qū)А⑸善?、模板，把?shù)據(jù)存儲(chǔ)、數(shù)據(jù)查詢、界面設(shè)計(jì)、報(bào)表生成等操作規(guī)范化；為建立功能完善的數(shù)據(jù)庫(kù)管理系統(tǒng)提供了方便，也使得普通用戶不必編寫(xiě)代碼，就可以完成大部分?jǐn)?shù)據(jù)管理的任務(wù)。ASP 訪問(wèn)數(shù)據(jù)庫(kù)的方式：在ASP 腳本中可以通過(guò)ADO （activex data objects ）方式訪問(wèn)數(shù)據(jù)庫(kù)[3]。

2.4 Microsoft Dreamweave 8簡(jiǎn)介

Dreamweave 是Macromedia 公司推出的可視化網(wǎng)頁(yè)制作工具，是較受網(wǎng)頁(yè)設(shè)計(jì)人員歡迎的網(wǎng)頁(yè)制作軟件之一，是網(wǎng)站建設(shè)不可缺少的工具之一。Macromedia Dreamweave 8是建立Web 站點(diǎn)和應(yīng)用程序的專業(yè)工具。它將可視布局工具、應(yīng)用程序開(kāi)發(fā)功能和代碼編輯支持組合在一起，其功能強(qiáng)大，在編輯上可以選擇可視化方式或者源碼編輯方式[4]。

2.5 adode Photoshop CS

Photoshop 是世界頂尖級(jí)的圖像設(shè)計(jì)與制作工具軟件。圖像處理是對(duì)已有的位圖圖像進(jìn)行編輯加工處理以及運(yùn)用一些特殊效果，其重點(diǎn)在于圖像的處理加工。在表現(xiàn)圖像中的陰影和色彩的細(xì)微變化方面或者進(jìn)行一些特殊效果處理時(shí)，使用位圖形式是最佳的選擇，他在這方面的優(yōu)點(diǎn)是矢量圖無(wú)法比擬的。 3 網(wǎng)站設(shè)計(jì)

3.1 數(shù)據(jù)庫(kù)的設(shè)計(jì)

本網(wǎng)站中用到四個(gè)數(shù)據(jù)庫(kù)分別是音樂(lè)數(shù)據(jù)庫(kù)Music.mdb 、留言數(shù)據(jù)庫(kù)Massage.mdb 、日志數(shù)據(jù)庫(kù)suibi.mdb 、網(wǎng)站計(jì)數(shù)器數(shù)據(jù)庫(kù)jsp.mdb 。頁(yè)面如下：

.- 5 -.