基于ASP的高校校園網站的設計與實現

摘 要:基于我校網絡中心的軟硬件平臺配置，采用ASP技術開發了校園網門戶網站。本文介紹了校園網網絡資源配置，給出了詳細的網站設計方案，闡述了各模塊實現的功能，同時探討了網頁美工設計與網站安全措施，為高校校園網站的設計提供了有效參考。

關鍵詞:網站設計網頁美工網站安全

中圖分類號:TP311文獻標識碼:A文章編號:1674-098X(2011)06(b)-0028-02

1 引言

21世紀以來，隨著互聯網的飛速發展，越來越多的網站如雨后春筍般涌現出來。如今，網站已經儼然成為各個企業向網絡用戶提供信息的重要平臺，網址也成為各個企業不可或缺的“網絡商標”。高校校園網站是宣傳和反映學校形象與文化的重要窗口，是每個高等院校與外界交互的唯一平臺。如何通過合理的版塊設計，突出學校的優勢與特色，通過適當的美工，彰顯學校的魅力，吸引廣大的莘莘學子是高校校園網站設計需要關注的核心問題。本文根據高校實際情況，從設計原則、網站功能以及美工效果出發，完成了高校校園網站設計方案，為各高校制作自己的網站提供參考。

2 開發平臺

校園網網絡配置:在網絡中心部署兩臺思科Catalyst6509三層交換機。網絡中心以星型結構與各個宿舍樓和教學樓的匯聚交換機聯接。匯聚節點交換機主要由Cisco 4506和Cisoc 3512G組成。

校園網網站硬件配置:兩臺HPDL380服務器作分布式服務。軟件平臺:(1)服務器采用Windows Server 2003操作系統;(2)Web服務器采用IIS 6.0(Internet Information Service，互聯網信息服務);(3)數據庫采用SQL Server 2008;(4)軟件開發技術采用COM組件。

網站開發技術與工具:(1)動態網頁開發——采用ASP(Active Server Page，動態服務器頁面)技術[1]。(2)可視化網頁制作工具:Macromedia Dreamweaver CS5[2];(3)圖形圖像處理軟件:Adobe Photoshop CS5;(4)網頁動畫制作軟件:Adobe Flash CS5。本設計方案采用ASP結合Macromedia Dreamweaver CS5來架構網站，同時用Adobe Photoshop CS5、Flash CS5輔以美工與動畫設計。

3 網站設計方案

高校校園網站是學校對外交流的重要平臺，它不但承擔著反映學校辦學特色以及學校概況、人才培養、招生就業、科學研究、學科建設、師資隊伍、學術交流等多方面動態信息的任務，同時，又承載著為校內師生與職工提供數字書刊、郵件系統等資源，發布全校新聞動態、校內通知、下發文件信息、各單位各院系內部信息等業務。

3.1 主頁設計

學校主頁是校園網站的首頁，也是用戶瀏覽次數最多的頁面，因此，需要將學校最重要的信息部署在首頁上，并進行合理的版塊設計。由于校園網主頁必需從數據庫中讀取各類動態信息，因此，主頁開發主要采取動態網頁開發技術。

(1)頂部設計:將學校logo、中英文校名等信息放在網頁最上端，并輔以美工設計。(2)導航設計:導航條banner置于學校logo的下方，它是網站其他版塊的入口，包括:學校概況、教育教學、招生就業、機構設置、科學研究、學科建設、師資隊伍、合作交流、學生園地、圖書館藏共10個模塊。(3)動態信息設計:動態信息共分為3部分，即:圖片新聞——主要發布新聞圖片，增加校園新聞的可讀性;綜合新聞——主要發布與學校有關的媒體新聞以及校園文化信息;通知公告——主要發布全校范圍內的部門及院系相關的重要通知。圖片新聞模塊主要采用嵌入javascript代碼的方式，首先從數據庫中讀取最新發布的某幾條新聞，然后通過javascript代碼使其在主頁上輪流滾動播放。(4)信息發布后臺設計:為各類動態信息的發布建立統一發布平臺——網絡辦公自動化系統，其業務包括:學校主頁信息發布、招生就業信息發布、學術交流信息發布、教授主頁及教授名錄信息管理、數字圖書信息管理等。同時，對網絡辦公系統進行分權管理設計，建立角色關鍵字，使不同的數值對應不同的角色，如:角色=1可向學校主頁發布信息，角色=2可以修改教授主頁等，以此類推，通過不同賬號對應不同權限，使學校各部門管理員可以發布和修改對應本部門的業務信息。最后，在主頁上給出登錄入口，方便管理員登入。(5)業務系統快捷入口設計:為方便校內用戶登錄日常辦公所需的各類應用系統，應在主頁上設置相應的鏈接地址，包括:郵件系統、信息門戶平臺、網絡辦公系統、教務管理系統、研究生管理系統、科研管理系統、學工系統、實驗室設備管理系統、后勤服務系統等等。(6)學校特色設計:在主頁上單獨劃分一塊區域，專門懸掛學校的各類特色網站，如:國家重點實驗室網站、期刊網等，以彰顯學校實力與特色。(7)站內搜索設計:主要為用戶提供全網站范圍內的信息查詢功能。可根據標題、部門、類別、日期等不同關鍵字，查詢學校發布的通知、文件、資料等等。

3.2 其他版塊設計

校園網站其他版塊的主要功能是為用戶提供學校的各項信息以及各類資源。在主頁上已經給出了10個版塊的鏈接入口，根據每個版塊的特點，采用動態網頁與靜態網頁結合的設計方式。

(1)學校概況設計:主要展示學校的綜合情況，包括:學校簡介、現任領導、歷任領導、領導題詞、歷史沿革、大事記、校園風光、經典圖片、學校方位、學校標識。(2)教育教學設計:主要展示在校本科生與研究生的專業設置和教育教學情況，同時也提供學校的博士后流動站、產學研究基地、優勢學科人才培養基地以及學校特色招生，包括:國防生、留學生、繼續教育——成人教育和網絡教育招生、獨立學院——學校下屬二級學院招生等信息。(3)招生就業設計:為報考學生提供招生簡章、專業介紹、報名系統、選拔要求等各類招生信息，同時為在校畢業生提供畢業生生源信息、招聘會、雙選會等各類就業信息。考慮到招生與就業的時效性，采用動態網頁設計方式，為負責招生就業的老師在網絡辦公系統中授予發布招生就業信息的權限(角色=3)。(4)機構設置設計:在網頁上直觀的畫出學校的機構分類圖，并在黨(紀)委職能部門、行政職能部門、教學院系、輔助單位、科研單位和群眾社團等不同機構分類下面懸掛相應的二級單位部門主頁鏈接。同時，將各個部門的工作職責以列表的形式顯示在網頁中。(5)科學研究設計:主要展示學校的科研項目、科研成果、科研基地等，由于該業務隸屬于科技處管理，因此可以與科技處協商，在數據上達成統一，并與科技處主頁結合設計。(6)學科建設設計:主要展示學校的211工程、創新團隊、優勢學科創新平臺等情況，鑒于上述二級菜單下面還需要建立三級菜單，例如:學科建設(一級菜單)→創新團隊(二級菜單)→①簡介 ②工程進展(三級菜單)，因此，利用Dreamweaver里的層來制作第三級下拉菜單。(7)師資隊伍設計:該板塊主要展示學校的院士風采、博導資源、教授名錄、教授主頁等。由于每年學校的教授人數會發生變化，因此教授名錄和教授主頁需采用動態網頁的設計方式:首先在網絡辦公系統中為每位教授分配教授主頁權限(角色=2)，使教授可以在系統中上傳自己的學術論文、科研項目、學術專著、獲獎、專利、教學與招生以及個人主頁等信息，然后在網頁上嵌套讀取數據庫中教授信息與教授名單的代碼，使其動態顯示在網頁上。(8)合作交流設計:主要發布各類學術交流與國際合作信息，通過網絡辦公系統為國際合作處的老師授予發布學術交流信息的權限(角色=4)。(9)學生園地設計:該板塊專門為學生設計，主要懸掛與學生活動相關的各網站，如:校學生會網站、校研究生會網站、學生社團聯合會網站、學工在線系統等，方便學生了解和參與學校組織的各項活動。⑽圖書館藏設計:主要對內發布學校訂購的各類數字圖書資源，按照外文資源、中文資源、免費資源，在網頁上分類懸掛各數據庫的資源簡介與訪問入口。

4 網頁美工設計

網頁美工是網站設計的重要環節，一個好的網頁不但可以用豐富的色彩與美感吸引用戶，同時可以通過合理的布局、一致性風格設計使網頁重點突出、層次分明，提高用戶的使用效率。本網站方案主要采用平面設計軟件Photoshop來制作，同時用Flash軟件輔以動畫效果設計。

(1)樣式風格設計:網站的功能是為了展示更多信息，無論文字、圖片、表格、超鏈接等等都是網站展示信息的主要手段。通常，一個網站需由若干不同的版塊構成，每一個版塊又需包含不同的內容，如果每塊內容都風格不一、樣式各異，整個網站只會給人一種凌亂的感覺。因此，統一樣式風格尤為重要。本設計采用HTML語言編寫和設計CSS樣式單，并將樣式單包含在每一個網頁的頭部，樣式單中定義了不同的類，每種類對應不同的樣式，通過在網頁中統一調用不同的類來控制網頁中的文本、圖片、背景、表格、圖層、表單、超鏈接等樣式，從而達到統一風格的目的。(2)色彩方案設計:根據學校的建校風格和教學特色，本設計選用藍色為主要基色。藍色代表藍天白云，給人以沉靜整潔的色感。藍色最忌純色搭配，該色在網頁設計中屬于比較艷麗的顏色，如果不輔以其他顏色的搭配，會給人一種強烈的刺激感，使得整個網頁缺乏內涵。因此，使用白色與橙色與之搭配。整體以藍色為主調，網頁上的logo、圖片、導航條、標題欄等設計為藍色，中心內容襯以白底黑字，再以橙色按鈕做點綴，突顯簡潔素雅的設計風格。(3)其他設計:為了彰顯學校特色，可選取部分校園風光設計成圖片置于主頁頂部、其他版塊的頂部與側邊，使用戶一打開網頁，就能感受到學校獨特的風格。此外，可以根據不同背景圖片，設計簡單且背景透明的Flash動畫，與背景圖片搭配在一起，既不影響主頁的設計風格，又可以增強動感效果。

綜合上述設計原則，主頁樣式設計如圖1所示。

5 網站安全措施方案

由于信息技術的迅速發展，網站安全性遭遇了嚴峻的挑戰。如今，網站的攻擊方式發展越來越快，攻擊頻率也越來越高，一旦校園網站遭受攻擊，勢必極大程度地影響高校的日常工作，甚至帶來嚴重損失。因此，在高校網站的設計中，必需考慮各種安全措施，以防御非法入侵。

(1)網絡配置防御體系:為校園網配置接入防火墻，實現校園網與外網的有效隔離，部署防病毒網關、垃圾郵件過濾系統等，對校園網絡設備的運行情況、線路使用情況、用戶上網情況進行有效的監控和管理，保證校園網的安全運行。(2)服務器安全配置:為服務器安裝正版殺毒軟件及防火墻，定時更新系統補丁與病毒庫，設置定時殺毒任務，并關閉服務器的所有無用端口。(3)網頁安全防御代碼:ASP網頁最容易遭受SQL注入。所謂SQL注入，就是利用開發人員對用戶輸入數據合法性檢測不嚴格的特點，向服務器提交特殊代碼，收集相關信息，最終達到欺騙服務器并執行惡意SQL命令的目的。一般的HTTP請求有get和post兩種，我們需要在網頁中編寫代碼，過濾所有get和post請求中參數信息里的非法字符，以達到防止SQL注入的目的。

6 結語

本文結合我校的網絡資源配置，采用基于ASP的方式開發了高校門戶網站，結合各部門需求，設計了突出部門特色的學校網站。對網頁的美工設計與安全措施進行了有效探討，給出了美工設計方案和安全措施方法，希望能為高校校園網站的設計提供有效參考。

參考文獻

[1]尚俊杰，蔡翠平.網絡程序設計—ASP[M].北京:清華大學出版社，2009.

[2]黃愛娟，雷喜.Dreamweaver CS5完全自學一本通[M].北京:電子工業出版社，2010.

[3]許寧．采用ASP技術開發管理信息系統的實現原理和優越性[J]．科技創新導報，2008，27：31．

[4]周桂紅．基于ASP開發的網站安全防范措施[J]．科技創新導報，2009，1：32．