綜合性精品課程網(wǎng)站的設計

王麗芬

（吉林農(nóng)業(yè)科技學院，吉林 吉林132101）

綜合性精品課程網(wǎng)站的設計

王麗芬

（吉林農(nóng)業(yè)科技學院，吉林 吉林132101）

首先對精品課程網(wǎng)站做了詳細的需求分析，然后給出了精品課程網(wǎng)站所需的功能，重點探討了精品課程網(wǎng)站的設計方案，最后對精品課程網(wǎng)站進行了較詳細的設計，并給出了具體實現(xiàn)步驟，通過測試分析，該系統(tǒng)的運行穩(wěn)定可靠，實用價值高。

精品課程；網(wǎng)站；數(shù)據(jù)庫；教育；資源

在現(xiàn)代的學習生活中，多數(shù)精品課網(wǎng)站都是針對某一門課程設計的，對于這一現(xiàn)象，我們設計一個專業(yè)（電子信息科學與技術）的綜合性的精品課網(wǎng)站。

電子信息科學與技術專業(yè)精品課程網(wǎng)站計的開發(fā)是基于B/S結構，采用ASP.net程序設計語言SQL數(shù)據(jù)庫進行開發(fā)。本系統(tǒng)需達到以下目標：系統(tǒng)注冊中判斷用戶名是否可用，提高注冊效率；首頁集合精品課程，并按照精品課程級別進行分類；后臺可以控制各精品課程頁面Banner、Title、keywords、description等；通過Office Word可以直接粘貼到后臺進行發(fā)布，并保持格式統(tǒng)一；系統(tǒng)最大程度實現(xiàn)易維護和易操作性；系統(tǒng)運行穩(wěn)定、安全可靠。

1 系統(tǒng)功能模塊設計

通過調(diào)查分析，結合實際需求，劃分出了精品課程網(wǎng)站的模塊，此系統(tǒng)主要包括課程管理模塊，資料管理模塊和其他管理模塊，如圖1所示：

圖1 系統(tǒng)模塊圖

具體來講本系統(tǒng)有以下模塊：用戶管理：添加用戶，修改密碼，刪除用戶；課程管理：添加課程，刪除課程，修改課程；資料管理：添加、刪除、編輯前臺顯示信息。

2 基本欄目內(nèi)容

精品課程網(wǎng)站主要是為學生提供自主學習的平臺，為學校展示課程改革成果的交流平臺，所以精品課程網(wǎng)站應包含申報資料、成果獎勵等展示型欄目，還要包括教學錄像、習題試卷等學生自主學習欄目，組成部分如圖2所示：

圖2 系統(tǒng)欄目圖

3 數(shù)據(jù)庫的建立

數(shù)據(jù)庫是模塊建設中的關鍵部分，是精品課程網(wǎng)站設計的核心，數(shù)據(jù)庫功能實現(xiàn)的好壞，直接決定了系統(tǒng)功能的實現(xiàn)程度，以及系統(tǒng)實際運行的安全性?；诰W(wǎng)絡數(shù)據(jù)庫SQLServer 2005建立如下結構的數(shù)據(jù)庫。（User、Lessons、Images、Course）以Course為例：

表1 Course

4 系統(tǒng)功能的實現(xiàn)

4.1 系統(tǒng)主頁面的設計

系統(tǒng)主頁面采用綠色為主，由于此精品課程網(wǎng)站以電子信息科學與技術專業(yè)集群性質(zhì)設計的，所以頁面右側導航設置分為校級精品，省級精品和國家級精品，分類簡約而明了。

此導航采用了JavaScript腳本配合div+css實現(xiàn)，動態(tài)顯示，華麗而美觀，其中經(jīng)典的JavaScript代碼（部分）如下：

$（function（）｛

$（".xjjpkc"）.css（"display"，"none"）

$（".sjjpkc"）.css（"display"，"none"）

$（".gjjjpkc"）.css（"display"，"none"）

$（".xj"）.click（function （） ｛ $（".gjjjpkc"）. css（"display"，"none"）；$（".sjjpkc"）.css（"display"，"none"）；$（".xjjpkc"）.css（"opacity"，"0.0"）.fadeIn（"slow"）. fadeTo（"slow"， 0.7）；｝）；

$（".xj"）.click（function xjjpkccx（）｛var marquee3=new Marquee（"marqueedivcontrol1"）；

…………

4.2 教學錄像頁面

教學錄像為學生提供了更簡便快速的學習途徑，學生可以根據(jù)自身情況，對自己的薄弱處進行反復學習，教學錄像是以一種真人授課的方式展現(xiàn)在學生面前，學生可以進行自主學習和交流，滿足個性化學習的需要。

代碼（部分）如下：

4.3 登錄功能實現(xiàn)

登陸頁面用于系統(tǒng)管理員進入管理界面，對該網(wǎng)站進行管理。核查登陸信息頁面用于處理登陸頁面提交的數(shù)據(jù)，查找是否有相應的用戶并進行密碼校檢。

4.4 課程主界面

管理員登錄后，直接進入管理界面，該界面能顯示出精品課程網(wǎng)站的所有信息以及管理信息。該界面是用Dreamwaver 8.0設計而成，主菜單是div+css實現(xiàn)，效果與Flash類似，但卻減少了許多繁瑣的代碼，而且利于搜索引擎優(yōu)化，利用背景圖片變換達到效果，增強了用戶體驗設計，使導航清晰明了。

此頁面用的div+css進行布局，比傳統(tǒng)的table布局更加精簡，易于搜索引擎優(yōu)化。

4.5 課程管理系統(tǒng)實現(xiàn)

（1） 課程管理

這個頁面是課程管理頁面，通過這個頁面，可以對精品課程進行添加、編輯、刪除等操作。

（2）添加編輯課程頁面

這個頁面可以點擊編輯或者添加后進入的頁面，在這個頁面中，我們可以對精品課程進行添加或者編輯，包括名稱、級別、顯示順序、首頁圖片和banner的編輯：

4.6 詳細資料編輯頁面

這個頁面是為管理提供編輯發(fā)布的頁面，可以選擇要編輯的課程，之后選擇要編輯的分頁，進入編輯頁面，在這個頁面中，我們可以對標題、先是順序、關鍵字、描述、章節(jié)、內(nèi)容等進行編輯。此頁面采用了強大的后臺編輯處理系統(tǒng)，使得編輯文字、圖片，排版等應用自如。

5 結束語

設計一個好網(wǎng)站，讓無數(shù)的瀏覽者欣賞一個網(wǎng)站，它的風格是軀體，內(nèi)容是靈魂。鮮明的主體風格可以吸引瀏覽者的眼球；精彩紛呈的內(nèi)容可以激起瀏覽者的興趣。兩者合一，就是一個成功的網(wǎng)站。本系統(tǒng)在界面設計上使用Dreamweaver8.0，為了能夠設計出更為美觀的界面，后臺采用ASP.NET，由于兩者能夠很好的兼容，所以整個設計得心應手、系統(tǒng)運行流暢穩(wěn)定。

［1］晏愈光.基于ASP.net的教學網(wǎng)站設計［D］.中國優(yōu)秀碩士學位論文全文數(shù)據(jù)庫，2007，（5）.

［2］徐亞.淺談網(wǎng)頁設計中Flash與ASP.net技術的結合［J］.電腦知識與技術，2009，（3）.

［3］盛偉翔，王昊.淺談利用ASP.net技術構建網(wǎng)絡教學系統(tǒng)［J］.科技廣場，2008，（12）：237-238.

［4］楊芮鈞.論ASP技術在遠程教育系統(tǒng)中的應用［J］.現(xiàn)代經(jīng)濟信息，2008，（10）：153-154.

［5］趙燕燕.ASP技術在Web數(shù)據(jù)庫開發(fā)中的使用［J］.河南職工醫(yī)學院學報，2009，（1）：93-94

［6］龔赤兵.《精通ASP.NET 2.0電子商務網(wǎng)站開發(fā)》.2008年1月，第1版，人民郵電出版社.

TP311

A

1671-3818（2016）10-0176-02

王麗芬（1976- ），女，滿族，吉林通化人。吉林農(nóng)業(yè)科技學院教務處科長，講師，碩士，主要從事計算機領域的教學與研究工作。