【正文】 客戶端程序，由于客戶的配置可能存在差異，系統(tǒng)安裝、調(diào)試、維護(hù)困難。因此，在系統(tǒng)總體設(shè)計(jì)上采用瀏覽器/服務(wù)器(B/S)模式，用戶只要通過Internet瀏覽器輸入系統(tǒng)的IP地址對(duì)服務(wù)器進(jìn)行訪問就可以完成所有的功能。 系統(tǒng)界面設(shè)計(jì)界面是軟件的衣裳，是軟件與用戶交互的最直接的層次。而且良好的界面能夠引導(dǎo)用戶自己完成相應(yīng)的操作起到向?qū)У淖饔?，具有吸引用戶的直接?yōu)勢(shì)。易用性優(yōu)秀的用戶界面應(yīng)該使用戶在首次接觸軟件時(shí)，感覺到一目了然，不需要太多的培訓(xùn)就可以上手使用，這就是軟件的易用性，易用性通常體現(xiàn)在界面用詞通俗易懂、功能操作快捷方便、操作反饋及時(shí)準(zhǔn)確等方面，理想情況是用戶不用查閱幫助就能知道該界面的功能并進(jìn)行相關(guān)的正確操作。l 完成同一功能或任務(wù)的控件放在集中位置，減少鼠標(biāo)或鍵盤移動(dòng)的距離。l 界面上首先應(yīng)輸入的或重要信息的控件在Tab順序中應(yīng)當(dāng)靠前，位置也應(yīng)放在窗口上較醒目的位置。l 默認(rèn)按鈕要支持Enter可選操作，即按Enter后自動(dòng)執(zhí)行默認(rèn)按鈕對(duì)應(yīng)操作。l 確保用戶界面的一致性，例如界面用詞統(tǒng)一、按鈕位置固定等。規(guī)范性通常界面設(shè)計(jì)都按Windows界面的規(guī)范來設(shè)計(jì)，即包含“菜單條、工具欄、狀態(tài)欄、滾動(dòng)條、右鍵快捷菜單”的標(biāo)準(zhǔn)格式，可以說:界面遵循規(guī)范化的程度越高，則易用性相應(yīng)的就越好。l 完成相同或相近功能的菜單用橫線隔開放在一起。l 菜單深度要求控制在三層以內(nèi)，一般是兩層。l 工具欄中的每一個(gè)按鈕要有及時(shí)提示信息。l 狀態(tài)條要能顯示用戶切實(shí)需要的信息，常用的有:目前的操作、系統(tǒng)狀態(tài) 、用戶位置 、 用戶信息、提示信息、錯(cuò)誤信息等，如果某一操作需要的時(shí)間較長(zhǎng)還應(yīng)該顯示進(jìn)度百分比和進(jìn)程提示。l 狀態(tài)條的高度以放置五號(hào)字為宜，滾動(dòng)條的寬度比狀態(tài)條的略窄。l 菜單和狀態(tài)條中通常使用5號(hào)字體。l 右鍵快捷菜單采用與菜單相同的準(zhǔn)則。美觀與協(xié)調(diào)性細(xì)則:l 窗體長(zhǎng)寬接近黃金分割比例()，切忌長(zhǎng)寬比例失調(diào)、或?qū)挾葒?yán)重超過長(zhǎng)度。l 按鈕大小一樣，忌用太長(zhǎng)的名稱，以免占用過多的界面空間，按鈕的大小要與界面的大小協(xié)調(diào)。l 避免空曠的界面上放置很大的按鈕。u 字體的大小要與界面的大小比例協(xié)調(diào)，通常使用的字體中宋體912較為美觀，很少使用超過12號(hào)的字體。這些不同功能的模塊在網(wǎng)絡(luò)學(xué)習(xí)平臺(tái)中起著不同的作用，通過它們之間的相互配合、相互補(bǔ)充以實(shí)現(xiàn)遠(yuǎn)程教學(xué)的目的。綜上所述，網(wǎng)絡(luò)學(xué)習(xí)平臺(tái)系統(tǒng)軟件結(jié)構(gòu)分為二個(gè)層次，表示層通過教師、學(xué)生、管理員三個(gè)用戶界面給用戶提供方便、美觀、實(shí)用的人機(jī)接口，應(yīng)用層由網(wǎng)絡(luò)課堂、提問答疑、課程討論、發(fā)表公告、即時(shí)消息、人員管理、課程管理、論壇管理七個(gè)功能模塊組成。在第五章詳細(xì)設(shè)計(jì)中，本文將按照完整的功能模塊來劃分系統(tǒng)功能，完成系統(tǒng)的功能模塊的詳細(xì)設(shè)計(jì)。 用戶操作界面的詳細(xì)設(shè)計(jì) 用戶界面是用戶使用網(wǎng)上學(xué)習(xí)平臺(tái)功能、與系統(tǒng)實(shí)現(xiàn)交互的接口。網(wǎng)上學(xué)習(xí)平臺(tái)采用Dreamweaver和Photoshop來進(jìn)行界面設(shè)計(jì)和實(shí)現(xiàn)。在網(wǎng)上學(xué)習(xí)平臺(tái)的界面設(shè)計(jì)中使用的元素有：1) 表格表格是用于在HTML頁面上顯示表格式數(shù)據(jù)，對(duì)文本和圖形進(jìn)行布局的強(qiáng)有力的工具。表格是網(wǎng)頁制作中最為重要的一個(gè)技巧，表格運(yùn)用得好壞，直接反映了網(wǎng)頁設(shè)計(jì)的水平?？梢栽诒砀駜?nèi)的一個(gè)單元格中插入另一個(gè)嵌套表格。但是，其寬度受它所在單元格的寬度的限制。使用框架的最常見的情況就是，一個(gè)框架顯示包含導(dǎo)航控件的文檔，而另一個(gè)框架顯示含有內(nèi)容的文檔。這些框架中的每一部分都顯示一個(gè)單獨(dú)的HTML文檔。側(cè)面框架導(dǎo)航條包含鏈接，單擊其中的一個(gè)鏈接會(huì)更改的內(nèi)容，但側(cè)面框架本身的內(nèi)容保持靜態(tài)。使用框架的優(yōu)點(diǎn)如下：l 訪問者的瀏覽器不需要為每個(gè)頁面重新加載與導(dǎo)航相關(guān)的圖形。3) 表單表單可以實(shí)現(xiàn)客戶端與服務(wù)器端的交互。表單可以包含允許用戶進(jìn)行交互的各種對(duì)象。form標(biāo)簽包括一些參數(shù)，使用這些參數(shù)可以指定到處理表單數(shù)據(jù)的服務(wù)器端腳本或應(yīng)用程序的路徑，而且還可以指定在將數(shù)據(jù)從瀏覽器傳輸?shù)椒?wù)器時(shí)要使用的HTTP方法。當(dāng)用戶將信息輸入表單并單擊提交按鈕時(shí)，這些信息將被發(fā)送到服務(wù)器，服務(wù)器端腳本或應(yīng)用程序在該處對(duì)這些信息進(jìn)行處理。如果不使用服務(wù)器端腳本或應(yīng)用程序來處理表單數(shù)據(jù)，就無法收集這些數(shù)據(jù)。4) 圖片圖片是一個(gè)優(yōu)秀的網(wǎng)站不可或缺的要素之一，如果一個(gè)網(wǎng)站缺少了圖片，很難想象會(huì)是多么的枯燥無味，豐富多彩的圖片能為網(wǎng)站增色不少。與文字相比，它更直觀、更生動(dòng)，可以很容易地把那些文字無法表達(dá)的信息表達(dá)出來。雖然存在很多種圖形文件格式，但Web頁中通常使用的只有三種，即GIP, JPEG和PNG。 界面設(shè)計(jì)步驟規(guī)劃界面設(shè)計(jì)方案：根據(jù)英語網(wǎng)絡(luò)課堂應(yīng)用功能設(shè)置和用戶特點(diǎn)，從界面組成、結(jié)構(gòu)布局等方面確定界面設(shè)計(jì)方案。每個(gè)界面的準(zhǔn)備頁面素材：圖像已經(jīng)成為網(wǎng)頁制作中不可缺少的組成成份，在界面設(shè)計(jì)中插入圖像元素，可以使界面生動(dòng)、友好。進(jìn)入Dreamweaver，在Dreamweaver中創(chuàng)建新的頁面，并按界面設(shè)計(jì)要求對(duì)新建頁面的屬性參數(shù)進(jìn)行設(shè)置。設(shè)計(jì)頁面布局的主要元素有使用表格控制頁面內(nèi)容和使用框架。界面布局、功能設(shè)置用圖片實(shí)現(xiàn)，使用Photoshop繪制頁。頂部為頁面標(biāo)題；下部左側(cè)的框架較窄，顯示包含導(dǎo)航控件的文檔；右側(cè)顯示含有內(nèi)容的文檔。學(xué)生界面左側(cè)導(dǎo)航欄內(nèi)容分為學(xué)生信息、即時(shí)消息、學(xué)習(xí)公告、作業(yè)公告、課程學(xué)習(xí)、網(wǎng)絡(luò)答疑、討論交流、退出系統(tǒng)8個(gè)部分。管理員界面左側(cè)導(dǎo)航欄內(nèi)容分為即時(shí)消息、學(xué)生管理、教師管理、學(xué)院管理、專業(yè)管理、班級(jí)管理、用戶管理、課程管理、開課管理、討論交流、退出系統(tǒng)11個(gè)部分。創(chuàng)建超鏈接，將頁面鏈接在一起。 主要功能模塊的詳細(xì)設(shè)計(jì)本節(jié)主要介紹系統(tǒng)主要功能模塊的功能特點(diǎn)、模塊流程。對(duì)于錯(cuò)誤的操作和輸入不存在數(shù)據(jù)或錯(cuò)誤的數(shù)據(jù)，系統(tǒng)會(huì)給予錯(cuò)誤提示。從使用的角度來說，它應(yīng)包括資源的瀏覽、檢索、上傳（教師）、下載（學(xué)生）等。他對(duì)于相應(yīng)的課程具有一定的操作權(quán)限，它的主要任務(wù)是進(jìn)行資源管理資源的添加、刪除、修改等，系統(tǒng)提供的功能包括課件上傳、下載、刪除等。操作的請(qǐng)求將會(huì)發(fā)送的服務(wù)器端，系統(tǒng)驗(yàn)證其有相應(yīng)操作權(quán)限時(shí)，系統(tǒng)將執(zhí)行此操作。但學(xué)生沒有權(quán)限對(duì)課件進(jìn)行修改和刪除。學(xué)生通過學(xué)生界面查閱相應(yīng)教學(xué)公告內(nèi)容。這樣用戶在查閱公告時(shí)就更有針對(duì)性，更方便快捷，同樣也減少了管理員在后期整理公告時(shí)的工作量。這樣又使教師的教學(xué)更加自主獨(dú)立。操作的請(qǐng)求將會(huì)發(fā)送的服務(wù)器端，系統(tǒng)驗(yàn)證其有相應(yīng)操作權(quán)限時(shí)，系統(tǒng)將執(zhí)行此操作。在這里以分頁的方式顯示公告區(qū)數(shù)據(jù)庫中的所有公告的標(biāo)題。 課程答疑模塊 課程答疑子系統(tǒng)采用非面對(duì)面的教學(xué)形式，學(xué)生提問和教師答疑可以不受時(shí)間和地點(diǎn)的限制，體現(xiàn)了網(wǎng)上答疑的開放性、交互性和自主性等特點(diǎn)。在線答疑子系統(tǒng)實(shí)現(xiàn)了教師和學(xué)生同時(shí)在網(wǎng)上交談式的答疑。在這個(gè)子系統(tǒng)里，教師的權(quán)限高于系統(tǒng)管理員，它的主要任務(wù)是進(jìn)行資源管理資源的編輯和刪除等，系統(tǒng)提供的功能包括對(duì)問題的瀏覽、添加、回復(fù)、刪除等。操作的請(qǐng)求將會(huì)發(fā)送的服務(wù)器端，系統(tǒng)驗(yàn)證其有相應(yīng)操作權(quán)限時(shí)，系統(tǒng)將執(zhí)行此操作。但學(xué)生沒有權(quán)限對(duì)問題進(jìn)行修改、回答和刪除。課程答疑模塊的系統(tǒng)流程如圖58 所示：是否返回返回不合法返回返回合法教師學(xué)生課程答疑判斷身份學(xué)生界面教師界面選擇課程提出新問題查看問題回復(fù)選擇課程添加問題信息提交信息回復(fù)問題判斷合法錯(cuò)誤信息提示刪除問題添加回復(fù)信息提交確認(rèn)信息返回不合法返回合法提交信息判斷合法錯(cuò)誤信息提示確認(rèn)刪除返回圖58 課程答疑模塊的系統(tǒng)流程圖 討論交流模塊討論交流模塊提供了一個(gè)學(xué)生、教師集中討論、學(xué)習(xí)的環(huán)境。教師也可以將以前答疑區(qū)中的問題總結(jié)一下，發(fā)布到討論區(qū)供大家瀏覽，可以與其他人進(jìn)行異步交流，所以只要數(shù)據(jù)庫中沒有刪除相關(guān)記錄，基本上是永久保存的。在討論區(qū)中，教師和學(xué)生都可以瀏覽所有的討論內(nèi)容及其回復(fù)。顯示形式是按最后加入數(shù)據(jù)庫中的文章最先顯示。討論交流模塊子功能模塊如圖59所示：討論交流學(xué)生用戶管理員用戶教師用戶瀏覽帖子 發(fā)表新帖回復(fù)帖子瀏覽帖子發(fā)表新帖回復(fù)帖子刪除帖子瀏覽帖子發(fā)表新帖回復(fù)帖子刪除帖子圖59 討論交流模塊子功能模塊圖當(dāng)不論是以學(xué)生、教師或管理員身份進(jìn)入到討論交流子系統(tǒng)中，用戶的界面中會(huì)以分頁的方式顯示論壇中所有帖子的信息，選擇任意一個(gè)主題帖標(biāo)題，將會(huì)顯示該帖的內(nèi)容以、相關(guān)回復(fù)帖子的列表以及發(fā)表回復(fù)欄?；貜?fù)信息會(huì)被添加到該帖的回復(fù)帖子列表中。課程答疑模塊的系統(tǒng)流程如圖510 所示：返回不合法合法返回合法返回不合法討論交流學(xué)生界面教師或管理員界面判斷身份瀏覽帖子發(fā)表新貼發(fā)表回復(fù)提交信息判斷合法錯(cuò)誤信息提示提交信息判斷合法返回錯(cuò)誤信息提示返回瀏覽帖子發(fā)表新貼刪除帖子確認(rèn)刪除否是返回提交確認(rèn)信息圖510 討論交流模塊的系統(tǒng)流程圖 即時(shí)消息模塊即時(shí)消息模塊是在本系統(tǒng)中是一個(gè)特別的模塊，它貫穿于整個(gè)英語網(wǎng)絡(luò)課堂系統(tǒng)。即時(shí)消息模塊既是在功能意義上一個(gè)完整的模塊，又是在形式上內(nèi)嵌在其它各個(gè)系統(tǒng)模塊中的一個(gè)輔助模塊。因?yàn)樵谙到y(tǒng)中其他的信息傳遞方式（如課程答疑模塊中學(xué)生提問與教師答疑之間的信息交換，又如，討論交流模塊中發(fā)帖用戶與回復(fù)用戶之間信息的交流）都是公開的模式，即一個(gè)用戶發(fā)表的信息系統(tǒng)中的每一個(gè)用戶都有機(jī)會(huì)看到。因此，在英語網(wǎng)絡(luò)課堂中添加即時(shí)消息模塊既沒有破壞英語網(wǎng)絡(luò)課堂中信息高度共享的原則，又能考錄到系統(tǒng)用戶的個(gè)人隱私問題。用戶可以在“我的消息”選項(xiàng)中查閱自己收到的消息和發(fā)出的消息，并可以對(duì)收到的消息進(jìn)行刪除操作。只要是和其他用戶相關(guān)的內(nèi)容中幾乎都可以找到“向XXX發(fā)送消息”的選項(xiàng)。在此模塊中學(xué)生、教師、管理員三種用戶的權(quán)限相同，都只能各自管理自己的即時(shí)消息，對(duì)自己的消息進(jìn)行查看、回復(fù)、發(fā)送和刪除操作。用戶還可以選擇收信人，對(duì)其發(fā)送即時(shí)信息。系統(tǒng)管理模塊又分為人員管理和課程管理兩個(gè)大的子模塊。課程管理子模塊實(shí)現(xiàn)對(duì)所有存在課程和已開設(shè)課程的管理。當(dāng)管理員進(jìn)入系統(tǒng)管理子系統(tǒng)，可以進(jìn)入人員管理添加或刪除教師或?qū)W生用戶，也可以對(duì)他們的基本信息進(jìn)行添加、修改和刪除。管理員用戶也可以進(jìn)入學(xué)院管理、專業(yè)管理、班級(jí)管理，對(duì)教師和學(xué)生用戶的歸屬單位進(jìn)行編輯和管理。當(dāng)管理員進(jìn)入課程管理時(shí)可以添加、修改和刪除課程，也可以把已存在的課程添加到開課課程中，編輯開課信息，如開課名稱、開課班級(jí)、任課教師、開課時(shí)間等相關(guān)信息。至此，英語網(wǎng)絡(luò)課堂系統(tǒng)的各個(gè)子模塊的詳細(xì)設(shè)計(jì)說明就敘述完畢了，在下一章中本文將繼續(xù)介紹本系統(tǒng)各個(gè)模塊的實(shí)現(xiàn)過程。經(jīng)過對(duì)其各個(gè)模塊的結(jié)構(gòu)的設(shè)計(jì)和功能流程的分析，下面就對(duì)應(yīng)上一章的詳細(xì)設(shè)計(jì)來較具體地說明它的實(shí)現(xiàn)過程。頂部為頁面標(biāo)題；下部左側(cè)的框架較窄，顯示導(dǎo)航控件；右側(cè)顯示含有內(nèi)容的文檔。用戶操作界面框架設(shè)計(jì)如圖61所示： 圖61 用戶操作界面框架設(shè)計(jì)圖 系統(tǒng)登陸的實(shí)現(xiàn)用戶要使用本系統(tǒng)，首先要同過系統(tǒng)的身份認(rèn)證，這個(gè)過程叫做登錄。l 根據(jù)用戶類型決定用戶擁有的權(quán)限。圖62 系統(tǒng)登陸頁面圖。故以學(xué)生登陸界面為例，如圖63所示： 網(wǎng)絡(luò)課堂模塊的實(shí)現(xiàn)學(xué)生登錄后在學(xué)生界面選擇課程學(xué)習(xí)，頁面就會(huì)顯示出學(xué)生所學(xué)的全部課程的信息，如圖63所示：圖63 學(xué)生課程學(xué)習(xí)界面圖選擇任意一門課程進(jìn)行學(xué)習(xí)，可以進(jìn)入教學(xué)資料界面，學(xué)生可以在此界面下載任課教師上傳的課程資料進(jìn)行自主學(xué)習(xí)，如圖64所示：圖64 學(xué)生教學(xué)資料界面圖教師登錄后在教師界面選擇課程教學(xué)，頁面就會(huì)顯示出該教師所的全部課程的信息如圖65所示：圖65 教師課程教學(xué)界面圖教師選擇任意一門教授的課程，會(huì)進(jìn)入課程資料界面，界面中會(huì)顯示教師以上傳的課件資料，教師可以刪除這些資料，也可以添加新的課程資料。如圖611所示：圖611 教師編輯作業(yè)公告界面圖 課程答疑模塊的實(shí)現(xiàn)學(xué)生登錄后在學(xué)生界面選擇網(wǎng)絡(luò)答疑，頁面就會(huì)顯示出全部課程的列表，選擇進(jìn)入任意一門課程，頁面就會(huì)顯示出所有學(xué)生曾經(jīng)提出的關(guān)于這門課程的疑問以及教師已經(jīng)回復(fù)的內(nèi)容。教師也可以選擇刪除選項(xiàng)刪除相應(yīng)問題，如圖613所示：圖613 教師網(wǎng)絡(luò)答疑界面圖教師還可以選擇回復(fù)選項(xiàng)，進(jìn)入恢復(fù)界面，編輯恢復(fù)內(nèi)容，對(duì)學(xué)生的提問進(jìn)行解答，然后提交解答。唯一不同的是教師和管理員的頁面中會(huì)有刪除選項(xiàng)，可以對(duì)帖子進(jìn)行刪除操作，而學(xué)生沒有。用戶在此系統(tǒng)中操作時(shí)會(huì)經(jīng)常看到“給XXX發(fā)送短信息”的選項(xiàng)（如在圖612中就有這樣的選項(xiàng)），用戶選擇它就會(huì)進(jìn)入給其他用戶發(fā)送即時(shí)消息的界面，編輯消息后選擇發(fā)送即向該用戶發(fā)了即時(shí)消息，如圖616所示：圖616 用戶發(fā)送即時(shí)消息界面圖用戶在登陸系統(tǒng)后可以點(diǎn)擊右側(cè)導(dǎo)航欄中我的消息選項(xiàng)，即可在郵件箱中查閱其它用戶發(fā)送給自己的消息，也可以在發(fā)件箱中查看自己曾發(fā)出的信息。下面就以學(xué)生管理子模塊實(shí)現(xiàn)的為例進(jìn)行說明。管理員用戶可以選擇刪除選項(xiàng)在數(shù)據(jù)庫中刪除某一用戶或選擇編輯選項(xiàng)修改學(xué)生用戶的基本信息。在下拉菜單中選擇搜索相關(guān)信息的類型，如按學(xué)號(hào)、班級(jí)、政治面貌等搜索，然后輸入要搜索的信息，點(diǎn)擊搜索后，滿足搜索條件的學(xué)生就會(huì)被選出并以列表的形式顯示出來。amp。39。amp。39。amp