【正文】 身份驗(yàn)證失敗管理員用戶名和密碼身份驗(yàn)證通過業(yè)主管理員學(xué)生用戶界面管理員用戶界面返回驗(yàn)證身份登錄頁面提示錯(cuò)誤信息判斷身份業(yè)主用戶名和密碼圖52 用戶登錄流程圖 網(wǎng)絡(luò)課堂模塊網(wǎng)絡(luò)課堂子系統(tǒng)的功能從管理角度來說，它應(yīng)包括資源管理課程資料的添加、修改、刪除、審核等。 系統(tǒng)登錄打開瀏覽器輸入地址“://......”進(jìn)入登錄界面，首先區(qū)分用戶身份即學(xué)生、教師、管理員，輸入用戶名和密碼，系統(tǒng)查詢數(shù)據(jù)庫判斷正確后進(jìn)入對應(yīng)用戶的界面。Dreamweaver可以為對象文本或圖像創(chuàng)建超級(jí)鏈接。向頁面中添加內(nèi)容：將文本、圖像等界面組成元素插入到頁面中，包括插入具有樣式的文本和圖片。教師界面左側(cè)導(dǎo)航欄的內(nèi)容分為教師信息、即時(shí)消息、學(xué)習(xí)公告、作業(yè)公告、課程教學(xué)、網(wǎng)絡(luò)答疑、討論交流、退出系統(tǒng)8個(gè)部分。當(dāng)點(diǎn)擊左側(cè)導(dǎo)航條的某一鏈接時(shí)，右側(cè)框架中的內(nèi)容會(huì)更改，但頂部和左側(cè)框架本身的內(nèi)容保持靜態(tài)。界面布局采用框架技術(shù)，將窗口劃分為三個(gè)區(qū)域。教師區(qū)、學(xué)生區(qū)、管理員區(qū)在界面布局、結(jié)構(gòu)組成、功能實(shí)現(xiàn)等采用的方法基本相同，根據(jù)用戶的權(quán)限不同在頁面左側(cè)的導(dǎo)航欄中顯示的可操作的功能有所不同。進(jìn)行頁面布局和設(shè)置：使用Dreamweaver中的可視化設(shè)計(jì)工具可以創(chuàng)建非常復(fù)雜的頁面布局。按照設(shè)計(jì)方案要求，教學(xué)平臺(tái)界面設(shè)計(jì)中均使用了圖像元素，使用Photoshop繪制和編輯圖像文件，然后將準(zhǔn)備好的圖像素材添加到站點(diǎn)。系統(tǒng)界面分為網(wǎng)絡(luò)課堂登錄主頁面和管理、教師、學(xué)生三個(gè)用戶界面。目前，GIF和JPEG文件格式的支持情況最好，大多數(shù)瀏覽器都可以查看它們。本網(wǎng)絡(luò)課堂的管理區(qū)、教師區(qū)、學(xué)生區(qū)都使用圖片來設(shè)計(jì)界面，例如系統(tǒng)的登錄頁面將使用整張圖片作為頁面；頁面的標(biāo)題欄也是用圖片實(shí)現(xiàn)的；管理區(qū)的導(dǎo)航條都是由圖片組成。一方面，圖像的應(yīng)用使網(wǎng)頁更加美觀、有趣；另一方面，圖像本身也是傳達(dá)信息的重要手段。在本系統(tǒng)中，通過ASP來處理信息。服務(wù)器通過將請求信息發(fā)送回用戶或基于該表單內(nèi)容執(zhí)行一些操作來進(jìn)行響應(yīng)。網(wǎng)絡(luò)課堂平臺(tái)的信息錄入與維護(hù)、即時(shí)消息、發(fā)布公告等功能，均使用了表單。這些表單對象包括文本域、列表框、復(fù)選框和單選按鈕。表單從用戶收集信息，然后將這些信息提交給服務(wù)器進(jìn)行處理。l 每個(gè)框架都具有自己的滾動(dòng)條，因此訪問者可以獨(dú)立滾動(dòng)這些框架。無論訪問者在左側(cè)單擊了哪一個(gè)鏈接，右側(cè)主要內(nèi)容框架都會(huì)顯示相應(yīng)的文檔。登錄后的系統(tǒng)界面框架如圖51所示： 圖51 系統(tǒng)界面框架圖當(dāng)訪問者瀏覽信息時(shí)，在頂部框架中顯示的文檔永遠(yuǎn)不更改。本系統(tǒng)頁面框架布局由3個(gè)框架組成：一個(gè)較窄的框架位于側(cè)面，其中包含導(dǎo)航條；一個(gè)框架橫放在頂部，其中包含Web頁的標(biāo)題、用戶的歡迎信息，當(dāng)前日期和一個(gè)菜單欄；一個(gè)大框架占據(jù)了頁面的其余部分，其中包含主要內(nèi)容。2) 框架框架是網(wǎng)頁中非常有用的工具，它可以將一個(gè)瀏覽器窗口劃分為多個(gè)區(qū)域，每個(gè)區(qū)域都可以顯示不同H`TML文檔?？梢韵駥ζ渌魏伪砀褚粯訉η短妆砀襁M(jìn)行格式設(shè)置。Dreamweavex MX支持表格嵌套。表格在網(wǎng)頁設(shè)計(jì)中的意義遠(yuǎn)非一般概念中的表格應(yīng)用，它更大的用處在于控制頁面元素(即網(wǎng)頁的定位)，比如設(shè)置文字和圖像在頁面中出現(xiàn)的精確位置，只需通過設(shè)定表格的寬度、高度及彼此之間的比例大小等，就可以把不同的網(wǎng)頁要素分別添加在不同的單元格之中以達(dá)到頁面的平衡。 界面設(shè)計(jì)使用的元素利用Dreamweaver所提供的強(qiáng)大的頁面編輯功能，進(jìn)行學(xué)習(xí)平臺(tái)界面設(shè)計(jì)。因此在界面設(shè)計(jì)上應(yīng)注重界面友好，導(dǎo)航清晰，操作簡單、靈活，方便用戶使用。第五章 英語網(wǎng)絡(luò)課堂系統(tǒng)的詳細(xì)設(shè)計(jì) 在第四章中對網(wǎng)絡(luò)課堂從總體結(jié)構(gòu)框架和功能上進(jìn)行了規(guī)劃，根據(jù)英語網(wǎng)絡(luò)課堂的內(nèi)容、功能及需求，本章將先對本系統(tǒng)的界面設(shè)計(jì)進(jìn)一步的詳細(xì)介紹，然后按邏輯功能把本系統(tǒng)劃分為網(wǎng)絡(luò)課堂、課程答疑、討論交流、公告信息、即時(shí)消息、系統(tǒng)管理6個(gè)邏輯功能模塊，再就這些模塊的詳細(xì)設(shè)計(jì)作進(jìn)一步闡述。通過使用本系統(tǒng)的用戶的角色劃分本系統(tǒng)的基本功能模塊如圖41所示：英語網(wǎng)絡(luò)課堂學(xué)生個(gè)人學(xué)習(xí)模塊教師教學(xué)模塊教學(xué)管理模塊課程學(xué)習(xí)課件上傳查閱公告在線提問課程討論發(fā)表公告即時(shí)消息課程討論在線答疑人員管理課程管理論壇管理即時(shí)消息即時(shí)消息圖41 系統(tǒng)基本功能模塊圖本系統(tǒng)學(xué)生、教師、管理員三種用戶模塊各自下屬的子模塊，在功能上與其他用戶模塊的子模塊存在著緊密地聯(lián)系，有的子模塊之間在功能上存在重疊；有的不同用戶模塊的幾個(gè)子模塊屬于一個(gè)完整的功能模塊，共同協(xié)作完成一項(xiàng)完整的系統(tǒng)功能。為方便用戶使用，在學(xué)習(xí)平臺(tái)設(shè)計(jì)上根據(jù)不同用戶使用的特點(diǎn)，將用戶操作界面分為教師界面、學(xué)生界面、管理界面，學(xué)習(xí)平臺(tái)系統(tǒng)應(yīng)用功能通過三個(gè)用戶界面加以體現(xiàn)與實(shí)現(xiàn)。 系統(tǒng)功能模塊設(shè)計(jì)根據(jù)英語網(wǎng)絡(luò)課堂系統(tǒng)能設(shè)計(jì)，網(wǎng)絡(luò)學(xué)習(xí)平臺(tái)應(yīng)包含以下功能模塊: 網(wǎng)絡(luò)課堂、網(wǎng)上作業(yè)、提問答疑、課程討論、發(fā)表公告、即時(shí)消息、人員管理、課程管理模塊。u 放置完控件后界面不應(yīng)有很大的空閑空間。l 編輯控件左對齊，Label控件右對齊。l 布局要合理，不宜過于密集，也不能過于空曠，合理的利用空間。美觀與協(xié)調(diào)界面應(yīng)該符合美學(xué)觀點(diǎn)，感覺協(xié)調(diào)舒適，能吸引用戶的注意力。工具條一般比菜單要寬，但不要寬得太多， 否則看起來很不協(xié)調(diào)。l 菜單和工具條要有清楚的界限；菜單要求凸出顯示，這樣在移走工具條時(shí)仍有 立體感 。l 滾動(dòng)條的長度要根據(jù)顯示信息的長度或?qū)挾饶芗皶r(shí)變換，以利于用戶了解顯示 信息的位置和百分比。l 快捷鍵的圖標(biāo)能直觀的表示其要完成的操作。l 相同或相近功能的工具欄放在一起。l 菜單前的圖標(biāo)能直觀的代表要完成的操作。規(guī)范性細(xì)則:l 很常用的菜單要有命令快捷方式。l 及時(shí)提供幫助。l 專業(yè)性強(qiáng)的軟件要使用相應(yīng)行業(yè)的專業(yè)術(shù)語，通用性界面則使用通用性詞語 。l 同一界面上的控件數(shù)最好不要超過20個(gè)，多于20個(gè)時(shí)可以考慮分頁顯。l 按功能將界面分塊，并要有功能說明或標(biāo)題。易用性細(xì)則:l 完成相同或相近功能的按鈕框起來，常用按鈕要支持快捷方式。簡潔易用、規(guī)范協(xié)和、風(fēng)格統(tǒng)一等等因素是界面美觀的關(guān)鍵所在。界面的好壞是影響用戶對軟件第一印象的主要因素，因?yàn)榻缑媸欠衩烙^直接影響用戶使用軟件的心情，進(jìn)而直接影響用戶對軟件的評價(jià)。在具 體 實(shí) 現(xiàn)上，采用Dreamweaver和PhotoShop來完成網(wǎng)頁的設(shè)計(jì)與實(shí)現(xiàn)，采用動(dòng)態(tài)網(wǎng)頁制作技術(shù)ASP進(jìn)行動(dòng)態(tài)網(wǎng)頁編程，系統(tǒng)功能的實(shí)現(xiàn)需要數(shù)據(jù)庫系統(tǒng)的支持，數(shù)據(jù)庫采用SQL Server 2000?；跒g覽器(Browser)/服務(wù)器(Server)結(jié)構(gòu)的系統(tǒng)，也就是B/S模式，最核心的一點(diǎn)就是用通用的瀏覽器取代了原來的客戶端程序，應(yīng)用程序的安裝、調(diào)試、維護(hù)只要在服務(wù)器端進(jìn)行就可以了，此外配置工作都集中到服務(wù)器端，提高了系統(tǒng)的安全性。 系統(tǒng)總體結(jié)構(gòu)設(shè)計(jì)網(wǎng)絡(luò)應(yīng)用軟件系統(tǒng)開發(fā)常見的結(jié)構(gòu)模式有C/S模式和B/S模式。當(dāng)出現(xiàn)故障時(shí)進(jìn)行數(shù)據(jù)庫恢復(fù)，利用備份文件恢復(fù)毀壞的數(shù)據(jù)文件或控制文件。數(shù)據(jù)庫常常使用數(shù)據(jù)庫備份的方法來保護(hù)數(shù)據(jù)。如違反了完整性約束，就采取一定的措施來保證數(shù)據(jù)的完整性。完整性約束的定義規(guī)定了用戶對數(shù)據(jù)庫進(jìn)行更新操作時(shí)所應(yīng)滿足的條件，因?yàn)椴樵儾僮鞑粫?huì)修改數(shù)據(jù)庫的內(nèi)容，也就不能破壞數(shù)據(jù)庫的完整性。保證數(shù)據(jù)的完整性數(shù)據(jù)的完整性是指數(shù)據(jù)的正確性和完備性。系統(tǒng)通過檢查口令等手段來驗(yàn)證用戶身份，合法的用戶才能進(jìn)入數(shù)據(jù)庫系統(tǒng)。在數(shù)據(jù)庫中建立用戶帳號(hào)，每個(gè)帳號(hào)必須指定一個(gè)口令，用戶通過帳號(hào)訪問數(shù)據(jù)庫。本系統(tǒng)采取的數(shù)據(jù)庫保護(hù)措施有：建立用戶帳號(hào)、設(shè)置訪問權(quán)限數(shù)據(jù)庫的安全性是指保護(hù)數(shù)據(jù)庫以防止不合法的使用所造成的數(shù)據(jù)泄露、更改或破壞。例如，數(shù)據(jù)庫中教師信息表(teacher)、課程信息表(Subject)、開課信息表(TeachingSubject)及教學(xué)課件表(StudyMaterial)、班級(jí)表(Class)用教師編號(hào)和課程編號(hào)進(jìn)行關(guān)聯(lián)，當(dāng)教師登錄進(jìn)入到課程教學(xué)欄目后，該教師本學(xué)期所上的課程的信息都自動(dòng)顯示出來，教師上傳相應(yīng)課程學(xué)習(xí)課件的內(nèi)容后，本學(xué)期所教班級(jí)的學(xué)生登錄后，將都能查閱相應(yīng)內(nèi)容，而沒有選課的班級(jí)的學(xué)生則無法查閱。其中是否閱讀和是否回復(fù)字段分別記錄該條即時(shí)消息收信人是否已經(jīng)閱讀、收信人是否已經(jīng)回復(fù)給條消息。并通過提問學(xué)生編號(hào)、答疑教師編號(hào)、開課課程編號(hào)與學(xué)生表、教師表、開課信息表相關(guān)聯(lián)。如果該帖子是回復(fù)帖，那么父結(jié)點(diǎn)字段用于記錄它所回復(fù)的帖子的編號(hào)，如果不是回復(fù)帖，父結(jié)點(diǎn)字段為空。教師布置作業(yè)表HomeworkNotice的結(jié)構(gòu)如表311所示：表311 教師布置作業(yè)表HomeworkNotice列 名數(shù)據(jù)類型可否為空說明IDint（4）Not Null編號(hào)Titlevarchar（500）Null作業(yè)題目Contentvarchar（3000）Null作業(yè)內(nèi)容要求SubjectIDint（4）Not Null課程編號(hào)AddManvarchar（200）Null添加人Addtimevarchar（200）Null添加時(shí)間1 學(xué)生回答作業(yè)表Homework學(xué)生回答作業(yè)表由記錄號(hào)、教師編號(hào)、課程編號(hào)、作業(yè)題目、作業(yè)內(nèi)容5個(gè)字段組成，用于保存學(xué)生回答作業(yè)的內(nèi)容等相關(guān)信息。其中保存路徑用于記錄教師上傳課件的保存路徑，當(dāng)學(xué)生需要下載此課件進(jìn)行學(xué)習(xí)時(shí)，系統(tǒng)可以根據(jù)次保存路徑找到該課件。例如學(xué)生登錄進(jìn)入學(xué)生界面時(shí)，學(xué)生可以針對本學(xué)期所開課程進(jìn)行學(xué)習(xí)、作業(yè)和討論。教研室信息表Office的結(jié)構(gòu)如表37所示：表37 教研室信息表Office 列 名數(shù)據(jù)類型可否為空說明IDint（4）Not Null編號(hào)Namevarchar（200）Not Null教研室名 課程信息表Subject課程表由課程編號(hào)、課程名稱、課程簡介3個(gè)字段組成，將課程名稱與課程編號(hào)相對應(yīng)。學(xué)院信息表School的結(jié)構(gòu)如表36所示：表36 學(xué)院信息表School列 名數(shù)據(jù)類型可否為空說明IDint（4）Not Null編號(hào)Namevarchar（200）Not Null學(xué)院名 教研室信息表Office教研室信息表由編號(hào)、教研室名2個(gè)字段組成。專業(yè)信息表Major的結(jié)構(gòu)如表35所示：表35 專業(yè)信息表Major 列 名數(shù)據(jù)類型可否為空說明IDint（4）Not Null編號(hào)Namevarchar（200）Not Null專業(yè)名SchoolIDint（4）Not Null學(xué)院編號(hào) 學(xué)院信息表School學(xué)院信息表由編號(hào)、學(xué)院名2個(gè)字段組成，對專業(yè)名稱進(jìn)行編號(hào)。表的結(jié)構(gòu)如表34所示：表34 班級(jí)信息表Class列 名數(shù)據(jù)類型可否為空說明IDint（4）Not Null編號(hào)Namevarchar（200）Not Null班級(jí)名MajorIDint（4）Not Null專業(yè)編號(hào)SchoolIDint（4）Not Null學(xué)院編號(hào) 專業(yè)信息表Major專業(yè)表由專業(yè)名稱、專業(yè)編號(hào)、學(xué)院編號(hào)3個(gè)字段組成，對專業(yè)名稱進(jìn)行編號(hào)。學(xué)生基本信息表Student的結(jié)構(gòu)如表33所示：表33 學(xué)生基本信息表Student 列 名數(shù)據(jù)類型可否為空說明IDint（4）Not Null編號(hào)Namevarchar（200）Not Null姓名Pwdvarchar（50）Not Null密碼Sexvarchar(50)Null性別ClassIDint(4)Null班級(jí)編號(hào)Telvarchar（50）Null電話Emailvarchar（50）Null電子郵件varchar（50）Null號(hào)Snovarchar（50）Not Null學(xué)號(hào)Zhengzhivarchar（50）Null政治面貌Racevarchar（50）Null民族HomeTownvarchar（50）Null籍貫SchoolIDint(4)Null學(xué)院編號(hào)MajorIDint(4)Null專業(yè)編號(hào)BirthDatevarchar（50）Null出生日期MSNvarchar（50）NullMSN號(hào) 班級(jí)信息表Class班級(jí)表用于保存班級(jí)基本信息。教師信息表Teacher的結(jié)構(gòu)如表32所示：表32 教師信息表Teacher 列 名數(shù)據(jù)類型可否為空說明IDint（4）Not Null編號(hào)Namevarchar（50）Not Null教師姓名Pwdvarchar（50）Not Null密碼Sexvarchar(50)Null性別Picvarchar(8000)Null照片Breifvarchar(3000)Null簡介Telvarchar(50)Null電話Emailvarchar(50)Null電子郵件varchar(50)Null號(hào)MSNvarchar(50)NullMSN號(hào)OfficeIDint(4)