摘 要：針對精品課程網(wǎng)站開發(fā)，在Dreamweaver環(huán)境下，以DIV+CSS作為前臺布局設(shè)計工具，后臺服務(wù)器端以ASP為技術(shù)平臺，結(jié)合ACCESS數(shù)據(jù)庫，全面闡述了精品課程網(wǎng)站開發(fā)的全過程。

關(guān)鍵詞：ASP；DIV+CSS；精品課程網(wǎng)站；開發(fā)

中圖分類號：TP393.092

精品課程代表高校課程建設(shè)的最高水平，在學(xué)校課程建設(shè)中占有舉足輕重的地位?？茖W(xué)性、先進性、教育性、系統(tǒng)性、適用性和示范性是精品課程最顯著的特點。精品課程的科學(xué)性、先進性應(yīng)體現(xiàn)在結(jié)合使用現(xiàn)代信息技術(shù)和網(wǎng)絡(luò)通信技術(shù)，將精品課程最終建成網(wǎng)絡(luò)課程，通過網(wǎng)絡(luò)進行教學(xué)與管理，同時實現(xiàn)各種資料的上網(wǎng)并免費開放，實現(xiàn)優(yōu)質(zhì)教學(xué)資源共享，并且能夠做到教師之間、師生之間、學(xué)生與系統(tǒng)之間、教師與系統(tǒng)之間及時的交互與交流，這也真正體現(xiàn)了精品課程的適用性與示范性[1]。本文以為昭通學(xué)院校級精品課程C語言程序設(shè)計精品課程網(wǎng)站為例，主要以ASP（Active Server Pages，動態(tài)網(wǎng)頁）技術(shù)為主，從基本的網(wǎng)頁結(jié)構(gòu)設(shè)計開始，通過Dreamweaver可視化設(shè)計功能的輔助，建立一個師生信息交流的平臺。

1 ASP技術(shù)

ASP是基于DCOM（Distributed Component Object Model，分布式組件對象模型）構(gòu)架，所以程序構(gòu)架可以在本地或網(wǎng)絡(luò)上以分布方式執(zhí)行。微軟公司提供的Web服務(wù)器組件IIS，能將腳本式編程語言直接嵌入HTML語言中，能夠利用它建立和運行動態(tài)的、交互的、高效的網(wǎng)絡(luò)服務(wù)器的應(yīng)用程序。由于HTTP瀏覽器本身具有跨平臺的優(yōu)勢，是一種極好的客戶端操作平臺，因此可以很好地構(gòu)建B/S（瀏覽器/服務(wù)器）模式。

可以通過OLE DB對應(yīng)用程序的數(shù)據(jù)源進行訪問。通過ADO對象模型，能夠使用VBScript或Jscript等腳本語言訪問這些接口，并將數(shù)據(jù)庫功能添加到Web應(yīng)用程序中。

2 精品課程網(wǎng)站需求分析

2.1 任務(wù)目標

精品課程網(wǎng)站作為精品課程的一項重要支撐項目，網(wǎng)站要充分展示精品課程的重要信息，以幫助專家學(xué)者、教師學(xué)生的快速瀏覽。

本網(wǎng)站系統(tǒng)實現(xiàn)的主要功能如下：

（1）動態(tài)顯示課程網(wǎng)站的分類信息，包括精品課程申報表，教師隊伍，課程特色，教學(xué)資源，教學(xué)成果，網(wǎng)絡(luò)平臺等；（2）資源下載，包括教學(xué)錄像，教學(xué)課件、課后習(xí)題，預(yù)測試卷等學(xué)習(xí)資料的下載；（3）后臺管理，管理員登陸后臺進行用戶管理、欄目管理、新聞管理、日志管理、數(shù)據(jù)備份及恢復(fù)等。

2.2 功能模塊

本網(wǎng)站系統(tǒng)由前臺信息展示模塊和后臺管理模塊組成。

前臺信息展示模塊：（1）信息瀏覽。瀏覽申報表、課程特色、教學(xué)資源、實驗教學(xué)，教師隊伍，教學(xué)成果等；（2）網(wǎng)絡(luò)平臺。進行在線學(xué)習(xí)、在線答疑及在線考試；（3）下載資源。下載所需教學(xué)與學(xué)習(xí)資源。

后臺管理模塊：（1）用戶管理。包括添加用戶、刪除用戶、用戶密碼修改等；（2）欄目管理。包括動態(tài)添加、修改及刪除欄目，可以進行一級欄目、二級欄目甚至更多級欄目的管理；（3）新聞管理。包括添加新聞、修改新聞、刪除新聞。通過集成ewebeditor可以方便實現(xiàn)新聞內(nèi)容的動態(tài)添加，包括文字格式化、圖片、動畫、視頻的上傳，有設(shè)計模式和代碼模式兩種方式進行方便的操作；（4）資源管理。上傳教學(xué)資料、教學(xué)錄像和教學(xué)課件等，以方便下載；（5）系統(tǒng)安全。包括系統(tǒng)備份、恢復(fù)及日志管理。

3 系統(tǒng)設(shè)計

3.1 數(shù)據(jù)庫表結(jié)構(gòu)設(shè)計

數(shù)據(jù)庫主要由六張數(shù)據(jù)表構(gòu)成，如表1所示，每張數(shù)據(jù)表保存網(wǎng)站的不同信息，后臺管理人員負責(zé)從后臺把信息添加到數(shù)據(jù)表，前臺展示頁面根據(jù)查詢算法把需要的信息動態(tài)從數(shù)據(jù)表里讀取出來。

3.2 后臺登陸模塊設(shè)計

3.2.1 后臺登陸模塊

本模塊涉及到整個網(wǎng)站的安全問題，所以網(wǎng)站安全處理的第一步便是驗證，即對于請求信息的用戶驗證其身份。用戶通過輸入用戶名和密碼，并與數(shù)據(jù)表里已有的用戶名和密碼進行比對，只有用戶名和密碼與表里的某條記錄的用戶名和密碼都相同，才允許用戶登陸進入后臺管理頁面。如果用戶名或密碼有錯，登陸就會失敗，以保證網(wǎng)站的安全。此處特別說明的是用戶輸入的密碼需要通過MD5（）加密函數(shù)轉(zhuǎn)換后才可能與表里的加密密碼相同，進一步保證網(wǎng)站的安全性問題。

3.2.2 新聞管理模塊

新聞管理主要包括新聞分類、添加新聞和管理新聞。新聞分類可以進行新聞一級欄目分類、二級欄目分類和三級欄目分類，甚至是再多級別的欄目分類，一級欄目下包含二級欄目，二級欄目下包含三級欄目，形成樹形目錄結(jié)構(gòu)，便于對欄目分類管理。添加新聞模塊集成了ewebeditor模塊，能夠?qū)崿F(xiàn)上傳文字、flash動畫、圖片，并可進行格式化處理，有設(shè)計視圖和源代碼視圖，方便進行實時設(shè)計和代碼編輯。管理新聞模塊能夠?qū)π侣勴撁孢M行刪除、復(fù)制、轉(zhuǎn)移、置頂和推薦等操作，操作方便、功能強大。

3.2.3 系統(tǒng)管理模塊

主要包括站點信息配置、用戶管理和友情鏈接管理。站點信息配置管理能初始化系統(tǒng)信息，包括網(wǎng)站名稱、網(wǎng)站標題、網(wǎng)站網(wǎng)址等信息。用戶管理能添加刪除用戶，設(shè)置密碼，修改密碼，設(shè)置權(quán)限等。友情鏈接管理能方便地添加刪除友情鏈接的網(wǎng)站名稱、網(wǎng)站地址等信息。

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

4.1 主頁實現(xiàn)

主頁通常命名為default.asp或者index.asp，本網(wǎng)站的主頁命名為index.asp。一個網(wǎng)站主頁的界面美觀性，操作方便性，響應(yīng)敏捷性至關(guān)重要，首先用戶關(guān)注的就是主頁，主頁是一個網(wǎng)站的門面。所以，需要花費大量的心思和精力來思考主頁的外觀、布局、效率等問題。本網(wǎng)站主頁采用動靜結(jié)合的方式進行設(shè)計布局和功能實現(xiàn)。首先在dreamweaver環(huán)境下用DIV+CSS技術(shù)來進行頁面布局，采用目前網(wǎng)頁布局比較流行的盒子模型技術(shù)，保證頁面各個部分相對固定，實現(xiàn)無縫連接。把整個頁面看作一個大盒子，稱為container，在container里從上到下又包含三個小盒子head，main和foot，依此方法繼續(xù)把main盒子分為兩行，每行再分為兩到三列。主頁布局好后就可以往各個小盒子里面填入內(nèi)容，填入的內(nèi)容可以是靜態(tài)的，也可以是動態(tài)的，此處的動態(tài)是指內(nèi)容是根據(jù)需要用數(shù)據(jù)庫查詢語句從數(shù)據(jù)表里面提取出來的，這也是動態(tài)網(wǎng)站與靜態(tài)網(wǎng)站最本質(zhì)的區(qū)別。例如，主頁調(diào)用一個過程函數(shù)Article_List（）來實現(xiàn)新聞內(nèi)容的顯示，具體代碼如下：

主頁各個盒子內(nèi)容添加完成之后，就涉及到最后一步，進行美化設(shè)計。采用比較先進的表現(xiàn)形式CSS（層疊樣式表），把CSS單獨做成一個文件，讓網(wǎng)站的內(nèi)容與表現(xiàn)形式分離，也是網(wǎng)站設(shè)計的宗旨。通過類別選擇器、ID選擇器和標簽選擇器的靈活運用，可以實現(xiàn)簡約而不簡單的美化設(shè)計，所有頁面都可共享調(diào)用設(shè)計好的選擇器，實現(xiàn)網(wǎng)站風(fēng)格統(tǒng)一，結(jié)構(gòu)清晰，代碼精簡。例如，下面CSS代碼為一個命名為box的類別選擇器：

box {PADDING-RIGHT：0px；PADDING-LEFT：0px；PADDING-BOTTOM：0px；PADDING-TOP：0px；margin：0px；BACKGROUND：#f6f6f6；}

此段代碼設(shè)置了盒子的內(nèi)邊距，外邊距和背景顏色。

4.2 其他主要頁面

除了主頁之外，最重要的兩個頁面就是list.asp和show.asp。list.asp頁面用來顯示主欄目下包含的子欄目信息，對于我們網(wǎng)站的導(dǎo)航和子欄目的選擇至關(guān)重要，當然具體實現(xiàn)也是采用數(shù)據(jù)庫查詢語句從class表里把某個主欄目包含的相關(guān)子欄目查詢并顯示出來，再采用CSS樣式表進行美化。show.asp頁面用來進行具體某條新聞內(nèi)容的顯示，實現(xiàn)方式也是用數(shù)據(jù)庫查詢語句從article表里把新聞標題、作者、添加日期、具體內(nèi)容等信息顯示出來，再用CSS樣式表進行美化。

5 結(jié)束語

本網(wǎng)站以操作簡單，夠用就行的原則，在Dreamweaver操作環(huán)境下，以DIV+CSS技術(shù)進行頁面布局，以ASP作為服務(wù)器端平臺，并以Microsoft Access作為后臺數(shù)據(jù)庫，這些都是實現(xiàn)中小型網(wǎng)站、尤其是精品課程網(wǎng)站的首選工具。本文闡述了精品課程網(wǎng)站的開發(fā)的全過程，包括分析、設(shè)計與實現(xiàn)，尤其是對實現(xiàn)部分的闡述思路清晰，動靜結(jié)合，讓表現(xiàn)形式與具體內(nèi)容分開處理。

參考文獻：

[1]楊祥，劉海波，劉璞.C程序設(shè)計精品課程網(wǎng)站開發(fā)設(shè)計[J].通化師范學(xué)院學(xué)報，2010（05）：33-35.

[2]孫媛，趙明茹.基于ASP技術(shù)動態(tài)網(wǎng)站的設(shè)計與實現(xiàn)[J].中國制造業(yè)信息化，2012（11）：68-71.

[3]胡秀源.基于ASP技術(shù)的動態(tài)網(wǎng)站設(shè)計[J].制造業(yè)自動化，2011（06）：204-206.

作者簡介：申云成（1979-），男，云南鎮(zhèn)雄人，講師，碩士，研究方向：軟件工程、實時系統(tǒng)、數(shù)據(jù)挖掘。

作者單位：昭通學(xué)院 信息科學(xué)與技術(shù)學(xué)院，云南昭通 657000