網站設計制作說明

2023-01-10    分類: 網站設計

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

當前文章:網站設計制作說明
分享鏈接:http://www.bm7419.com/news41/229691.html

網站建設、網絡推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網站制作,網絡營銷seo公司;服務項目有網站設計

廣告

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

營銷型網站建設