1、引言
早期的動態網頁主要采用CGI技術，由于編程困難、效率低下、修改復雜，所以一直是專業程序員的專利。
ASP的出現，改變了這個現狀， Active Server Pages即ASP是微軟開發的一種類似HTML（Hypertext Markup Language超文本標識語言）、Script（腳本）與CGI（Common GAteway Interface 通用網關接口）的結合體。ASP問世以來，每天正在以成千上萬的ASP網站在INTERNET中誕生。它以簡單易學，卻功能強大。被越來越多的人們所喜愛。
本次畢業設計我選擇的課題是：利用ASP設計學校網站設計－南部縣伏虎中學網站，目的是通過該網站的規劃和設計，給人們了解我們學校提供了一個平臺，拉近了教育和社會之間的距離。讓人們足不出戶，輕松快捷的獲得學校各種信息，展示了學校和教師的風采。同時也通過該平臺，學校可以及時了解社會對我們學校的建議和意見，以便我們學校在今后的工作中及時改正。
網站的規劃和設計，從系統的調研，系統的分析，系統的設計到系統的實現，利用軟件工程的思想作為指導，開發了這個完整的系統，提高了自己的專業知識和實際相結合的能力。

2、系統設計
2．1 開發設計思想
本系統開發設計思想：
盡量采用學校現有軟硬件環境，及先進的網站制作系統開發方案，從而達到充分利用學校現有資源，提高系統開發水平和應用效果的目的。
系統采用模塊化程序設計方法，這樣既便于系統功能的各種組合，又便于未參與開發的技術維護人員補充，維護。
系統應具備數據庫維護功能，及時根據學校信息的需求進行數據的添加，刪除，修改等操作。
2．2 開發和運行環境選擇
開發工具：FLASH5.0，Adobe Photoshop 6.0，Dreamweaver UltraDev 4。
服務器端運行環境：Windows2000+IIS。
客戶端運行環境：Windows9x，Windows2000。
2．3 系統功能分析
系統功能分析是在系統開發的總體任務的基礎上完成的。本站需要完成功能主要有：
新聞文章發布：學校新聞，教育科研，名校名師，學生園地，招生信息等的介紹。
留言系統：對來訪者提供網上留言，從而讓學校及時得到社會的反饋，以便和社會溝通和交流。
在線調查系統：本站提供對教育和學校的熱點問題進行網上調查的專欄，來訪者可以通過網上調查對熱點問題投上代表自己的一票。
流量統計系統：本站可以對流量從多方面進行統計。包括開站天數，瀏覽總數，當天瀏覽總數，上一天瀏覽總數，本月瀏覽總數，上月瀏覽總數，平均瀏覽總數。
2．4 系統功能模塊設計
在系統功能分析的基礎上，得到如圖所示的系統功能模塊圖。

南部縣伏虎中學網站前臺

新聞文章欄目 交互欄目 在線調查 流量統計

前臺新聞欄目

學校新聞瀏覽 教育科研瀏覽 名校名師瀏覽 學生園地瀏覽 招生信息瀏覽

另外為了進一步實現家校聯系，特設計了家長頻道和學生頻道。
在家長頻道中，設計了教學公告，到校記錄，家長留言，家長預約，家庭教育等子欄目。
在學生頻道中，設計了高招信息，高考話題，高考題庫，開學報道，學生提問，學生意見等子欄目。
家長頻道中的家長留言，學生頻道中的學生提問，學生意見3個子欄目是為了體現家長，學生，學校3方面互動，及時交流的一個欄目。更加方便了學生，家長對教育的資源發表心聲。
為了家長，學生，教師和其它任何來訪者，可以獲得學校的教育資源，還設計了資源下載欄目，資源下載欄目包括：軟件下載，試卷下載，教案下載，表格下載4個子欄目。

新聞文章后臺管理

新聞后臺管理 教育后臺管理 名師后臺管理 學生后臺管理 招生后臺管理

系統功能結構圖
下面我將對每個模塊的總體設計作簡要說明。
1． 新聞文章模塊
新聞文章是本網站的重點。網站作為一種媒體，應當可以提供足夠多的用戶感興趣的信息。南部縣伏虎中學網站作為學校的一個窗口，為了滿足社會對學校信息的了解的愿望，本站的新聞文章主要開設五個方面的欄目。分別是：學校新聞，教育科研，名校名師，學生園地，招生信息等。對新聞文章模塊的總體設計是分為前臺瀏覽和后臺管理子模塊。來訪者通過前臺點擊可以瀏覽到本網站有關新聞文章等各種信息。這些信息包括：學校新聞快訊信息，教育科研信息，名校和名師的各種信息，學生園地信息，學校招生相關的信息等。本后臺管理子模塊完成對學校新聞文章發布子模塊中的五個欄目進行后臺管理員才能操作的添加信息，編輯信息，刪除信息等操作。以上欄目的設置，是為了滿足任意一個網站來訪者。為滿足家長，學生的2個特定類別的來訪者，特設置了家長頻道和學生頻道，家長頻道欄目信息根據針對家長的需求，欄目包括，教學公告，到校記錄，家長留言，家長預約，家庭教育。其中教學公告包括作業公告，考試公告等子欄目。家長留言是一個互動欄目，這個欄目專門針對家長，對學校政策，教學進度的詢問，意見等。學生頻道欄目實現信息主要都是與學生緊密相關的欄目，比如高招信息，高考題庫等。
2．留言模塊
來訪者中有不少人對學校的發展和現狀有很多建議和觀點需要對學校提出，作為學校的窗口，所以本站需要提供讓來訪者發言的平臺，正是由于這個原因，所以本網站設計和規劃有留言模塊，本模塊又分為瀏覽著前臺發言和瀏覽子模塊以及后臺管理員刪除修改發言子模塊。
3．在線調查模塊
本網站對一些社會熱點提供在線調查的欄目，來訪者可以對網站上的社會熱點問題投上代表自己觀點的一票。這樣就可以綜合民意得到教育等熱點從而決定以后的發展方向。
4．流量統計模塊
作為管理員應該實時知道本網站的流量。流量統計的數據包括：網站開站的天數，瀏覽的總數，當日的瀏覽數，昨日的瀏覽數，本月的瀏覽數，上月的瀏覽數，平均來訪數等。一個網站如果沒有流量，那么就說明了這個網站開設的欄目沒有吸引力。作為管理員就學?？梢酝ㄟ^流量及時知道網站開設新欄目后流量是否有變化等。
5．資源下載模塊
一個學校網站，如果可以提供瀏覽著獲得學校信息資源，可以提供家，校，師，生互動交流這些欄目還不夠，學校的各種考試試卷等教育資源，也是來訪者非常想獲得的，所以，設計了教育資源下載模塊。下載的資源包括教案，試卷，其它軟件等。
3、后臺數據庫的設計
通過以上功能模塊的分析和設計可以知道，本網站設計需要涉及到后臺數據庫的設計。
在數據庫應用系統的開發過程中，數據庫的結構設計是一個非常重要的問題。數據庫結構設計的好壞將直接對應用系統的效率以及實現的效果產生影響，好的數據庫結構會減小數據庫的存儲量，數據的完整性和一致性比較高，系統具有較快的響應速度，簡化基于此數據庫的應用程序的實現等。
在數據庫系統開始設計的時候應該盡量考慮全面，尤其應該仔細考慮用戶的各種需求，避免浪費不必要的人力和物力。
3．1 數據庫需求分析
數據庫需求分析是數據庫結構設計的第一個階段，是非常重要的一個階段。在這個階段主要是收集基本數據，數據結構以及確定數據處理的流程，組成一個詳盡的數據字典，為以后進一步設計打下基礎。
在仔細調查本站運作過程的基礎上，我們得到本網站所處理的數據流程如圖所示。

管理員
登錄

輸入登錄信息 來訪者登錄網站

網站后臺管理 DB 數據庫 各種信息的瀏覽

管理方向 各種信息后臺管理

密碼管理
通過以上數據流程可以看出：管理員通過登錄網站，輸入正確的用戶名和密碼可以進行網站管理。進入管理狀態后可以選擇管理的項目，可以是對包括對管理員密碼在內的系統設置信息的修改，也可以是對本網站的各種數據庫中其它的信息進行后臺管理，包括對學校概況，學校新聞，教育科研，名校名師，學生園地，招生信息，招聘信息等管理。管理的內容分為：對信息的添加，修改，刪除，審核等操作。
來訪者可以在瀏覽器中輸入學校網址登錄網站，通過點擊網站的鏈接瀏覽各種相關信息。這些信息是通過調用后臺數據庫中相關信息在前臺顯示的。
針對本網站的數據結構，可以通過對以上對本站數據流程的內容和數據關系分析，得出以下的數據項和數據結構如下：
● 新聞信息：新聞類別號，標題，所屬專欄，文章來源，文章作者，內容，發布時間，點擊次數，關鍵字， 狀態等。
● 新聞類別：類別號、類別名。
● 新聞所屬欄目：欄目號，類別號，欄目名。
● 管理員信息：用戶名，密碼等。
● 留言信息：用戶名，電子郵箱地址，來自地區，主頁地址，OICQ號，ICQ號，頭像，留言內容等。
● 留言后臺管理員信息：用戶名，密碼等。
● 在線調查信息：調查的主題編號，主題名稱，主要觀點1，主要觀點2，主要觀點3，主要觀點4，觀點1的票數，觀點2的票數，觀點3的票數，觀點4的票數。
● 流量統計信息：總流量，今日流量，昨日流量，本月流量，上月流量，開站日期，最后訪問IP。
● 資源信息：每條資源信息包括文字介紹信息和資源存放信息2個方面，文字介紹信息和新聞信息一樣，作為新聞信息的一種，所以這里重點研究資源存放信息，資源上傳后存放信息包括：資源編號，信息編號，存放路徑3個屬性項。信息編號對應該資源文字信息在新聞信息中的編號。存放路徑存放資源上傳后的存放的路徑和文件名。
有了上面的數據結構，數據項和數據流程，就能進行下面的數據庫設計。
3．2 數據庫概念結構設計
這一設計階段是在需求分析的基礎上，設計出能夠滿足網站設計需求的各種實體，以及確定它們之間的關系，為后面的邏輯結構設計打下基礎。本網站根據上面的設計規劃出的數據項和數據結構得出的實體有新聞實體，新聞類別實體，新聞欄目實體，管理員實體，留言信息實體，在線調查信息實體，流量統計實體等。
下面詳細介紹本系統主要的實體以及主要實體之間的關系。
1：信息實體E-R圖：

信息信息實體

信息編號 主題

類別號 ……. 欄目號

2：信息類別實體E-R圖：

信息類別實體

類別編號 類別名稱

3：信息欄目實體E-R圖：

信息欄目實體

欄目編號 類別編號 欄目名稱

4：管理員實體E-R圖：

管理員實體

用戶編號 用戶名 用戶密碼

5：資源實體屬性圖

資源實體

資源編號 信息編號 資源路徑

6：主要的實體和實體之間的關系E-R圖如圖所示。

信息實體 1 屬于 1 類別實體

屬于 管理 管理

欄目實體 管理 管理員實體

3．3 數據庫邏輯結構設計
我們需要將上面的數據庫概念結構轉化為ACCESS2000數據庫系統所支持的實際數據模型，也就是數據庫的邏輯結構。
在上面的實體以及實體之間關系的基礎上，我們就可以形成數據庫中的表格以及各個表格之間的關系。
根據分析階段得出的的結論，結合本網站對有關數據的存儲的需要，更加方便實現該網站預期的所有功能，現將本系統設計成5個數據庫表，每個表的字段名、類型、寬度設計如下：
數據庫中各個表格的設計結果如表3－1到表3－2所示。每個表格對應在數據庫中的一個表。
表3－1為新聞信息表。
該表用來記錄存儲本網站新聞信息相關的各種信息：
字段名 類型 寬度 說明
newsid 自動編號 長整型 新聞編號
typeid 數字 小數 類別編號
borderid 數字 小數 欄目編號
topic 文本 80 主題
content 備注 備注 新聞內容
ntime 日期 8 發布時間
hits 數字 小數 閱讀次數
keys 備注 備注 關鍵字
img 文本 50 相關圖片
nfrom 文本 100 來源
modify 文本 30 編輯人
audit 數字 長整型 是否審核
auditer 文本 50 審核人
writer 文本 50 作者
imgsize 數字 小數 圖片大小

3-2：新聞類別表：
該表用來存放本網站新聞信息的類別名稱。
字段名 類型 寬度 說明
typeid 自動編號 長整型 類別編號
typename 文本 50 類別名稱

3-3：新聞欄目表：
該表用來存放本網站新聞信息的類別名稱。
字段名 類型 寬度 說明
borderid 自動編號 長整型 類別編號
typeid 自動編號 長整型 類別編號
bodername 文本 50 類別名稱
3-4：管理員信息表：
該表用來存放本網站管理員信息。
字段名 類型 寬度 說明
userid 自動編號 長整型 用戶編號
name 文本 15 用戶名
pwd 文本 14 密碼
3-5：資源信息表：
該表用來存放本網站管理員信息。
字段名 類型 寬度 說明
id 自動編號 長整型 資源編號
Newsid 文本 15 對應的信息編號
Lujin 文本 14 資源存放路徑
以上是本系統的庫表結構的設計簡要說明。
4、網站的實現
完成了以上的后臺數據庫的設計后，下面就可以對前面系統分析階段邏輯設計出的功能模塊將技術設計轉化成為物理實現，是系統建設的實現階段。因此，網站的實現的成果將是系統分析和設計階段的結晶。
4.1：安裝網站設計相關軟件：
本站設計需要用到FLASH8.0，Adobe Photoshop 8.0，Dreamweaver等網頁設計相關的軟件。
其中FLASH8.0主要完成網頁中相關動畫的設計和處理。
Adobe Photoshop 8.0主要完成網頁中相關的圖片的大小，格式轉化，效果處理等。
Dreamweaver主要完成網頁的排版、布局設計。
4.2 建立Asp的運行環境
簽于目前流行的windows操作平臺有windows xp等。下面針對這XP操作平臺上建立Asp運行環境的一些簡要介紹。
在windows 2000/XP上建立Asp的運行環境
在windows 2000/XP上運行Asp的環境也是IIS。如果安裝的是windows 2000 Server,IIS5.1將作為一個默認選項被安裝。如果使用的是windows 2000/XP中文專業版，則需要使用控制面板“ 添加/刪除程序”來安裝IIS及其組件。
4．3、主頁的設計
來訪者輸入網址，首先打開的就是學校網站的主頁，主頁設計應該美觀，同時提供足夠多的鏈接，以便來訪者可以通過鏈接導航到自己所關心的信息頁面上去。下面是該首頁運行的界面圖：

該頁面的布局結構是 ∏型布局結構。具體的說：在網頁的上面是log圖片和導航條。Log圖片表明網站的主題：南部縣伏虎中學網站。導航條將本站的欄目分成了學校概況，學校新聞，教育科研，名校名師，學生園地，招生信息，誠聘英才，校長信箱，網上留言等欄目。這些導航欄目分別設計有相應的文字鏈接，點擊這些文字鏈接可以進入相應的頁面。
打開專業的網頁設計工具Dreamweaver UltraDev 4。
1：新建一個網頁文件，保存為index.asp，接著設置頁面屬性，在屬性頁中標題：南部縣伏虎中學。背景圖案：img/bg_line.gif。
定義頁面中表格，單元格，文字和鏈接的表現風格。本頁面定義的語句如下：

利用布局表格工具，設置好網頁的表格布局。然后就可以在表格中添加單元格。利用表格的屬性面板和單元格屬性面板設定好各自的屬性以后，就可以在單元格中添加文字和插入圖片。
布局設計好的網頁如下：

代碼設計：為了實現首頁顯示學?？煊?，教育科研，名校名師，學生園地等文字信息以及為了方便管理。不是在每個欄目設計靜態的文本信息，而是內嵌java腳本，腳本的數據源來自一個和數據庫相連接的asp文件： new.asp。下面給出學?？煊崳逃蒲?，名校名師，學生園地對應的四個java腳本語句：
1：
2：
3：
4：
通過比較這四條腳本語句可以發現，腳本調用的是同一asp文件，只是一個typeid不一樣。在數據庫的設計中我們以及知道，這個參數是新聞的類別編號。由于這四類不同的信息都是存儲在數據庫中的news表中，要實現信息的分類就可以通過設定這個類別編號。這里的typeid=10對應學校新聞，typeid=11對應教育科研，typeid=12對應名校名師，typeid=13對應學生園地。
下面簡單的介紹一下news.asp文件的代碼：
在news.asp文件中首先獲得上面傳遞的參數。通過下面的語句實現：
typeid=request("typeid")
n=trim(request("n"))
這里的n是查詢表中符合條件的多少條記錄的參數。
接著通過下面的語句從數據庫news表中查詢符合條件的最后的n條記錄：
sql="select top " & n & " * from news where typeid=" & cstr(typeid) & " and audit=1 order by newsid DESC"
這里的audit表示已經是審核通過的信息。最后的信息顯示是按newsid號倒序排列。
另外在該文件的開頭有包含文件：

該文件用于鏈接數據庫。
在文件的末尾有包含文件：

該包含文件用于關閉數據庫。
4.4 顯示新聞和下載文件的shownews.asp設計
在首頁中大量的新聞信息是通過鏈接到shownews.asp文件來顯示新聞信息的。比如在首頁中點擊學校快訊中的任一新聞，就可以鏈接到該頁面并顯示該新聞的詳情。
下面是學?？煊嵵?ldquo;南部縣伏虎中學教學成果顯著”這條新聞后顯示的頁面，該新聞的鏈接語句是：
shownews.asp?newsid=413
這里的傳遞的參數newsid用于傳遞顯示的新聞的編號。

該頁面的設計過程首先在Dreamweaver UltraDev 4中排版設計，設計的界面如圖所示：

對比實際運行的界面和設計界面可以看出，導航條的設計不是在這里直接給出，而是通過腳本調用一個js文件。這樣設計的好處在與可以和其它的頁面共享該導航的js文件。調用腳本的語句如下：

該newsbar.js文件的語句如下：
document.writeln("");
document.writeln(" ");
document.writeln(" ");
document.writeln(" ");
document.writeln(" ");
document.writeln(" ");
document.writeln(" ");
document.writeln(" ");
document.writeln(" ");
document.writeln(" ");
document.writeln("

學校概況

學校新聞

教育科研

名校名師

學生園地

招生信息

誠聘英才

");
另外對比shownews.asp文件還可以看出，該頁面中的新聞標題和新聞內容也是調用其它的語句和腳本的。
新聞標題調用asp腳本：<%=rs("topic")%>用于顯示記錄集中的topic字段值。該字段是通過sql語句實現的查詢記錄集中的字段值。相關的sql查詢語句如下：
rs.open "select * from news where newsid=" & cstr(request("newsid")),conn,1,1
該語句實現從news表中查詢newsid編號等于傳遞的參數newsid的記錄。
對于新聞的內容顯示也和新聞的主題顯示類似，這里就不再說明。
最后這里介紹一下該頁面顯示的與本新聞相關的新聞的實現技術：
首先要從數據庫中news表的字段說起，在news表中有一個keys字段。
我們可以利用sql語句在news表中查詢keys值和該新聞關鍵字類似的記錄，就可以得到相關信息。Sql語句如下：
rsc.open "select top " & aboutnews & " * from news where keys like '%" & trim(rs("keys")) & "%' and newsid<>" & cstr(rs("newsid")) & " and audit=1 order by ntime DESC",conn,1,1
shownews.asp文件除了顯示新聞詳細信息外，該文件同時還和下載資源的詳細頁面共用。為了在顯示一般詳細信息時候，不出現下載的字樣，可以利用if 語句進行判斷，利用if語句對變量xz進步判斷，如果xz變量等于1，表明是資源下載的詳細頁面，這時候就顯示下載字樣，下載鏈接來自資源表中的該資源對應路徑。
4.5 更多新聞頁面的more.asp設計
在首頁中的學?？煊?，教育科研，名校名師，學生園地都只是顯示了該類別的10條信息，如何得到更多的信息顯示？需在首頁之外另外設計更多信息顯示的more.asp頁面。在首頁的導航條上面都可以鏈接到該頁面。在首頁的導航條中分別有下面的鏈接語句：
1：…
2：…
3：…
4：…
5：…
6：…
這些鏈接語句分別都是鏈接到more.asp文件，只是傳遞的參數不一樣。Typeid=10…15分別對應學校新聞…誠聘英才。
在本頁中就是通過獲得的傳遞參數確定sql語句查詢news中的類別號等于傳遞的類別號的所有信息的。
下面是傳遞參數為16的頁面顯示的界面圖：

該頁面顯示的所有news表中typeid=16的新聞信息。
下面給出在Dreamweaver UltraDev 4中排版設計的結果：

下面介紹該頁面實現顯示傳遞的參數的所有信息的技術：
首先利用下面的代碼實現建立一個記錄集和實現sql查詢：
set rs=server.createobject("adodb.recordset")
rs.open "select * from news where typeid=" & cstr(typeid) & " and audit=1 order by ntime DESC",conn,1,1
由于在news表中typeid等于傳遞的參數的記錄可能非常多，那么全部在一頁中顯示不方便，所以該頁又用到了數據的分頁顯示技術。
下面給出本頁中用到的分頁顯示的代碼：
<%
response.write "

---