精品課程網(wǎng)站動(dòng)態(tài)生成平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)

傅 霖，孟 燕，鄧良太，張 晶

（深圳大學(xué)，廣東 深圳 518060）

精品課程網(wǎng)站動(dòng)態(tài)生成平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)

傅 霖，孟 燕，鄧良太，張 晶

（深圳大學(xué)，廣東 深圳 518060）

本文從精品課程建設(shè)的需求出發(fā)，開發(fā)了一個(gè)精品課程網(wǎng)站動(dòng)態(tài)生成平臺(tái)系統(tǒng).本文介紹了系統(tǒng)的特點(diǎn)、功能模塊，以及ADO.NET、DIV+CSS、Ajax和jQuery等多種實(shí)現(xiàn)技術(shù).系統(tǒng)功能完善、實(shí)用易用、界面友好，可以提高精品課程網(wǎng)站建設(shè)的質(zhì)量和效率.

精品課程；網(wǎng)站動(dòng)態(tài)生成平臺(tái)；設(shè)計(jì)；實(shí)現(xiàn)

1 前言

2003年，國家教育部實(shí)施了“精品課程”建設(shè)項(xiàng)目，要求利用現(xiàn)代化的計(jì)算機(jī)網(wǎng)絡(luò)和多媒體技術(shù)將課程上網(wǎng)并免費(fèi)開放，以實(shí)現(xiàn)優(yōu)質(zhì)教學(xué)資源共享，提高學(xué)校教學(xué)質(zhì)量和人才培養(yǎng)質(zhì)量.在精品課程建設(shè)中，利用計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)制作課程網(wǎng)站是一個(gè)必不可少的環(huán)節(jié).目前，網(wǎng)站開發(fā)工具雖然很多，但要利用這些工具設(shè)計(jì)出高品質(zhì)的網(wǎng)頁、開發(fā)出功能強(qiáng)大的網(wǎng)站，對(duì)網(wǎng)站制作技術(shù)的要求非常高，一般的學(xué)科教師難以掌握.因此，目前精品課程網(wǎng)站的建設(shè)一般是由教師提供素材和資料，委托一些I T專業(yè)人員進(jìn)行開發(fā)，但這樣存在的問題是，往往開發(fā)周期長(zhǎng)，費(fèi)用開銷大，與精品課程要求不完全一致，課程網(wǎng)站的修改和維護(hù)難以保障等.本文結(jié)合精品課程的要求，開發(fā)出了適用的精品課程網(wǎng)站動(dòng)態(tài)生成平臺(tái)，以解決教師在實(shí)際申報(bào)中在網(wǎng)站制作上存在的問題，使教師將精力投入到網(wǎng)上教學(xué)內(nèi)容的更新、教學(xué)的應(yīng)用和實(shí)施上，而不用考慮網(wǎng)站本身的制作過程，以此提高精品課程建設(shè)的質(zhì)量與效率.

2 精品課程網(wǎng)站動(dòng)態(tài)生成平臺(tái)的特點(diǎn)

本平臺(tái)具有以下特點(diǎn)：

2.1 子網(wǎng)站實(shí)時(shí)生成，并可以即時(shí)訪問

精品課程網(wǎng)站動(dòng)態(tài)生成平臺(tái)的設(shè)計(jì)模式采用“母生子”的方式，即由精品課程管理系統(tǒng)（以下稱為母網(wǎng)站）動(dòng)態(tài)生成一個(gè)個(gè)精品課程網(wǎng)站（以下稱為子網(wǎng)站），如圖1所示.

圖1 精品課程網(wǎng)站動(dòng)態(tài)生成平臺(tái)的設(shè)計(jì)模式

母網(wǎng)站和子網(wǎng)站是相對(duì)獨(dú)立的兩個(gè)系統(tǒng)，他們都擁有各自獨(dú)立的數(shù)據(jù)庫文件、配置文件和代碼文件，并不存在依附關(guān)系.每一個(gè)子網(wǎng)站之間也是獨(dú)立的，都可以下載后配置到另外的服務(wù)器上獨(dú)立運(yùn)行.

教師在登錄母網(wǎng)站后，可以在母網(wǎng)站中創(chuàng)建課程網(wǎng)站（子網(wǎng)站），當(dāng)設(shè)置好網(wǎng)站的名稱、IIS路徑、后臺(tái)登陸密碼等信息后，母網(wǎng)站會(huì)即時(shí)“生成”一個(gè)子網(wǎng)站，即：將該子網(wǎng)站的源文件解壓到相應(yīng)的文件夾中，附加數(shù)據(jù)庫，配置IIS路徑，并提供該子網(wǎng)站的登錄地址，教師可以立即登陸該子網(wǎng)站去設(shè)置課程的信息，按照需要建設(shè)課程網(wǎng)站.整個(gè)生成過程是即時(shí)完成的，生成之后的網(wǎng)站可以立即訪問，不需要等待管理員配置網(wǎng)站信息.

2.2 子網(wǎng)站可打包下載，并能獨(dú)立運(yùn)行

母網(wǎng)站和生成的子網(wǎng)站之間是相對(duì)獨(dú)立的，擁有各自的數(shù)據(jù)庫文件，代碼文件和配置文件，所以子網(wǎng)站生成之后，就與母網(wǎng)站脫離了綁定關(guān)系，子網(wǎng)站和母網(wǎng)站可以在同一臺(tái)服務(wù)器上運(yùn)行，也可以將其打包下載后，配置到另外的服務(wù)器上獨(dú)立運(yùn)行.

2.3 首頁版面和模塊自主設(shè)置

精品課程網(wǎng)站動(dòng)態(tài)生成平臺(tái)在對(duì)首頁版面和模塊的處理方面，可以自主選擇版面的布局（如1：1、1：2、1：2：1分欄等）和系統(tǒng)的內(nèi)置模塊（如登錄、最新動(dòng)態(tài)、友情鏈接等），并且在此基礎(chǔ)上加以改進(jìn)，使教師可以根據(jù)自己的需要，自主設(shè)置首頁模塊，并設(shè)定其名稱、寬度、高度和上傳模塊內(nèi)容等.

2.4 網(wǎng)站主題風(fēng)格自主更換，或者根據(jù)需要定制所需的主題

為方便教師對(duì)網(wǎng)站的整體風(fēng)格進(jìn)行選擇，以體現(xiàn)網(wǎng)站的個(gè)性化，本平臺(tái)內(nèi)置了多種主題風(fēng)格，教師可以根據(jù)課程的特點(diǎn)選擇主題風(fēng)格.除此之外，如果平臺(tái)內(nèi)置風(fēng)格不能滿足要求，教師可以在系統(tǒng)管理員那里另外定制自己所需要的主題風(fēng)格.

2.5 較強(qiáng)的用戶體驗(yàn)，操作所見即所得

本平臺(tái)在設(shè)計(jì)過程中，充分考慮到教師的需要，使用Ajax、jQuery等技術(shù)處理用戶響應(yīng)，以增強(qiáng)用戶體驗(yàn)，具體表現(xiàn)為：教師在選擇了一種主題風(fēng)格后，整個(gè)網(wǎng)站即時(shí)變成了所選擇的風(fēng)格，如果不保存，在退出后又會(huì)還原為原來的風(fēng)格；教師在瀏覽網(wǎng)站時(shí)可以根據(jù)需要，選擇網(wǎng)站顯示的模式：標(biāo)準(zhǔn)模式或?qū)挵婺Ｊ剑@種選擇是即時(shí)響應(yīng)的；教師在上傳了網(wǎng)站的Banner后，可以拖動(dòng)滑動(dòng)條以調(diào)整Banner的高度，這種調(diào)整也是即時(shí)響應(yīng)的，除此之外，菜單欄的間距、網(wǎng)站顯示的寬度等等也是這種即時(shí)響應(yīng)模式，增強(qiáng)了教師的體驗(yàn).

3 平臺(tái)功能模塊

平臺(tái)分為兩個(gè)子系統(tǒng)：管理子系統(tǒng)和動(dòng)態(tài)生成子系統(tǒng)。見圖2精品課程網(wǎng)站動(dòng)態(tài)生成平臺(tái)功能模塊圖.

管理子系統(tǒng)主要是給教師提供課程創(chuàng)建、匯聚課程、發(fā)布和交流信息等功能，主要包括“登錄”、“注冊(cè)”、“新聞”、“課程創(chuàng)建”“課程管理”、“留言板”、“資料管理”等功能模塊.

課程創(chuàng)建者通過后臺(tái)登錄，根據(jù)需要設(shè)置課程網(wǎng)站的界面布局、風(fēng)格、各級(jí)菜單、上傳多媒體內(nèi)容，就可以動(dòng)態(tài)生成一個(gè)精品課程網(wǎng)站.生成子系統(tǒng)主要包括“個(gè)人信息管理”、“系統(tǒng)設(shè)定”、“菜單管理”、“面板管理”、“留言板”等功能模塊.

圖2 精品課程網(wǎng)站動(dòng)態(tài)生成平臺(tái)功能模塊圖

4 平臺(tái)的開發(fā)技術(shù)

系統(tǒng)采用B/S三層體系結(jié)構(gòu)，運(yùn)用微軟的.Net框架作為開發(fā)平臺(tái)，開發(fā)環(huán)境為Visual Studio 2008，開發(fā)語言采用C#.系統(tǒng)的運(yùn)行環(huán)境為Windows2003Server，Web服務(wù)器采用MSIIS 6.0，數(shù)據(jù)庫采用SQLsever 2005.系統(tǒng)綜合應(yīng)用了ADO.NET、DI V+CSS、自動(dòng)生成數(shù)據(jù)庫訪問類、Ajax和jQuery等多種技術(shù).

4.1 ADO.NET

ADO.NET是在.NET編程環(huán)境中優(yōu)先使用的數(shù)據(jù)訪問接口，是一組用于和數(shù)據(jù)源進(jìn)行交互的面向?qū)ο箢悗?ADO. NET允許和不同類型的數(shù)據(jù)源以及數(shù)據(jù)庫進(jìn)行交互.本平臺(tái)對(duì)數(shù)據(jù)庫的訪問就是通過ADO.NET實(shí)現(xiàn)的.

4.2 DIV+CSS實(shí)施頁面布局

本平臺(tái)中的頁面布局均采用DIV+CSS實(shí)現(xiàn)，實(shí)現(xiàn)頁面布局和各種定位，使用DIV+CSS的優(yōu)勢(shì)主要表現(xiàn)在形式和內(nèi)容相對(duì)分離，結(jié)構(gòu)清晰，縮減了頁面代碼，能靈活地控制頁面的布局，提高了系統(tǒng)的擴(kuò)展性、易用性，還使得網(wǎng)站改版相對(duì)簡(jiǎn)單，從而降低了網(wǎng)站改版的成本.圖4是系統(tǒng)中教師專區(qū)導(dǎo)航欄的布局：

圖4 教師專區(qū)導(dǎo)航欄的布局代碼

其在界面中的顯示如圖5所示：

圖5 教師專區(qū)導(dǎo)航欄的界面

4.3 Ajax技術(shù)的應(yīng)用

本系統(tǒng)在開發(fā)過程中使用了Ajax技術(shù).Ajax是Asynchronous Java Script+Xml的簡(jiǎn)寫，該技術(shù)可以為用戶提供更為自然的瀏覽體驗(yàn).Ajax提供與服務(wù)器異步通信的能力，從而使用戶從請(qǐng)求/響應(yīng)的循環(huán)中解脫出來.借助于Ajax，可以在用戶單擊按鈕時(shí)，使用Java Script和DHT ml立即更新U I，并向服務(wù)器發(fā)出異步請(qǐng)求，以執(zhí)行更新或查詢數(shù)據(jù)庫.當(dāng)請(qǐng)求返回時(shí)，就可以使用Java Script和CSS來相應(yīng)地更新UI，而不是刷新整個(gè)頁面，用戶甚至不知道瀏覽器正在與服務(wù)器通信：Web站點(diǎn)看起來是即時(shí)響應(yīng)的.

4.4 jQuery技術(shù)的應(yīng)用

本系統(tǒng)在開發(fā)過程中使用了jQuery技術(shù).jQuery是一個(gè)優(yōu)秀的Java Script框架.jQuery使用戶能更方便地處理HTmldocuments、events,實(shí)現(xiàn)動(dòng)畫效果.jQuery的應(yīng)用，大大簡(jiǎn)化了開發(fā)人員的工作，使得開發(fā)人員可以更加專注于用戶界面的開發(fā)，構(gòu)建靈活、響應(yīng)性好和高度動(dòng)態(tài)的基于瀏覽器的用戶界面，達(dá)到更好的用戶體驗(yàn).

5 界面的實(shí)現(xiàn)

精品課程動(dòng)態(tài)生成子系統(tǒng)是一個(gè)高度自主化的平臺(tái)，課程管理者通過后臺(tái)登錄，根據(jù)需要設(shè)置課程網(wǎng)站的界面布局、風(fēng)格、各級(jí)菜單、上傳多媒體內(nèi)容，就可以動(dòng)態(tài)生成一個(gè)精品課程網(wǎng)站.

5.1 網(wǎng)站主題風(fēng)格的設(shè)定

網(wǎng)站主題風(fēng)格是指網(wǎng)站整體的色調(diào)，目前系統(tǒng)內(nèi)置了6種風(fēng)格，即：綠色盎然、藍(lán)色大海、藍(lán)色天空、淺藍(lán)、金色秋天、淺藍(lán)水下，供教師進(jìn)行選擇，另外教師也可以自己設(shè)計(jì)個(gè)性化的主題，滿足教師們多樣化的需求.

5.2 網(wǎng)站基本信息的設(shè)定

本系統(tǒng)提供了關(guān)于網(wǎng)站基本信息的設(shè)定，教師可以根據(jù)課程的需要，設(shè)定不同的信息，以體現(xiàn)網(wǎng)站的個(gè)性化.網(wǎng)站基本信息包括網(wǎng)站名稱、版權(quán)信息、管理員郵箱、會(huì)話時(shí)間、版面寬度、版面位置、banner圖片和動(dòng)畫、菜單欄寬度、后臺(tái)菜單欄的寬度，間距、網(wǎng)站工具條的顯示，效果、頁腳高度，圖片等.

5.3 面板管理

面板是指網(wǎng)站首頁中版面的設(shè)定，包括版面的布局、各模塊的添加、刪除等.目前系統(tǒng)默認(rèn)配置了用戶登錄、新聞動(dòng)態(tài)、最新留言和友情鏈接模塊，教師可以根據(jù)需要添加或刪除.版面的布局可以進(jìn)行自定義，給教師提供自由發(fā)揮的空間.

6 菜單管理的實(shí)現(xiàn)

6.1 系統(tǒng)菜單的管理

系統(tǒng)內(nèi)置了首頁、網(wǎng)站系統(tǒng)、留言板、最新動(dòng)態(tài)和站點(diǎn)地圖五個(gè)系統(tǒng)菜單，教師可以根據(jù)課程需要設(shè)置啟用或者禁用，如圖6所示：

圖6 系統(tǒng)菜單頁面

6.2 自定義菜單的管理

系統(tǒng)提供了三級(jí)菜單的自定義和管理功能，包括添加、修改、刪除、分離和調(diào)整順序，每個(gè)一級(jí)菜單下可以設(shè)置多個(gè)二級(jí)菜單，每個(gè)二級(jí)菜單下也可以設(shè)置多個(gè)三級(jí)菜單，如圖7所示。

圖7 自定義菜單頁面

〔1〕李克東.發(fā)揮教育技術(shù)優(yōu)勢(shì) 促進(jìn)精品課程建設(shè)[C].廣東省高校優(yōu)質(zhì)資源建設(shè)與應(yīng)用文集.2009：1-2.

〔2〕李志先.基于J2EE體系結(jié)構(gòu)的精品課程開發(fā)平臺(tái)的研究與設(shè)計(jì)[D].西安建筑科技大學(xué)，2005：24.

〔3〕李京秀.基于信息技術(shù)的精品課程網(wǎng)絡(luò)平臺(tái)構(gòu)建研究[D].西安建筑科技大學(xué)，2006.

〔4〕朱麗莉，劉跟萍.精品課程網(wǎng)絡(luò)通用平臺(tái)的設(shè)計(jì)與開發(fā)[J].中國科教創(chuàng)新導(dǎo)刊，2008（10）.

G43

A

1673-260X（2010）08-0045-03