電 子 科 技 大 學(xué)畢 業(yè) 設(shè) 計（論 文）論文題目： 文武屋-個人網(wǎng)站設(shè)計辦學(xué)單位： 電子科技大學(xué)職業(yè)技術(shù)學(xué)院職號:專 業(yè)：計算機(jī)及應(yīng)用2007年 06月 13日

電 子 科 技 大 學(xué)

畢 業(yè) 設(shè) 計（論 文）

論文題目： 文武屋-個人網(wǎng)站設(shè)計

辦學(xué)單位： 電子科技大學(xué)職業(yè)技術(shù)學(xué)院

職

號:

專 業(yè)：計算機(jī)及應(yīng)用

2007年 06月 13日

電 子 科 技 大 學(xué)

畢業(yè)設(shè)計（論文）任務(wù)書

題目： 文武屋-個人網(wǎng)站設(shè)計

任務(wù)與要求：

設(shè)計一個個人網(wǎng)站，包括首頁、日記、相冊、音樂、留言欄目；其中， 以上幾個欄目有不同分類的子欄目；還有相冊中圖片由分類顯示、圖片

時間： 2007 年 4 月15 日 至 2007 年 6 月 13 日 共 8 周 辦學(xué)單位： 電子科技大學(xué)職業(yè)技術(shù)學(xué)院

學(xué)生姓名： 張泉

專業(yè)： 計算機(jī)及應(yīng)用

指導(dǎo)單位或教研室： 電子科技大學(xué)計算機(jī)學(xué)院 指導(dǎo)教師： 學(xué) 號：0242010317 羅惠瓊 職 稱：教授

2007年 06月 13日

畢業(yè)設(shè)計(論文) 進(jìn)度計劃表

摘要

本文就個人網(wǎng)站的規(guī)劃與建設(shè)，以軟件工程的方法對全過程進(jìn)行了分析與研究。本文的主要工作集中在：

1. 對Web 頁進(jìn)行概述，主要是對Internet 的歷史和發(fā)展作了回顧，并對Web 頁的定義和特性進(jìn)行闡述。并對網(wǎng)站開發(fā)過程中使用的開發(fā)工具和技術(shù)作了簡要的介紹。

2. 對網(wǎng)站建設(shè)中提及到的術(shù)語進(jìn)行了解釋，并對個人網(wǎng)站的由來和發(fā)展進(jìn)行了討論。

3. 對自己的個人網(wǎng)站從規(guī)劃到建設(shè)進(jìn)行了詳細(xì)的分析。

4. 使用ASP ＋I(xiàn)IS ＋Access 技術(shù)實現(xiàn)了我的網(wǎng)站的各種功能，其中和數(shù)據(jù)庫的連接使用到了ODBC 技術(shù)。

5. 就網(wǎng)站建設(shè)提出了自己的觀點與建議。

關(guān)鍵詞 網(wǎng)站 ASP SQL Server 風(fēng)格 創(chuàng)意

江西教育學(xué)院數(shù)計系09成本論文（設(shè)計） 吳志城-個人網(wǎng)站設(shè)計

目錄

第一章 緒 言?????????????????????????2

第一節(jié) Web 頁概述???????????????????????? 2

第二節(jié) 開發(fā)工具的選用及介紹 ??????????????????? 3

第四節(jié) 關(guān)系型數(shù)據(jù)庫的選擇 ???????????????????? 6

第二章 個人網(wǎng)站設(shè)計分析????????????????????7

第一節(jié) 相關(guān)術(shù)語及解釋???????????????????????7

第二節(jié) 個人網(wǎng)站的由來和發(fā)展 ??????????????????? 8

第三節(jié) 我的個人網(wǎng)站的設(shè)計與規(guī)劃??????????????????8

第三章：詳細(xì)設(shè)計 ???????????????????????????10

第一節(jié) 數(shù)據(jù)庫設(shè)計 ????????????????????????10

第二節(jié) 頁面的設(shè)計 ????????????????????????13

第四章：編碼、測試與維護(hù)??????????????????????? 28

第一節(jié) 測試與維護(hù) ??????????????????????? 28

第二節(jié) 設(shè)計技巧和解決方法???????????????????? 30 結(jié)束語????????????????????????????31 謝辭?????????????????????????????32 參考文獻(xiàn)???????????????????????????33

1

江西教育學(xué)院數(shù)計系09成本論文（設(shè)計） 吳志城-個人網(wǎng)站設(shè)計

第一章 緒 言

在已跨入21世紀(jì)的今天，人類使用和學(xué)習(xí)信息的方式以及信息的包裝方式正在進(jìn)行著不可阻擋的革命，這次革命將比印刷術(shù)的出現(xiàn)所產(chǎn)生的影響以及對社會發(fā)展的推動遠(yuǎn)為復(fù)雜而巨大。目前，我國上網(wǎng)的人口已近一個億，成立世界上網(wǎng)民最多的國家，許多人在需要查詢信息，首先想到的就是上網(wǎng)。網(wǎng)站的迷人之處在于綜合使用文本、圖象、聲音、動畫和視頻的信息和內(nèi)容，具有豐富的多媒體表現(xiàn)與互動特點，無可置疑， 網(wǎng)站已成為最吸引人的也最有效的信息傳遞手段和方式。隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，各類網(wǎng)站紛紛出現(xiàn)。個人網(wǎng)站也成為了一種時尚。越來越多的人希望擁有自己的網(wǎng)站，開辟網(wǎng)絡(luò)世界的一片天地，展示自己的才華和風(fēng)格。

一、 認(rèn)識Web 第一節(jié) Web 頁概述

Web(World Wide Web，簡稱WWW ，又稱萬維網(wǎng)) 是目前Internet 上應(yīng)用最廣泛也是最重要的信息服務(wù)類型，它的影響已經(jīng)進(jìn)入了Internet 上的廣告、新聞、電子商務(wù)和展示信息等各個服務(wù)領(lǐng)域。

Web 采用瀏覽器/服務(wù)器（B/S）工作模式，其運(yùn)作模式可以描述為：請求→處理→應(yīng)答。

Web 以超文本標(biāo)記語言HTML(Hyper Text Markup Language) 與超文本傳輸協(xié)議HTTP(Hyper Text Transfer Protocol)為基礎(chǔ)，通過瀏覽器為用戶提供方便友好的信息瀏覽界面。

Web 將位于全世界互聯(lián)網(wǎng)上不同網(wǎng)址的相關(guān)信息有機(jī)地編織在一起。在Web 服務(wù)方式中，信息以頁面（或稱Web 頁）的形式存儲在Web 服務(wù)器中，這些頁面采用超文本的方式對信息進(jìn)行組織，通過鏈接將一頁信息鏈接到另一頁信息。這些相互鏈接的頁面既可以放置在同一臺主機(jī)上，也可以放置在不同的主機(jī)上。頁面到頁面的鏈接信息由統(tǒng)一資源定位器URL(Uniform Resource Locator)維持。用戶通過客戶端應(yīng)用程序（即瀏覽器）向Web 服務(wù)器發(fā)出請求，服務(wù)器根據(jù)客戶端的請求將保存在服務(wù)器中的某個頁面返回給客戶端，瀏覽器接收到頁面后對其進(jìn)行解釋，最終將信息以圖、文、聲并茂的形式呈現(xiàn)給用戶。

Web 服務(wù)的特點在于高度的集成性，它能夠?qū)崿F(xiàn)不同類型的信息（如文本、圖像、聲音、動畫和視頻等）和服務(wù)（如New 、FTP 、Telnet 、Gopher 及Mail 等）的無縫鏈接，特別適合于廣域網(wǎng)中信息的組織、檢索與顯示。

2

江西教育學(xué)院數(shù)計系09成本論文（設(shè)計） 吳志城-個人網(wǎng)站設(shè)計

二、Web 技術(shù)綜述

在信息技術(shù)領(lǐng)域中，Web 技術(shù)幾乎匯集了當(dāng)前信息處理的所有技術(shù)手段，以求最大限度地滿足人性化的特點。Web 界面五顏六色，既有文字、彩圖、動畫、聲音、視頻和一些相關(guān)信息或目錄摘要，還可根據(jù)需要進(jìn)入你想去的任何地方。只要你愿意或是你能想到的服務(wù)，Web 幾乎都能實現(xiàn)。

Web 技術(shù)涉及諸多技術(shù)領(lǐng)域：

（一）網(wǎng)絡(luò)硬件技術(shù)

從兩臺或多臺機(jī)器組成的對等網(wǎng)，到主機(jī)控制的以太網(wǎng)，再到生動活潑的因特網(wǎng)，每一處都需要有特定的硬件支持。1968年，當(dāng)“LOGIN”的“LO”從美國加州洛杉磯分校的電腦屏幕跳到斯坦福大學(xué)的電腦屏幕上時，標(biāo)志著人類首次組網(wǎng)的成功！組網(wǎng)技術(shù)經(jīng)過幾十年的錘煉，而今已經(jīng)相當(dāng)成熟了。

網(wǎng)絡(luò)硬件技術(shù)包括很多方面，其主要的作用就是把網(wǎng)絡(luò)中的各種資源通過相關(guān)網(wǎng)絡(luò)連接設(shè)備連接起來，實施網(wǎng)絡(luò)通信和達(dá)到共享網(wǎng)絡(luò)資源的目的。

（二）Web 管理技術(shù)

網(wǎng)絡(luò)管理技術(shù)是一個永久的話題。網(wǎng)絡(luò)管理的難點是安全性問題，涉及到防止來自內(nèi)部和外部的攻擊，這對管理員自身的技術(shù)是一個嚴(yán)峻的考驗。一個合格的網(wǎng)管人員，除了管好網(wǎng)絡(luò)，還得和黑客做技術(shù)上的較量。網(wǎng)絡(luò)管理涉及的方面可謂種類繁多，簡單地說，網(wǎng)絡(luò)管理就是為保證網(wǎng)絡(luò)系統(tǒng)能夠持續(xù)、穩(wěn)定、安全、可靠和高效地運(yùn)行，不受外界干擾，而維持網(wǎng)絡(luò)系統(tǒng)設(shè)施所采取的一系列方式和措施。網(wǎng)絡(luò)管理由網(wǎng)管員通過駕馭網(wǎng)絡(luò)操作系統(tǒng)和網(wǎng)絡(luò)管理軟件來實現(xiàn)。

Web 管理則是在網(wǎng)絡(luò)管理的基礎(chǔ)上，針對網(wǎng)絡(luò)建設(shè)和維護(hù)所進(jìn)行的一系列管理。諸如架設(shè)Web 服務(wù)器、文件傳輸服務(wù)器、郵件服務(wù)器、域名服務(wù)器、代理服務(wù)器以及用戶管理和計費(fèi)管理等等。

第二節(jié) 開發(fā)工具的介紹及選擇

一、夢幻網(wǎng)頁的編織者------Dreamweaver8.0

Dreamweaver 是創(chuàng)建和管理網(wǎng)頁的專業(yè)化可視編輯器。使用Dreamweaver 可以輕松創(chuàng)建跨平臺、跨瀏覽器的頁面。Macromedia 的Roundtrip HTML技術(shù)允許用戶隨意導(dǎo)入HTML 文檔而無需重新設(shè)置代碼格式。

Dreamweaver 可以為用戶做到：使用動態(tài)HTML 功能（例如具有動態(tài)效果的層和行為）而不用寫一行代碼。它甚至還可以檢查用戶的工作成果在所有流行的平臺和瀏覽器中可能發(fā)生的錯誤。

Dreamweaver 還是一個可以完全自定義的應(yīng)用程序。用戶可以創(chuàng)建自己的對象和命令修改菜單和快捷鍵，甚至編寫JavaScript 代碼擴(kuò)展Dreamweaver 的行為 3

江西教育學(xué)院數(shù)計系09成本論文（設(shè)計） 吳志城-個人網(wǎng)站設(shè)計 和屬性檢查器。

至于Dreamweaver 工作區(qū)是非常靈活的，因此它可以適應(yīng)各種不同的工作風(fēng)格和使用水平。常用的Dreamweaver 工作區(qū)組件有以下若干種：

(一) 文檔窗口可顯示當(dāng)前文檔，文檔的外觀和瀏覽器中看到的非常相似。

(二) 裝載器中包含一些打開和關(guān)閉常用檢查器和模板的按鈕。

(三) 對象工具欄包含創(chuàng)建不同類型的對象（例如圖象、表格和層等）的按鈕。

(四) 屬性檢查器顯示選定對象的屬性。

(五) 快捷菜單可以使用戶對當(dāng)前選擇或區(qū)域快速執(zhí)行某些命令。

(六) 可固定的浮動工具欄允許用戶將浮動窗口、檢查器和工具欄組合在一個或多個選擇窗口中。

二、網(wǎng)頁動畫的制作軟件----Micromedia Flash 8.0

Micromedia Flash 8.0用于web 站點的交互式的矢量圖形和動畫的制作，它可制作出

用于瀏覽時的導(dǎo)航控制、制作動畫圖標(biāo)、帶同步聲音的大段的動畫，創(chuàng)建出生動的富于表現(xiàn)力的網(wǎng)頁。Flash 中的圖形都是矢量的，占據(jù)存儲空間較少，因而下載時間短，且能很好地適應(yīng)瀏覽者不同尺寸的屏幕。

Flash 的交互性的大部分設(shè)置就在 Action 和 Fs Command 里，通過對 Action 和 Fs Command 的設(shè)置，你可以隨意的設(shè)置各事件發(fā)生的效果，還有對變量及函數(shù)的設(shè)置。

三、JavaScript

JavaSript 是一種基于對象(Object)和事件驅(qū)動(Event Driven) 并具有安全性能的腳本語言。使用它的目的是與HTML 超文本標(biāo)記語言、Java 腳本語言（Java 小程序）一起實現(xiàn)在一個Web 頁面中鏈接多個對象，與Web 客戶交互作用。從而可以開發(fā)客戶端的應(yīng)用程序等。它是通過嵌入或調(diào)入在標(biāo)準(zhǔn)的HTML 語言中實現(xiàn)的。它的出現(xiàn)彌補(bǔ)了HTML 語言的缺陷，它是Java 與HTML 折衷的選擇。

四、影像與動畫的制作軟件—Adobe Photoshop8.0

Photoshop 8.0是目前最流行的圖形、圖像編輯設(shè)計軟件，在數(shù)碼影像處理、圖像編輯合成、廣告設(shè)計、封面設(shè)計、美術(shù)繪畫、網(wǎng)頁設(shè)計等領(lǐng)域都被廣泛地應(yīng)用。

(一) 文字處理更加方便

(二) 增加的圖層集使圖層管理更有序。

(三) 新增圖像功能：圖像的剪切和剪裁更加方便。

(四) 將所有工具的選項板改進(jìn)為工具選項欄放置在工作區(qū)頂部，方便先項參數(shù)的設(shè)置。

4

江西教育學(xué)院數(shù)計系09成本論文（設(shè)計） 吳志城-個人網(wǎng)站設(shè)計

(五) 為了更方便地用路徑繪畫，改進(jìn)增加了幾何形狀工具，通過選擇工具的不同工作模式，可創(chuàng)建路徑、幾何形狀或幾何填充區(qū)，使得矢量繪圖功能得到了加強(qiáng)。

五、動態(tài)網(wǎng)站的腳本語言--ASP

Active Server Pages：“動態(tài)服務(wù)器網(wǎng)頁”，一般簡稱為“ASP ”，ASP 之所以能受到大家的重視與使用的原因，主要在于所產(chǎn)生的執(zhí)行結(jié)果都是標(biāo)準(zhǔn)的HTML 格式，而且這些程序是在網(wǎng)絡(luò)服務(wù)端中執(zhí)行，使用一般的瀏覽器（如IE 或Netscape ）都可以正確地獲得ASP 的“執(zhí)行”結(jié)果，并且將這ASP 執(zhí)行的結(jié)果直接在瀏覽器中“瀏覽”，不像VBScript 或 JavaScript 是在客戶端（Client ）的瀏覽器上執(zhí)行，若使用VBScript 來設(shè)計程序，客戶端（Ｃlient ）在ＩＥ瀏覽器中可以顯示程序執(zhí)行的結(jié)果，可是，客戶端（Ｃlient ）若使用Netscape 瀏覽器就無法顯示VBScript 的執(zhí)行結(jié)果。

(一) 、ＡＳＰ的特點：

1、任何開發(fā)工具皆可發(fā)展ＡＳＰ

只要使用一般的文書編輯程序，如Windows 記事本，就可以編輯。當(dāng)然，其他網(wǎng)頁發(fā)展工具，例如，F(xiàn)rontPage Express、 ＦrontPage 等也都可以；不過還是建議你用記事本來寫，既省錢又方便，若是使用那些所見即所得的網(wǎng)頁編輯來寫ＡＳＰ，可能會發(fā)生一些意想不到的離奇狀態(tài)。

通過各家瀏覽由于ASP 程序是在網(wǎng)絡(luò)服務(wù)器端中執(zhí)行，執(zhí)行結(jié)果所產(chǎn)生的HTML 文件適用于不同的瀏覽器。

2、語言相容性高

ASP 與所有的ActiveX Script 語言都相容，除了可結(jié)合HTML ，VBScript 、Java ScriptActive X 服務(wù)器組件來設(shè)計外，并可經(jīng)由“plug-In （外掛組件模組）的方式，使用其他廠商（Third Party）所提供的語言。

3、隱密安全性高

如果我們在瀏覽器中直接查看網(wǎng)頁的原始代碼，就只能看到ＨＴＭＬ文件，原始的ＡＳＰ程序代碼是看不到的！這是因杰ＡＳＰ程序先于網(wǎng)站服務(wù)（Ｗeb Server ）端執(zhí)行后，將結(jié)果轉(zhuǎn)換成標(biāo)準(zhǔn)ＨＴＭＬ文件，再傳送到客戶端（Client ）的瀏覽器上，因此，我們所辛苦撰寫的ＡＳＰ程序并不會輕易地被看見進(jìn)而被盜用。

4、易于操控數(shù)據(jù)庫

ＡＳＰ可以輕易地通過ＯDBC(Open Database Connectivity) 驅(qū)動程序連接各種不同的數(shù)據(jù)庫，例如：Acess 、Foxpro 、dBase 、Oracle 等等，另外，ＡＳＰ亦可將“文本文件”或是”Excel ” 文件當(dāng)成數(shù)據(jù)庫用。

5

江西教育學(xué)院數(shù)計系09成本論文（設(shè)計） 吳志城-個人網(wǎng)站設(shè)計

5、面向?qū)ο髮W(xué)習(xí)容易

ＡＳＰ具備有面向?qū)ο螅ǎ蟗ject-Oriented ）功能，學(xué)習(xí)容易，ＡＳＰ提供了五種方便能力強(qiáng)大的內(nèi)建對象：Request 、Response 、Sever 、Application 以及Session ，同時，若使用ＡＳＰ內(nèi)建的“Application ”對象或”Session ”對象所撰寫出來的ＡＳＰ程序可以在多個網(wǎng)頁之間暫時保存必要的信息。

6、ASP 的六大內(nèi)部對象

對象名稱 功能描述

RequestResponseServerSessionApplicationObjectContext 從客戶端取得信息將信息送給客戶端提供一些Web 服務(wù)器工具儲存在一個

Session 內(nèi)的用戶信息，該信息僅可被該用戶訪問在一個

ASP-Application 中讓不同的客戶端共享信息可以用來配合

Microsoft Transaction 服務(wù)器進(jìn)行分布式事務(wù)處理

所以我選擇了ASP 結(jié)合Dreamweaver 架構(gòu)個人站點。

第三節(jié) 關(guān)系型數(shù)據(jù)庫的選擇

一、Access

Microsoft Access 是一種桌面數(shù)據(jù)庫，只適合數(shù)據(jù)量少的應(yīng)用，在處理少量數(shù)據(jù)和單機(jī)訪問的數(shù)據(jù)庫時是很好的，效率也很高。但是它的同時訪問客戶端不能多于4個。Microsoft Access數(shù)據(jù)庫有一定的極限，如果數(shù)據(jù)達(dá)到100M 左右，很容易造成服務(wù)器iis 假死，或者消耗掉服務(wù)器的內(nèi)存導(dǎo)致服務(wù)器崩潰。

二、SQL Server

Microsoft SQL Server是基于服務(wù)器端的中型的數(shù)據(jù)庫，可以適合大容量數(shù)據(jù)的應(yīng)用，在功能上管理上也要比Microsoft Access要強(qiáng)得多。在處理海量數(shù)據(jù)的效率，后臺開發(fā)的靈活性，可擴(kuò)展性等方面強(qiáng)大。因為現(xiàn)在數(shù)據(jù)庫都使用標(biāo)準(zhǔn)的SQL 語言對數(shù)據(jù)庫進(jìn)行管理，所以如果是標(biāo)準(zhǔn)SQL 語言，兩者基本上都可以通用的。Microsoft SQL Server 還有更多的擴(kuò)展，可以用存儲過程，數(shù)據(jù)庫大小無極限限制。

本站屬于個人站點采用Access 數(shù)據(jù)庫就行了。

6