基于《數(shù)據(jù)庫原理》課程網(wǎng)站前臺設(shè)計與開發(fā)

劉曉翔　丘榮美

摘 要：鑒于現(xiàn)今信息技術(shù)的發(fā)展，數(shù)據(jù)的管理越來越受到人們的關(guān)注，所以建設(shè)數(shù)據(jù)庫原理課程網(wǎng)站以方便人們的學(xué)習(xí)有著很大的必要性。網(wǎng)站采用DIV+CSS技術(shù)實(shí)現(xiàn)頁面布局，結(jié)合JavaScript以及jquery腳本語言控制頁面效果，運(yùn)用ASP.NET母版頁功能與后臺整合。系統(tǒng)支持在線交流，以此來增進(jìn)學(xué)生對課程內(nèi)容的相互學(xué)習(xí)，同時也促進(jìn)教師不斷完善其教學(xué)方法，及時掌握學(xué)生在學(xué)習(xí)課程中遇到的問題，同時也給學(xué)生提供一個便利學(xué)習(xí)課程的平臺，促進(jìn)學(xué)術(shù)的交流。

關(guān)鍵詞：數(shù)據(jù)庫原理；前臺開發(fā)；課程網(wǎng)站；在線交流

一、引言

目前，各大高校紛紛建設(shè)不同類型的課程網(wǎng)站，這些網(wǎng)站提供資源下載，在線瀏覽學(xué)習(xí)，通過郵件形式與課程專業(yè)老師交流等，它實(shí)現(xiàn)數(shù)據(jù)庫原理知識的共享，給學(xué)者提供了一個良好的學(xué)習(xí)與交流平臺，學(xué)者可能通過網(wǎng)絡(luò)在該課程網(wǎng)站上找到自己想要的相關(guān)資料，以充實(shí)學(xué)者對該課程的知識水平。鑒于現(xiàn)今信息技術(shù)的發(fā)展，數(shù)據(jù)的管理越來越受到人們的關(guān)注，數(shù)據(jù)庫管理技術(shù)的重要性更為突出，學(xué)習(xí)數(shù)據(jù)庫管理的愛好者越來越多，所以建設(shè)數(shù)據(jù)庫原理課程網(wǎng)站以方便人們的學(xué)習(xí)有著很大的必要性，因此加大力度開發(fā)好一個更完善的數(shù)據(jù)庫原理課程網(wǎng)站，是現(xiàn)今必要的前提。

二、網(wǎng)站分析與設(shè)計

（一）網(wǎng)站設(shè)計

網(wǎng)站系統(tǒng)采用AJAX+jquery+ASP.NET技術(shù)實(shí)現(xiàn)系統(tǒng)的的功能，采用DIV+CSS結(jié)合JavaScript與jQuery腳本語言實(shí)現(xiàn)網(wǎng)站頁面布局及特效，數(shù)據(jù)庫選用了Microsoft SQL Server 2005 的數(shù)據(jù)庫。

系統(tǒng)將采用NET的三層結(jié)構(gòu)來實(shí)現(xiàn)，便于系統(tǒng)的再次開發(fā)以及維護(hù)，同時采用NET的參數(shù)化執(zhí)行SQL語句，防止SQL注入，增強(qiáng)網(wǎng)站的安全性。

（二）數(shù)據(jù)庫設(shè)計

1.數(shù)據(jù)庫概述

數(shù)據(jù)庫可以實(shí)現(xiàn)數(shù)據(jù)的收集、整理、存儲、檢索、更新、統(tǒng)計、刪除等操作，因此它在課程網(wǎng)站占重要地位。

根據(jù)系統(tǒng)的需求，系統(tǒng)涉及到管理員權(quán)限、后臺菜單、日志記錄、管理員、教材、教師信息、教程資源、教學(xué)隊伍、留言、課程規(guī)劃等幾個實(shí)體，管理員權(quán)限有角色、權(quán)限規(guī)則等過程屬性，菜單有菜單名、鏈接、分類等屬性，日志記錄有登陸時間、登陸賬號等屬性，管理員有賬號、密碼、實(shí)名、等屬性，教材有標(biāo)題、章節(jié)、內(nèi)容等屬性、教師信息有姓名、年齡、職稱、學(xué)歷、聯(lián)系方式、研究方向等屬性，教程資源有名稱、類型、大小等屬性，教學(xué)隊伍和課程規(guī)劃作為可擴(kuò)展模塊具有相同的標(biāo)題、內(nèi)容等屬性、留言有留言人姓名、班級、主題、內(nèi)容等屬性。

數(shù)據(jù)庫類型：Microsoft SQL Server 2005

數(shù)據(jù)庫名稱：sqldata

登錄用戶：sa

登錄密碼：sa

2.定義規(guī)則說明

（1）數(shù)據(jù)表命名規(guī)定：數(shù)據(jù)庫名簡稱Sql+ “_”+描述該表的英文單詞或詞組組合命名，單詞首字母大寫。

（2）數(shù)據(jù)表中的字段命名規(guī)定：以單個英文單詞或多個單詞組合命名，每個單詞的第一個字符為大寫。

3.數(shù)據(jù)字典

留言管理E-R圖，存放用戶留言，一條留言信息可以對應(yīng)多條回復(fù)信息，所以留言與回復(fù)為1對多的關(guān)系。

三、 網(wǎng)站設(shè)計與實(shí)現(xiàn)

（一）軟件配置

1.服務(wù)器端

（1）IIS 6.0 ，具有可靠性、高伸縮性和容錯進(jìn)程架構(gòu)的Web服務(wù)器，安全性高、 易于管理。采用身份驗(yàn)證與授權(quán)功能，提供安全性高的信息系統(tǒng)，采用服務(wù)器合并降低企業(yè)與人工、硬件以及站點(diǎn)管理相關(guān)的成本。

（2）Microsoft SQL Server 2005，一套全新的管理工具包，在構(gòu)建系統(tǒng)、排錯及操作應(yīng)用系統(tǒng)時更快、更有效。在數(shù)據(jù)整合、分析和報表領(lǐng)域功能全面的智能商務(wù)平臺，在采取行動和制定更好決策時具備更敏銳的洞察能力。系統(tǒng)有數(shù)據(jù)加密、默認(rèn)安全設(shè)置以及強(qiáng)制口令策略功能，能夠以最高的性能、最高的可用性和最高的安全性運(yùn)行任何苛刻的應(yīng)用系統(tǒng)。

2.客戶端

（1）操作系統(tǒng)為Windows XP或更高版本。

（2）瀏覽器采用遨游2，火狐，IE6.0以上版本或其他基于IE與mozilla為核心的瀏覽器。

3.開發(fā)環(huán)境

（1）頁面開發(fā)環(huán)境：Adobe Photoshop CS3，用于頁面設(shè)計；Adobe Fireworks CS3，用于頁面切圖；Macromedia Dreamweaver 8，用于頁面布局。

（2）后臺開發(fā)環(huán)境：Microsoft Visual Studio 2008開發(fā)平臺、SQL Server 2005數(shù)據(jù)庫，IIS 7.0。

（3）布局設(shè)計：DIV+CSS。

（4）腳本語言：Javascript、jquery。

（5）插件選擇：jquery。

（二）系統(tǒng)功能設(shè)計

1.系統(tǒng)總體規(guī)劃

主頁面提供各子頁面的入口，方便用戶操作。前臺設(shè)計模塊結(jié)構(gòu)如圖2所示：

2.功能模塊結(jié)構(gòu)

（1）課程描述模塊：介紹該課程所能掌握的知識，對適應(yīng)當(dāng)前教學(xué)發(fā)展趨勢的可行性進(jìn)行剖析，通過引用國外相關(guān)方面書籍或應(yīng)用領(lǐng)域說明該課程的重要性。

（2）教材展示模塊：展示所有相關(guān)課程的精品教材，給讀者選擇合適的教材提供更好的途徑，為教師選擇教學(xué)材料提供了良好的平臺。

（3）課程資源模塊：把教學(xué)過程中的成功作品，案例，課件，學(xué)術(shù)研究，及教學(xué)錄像等，通過網(wǎng)絡(luò)形式分享給每一個讀者。

（4）教學(xué)隊伍模塊：介紹主講老師個人信息，所在學(xué)校任教情況，簡述其教學(xué)情況，以學(xué)術(shù)研究課題和成果，所獲得學(xué)術(shù)研究表彰情況等。

（5）設(shè)計實(shí)踐模塊：展示設(shè)計實(shí)踐活動信息，如PPT設(shè)計大賽，拆裝機(jī)大賽等，為推動學(xué)生動手能力，加強(qiáng)開展實(shí)踐活動樹立榜樣。

（6）教學(xué)活動模塊：顯示開展教學(xué)活動過程的信息，如班級與班級之間的交流心得，師生交流會等。

（7）成果展示模塊：展示教學(xué)成果信息，促進(jìn)教學(xué)經(jīng)驗(yàn)的學(xué)習(xí)交流，利用教學(xué)實(shí)例推動教學(xué)的發(fā)展。

（8）留言模塊：提供一個與外界交流的平臺，通過留言者的留言，了解讀者需求，掌握該課程現(xiàn)在發(fā)展方向，及時更新教學(xué)理念，更新教學(xué)資源等。

3.主頁設(shè)計

主頁面是網(wǎng)站的靈魂，評價一個網(wǎng)站的好壞與否主要看網(wǎng)站的功能以及安全性能等方面。隨著網(wǎng)絡(luò)的普及，大多數(shù)上網(wǎng)者都并不了解網(wǎng)站的開發(fā)，他們判斷網(wǎng)站的好壞是通過頁面帶來的視覺效果，后臺程序?qū)懙脑俸茫偻昝?，都無法展現(xiàn)在用戶者的眼前。因此頁面設(shè)計是一個很重要的環(huán)節(jié)，不同的瀏覽者對不同的頁面視覺效果產(chǎn)生的反應(yīng)各不相同。所以在設(shè)計頁面的時候，要從大眾化的角度去設(shè)計，頁面設(shè)計要簡潔，信息概括能力強(qiáng)，易于導(dǎo)航等。

主頁面框架設(shè)計說明：主頁面設(shè)計分為三個模塊。

（1）首部導(dǎo)航模塊：

為方便各頁面之間的導(dǎo)航功能，首部設(shè)計了導(dǎo)航欄，導(dǎo)航欄效果如圖3所示：

為實(shí)現(xiàn)導(dǎo)航鼠標(biāo)經(jīng)過后出現(xiàn)菱形亮色效果，在主面里面鏈接了jqurey控制腳本代碼。通過鼠標(biāo)經(jīng)過事件，運(yùn)用jQuery控制轉(zhuǎn)換導(dǎo)航欄的背景圖片，并改變文字顏色。事件未發(fā)生時文字顏色為白色，背景為藍(lán)色平滑帶斜杠分隔效果，鼠標(biāo)經(jīng)過事件發(fā)生時文字顏色為黑色，背景轉(zhuǎn)換為淡藍(lán)高亮效果。導(dǎo)航鏈接利用js控制，在當(dāng)前鼠標(biāo)單擊事件發(fā)生時，跳轉(zhuǎn)到不同的子頁面。

利用js通過不同的方法，在當(dāng)前鼠標(biāo)單擊事件發(fā)生時，跳轉(zhuǎn)到不同的子頁面。

（2）首部整體頁面效果圖：

從主頁設(shè)計圖4中可以看出，主頁頭部分別由logo，導(dǎo)航欄，標(biāo)題背景三部分組成，采用淡藍(lán)色色調(diào)。

（3）內(nèi)容模塊；

主要用于顯示網(wǎng)站各類信息，如新聞動態(tài)，課程介紹簡略信息，學(xué)院信息介紹等。

（4）底部版權(quán)模塊；

底部版權(quán)模塊比較簡單：主要用于注明版權(quán)，技術(shù)支持等信息。

四、網(wǎng)站運(yùn)行效果

1.主頁面運(yùn)行效果

主頁采用“品”字型結(jié)構(gòu)設(shè)計如圖6所示，總體采用淡藍(lán)色色調(diào)，視覺親和，大方，頭部寬闊的背景，顯示地球儀以及世界板圖，拓寬瀏覽者的視野，白色箭頭及網(wǎng)格線寓意著網(wǎng)絡(luò)將世界緊緊地連在了一起，好似世界各地的人們都同在一個屋檐之下，一起交流，一起學(xué)習(xí)。頁面頭部提供不同子頁面的鏈接入口，方便用戶在不同資源區(qū)之間的跳轉(zhuǎn)。顯示不同資源區(qū)的部分資源內(nèi)容，并提供入口，既方便而又容易操作。

2.設(shè)計實(shí)踐子頁面效果

展示校園所舉辦的各類活動，管理者可以通過審核，將比較重要或較為有意義的活動信息發(fā)布到左側(cè)邊欄的推薦信息列表內(nèi)，方便用戶瀏覽，右側(cè)邊欄列出近期舉辦的活動，并提供入口。

3.課程資源下載子頁面效果

展示教學(xué)視頻詳細(xì)資源列表，展示教學(xué)課件資源詳細(xì)資源列表，展示教學(xué)實(shí)驗(yàn)詳細(xì)資源列表，提供相關(guān)入口，方便不同需求操作。

4.留言子頁面效果

提供留言入口，從而及時了解用戶需求信息，根據(jù)用戶信息反饋不斷更新網(wǎng)站，提高網(wǎng)站質(zhì)量，使其更符合大眾需求。

五、結(jié)束語

開發(fā)《數(shù)據(jù)庫原理》課程網(wǎng)站，可以將教學(xué)上的課件、教學(xué)視頻和教學(xué)研究成果等數(shù)據(jù)上傳到網(wǎng)站，在修學(xué)生如果在上課時，沒有弄清的問題或者遺漏了某部分的內(nèi)容，都可以通過該網(wǎng)站下載相應(yīng)的資料，進(jìn)行知識的溫習(xí)與補(bǔ)充，對于專業(yè)研究者可以從別人的研究成果中去粗取精，有利于研究的進(jìn)展。開發(fā)《數(shù)據(jù)庫原理》課程網(wǎng)站，對《數(shù)據(jù)庫原理》的發(fā)展有著極大的推動作用。希望該網(wǎng)站的開發(fā)能夠?yàn)榻逃c科研帶來價值。

參考文獻(xiàn)：

[1]莫維里，羅森費(fèi)爾德著，陳建勛譯.Web信息架構(gòu)：設(shè)計大型網(wǎng)站（第3版）電子工業(yè)出版社，[2008].

[2]加洛〔Gallo，A.〕 著，蘇金國，陳波，劉曉兵等譯.ASP.NET AJAX實(shí)戰(zhàn)：人民郵電出版社，[2008].

[3]曾順.精通JavaScript +jQuery.

[4]曾順.精通DIV+CSS網(wǎng)頁樣式與布局.

作者簡介：

劉曉翔（1985-），漢，廣東揭陽人，計算機(jī)專業(yè)教師，主要從事計算機(jī)科學(xué)與技術(shù)教學(xué)研究。

丘榮美（1986-）漢，廣西玉林人，講師，主要從事計算機(jī)科學(xué)與技術(shù)教學(xué)研究。