網(wǎng)站設(shè)計(jì)制作說明

1、引言
早期的動態(tài)網(wǎng)頁主要采用CGI技術(shù)，由于編程困難、效率低下、修改復(fù)雜，所以一直是專業(yè)程序員的專利。
ASP的出現(xiàn)，改變了這個(gè)現(xiàn)狀， Active Server Pages即ASP是微軟開發(fā)的一種類似HTML（Hypertext Markup Language超文本標(biāo)識語言）、Script（腳本）與CGI（Common GAteway Interface 通用網(wǎng)關(guān)接口）的結(jié)合體。ASP問世以來，每天正在以成千上萬的ASP網(wǎng)站在INTERNET中誕生。它以簡單易學(xué)，卻功能強(qiáng)大。被越來越多的人們所喜愛。
本次畢業(yè)設(shè)計(jì)我選擇的課題是：利用ASP設(shè)計(jì)學(xué)校網(wǎng)站設(shè)計(jì)－南部縣伏虎中學(xué)網(wǎng)站，目的是通過該網(wǎng)站的規(guī)劃和設(shè)計(jì)，給人們了解我們學(xué)校提供了一個(gè)平臺，拉近了教育和社會之間的距離。讓人們足不出戶，輕松快捷的獲得學(xué)校各種信息，展示了學(xué)校和教師的風(fēng)采。同時(shí)也通過該平臺，學(xué)?？梢约皶r(shí)了解社會對我們學(xué)校的建議和意見，以便我們學(xué)校在今后的工作中及時(shí)改正。
網(wǎng)站的規(guī)劃和設(shè)計(jì)，從系統(tǒng)的調(diào)研，系統(tǒng)的分析，系統(tǒng)的設(shè)計(jì)到系統(tǒng)的實(shí)現(xiàn)，利用軟件工程的思想作為指導(dǎo)，開發(fā)了這個(gè)完整的系統(tǒng)，提高了自己的專業(yè)知識和實(shí)際相結(jié)合的能力。
2、系統(tǒng)設(shè)計(jì)
2．1 開發(fā)設(shè)計(jì)思想
本系統(tǒng)開發(fā)設(shè)計(jì)思想：
盡量采用學(xué)?，F(xiàn)有軟硬件環(huán)境，及先進(jìn)的網(wǎng)站制作系統(tǒng)開發(fā)方案，從而達(dá)到充分利用學(xué)?，F(xiàn)有資源，提高系統(tǒng)開發(fā)水平和應(yīng)用效果的目的。
系統(tǒng)采用模塊化程序設(shè)計(jì)方法，這樣既便于系統(tǒng)功能的各種組合，又便于未參與開發(fā)的技術(shù)維護(hù)人員補(bǔ)充，維護(hù)。
系統(tǒng)應(yīng)具備數(shù)據(jù)庫維護(hù)功能，及時(shí)根據(jù)學(xué)校信息的需求進(jìn)行數(shù)據(jù)的添加，刪除，修改等操作。
2．2 開發(fā)和運(yùn)行環(huán)境選擇
開發(fā)工具：FLASH5.0，Adobe Photoshop 6.0，Dreamweaver UltraDev 4。
服務(wù)器端運(yùn)行環(huán)境：Windows2000+IIS。
客戶端運(yùn)行環(huán)境：Windows9x，Windows2000。
2．3 系統(tǒng)功能分析
系統(tǒng)功能分析是在系統(tǒng)開發(fā)的總體任務(wù)的基礎(chǔ)上完成的。本站需要完成功能主要有：
新聞文章發(fā)布：學(xué)校新聞，教育科研，名校名師，學(xué)生園地，招生信息等的介紹。
留言系統(tǒng)：對來訪者提供網(wǎng)上留言，從而讓學(xué)校及時(shí)得到社會的反饋，以便和社會溝通和交流。
在線調(diào)查系統(tǒng)：本站提供對教育和學(xué)校的熱點(diǎn)問題進(jìn)行網(wǎng)上調(diào)查的專欄，來訪者可以通過網(wǎng)上調(diào)查對熱點(diǎn)問題投上代表自己的一票。
流量統(tǒng)計(jì)系統(tǒng)：本站可以對流量從多方面進(jìn)行統(tǒng)計(jì)。包括開站天數(shù)，瀏覽總數(shù)，當(dāng)天瀏覽總數(shù)，上一天瀏覽總數(shù)，本月瀏覽總數(shù)，上月瀏覽總數(shù)，平均瀏覽總數(shù)。
2．4 系統(tǒng)功能模塊設(shè)計(jì)
在系統(tǒng)功能分析的基礎(chǔ)上，得到如圖所示的系統(tǒng)功能模塊圖。
南部縣伏虎中學(xué)網(wǎng)站前臺
新聞文章欄目 交互欄目 在線調(diào)查 流量統(tǒng)計(jì)
前臺新聞欄目
學(xué)校新聞瀏覽 教育科研瀏覽 名校名師瀏覽 學(xué)生園地瀏覽 招生信息瀏覽
另外為了進(jìn)一步實(shí)現(xiàn)家校聯(lián)系，特設(shè)計(jì)了家長頻道和學(xué)生頻道。
在家長頻道中，設(shè)計(jì)了教學(xué)公告，到校記錄，家長留言，家長預(yù)約，家庭教育等子欄目。
在學(xué)生頻道中，設(shè)計(jì)了高招信息，高考話題，高考題庫，開學(xué)報(bào)道，學(xué)生提問，學(xué)生意見等子欄目。
家長頻道中的家長留言，學(xué)生頻道中的學(xué)生提問，學(xué)生意見3個(gè)子欄目是為了體現(xiàn)家長，學(xué)生，學(xué)校3方面互動，及時(shí)交流的一個(gè)欄目。更加方便了學(xué)生，家長對教育的資源發(fā)表心聲。
為了家長，學(xué)生，教師和其它任何來訪者，可以獲得學(xué)校的教育資源，還設(shè)計(jì)了資源下載欄目，資源下載欄目包括：軟件下載，試卷下載，教案下載，表格下載4個(gè)子欄目。
新聞文章后臺管理
新聞后臺管理 教育后臺管理 名師后臺管理 學(xué)生后臺管理 招生后臺管理
系統(tǒng)功能結(jié)構(gòu)圖
下面我將對每個(gè)模塊的總體設(shè)計(jì)作簡要說明。
1． 新聞文章模塊
新聞文章是本網(wǎng)站的重點(diǎn)。網(wǎng)站作為一種媒體，應(yīng)當(dāng)可以提供足夠多的用戶感興趣的信息。南部縣伏虎中學(xué)網(wǎng)站作為學(xué)校的一個(gè)窗口，為了滿足社會對學(xué)校信息的了解的愿望，本站的新聞文章主要開設(shè)五個(gè)方面的欄目。分別是：學(xué)校新聞，教育科研，名校名師，學(xué)生園地，招生信息等。對新聞文章模塊的總體設(shè)計(jì)是分為前臺瀏覽和后臺管理子模塊。來訪者通過前臺點(diǎn)擊可以瀏覽到本網(wǎng)站有關(guān)新聞文章等各種信息。這些信息包括：學(xué)校新聞快訊信息，教育科研信息，名校和名師的各種信息，學(xué)生園地信息，學(xué)校招生相關(guān)的信息等。本后臺管理子模塊完成對學(xué)校新聞文章發(fā)布子模塊中的五個(gè)欄目進(jìn)行后臺管理員才能操作的添加信息，編輯信息，刪除信息等操作。以上欄目的設(shè)置，是為了滿足任意一個(gè)網(wǎng)站來訪者。為滿足家長，學(xué)生的2個(gè)特定類別的來訪者，特設(shè)置了家長頻道和學(xué)生頻道，家長頻道欄目信息根據(jù)針對家長的需求，欄目包括，教學(xué)公告，到校記錄，家長留言，家長預(yù)約，家庭教育。其中教學(xué)公告包括作業(yè)公告，考試公告等子欄目。家長留言是一個(gè)互動欄目，這個(gè)欄目專門針對家長，對學(xué)校政策，教學(xué)進(jìn)度的詢問，意見等。學(xué)生頻道欄目實(shí)現(xiàn)信息主要都是與學(xué)生緊密相關(guān)的欄目，比如高招信息，高考題庫等。
2．留言模塊
來訪者中有不少人對學(xué)校的發(fā)展和現(xiàn)狀有很多建議和觀點(diǎn)需要對學(xué)校提出，作為學(xué)校的窗口，所以本站需要提供讓來訪者發(fā)言的平臺，正是由于這個(gè)原因，所以本網(wǎng)站設(shè)計(jì)和規(guī)劃有留言模塊，本模塊又分為瀏覽著前臺發(fā)言和瀏覽子模塊以及后臺管理員刪除修改發(fā)言子模塊。
3．在線調(diào)查模塊
本網(wǎng)站對一些社會熱點(diǎn)提供在線調(diào)查的欄目，來訪者可以對網(wǎng)站上的社會熱點(diǎn)問題投上代表自己觀點(diǎn)的一票。這樣就可以綜合民意得到教育等熱點(diǎn)從而決定以后的發(fā)展方向。
4．流量統(tǒng)計(jì)模塊
作為管理員應(yīng)該實(shí)時(shí)知道本網(wǎng)站的流量。流量統(tǒng)計(jì)的數(shù)據(jù)包括：網(wǎng)站開站的天數(shù)，瀏覽的總數(shù)，當(dāng)日的瀏覽數(shù)，昨日的瀏覽數(shù)，本月的瀏覽數(shù)，上月的瀏覽數(shù)，平均來訪數(shù)等。一個(gè)網(wǎng)站如果沒有流量，那么就說明了這個(gè)網(wǎng)站開設(shè)的欄目沒有吸引力。作為管理員就學(xué)?？梢酝ㄟ^流量及時(shí)知道網(wǎng)站開設(shè)新欄目后流量是否有變化等。
5．資源下載模塊
一個(gè)學(xué)校網(wǎng)站，如果可以提供瀏覽著獲得學(xué)校信息資源，可以提供家，校，師，生互動交流這些欄目還不夠，學(xué)校的各種考試試卷等教育資源，也是來訪者非常想獲得的，所以，設(shè)計(jì)了教育資源下載模塊。下載的資源包括教案，試卷，其它軟件等。
3、后臺數(shù)據(jù)庫的設(shè)計(jì)
通過以上功能模塊的分析和設(shè)計(jì)可以知道，本網(wǎng)站設(shè)計(jì)需要涉及到后臺數(shù)據(jù)庫的設(shè)計(jì)。
在數(shù)據(jù)庫應(yīng)用系統(tǒng)的開發(fā)過程中，數(shù)據(jù)庫的結(jié)構(gòu)設(shè)計(jì)是一個(gè)非常重要的問題。數(shù)據(jù)庫結(jié)構(gòu)設(shè)計(jì)的好壞將直接對應(yīng)用系統(tǒng)的效率以及實(shí)現(xiàn)的效果產(chǎn)生影響，好的數(shù)據(jù)庫結(jié)構(gòu)會減小數(shù)據(jù)庫的存儲量，數(shù)據(jù)的完整性和一致性比較高，系統(tǒng)具有較快的響應(yīng)速度，簡化基于此數(shù)據(jù)庫的應(yīng)用程序的實(shí)現(xiàn)等。
在數(shù)據(jù)庫系統(tǒng)開始設(shè)計(jì)的時(shí)候應(yīng)該盡量考慮全面，尤其應(yīng)該仔細(xì)考慮用戶的各種需求，避免浪費(fèi)不必要的人力和物力。
3．1 數(shù)據(jù)庫需求分析
數(shù)據(jù)庫需求分析是數(shù)據(jù)庫結(jié)構(gòu)設(shè)計(jì)的第一個(gè)階段，是非常重要的一個(gè)階段。在這個(gè)階段主要是收集基本數(shù)據(jù)，數(shù)據(jù)結(jié)構(gòu)以及確定數(shù)據(jù)處理的流程，組成一個(gè)詳盡的數(shù)據(jù)字典，為以后進(jìn)一步設(shè)計(jì)打下基礎(chǔ)。
在仔細(xì)調(diào)查本站運(yùn)作過程的基礎(chǔ)上，我們得到本網(wǎng)站所處理的數(shù)據(jù)流程如圖所示。
管理員
登錄
輸入登錄信息 來訪者登錄網(wǎng)站
網(wǎng)站后臺管理 DB 數(shù)據(jù)庫 各種信息的瀏覽
管理方向 各種信息后臺管理
密碼管理
通過以上數(shù)據(jù)流程可以看出：管理員通過登錄網(wǎng)站，輸入正確的用戶名和密碼可以進(jìn)行網(wǎng)站管理。進(jìn)入管理狀態(tài)后可以選擇管理的項(xiàng)目，可以是對包括對管理員密碼在內(nèi)的系統(tǒng)設(shè)置信息的修改，也可以是對本網(wǎng)站的各種數(shù)據(jù)庫中其它的信息進(jìn)行后臺管理，包括對學(xué)校概況，學(xué)校新聞，教育科研，名校名師，學(xué)生園地，招生信息，招聘信息等管理。管理的內(nèi)容分為：對信息的添加，修改，刪除，審核等操作。
來訪者可以在瀏覽器中輸入學(xué)校網(wǎng)址登錄網(wǎng)站，通過點(diǎn)擊網(wǎng)站的鏈接瀏覽各種相關(guān)信息。這些信息是通過調(diào)用后臺數(shù)據(jù)庫中相關(guān)信息在前臺顯示的。
針對本網(wǎng)站的數(shù)據(jù)結(jié)構(gòu)，可以通過對以上對本站數(shù)據(jù)流程的內(nèi)容和數(shù)據(jù)關(guān)系分析，得出以下的數(shù)據(jù)項(xiàng)和數(shù)據(jù)結(jié)構(gòu)如下：
● 新聞信息：新聞類別號，標(biāo)題，所屬專欄，文章來源，文章作者，內(nèi)容，發(fā)布時(shí)間，點(diǎn)擊次數(shù)，關(guān)鍵字， 狀態(tài)等。
● 新聞類別：類別號、類別名。
● 新聞所屬欄目：欄目號，類別號，欄目名。
● 管理員信息：用戶名，密碼等。
● 留言信息：用戶名，電子郵箱地址，來自地區(qū)，主頁地址，OICQ號，ICQ號，頭像，留言內(nèi)容等。
● 留言后臺管理員信息：用戶名，密碼等。
● 在線調(diào)查信息：調(diào)查的主題編號，主題名稱，主要觀點(diǎn)1，主要觀點(diǎn)2，主要觀點(diǎn)3，主要觀點(diǎn)4，觀點(diǎn)1的票數(shù)，觀點(diǎn)2的票數(shù)，觀點(diǎn)3的票數(shù)，觀點(diǎn)4的票數(shù)。
● 流量統(tǒng)計(jì)信息：總流量，今日流量，昨日流量，本月流量，上月流量，開站日期，最后訪問IP。
● 資源信息：每條資源信息包括文字介紹信息和資源存放信息2個(gè)方面，文字介紹信息和新聞信息一樣，作為新聞信息的一種，所以這里重點(diǎn)研究資源存放信息，資源上傳后存放信息包括：資源編號，信息編號，存放路徑3個(gè)屬性項(xiàng)。信息編號對應(yīng)該資源文字信息在新聞信息中的編號。存放路徑存放資源上傳后的存放的路徑和文件名。
有了上面的數(shù)據(jù)結(jié)構(gòu)，數(shù)據(jù)項(xiàng)和數(shù)據(jù)流程，就能進(jìn)行下面的數(shù)據(jù)庫設(shè)計(jì)。
3．2 數(shù)據(jù)庫概念結(jié)構(gòu)設(shè)計(jì)
這一設(shè)計(jì)階段是在需求分析的基礎(chǔ)上，設(shè)計(jì)出能夠滿足網(wǎng)站設(shè)計(jì)需求的各種實(shí)體，以及確定它們之間的關(guān)系，為后面的邏輯結(jié)構(gòu)設(shè)計(jì)打下基礎(chǔ)。本網(wǎng)站根據(jù)上面的設(shè)計(jì)規(guī)劃出的數(shù)據(jù)項(xiàng)和數(shù)據(jù)結(jié)構(gòu)得出的實(shí)體有新聞實(shí)體，新聞類別實(shí)體，新聞欄目實(shí)體，管理員實(shí)體，留言信息實(shí)體，在線調(diào)查信息實(shí)體，流量統(tǒng)計(jì)實(shí)體等。
下面詳細(xì)介紹本系統(tǒng)主要的實(shí)體以及主要實(shí)體之間的關(guān)系。
1：信息實(shí)體E-R圖：
信息信息實(shí)體
信息編號 主題
類別號 ……. 欄目號
2：信息類別實(shí)體E-R圖：
信息類別實(shí)體
類別編號 類別名稱
3：信息欄目實(shí)體E-R圖：
信息欄目實(shí)體
欄目編號 類別編號 欄目名稱
4：管理員實(shí)體E-R圖：
管理員實(shí)體
用戶編號 用戶名 用戶密碼
5：資源實(shí)體屬性圖
資源實(shí)體
資源編號 信息編號 資源路徑
6：主要的實(shí)體和實(shí)體之間的關(guān)系E-R圖如圖所示。
信息實(shí)體 1 屬于 1 類別實(shí)體
屬于 管理 管理
欄目實(shí)體 管理 管理員實(shí)體
3．3 數(shù)據(jù)庫邏輯結(jié)構(gòu)設(shè)計(jì)
我們需要將上面的數(shù)據(jù)庫概念結(jié)構(gòu)轉(zhuǎn)化為ACCESS2000數(shù)據(jù)庫系統(tǒng)所支持的實(shí)際數(shù)據(jù)模型，也就是數(shù)據(jù)庫的邏輯結(jié)構(gòu)。
在上面的實(shí)體以及實(shí)體之間關(guān)系的基礎(chǔ)上，我們就可以形成數(shù)據(jù)庫中的表格以及各個(gè)表格之間的關(guān)系。
根據(jù)分析階段得出的的結(jié)論，結(jié)合本網(wǎng)站對有關(guān)數(shù)據(jù)的存儲的需要，更加方便實(shí)現(xiàn)該網(wǎng)站預(yù)期的所有功能，現(xiàn)將本系統(tǒng)設(shè)計(jì)成5個(gè)數(shù)據(jù)庫表，每個(gè)表的字段名、類型、寬度設(shè)計(jì)如下：
數(shù)據(jù)庫中各個(gè)表格的設(shè)計(jì)結(jié)果如表3－1到表3－2所示。每個(gè)表格對應(yīng)在數(shù)據(jù)庫中的一個(gè)表。
表3－1為新聞信息表。
該表用來記錄存儲本網(wǎng)站新聞信息相關(guān)的各種信息：
字段名 類型 寬度 說明
newsid 自動編號 長整型 新聞編號
typeid 數(shù)字 小數(shù) 類別編號
borderid 數(shù)字 小數(shù) 欄目編號
topic 文本 80 主題
content 備注 備注 新聞內(nèi)容
ntime 日期 8 發(fā)布時(shí)間
hits 數(shù)字 小數(shù) 閱讀次數(shù)
keys 備注 備注 關(guān)鍵字
img 文本 50 相關(guān)圖片
nfrom 文本 100 來源
modify 文本 30 編輯人
audit 數(shù)字 長整型 是否審核
auditer 文本 50 審核人
writer 文本 50 作者
imgsize 數(shù)字 小數(shù) 圖片大小
3-2：新聞類別表：
該表用來存放本網(wǎng)站新聞信息的類別名稱。
字段名 類型 寬度 說明
typeid 自動編號 長整型 類別編號
typename 文本 50 類別名稱
3-3：新聞欄目表：
該表用來存放本網(wǎng)站新聞信息的類別名稱。
字段名 類型 寬度 說明
borderid 自動編號 長整型 類別編號
typeid 自動編號 長整型 類別編號
bodername 文本 50 類別名稱
3-4：管理員信息表：
該表用來存放本網(wǎng)站管理員信息。
字段名 類型 寬度 說明
userid 自動編號 長整型 用戶編號
name 文本 15 用戶名
pwd 文本 14 密碼
3-5：資源信息表：
該表用來存放本網(wǎng)站管理員信息。
字段名 類型 寬度 說明
id 自動編號 長整型 資源編號
Newsid 文本 15 對應(yīng)的信息編號
Lujin 文本 14 資源存放路徑
以上是本系統(tǒng)的庫表結(jié)構(gòu)的設(shè)計(jì)簡要說明。
4、網(wǎng)站的實(shí)現(xiàn)
完成了以上的后臺數(shù)據(jù)庫的設(shè)計(jì)后，下面就可以對前面系統(tǒng)分析階段邏輯設(shè)計(jì)出的功能模塊將技術(shù)設(shè)計(jì)轉(zhuǎn)化成為物理實(shí)現(xiàn)，是系統(tǒng)建設(shè)的實(shí)現(xiàn)階段。因此，網(wǎng)站的實(shí)現(xiàn)的成果將是系統(tǒng)分析和設(shè)計(jì)階段的結(jié)晶。
4.1：安裝網(wǎng)站設(shè)計(jì)相關(guān)軟件：
本站設(shè)計(jì)需要用到FLASH8.0，Adobe Photoshop 8.0，Dreamweaver等網(wǎng)頁設(shè)計(jì)相關(guān)的軟件。
其中FLASH8.0主要完成網(wǎng)頁中相關(guān)動畫的設(shè)計(jì)和處理。
Adobe Photoshop 8.0主要完成網(wǎng)頁中相關(guān)的圖片的大小，格式轉(zhuǎn)化，效果處理等。
Dreamweaver主要完成網(wǎng)頁的排版、布局設(shè)計(jì)。
4.2 建立Asp的運(yùn)行環(huán)境
簽于目前流行的windows操作平臺有windows xp等。下面針對這XP操作平臺上建立Asp運(yùn)行環(huán)境的一些簡要介紹。
在windows 2000/XP上建立Asp的運(yùn)行環(huán)境
在windows 2000/XP上運(yùn)行Asp的環(huán)境也是IIS。如果安裝的是windows 2000 Server,IIS5.1將作為一個(gè)默認(rèn)選項(xiàng)被安裝。如果使用的是windows 2000/XP中文專業(yè)版，則需要使用控制面板“ 添加/刪除程序”來安裝IIS及其組件。
4．3、主頁的設(shè)計(jì)
來訪者輸入網(wǎng)址，首先打開的就是學(xué)校網(wǎng)站的主頁，主頁設(shè)計(jì)應(yīng)該美觀，同時(shí)提供足夠多的鏈接，以便來訪者可以通過鏈接導(dǎo)航到自己所關(guān)心的信息頁面上去。下面是該首頁運(yùn)行的界面圖：
該頁面的布局結(jié)構(gòu)是 ∏型布局結(jié)構(gòu)。具體的說：在網(wǎng)頁的上面是log圖片和導(dǎo)航條。Log圖片表明網(wǎng)站的主題：南部縣伏虎中學(xué)網(wǎng)站。導(dǎo)航條將本站的欄目分成了學(xué)校概況，學(xué)校新聞，教育科研，名校名師，學(xué)生園地，招生信息，誠聘英才，校長信箱，網(wǎng)上留言等欄目。這些導(dǎo)航欄目分別設(shè)計(jì)有相應(yīng)的文字鏈接，點(diǎn)擊這些文字鏈接可以進(jìn)入相應(yīng)的頁面。
打開專業(yè)的網(wǎng)頁設(shè)計(jì)工具Dreamweaver UltraDev 4。
1：新建一個(gè)網(wǎng)頁文件，保存為index.asp，接著設(shè)置頁面屬性，在屬性頁中標(biāo)題：南部縣伏虎中學(xué)。背景圖案：img/bg_line.gif。
定義頁面中表格，單元格，文字和鏈接的表現(xiàn)風(fēng)格。本頁面定義的語句如下：
<style>
body {margin:0px;font-size:12px;overflow-x:hidden;overflow-y:scroll;color:#666666;LINE-HEIGHT: 160%}
table {font-size:12px;LINE-HEIGHT: 160%}
td {font-size:12px;}
.txt {font-size:12px;border-width:0px;border-bottom:1px solid #000000;background-color:#def1f7;position:relative;top:0px;left:5px;padding-bottom:0px;color:#a0a0a0;}
a:link.list {font-size:12px;color:#666666;text-decoration:none;}
a:visited.list {color:#666666;text-decoration:none;}
a:hover.list {color:#333333;text-decoration:underline;}
a:link.more {font-size:12px;color:#666666;text-decoration:none;}
a:visited.more {color:#666666;text-decoration:none;}
a:hover.more {color:#333333;text-decoration:underline;}
img {border:0px;}
</style>
利用布局表格工具，設(shè)置好網(wǎng)頁的表格布局。然后就可以在表格中添加單元格。利用表格的屬性面板和單元格屬性面板設(shè)定好各自的屬性以后，就可以在單元格中添加文字和插入圖片。
布局設(shè)計(jì)好的網(wǎng)頁如下：
代碼設(shè)計(jì)：為了實(shí)現(xiàn)首頁顯示學(xué)校快訊，教育科研，名校名師，學(xué)生園地等文字信息以及為了方便管理。不是在每個(gè)欄目設(shè)計(jì)靜態(tài)的文本信息，而是內(nèi)嵌java腳本，腳本的數(shù)據(jù)源來自一個(gè)和數(shù)據(jù)庫相連接的asp文件： new.asp。下面給出學(xué)?？煊崳逃蒲?，名校名師，學(xué)生園地對應(yīng)的四個(gè)java腳本語句：
1：<script language="javascript" src="news.asp?typeid=10&n=10?m=14"></script>
2：<script language="javascript" src="news.asp?typeid=11&n=10?m=14"></script>
3：<script language="javascript" src="news.asp?typeid=12&n=10?m=14"></script>
4：<script language="javascript" src="news.asp?typeid=13&n=10?m=14"></script>
通過比較這四條腳本語句可以發(fā)現(xiàn)，腳本調(diào)用的是同一asp文件，只是一個(gè)typeid不一樣。在數(shù)據(jù)庫的設(shè)計(jì)中我們以及知道，這個(gè)參數(shù)是新聞的類別編號。由于這四類不同的信息都是存儲在數(shù)據(jù)庫中的news表中，要實(shí)現(xiàn)信息的分類就可以通過設(shè)定這個(gè)類別編號。這里的typeid=10對應(yīng)學(xué)校新聞，typeid=11對應(yīng)教育科研，typeid=12對應(yīng)名校名師，typeid=13對應(yīng)學(xué)生園地。
下面簡單的介紹一下news.asp文件的代碼：
在news.asp文件中首先獲得上面?zhèn)鬟f的參數(shù)。通過下面的語句實(shí)現(xiàn)：
typeid=request("typeid")
n=trim(request("n"))
這里的n是查詢表中符合條件的多少條記錄的參數(shù)。
接著通過下面的語句從數(shù)據(jù)庫news表中查詢符合條件的最后的n條記錄：
sql="select top " & n & " * from news where typeid=" & cstr(typeid) & " and audit=1 order by newsid DESC"
這里的audit表示已經(jīng)是審核通過的信息。最后的信息顯示是按newsid號倒序排列。
另外在該文件的開頭有包含文件：
<!--#include file="function/DBOpen.asp"-->
該文件用于鏈接數(shù)據(jù)庫。
在文件的末尾有包含文件：
<!--#include file="function/DBclose.asp"-->
該包含文件用于關(guān)閉數(shù)據(jù)庫。
4.4 顯示新聞和下載文件的shownews.asp設(shè)計(jì)
在首頁中大量的新聞信息是通過鏈接到shownews.asp文件來顯示新聞信息的。比如在首頁中點(diǎn)擊學(xué)?？煊嵵械娜我恍侣劊涂梢枣溄拥皆擁撁娌@示該新聞的詳情。
下面是學(xué)校快訊中“南部縣伏虎中學(xué)教學(xué)成果顯著”這條新聞后顯示的頁面，該新聞的鏈接語句是：
shownews.asp?newsid=413
這里的傳遞的參數(shù)newsid用于傳遞顯示的新聞的編號。
該頁面的設(shè)計(jì)過程首先在Dreamweaver UltraDev 4中排版設(shè)計(jì)，設(shè)計(jì)的界面如圖所示：
對比實(shí)際運(yùn)行的界面和設(shè)計(jì)界面可以看出，導(dǎo)航條的設(shè)計(jì)不是在這里直接給出，而是通過腳本調(diào)用一個(gè)js文件。這樣設(shè)計(jì)的好處在與可以和其它的頁面共享該導(dǎo)航的js文件。調(diào)用腳本的語句如下：
<script language="JavaScript" src="newsbar.js"></script>
該newsbar.js文件的語句如下：
document.writeln("<table width=100% cellspacing=0 cellpadding=0>");
document.writeln(" <tr align=center>");
document.writeln(" <td width=15%><a href=more.asp?typeid=9>學(xué)校概況</a></td>");
document.writeln(" <td width=14%><a href=more.asp?typeid=10>學(xué)校新聞</a></td>");
document.writeln(" <td width=14%><a href=more.asp?typeid=11>教育科研</a></td>");
document.writeln(" <td width=14%><a href=more.asp?typeid=12>名校名師</a></td>");
document.writeln(" <td width=14%><a href=more.asp?typeid=13>學(xué)生園地</a></td>");
document.writeln(" <td width=14%><a href=more.asp?typeid=14>招生信息</a></td>");
document.writeln(" <td width=14%><a href=more.asp?typeid=15>誠聘英才</a></td>");
document.writeln(" </tr>");
document.writeln("</table>");
另外對比shownews.asp文件還可以看出，該頁面中的新聞標(biāo)題和新聞內(nèi)容也是調(diào)用其它的語句和腳本的。
新聞標(biāo)題調(diào)用asp腳本：<%=rs("topic")%>用于顯示記錄集中的topic字段值。該字段是通過sql語句實(shí)現(xiàn)的查詢記錄集中的字段值。相關(guān)的sql查詢語句如下：
rs.open "select * from news where newsid=" & cstr(request("newsid")),conn,1,1
該語句實(shí)現(xiàn)從news表中查詢newsid編號等于傳遞的參數(shù)newsid的記錄。
對于新聞的內(nèi)容顯示也和新聞的主題顯示類似，這里就不再說明。
最后這里介紹一下該頁面顯示的與本新聞相關(guān)的新聞的實(shí)現(xiàn)技術(shù)：
首先要從數(shù)據(jù)庫中news表的字段說起，在news表中有一個(gè)keys字段。
我們可以利用sql語句在news表中查詢keys值和該新聞關(guān)鍵字類似的記錄，就可以得到相關(guān)信息。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文件除了顯示新聞詳細(xì)信息外，該文件同時(shí)還和下載資源的詳細(xì)頁面共用。為了在顯示一般詳細(xì)信息時(shí)候，不出現(xiàn)下載的字樣，可以利用if 語句進(jìn)行判斷，利用if語句對變量xz進(jìn)步判斷，如果xz變量等于1，表明是資源下載的詳細(xì)頁面，這時(shí)候就顯示下載字樣，下載鏈接來自資源表中的該資源對應(yīng)路徑。
4.5 更多新聞頁面的more.asp設(shè)計(jì)
在首頁中的學(xué)?？煊?，教育科研，名校名師，學(xué)生園地都只是顯示了該類別的10條信息，如何得到更多的信息顯示？需在首頁之外另外設(shè)計(jì)更多信息顯示的more.asp頁面。在首頁的導(dǎo)航條上面都可以鏈接到該頁面。在首頁的導(dǎo)航條中分別有下面的鏈接語句：
1：<a href="more.asp?typeid=10">…</a>
2：<a href="more.asp?typeid=11">…</a>
3：<a href="more.asp?typeid=12">…</a>
4：<a href="more.asp?typeid=13">…</a>
5：<a href="more.asp?typeid=14">…</a>
6：<a href="more.asp?typeid=15">…</a>
這些鏈接語句分別都是鏈接到more.asp文件，只是傳遞的參數(shù)不一樣。Typeid=10…15分別對應(yīng)學(xué)校新聞…誠聘英才。
在本頁中就是通過獲得的傳遞參數(shù)確定sql語句查詢news中的類別號等于傳遞的類別號的所有信息的。
下面是傳遞參數(shù)為16的頁面顯示的界面圖：
該頁面顯示的所有news表中typeid=16的新聞信息。
下面給出在Dreamweaver UltraDev 4中排版設(shè)計(jì)的結(jié)果：
下面介紹該頁面實(shí)現(xiàn)顯示傳遞的參數(shù)的所有信息的技術(shù)：
首先利用下面的代碼實(shí)現(xiàn)建立一個(gè)記錄集和實(shí)現(xiàn)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等于傳遞的參數(shù)的記錄可能非常多，那么全部在一頁中顯示不方便，所以該頁又用到了數(shù)據(jù)的分頁顯示技術(shù)。
下面給出本頁中用到的分頁顯示的代碼：
<%
response.write "<hr size=0 width='80%'><div align=center>"
response.write "第<font color=red>" + cstr(curpage) + "</font>頁/總<font color=red>" + cstr(rs.pagecount) + "</font>頁 "
response.write "本頁<font color=red>" + cstr(i-1) + "</font>條/總<font color=red>" + cstr(rs.recordcount) + "</font>條 "
if curpage = 1 then
response.write "首頁 前頁 "
else
response.write "<a href='more.asp?typeid=" & cstr(typeid) & "&page=1'>首頁</a> <a href='more.asp?typeid=" & cstr(typeid) & "&page=" & cstr(curpage-1) & "'>前頁</a> "
end if
if curpage = rs.pagecount then
response.write "后頁 末頁"
else
response.write "<a href='more.asp?typeid=" & cstr(typeid) & "&page=" & cstr(curpage+1) & "'>后頁</a> <a href='more.asp?typeid=" & cstr(typeid) & "&page=" & cstr(rs.pagecount) & "'>末頁</a>"
end if
%>
分頁技術(shù)介紹見第五章的介紹。
在該頁面的左側(cè)，顯示的有推薦內(nèi)容和熱點(diǎn)文章二類信息。
下面來重點(diǎn)介紹推薦內(nèi)容實(shí)現(xiàn)的原理：
在推薦內(nèi)容的單元格中內(nèi)嵌腳本：
<script language="javascript" src="news.asp?kind=hot&n=5"></script>
腳本中調(diào)用的文件是news.asp，傳遞的參數(shù)是kind和n。這里的kind值為hot，n為5。
這里的hot參數(shù)不是表示news表中某個(gè)字段的值為hot，在實(shí)現(xiàn)的哪些信息是屬于hot類別的時(shí)候，是通過sql查詢語句中的通過news表中的hits的次數(shù)反序輸出。也就是說hits點(diǎn)擊次數(shù)最多的記錄顯示。參數(shù)N的值傳遞顯示信息的條數(shù)。
實(shí)現(xiàn)的關(guān)鍵語句如下：
sql="select top " & n & " * from news where typeid=" & cstr(typeid) & " and audit=1 order by hits DESC"
為了實(shí)現(xiàn)左邊分類導(dǎo)讀的子欄目的顯示，可以從border表中查詢出大類為當(dāng)前的typeid編號的類別。然后利用循環(huán)語句分別將border表中符合條件的小類欄目顯示到頁面上。
rs6.open "select * from border where typeid=" & request("typeid") ,conn,1,1
學(xué)生頻道中的學(xué)生留言，學(xué)生意見欄目屬于學(xué)生頻道欄目，但是由于學(xué)生留言和學(xué)生反饋屬于交互性的欄目，所以，在后臺設(shè)計(jì)中，并沒有把學(xué)生留言，學(xué)生意見作為學(xué)生頻道的子類別，由于不是子類，那么這里就無法顯示通過從border表中查詢獲得。所以在這里為了顯示該欄目，可以利用一個(gè)if語句來進(jìn)行判斷類別值，如果類別typeid編號值為17(學(xué)生頻道)，那么就利用if語句判斷后另外添加顯示學(xué)生留言等子欄目。
if request("typeid")=17 then
response.write "<li type=circle><a href='bbs/' target=_blank>"
response.write "學(xué)生提問" & "</a>"
response.write "<li type=circle><a href='bbs/' target=_blank>"
response.write "學(xué)生意見" & "</a>"
end if
4.6 后臺管理登錄的實(shí)現(xiàn)
實(shí)現(xiàn)登錄的文件有：login.asp和check.asp二個(gè)文件。Login.asp文件提供輸入用戶名和密碼已經(jīng)校驗(yàn)輸入的是否為空等判斷。輸入正確的用戶名和密碼是否正確是通過login.asp文件中表單提交的用戶名和密碼傳遞到check.asp文件中和數(shù)據(jù)庫中user表用戶名和密碼對比是否正確，對正確的用戶名和密碼賦給一個(gè)session變量。進(jìn)入到管理主頁。實(shí)現(xiàn)的語句如下：
session("purview")=rs("purview")
session("name")=rs("name")
response.redirect "admin/index.asp"
該session變量的作用是在不同的網(wǎng)頁之間傳遞登錄用戶的身份。因?yàn)楣芾眄撁娴臋?quán)限只有管理員才能進(jìn)入。所有當(dāng)管理員登錄時(shí)利用session來將管理員的身份在不同的管理頁面間傳遞著。
當(dāng)用戶名和密碼賦給一個(gè)session變量的同時(shí)也將網(wǎng)頁轉(zhuǎn)向管理主頁。在管理主頁的開頭部分首先需要校驗(yàn)身份。校驗(yàn)的實(shí)現(xiàn)的方法是檢查session變量是否為空。如果為空表明沒有經(jīng)過管理登錄獲得合法的session，那么就不能進(jìn)入該頁面。實(shí)現(xiàn)這個(gè)功能的語句如下：
<%
if session("purview")="" then
response.redirect "../login.asp"
response.end
end if
%>
由以上的語句可以看出，如果session變量為空，則轉(zhuǎn)向登錄文件login.asp。下面是合法的session變量登錄到管理主頁的界面：
該頁面的實(shí)現(xiàn)使用了框架技術(shù)。整個(gè)頁面分為左右二部分，左邊是用戶管理操作的一個(gè)列表。右邊是對應(yīng)的網(wǎng)頁。管理部分的其它頁面和實(shí)現(xiàn)的技術(shù)這里就不再一一介紹。詳情可以參見源代碼文件。
4.7 資源下載欄目的設(shè)計(jì)
資源下載重點(diǎn)需要設(shè)計(jì)出資源的信息的添加和資源的上傳。
在后臺管理中，管理員可以通過點(diǎn)擊資源下載欄目中的子欄目比如試卷下載子菜單，出現(xiàn)資源添加和資源上傳頁面。資源的添加實(shí)現(xiàn)分為2步，第一步把資源上傳到服務(wù)器下，同時(shí)把上傳路徑記錄到資源表中，第二將資源的文字信息添加到后臺信息表中。
實(shí)現(xiàn)資源的上傳和將上傳路徑保存到資源表，是由Addziyuan.asp文件實(shí)現(xiàn)的。
為了實(shí)現(xiàn)上傳，需要用到ADO Stream和FSO對象。在ASP中，F(xiàn)SO的意思是File System Object，即文件系統(tǒng)對象。我們將要操縱的計(jì)算機(jī)文件系統(tǒng)，在這里是指位于web服務(wù)器之上。利用FSO等技術(shù)實(shí)現(xiàn)將在服務(wù)器端創(chuàng)建上傳文件夾。
基本原理是：采用ADO Stream對象的BinaryRead方法將FORM中的所有數(shù)據(jù)讀出，從中截取出所需的文件數(shù)據(jù)，以二進(jìn)制文件方式存盤。
<form action="addziyuan.asp" target="_blank" enctype="multipart/form-data" method="post">
<tr bgcolor="#FFFFFF">
<td width="20%">
<div align="right">上傳文件 </div>
</td>
<td width="80%">　
<input type = "file" name = "filePic" size = "30">
<input type = "submit" name = "Submit" value = "上傳">
</td>
</tr>
</form>
程式中使用了文件對象，這樣在upload_5xsoft.inc中采用BinaryRead方法讀來的原始數(shù)據(jù)就不僅僅是選擇的文件本身的數(shù)據(jù)，還包含該文件在用戶硬盤上的路徑、類型、提交頁面的表單域名等相關(guān)信息的描述，這樣我們就需從中提取出文件的具體內(nèi)容。根據(jù)分析，數(shù)據(jù)的頭部信息和數(shù)據(jù)的分界線是兩對回車換行符，尾部也有分隔信息，我們能采用類似以下的方法獲取文件數(shù)據(jù)。
set objForm=Server.CreateObject("Scripting.Dictionary")
set objFile=Server.CreateObject("Scripting.Dictionary")
if Request.TotalBytes<1 then Exit Sub
set tStream = Server.CreateObject("adodb.stream")
set Data_5xsoft = Server.CreateObject("adodb.stream")
Data_5xsoft.Type = 1
Data_5xsoft.Mode =3
Data_5xsoft.Open
Data_5xsoft.Write Request.BinaryRead(Request.TotalBytes)
Data_5xsoft.Position=0
RequestData =Data_5xsoft.Read
利用ADO STREAM中提供的二進(jìn)制文件操作方法來完成，保存文件的語句是： StreamOBJ.SaveToFile (fileName,2)。在 這種操作中，我們能將有關(guān)的操作存放在一個(gè)類文件中，在應(yīng)用時(shí)，直接將該類文件包含在ASP程式中就能了。
當(dāng)文件上傳后，最后，系統(tǒng)將上傳的路徑和上傳的文件名保存到資源表中。保存資源表的代碼如下：
Set rs2 = Server.CreateObject("ADODB.Recordset")
sql2="select * from ziyuan"
rs2.open sql2,conn,3,3
rs2.addnew
rs2("lujin")=szPath & szFileName
rs2.update
rs2.close
5、本系統(tǒng)的技術(shù)特色
—— 利用session變量來跟蹤和校驗(yàn)合法用戶。
本網(wǎng)站管理員登錄以及管理員進(jìn)入管理頁面時(shí)用到了session變量。
當(dāng)用戶在WEB站點(diǎn)的網(wǎng)頁之間來回移動的時(shí)候，可以使用Session變量來跟蹤用戶。Session變量與cookie有密切的關(guān)系。實(shí)際上，session變量依賴于cookie變量。
在本網(wǎng)站管理員登錄進(jìn)入后臺管理時(shí)，需要用到session變量。便于管理員在不同的管理網(wǎng)頁之間移動表明身份。
首先，在check.asp文件中獲得該變量。管理員登錄時(shí)輸入的用戶名和密碼傳遞到check.asp中和數(shù)據(jù)庫中管理員用戶名和密碼對比。正確的用戶名和密碼就賦值一個(gè)session變量。具體語句如下：
session("purview")=rs("purview")
session("name")=rs("name")
在后面的管理頁面中首先判斷session("purview")是否為空，如果為空的話表明沒有取得合法的session身份。這樣就導(dǎo)向到login.asp頁面重新登錄。
判斷session變量的語句如下：
<%
if session("purview")="" then
response.redirect "../login.asp"
response.end
end if
%>
下面再介紹一些session變量的其它知識：
session變量存活到用戶離開WEB站點(diǎn)為止，WEB服務(wù)器是怎么檢測到這件事的發(fā)生呢？在默認(rèn)情況下，如果用戶在20分鐘之內(nèi)還沒有請求網(wǎng)頁，那么WEB服務(wù)器就認(rèn)為用戶已經(jīng)離開，通過session對象的Timeout屬性可以改變這個(gè)默認(rèn)的行為。
Session.Timeout=60
以分鐘的形式聲明Timeout屬性值。Timeout的這個(gè)新值將應(yīng)用于用戶整個(gè)剩余的會話當(dāng)中。
另外在使用session變量之前，應(yīng)該注意它與cookie一樣的缺點(diǎn)，當(dāng)一個(gè)客戶使用的是不支持cookie的瀏覽器時(shí)，Web服務(wù)器不能創(chuàng)建ASPSessionIDcookie。沒有ASPSessionIDcookie，當(dāng)用戶在網(wǎng)頁之間移動時(shí)，session變量就不能與用戶發(fā)生聯(lián)系。因此盡可能地避免使用session變量。
通過這次網(wǎng)站的設(shè)計(jì)，我掌握了一種新的系統(tǒng)開發(fā)工具FLASH5.0，Adobe Photoshop 6.0，Dreamweaver UltraDev 4和Asp網(wǎng)絡(luò)技術(shù)。ASP組件的強(qiáng)大功能讓我深感折服，ADO對象開發(fā)人員提供了一種最快、最簡單和效率最高的訪問所有數(shù)據(jù)庫的方法，利用ADO我們可以在ASP腳本中生成對數(shù)據(jù)庫的連接，并且利用該數(shù)據(jù)庫連接可完成各種各樣的數(shù)據(jù)庫操作。ADO提供的是一種應(yīng)用級程序的應(yīng)用程序接口。同時(shí)在這次設(shè)計(jì)的過程中，我始終遵循軟件工程的思想，這使我的工作進(jìn)度明顯加快，也使我少走了不少彎路。軟件工程的思想，指導(dǎo)我一步一步從系統(tǒng)分析，到系統(tǒng)設(shè)計(jì)，再到系統(tǒng)實(shí)現(xiàn)，讓我對整個(gè)系統(tǒng)的開發(fā)過程有了明顯的全局觀念，也合理地安排了整個(gè)設(shè)計(jì)的時(shí)間。

當(dāng)前文章：網(wǎng)站設(shè)計(jì)制作說明
分享鏈接：http://muchs.cn/news41/229691.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)