【正文】 教師區(qū)、學(xué)生區(qū) 、管理員區(qū) 在界面布局、結(jié)構(gòu)組成、功能實(shí) 現(xiàn)等采用的方法基本相同 。 進(jìn)行頁(yè)面布局和設(shè)置 ： 使用 Dreamweaver 中的可視化設(shè)計(jì)工具可以創(chuàng)建非常復(fù)雜的頁(yè)面布局。按照設(shè)計(jì)方案要求，教學(xué)平臺(tái)界面設(shè)計(jì)中均使用了圖像元素，使用 Photoshop 繪制和編輯圖像文件，然后將準(zhǔn)備好的圖像素材添加到站點(diǎn)。系統(tǒng)界面分為 網(wǎng)絡(luò)課堂登錄 主頁(yè)面和管理、教師、學(xué)生三個(gè)用戶界面。目前， GIF 和 JPEG 文件格式的支持情況最好，大多數(shù)瀏覽器都可以查看它們。 本網(wǎng)絡(luò)課堂的管理區(qū)、教師區(qū)、學(xué)生區(qū)都使用圖片來(lái)設(shè)計(jì)界面，例如系統(tǒng)的登錄頁(yè)面將使用整張圖片作為頁(yè)面；頁(yè)面的標(biāo)題欄也是用圖片實(shí)現(xiàn)的；管理區(qū)的導(dǎo)航條都是由圖片組成。一方面，圖像的應(yīng)用使網(wǎng)頁(yè)更加美觀、有趣；另一方面，圖像本身也是傳達(dá)信息的重要手段。在本系統(tǒng)中，通過(guò) ASP 來(lái)處理信息。服務(wù)器通過(guò)將請(qǐng)求信息發(fā)送回用戶或基于該表單內(nèi)容執(zhí)行一些操作來(lái)進(jìn)行響應(yīng)。 網(wǎng)絡(luò)課堂 平臺(tái)的信息錄入與維護(hù)、 即時(shí)消息 、 發(fā)布公告 等功能，均使用了表單。這些表單對(duì)象包括文本域、列表框、復(fù)選框和單選按鈕。表單從用戶收集信息，然后將這些信息提交給服務(wù)器進(jìn)行處理。 ? 每個(gè)框架都具有自己的滾動(dòng)條，因此訪問(wèn)者可以獨(dú)立滾動(dòng)這些框架。無(wú)論訪問(wèn)者在左側(cè)單擊了哪一個(gè)鏈接，右側(cè)主要內(nèi)容框架都會(huì)顯示相應(yīng)的文檔。 登錄后的系統(tǒng)界面框架如圖 51 所示： 大連交通大學(xué) 20xx 屆本科生畢業(yè)設(shè)計(jì) (論文 ) 22 圖 51 系統(tǒng)界面框架圖 當(dāng)訪問(wèn)者瀏覽信息時(shí)，在頂部框架中顯示的文檔永遠(yuǎn)不更改。 本系統(tǒng)頁(yè)面框架布局由 3 個(gè)框架組成：一個(gè)較窄的框架位于側(cè)面，其中包含導(dǎo)航條；一個(gè)框架橫放在頂部，其中包含 Web 頁(yè)的標(biāo)題、用戶的歡迎信息，當(dāng)前日期 和一個(gè)菜單欄 ；一個(gè)大框架占據(jù)了頁(yè)面的其余部分，其中包含主要內(nèi)容。 2) 框架 框架是網(wǎng)頁(yè)中非常有用的工具，它可以將一個(gè)瀏覽器窗口劃分為多個(gè)區(qū)域，每個(gè)區(qū)域都可以顯示不同 H`TML 文檔?？梢韵駥?duì)其他任何表格一樣對(duì)嵌套表格進(jìn)行格式設(shè)置。 Dreamweavex MX 支持表格嵌套。表格在網(wǎng)頁(yè)設(shè)計(jì)中的意義遠(yuǎn)非一般概念中的表格應(yīng)用，它更大的用處在于控制頁(yè)面元素 (即網(wǎng)頁(yè)的定位 )，比如設(shè)置文字和圖像在頁(yè)面中出現(xiàn)的精確位置，只需通過(guò)設(shè)定表格的寬度、高度及彼此之間的比例大小等， 就可以把不同的網(wǎng)頁(yè)要素分別添加在不同的單元格之中以達(dá)到頁(yè)面的平衡。 界面設(shè)計(jì)使用的元 素 利用 Dreamweaver 所提供的強(qiáng)大的頁(yè)面編輯功能，進(jìn)行學(xué)習(xí)平臺(tái)界面設(shè)計(jì)。因此在界面設(shè)計(jì)上應(yīng)注重界面友好，導(dǎo)航清晰，操作簡(jiǎn)單、靈活，方便用 戶使用。 英語(yǔ)網(wǎng)絡(luò)課堂 學(xué)生個(gè)人學(xué)習(xí)模塊 教師教學(xué)模塊 教學(xué)管理模塊 課程學(xué)習(xí) 課件上傳 查閱公告 在線提問(wèn) 課程討論 發(fā)表公告 即時(shí)消息 課程討論 在線答疑 人員管理 課程管理 論壇管理 即時(shí)消息 即時(shí)消息 大連交通大學(xué) 20xx 屆本科生畢業(yè)設(shè)計(jì) (論文 ) 21 第五章 英語(yǔ)網(wǎng)絡(luò)課堂系統(tǒng)的詳細(xì)設(shè)計(jì) 在第四章中對(duì)網(wǎng)絡(luò)課堂從總體結(jié)構(gòu)框架和功能上進(jìn)行了規(guī)劃，根據(jù)英語(yǔ)網(wǎng)絡(luò)課堂的內(nèi)容 、功能 及需求， 本章將 先對(duì)本系統(tǒng)的界面設(shè)計(jì)進(jìn)一步的詳細(xì)介紹，然后 按 邏輯功能把本系統(tǒng)劃分為 網(wǎng)絡(luò)課堂 、 課程 答疑 、 討論交流 、 公告 信息 、 即時(shí)消息 、系統(tǒng)管理 6個(gè)邏輯功能模塊， 再 就這些模塊的詳細(xì)設(shè)計(jì)作進(jìn)一步闡述。 通過(guò)使用本系統(tǒng)的用戶的角色劃分 本系統(tǒng)的基本功能模塊如圖 41 所示： 圖 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)用功能通過(guò)三個(gè)用戶界面加以體現(xiàn)與實(shí)現(xiàn)。 系統(tǒng) 功能模塊 設(shè)計(jì) 根據(jù) 英語(yǔ)網(wǎng)絡(luò)課堂系統(tǒng) 能設(shè)計(jì)，網(wǎng)絡(luò)學(xué)習(xí)平臺(tái)應(yīng)包含以下功能模塊 : 網(wǎng)絡(luò)課堂 、 網(wǎng)上作業(yè) 、 提問(wèn) 答疑 、課程討論、 發(fā)表公告 、 即時(shí)消息 、 人員管理、課程管理 模塊。 大連交通大學(xué) 20xx 屆本科生畢業(yè)設(shè)計(jì) (論文 ) 20 ? 放置完控件后界面不應(yīng)有很大的空閑空間。 ? 編輯控件左對(duì)齊， Label 控件右對(duì)齊。 ? 布局要合理，不宜過(guò)于密集，也不能過(guò)于空曠，合理的利用空間。 美觀與協(xié)調(diào) 界面應(yīng)該符合美學(xué)觀點(diǎn)，感覺(jué)協(xié)調(diào)舒適，能吸引用戶的注意力。工具條一般比菜單要寬，但不要寬得太多， 否則看起來(lái)很不協(xié)調(diào)。 ? 菜單和工具條要有清楚的界限 ； 菜單要求凸出顯示，這樣在移走工具條時(shí)仍有 立體感 。 ? 滾動(dòng)條的長(zhǎng)度要根據(jù)顯示信息的長(zhǎng)度或?qū)挾饶芗皶r(shí)變換，以利于用戶了解顯示 信息的位置和百分比。 ? 快捷鍵的圖標(biāo)能直觀的表示其要完成的操作。 ? 相同或相近功能的工具欄放在一起。 ? 菜單前的圖標(biāo)能直觀的代表要完成的操作。 規(guī)范性細(xì)則 : ? 很常用的菜單要有命令快捷方式。 ? 及時(shí)提供幫助 。 大連交通大學(xué) 20xx 屆本科生畢業(yè)設(shè)計(jì) (論文 ) 19 ? 專業(yè)性強(qiáng)的軟件要使用相應(yīng)行業(yè)的專業(yè)術(shù)語(yǔ)，通用性界面則使用通用性詞語(yǔ) 。 ? 同一界面上的控件數(shù)最好不要超過(guò) 20 個(gè)，多于 20 個(gè)時(shí)可以考慮分頁(yè)顯。 ? 按功能將界面分塊，并要有 功能說(shuō)明或標(biāo)題。 易用性細(xì)則 : ? 完成相同或相近功能的按鈕框起來(lái)，常用按鈕要支持快捷方式。 簡(jiǎn)潔易用、規(guī)范協(xié)和、風(fēng)格統(tǒng)一等等因素是界面美觀的關(guān)鍵所在。界面的好壞是影響用戶對(duì)軟件第一印象的主要因素，因?yàn)榻缑媸欠衩烙^直接影響用戶使用軟件的心情 ， 進(jìn)而直接影響用戶對(duì)軟件的評(píng)價(jià)。在具 體 實(shí) 現(xiàn)上，采用 Dreamweaver 和 PhotoShop 來(lái)完成網(wǎng)頁(yè)的設(shè)計(jì)與實(shí)現(xiàn)， 采用動(dòng)態(tài)網(wǎng)頁(yè)制作技術(shù) ASP 進(jìn)行動(dòng)態(tài)網(wǎng)頁(yè)編程，系統(tǒng)功能的實(shí)現(xiàn)需要數(shù)據(jù)庫(kù)系統(tǒng)的支持，數(shù)據(jù)庫(kù)采用 SQL Server 20xx。基于瀏覽器 (Browser)/服務(wù)器 (Server)結(jié)構(gòu)的系統(tǒng)，也就是 B/S 模式，最核心的一點(diǎn)就是用通用的瀏覽器取代了原來(lái)的客戶端程序，應(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)開(kāi)發(fā)常見(jiàn)的結(jié)構(gòu)模式有 C/S 模式和 B/S模式。當(dāng)出現(xiàn)故障時(shí)進(jìn)行數(shù)據(jù)庫(kù)恢復(fù)，利用備份文件恢復(fù)毀壞的數(shù)據(jù)文件或控制文件。 數(shù)據(jù)庫(kù)常常使用數(shù)據(jù)庫(kù)備份的方法來(lái)保護(hù)數(shù)據(jù)。如違反了完整性約束，就采取一定的措施來(lái)保證數(shù)據(jù)的完整性。完整性約束的定義規(guī)定了用戶對(duì)數(shù)據(jù)庫(kù)進(jìn)行更新操作時(shí)所應(yīng)滿足的條件，因?yàn)椴樵儾僮鞑粫?huì)修改數(shù)據(jù)庫(kù)的內(nèi)容，也就不能破壞數(shù)據(jù)庫(kù)的完整性。 保證數(shù)據(jù)的完整性 數(shù)據(jù)的完整性是指數(shù)據(jù)的正確性和完備性。系統(tǒng)通過(guò)檢查口令等手段來(lái)驗(yàn)證用戶身份，合法的用戶才能進(jìn)入數(shù)據(jù)庫(kù)系統(tǒng)。在數(shù)據(jù)庫(kù)中建立用戶帳號(hào)，每個(gè)帳號(hào)必須指定一個(gè)口令，用戶通過(guò)帳號(hào)訪問(wèn)數(shù)據(jù)庫(kù)。本系統(tǒng)采取的數(shù)據(jù)庫(kù)保護(hù)措施有： 建立用戶帳號(hào)、設(shè)置訪問(wèn)權(quán)限 數(shù)據(jù)庫(kù)的安全性是指保護(hù)數(shù)據(jù)庫(kù)以防止不合法的使用所造成的數(shù)據(jù)泄露、更改或破壞。例如，數(shù)據(jù)庫(kù)中教師信息表 (teacher)、課程 信息 表 (Subject)、 開(kāi)課信息 表 (TeachingSubject)及 教學(xué)課件 表(StudyMaterial)、班級(jí)表 (Class)用教師編號(hào)和課程編號(hào)進(jìn)行關(guān)聯(lián)，當(dāng) 教師登錄進(jìn)入到課程教學(xué) 欄目后，該教師本學(xué)期所上的課程的信息都自動(dòng)顯示出來(lái)，教師 上傳 相應(yīng)課程學(xué)習(xí) 課件 的內(nèi)容后，本學(xué)期所教班級(jí)的學(xué)生登錄后，將都能查閱相應(yīng)內(nèi)容，而沒(méi)有選課的班級(jí)的學(xué)生則無(wú)法查閱。 其中 是否閱讀 和 是否回復(fù) 字段分別記錄該條即時(shí)消息收信人是否已經(jīng)閱讀、收信人是否已經(jīng)回復(fù)給條消 息。 并通過(guò) 提問(wèn)學(xué)生編號(hào)、答疑教師編 號(hào)、開(kāi)課課程編號(hào)與學(xué)生表、教師表、開(kāi)課信息表 相 關(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ù)類型 可否為空 說(shuō)明 ID int（ 4） Not Null 編號(hào) Title varchar（ 500） Null 作業(yè)題目 Content varchar（ 3000） Null 作業(yè)內(nèi)容要求 SubjectID int（ 4） Not Null 課程編號(hào) AddMan varchar（ 200） Null 添加人 Addtime varchar（ 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é)生可以針對(duì)本學(xué)期所開(kāi)課程進(jìn)行學(xué)習(xí)、作業(yè)和討論 。 教研室信息表 Office 的結(jié)構(gòu)如表 37 所示 ： 表 37 教研室信息表 Office 列 名 數(shù)據(jù)類型 可否為空 說(shuō)明 ID int（ 4） Not Null 編號(hào) Name varchar（ 200） Not Null 教研室名 課程 信息表 Subject 課程表由課程編號(hào)、課程名稱、課程簡(jiǎn) 介 3個(gè)字段組成，將課程名稱與課程編號(hào)相對(duì)應(yīng) 。 學(xué)院信息表 School 的結(jié)構(gòu)如表 36 所示 ： 表 36 學(xué)院信息表 School 列 名 數(shù)據(jù)類型 可否為空 說(shuō)明 ID int（ 4） Not Null 編號(hào) Name varchar（ 200） Not Null 學(xué)院名 教研室 信息表 Office 教研室信息表由編號(hào)、教研室名 2 個(gè)字段組 成。 大連交通大學(xué) 20xx 屆本科生畢業(yè)設(shè)計(jì) (論文 ) 10 專業(yè) 信息表 Major 的結(jié)構(gòu)如表 35所示： 表 35 專業(yè)信息表 Major 列 名 數(shù)據(jù)類型 可否為空 說(shuō)明 ID int（ 4） Not Null 編號(hào) Name varchar（ 200） Not Null 專業(yè)名 SchoolID int（ 4） Not Null 學(xué)院編號(hào) 學(xué)院信息表 School 學(xué)院信息表 由編號(hào)、 學(xué)院名 2個(gè)字段組成，對(duì)專業(yè)名稱進(jìn)行編號(hào)。 表的結(jié)構(gòu)如表 34所示： 表 34 班級(jí)信息表 Class 列 名 數(shù)據(jù)類型 可否為空 說(shuō)明 ID int（ 4） Not Null 編號(hào) Name varchar（ 200） Not Null 班級(jí)名 MajorID int（ 4） Not Null 專業(yè)編號(hào) SchoolID int（ 4） Not Null 學(xué)院編號(hào)