基于Web的多媒體CAI課件的設(shè)計(jì)與開發(fā)

王薇 楊鑫坤 解放軍信息工程大學(xué)

基于Web的多媒體CAI課件的設(shè)計(jì)與開發(fā)

王薇 楊鑫坤 解放軍信息工程大學(xué)

基于Web的多媒體CAI課件是多媒體CAI課件與Web技術(shù)的結(jié)合，它將成為網(wǎng)絡(luò)教學(xué)多媒體CAI課件的主要形式。本文結(jié)合一個(gè)實(shí)例，詳細(xì)探討了基于Web的多媒體CAI課件的設(shè)計(jì)與開發(fā)，并提出了其面臨的主要問題及解決方案。

CAI課件；Web課件；優(yōu)化

Internet的產(chǎn)生和發(fā)展給現(xiàn)代教育帶來了深遠(yuǎn)的影響，傳統(tǒng)類型的課件或者由于投資成本大（如基于編程為主的整體式課件），或者由于升級更新困難（如基于CDROM的多媒體課件），已不能滿足日益發(fā)展的需要。為了解決以上矛盾，伴隨著Web的出現(xiàn)和Web技術(shù)的發(fā)展，基于Web

的多媒體CAI課件（簡稱Web課件）應(yīng)運(yùn)而生，并得以迅速發(fā)展。

一、Web課件概述

（一）CAI課件

所謂CAI即計(jì)算機(jī)輔助教學(xué)(Computer Assisted Instruction),CAI課件又稱課程軟件，是設(shè)計(jì)用來做教學(xué)用的教育方面的軟件，是在計(jì)算機(jī)上運(yùn)行的教學(xué)輔助軟件，主要分布演示、靈活查詢、仿真教學(xué)和模擬實(shí)驗(yàn)等功能。

CAI課件具有教學(xué)生動、形象、直觀的特點(diǎn)，其優(yōu)點(diǎn)主要表現(xiàn)為：

1、采用動態(tài)視頻圖像進(jìn)行完整演示、分解慢放、重新回放的教學(xué)手段，便于學(xué)習(xí)者通過感官接收教育信息，加深理解。

2、具有CAI教育觀念和教育策略的特點(diǎn)，將學(xué)習(xí)者置于構(gòu)件好的教學(xué)環(huán)境中，提供大量的知識和教學(xué)信息資料，可在校園網(wǎng)上運(yùn)行或進(jìn)行遠(yuǎn)程教學(xué)，不受時(shí)間和空間限制。

3、采用發(fā)現(xiàn)式教學(xué)策略，使學(xué)習(xí)者真正參與到教學(xué)中，成為教學(xué)的主體，最大限度地發(fā)揮他們學(xué)習(xí)的能動性。

（二）Web課件

Web課件即基于Web的多媒體CAI課件，它以Internet技術(shù)為根基，將分布于不同地點(diǎn)的教師、學(xué)生和多媒體CAI課件聯(lián)結(jié)在一起，其本質(zhì)是一種Web應(yīng)用程序。

Web課件的優(yōu)點(diǎn)主要表現(xiàn)為：

1、作為Web課件這種全新類型課件的平臺，Web本身具有統(tǒng)一的協(xié)議標(biāo)準(zhǔn)，良好的跨平臺特性和前所未有的廣泛的覆蓋性的優(yōu)點(diǎn)。在其上開發(fā)出來的軟件有著統(tǒng)一的良好的GUI界面，能夠支持多種多媒體格式，可提供高度的交互性，與其他的應(yīng)用程序有著方便良好的接口，特別是本身便以超鏈接作為組織形式，因此其非常合適作為課件開發(fā)平臺。

2、用以開發(fā)、維護(hù)基于Web的軟件的工具大多可以免費(fèi)獲得，基于Web的課件對運(yùn)行的軟硬件平臺也沒有什么很高的特殊要求，這使得基于Web的CAI課件的開發(fā)維護(hù)費(fèi)用相對低廉；目前種種“所見即所得”的全圖形化的開發(fā)和維護(hù)工具也使得對開發(fā)維護(hù)人員的技術(shù)水平要求相對降低；由于各網(wǎng)頁之間相對獨(dú)立，因此可以十分容易的對課件進(jìn)行升級更新。另外在網(wǎng)絡(luò)教學(xué)中，基于Web頁的課件可以以網(wǎng)頁為單位在網(wǎng)絡(luò)中傳輸，具有較快的傳輸速度，在目前較低的帶寬下具有較好的應(yīng)用前景。

二、Web課件的設(shè)計(jì)

（一）Web課件的設(shè)計(jì)原則

為使Web課件更好地展示信息，傳播知識，在設(shè)計(jì)課件時(shí)應(yīng)注意以下原則：

1、交互性原則：軟件要有良好的交互性，及時(shí)對學(xué)生的學(xué)習(xí)活動作出相應(yīng)的反饋。

2、界面直觀友好原則；軟件界面要美觀，符合學(xué)生的視覺心理；操作要簡單，不需要大量的預(yù)備技能：提示信息要詳細(xì)、準(zhǔn)確、恰當(dāng)；要為使用者提供導(dǎo)航輔助。

3、創(chuàng)新能力培養(yǎng)原則：軟件應(yīng)采取多種教學(xué)策略，充分體現(xiàn)學(xué)生的認(rèn)知主體作用，使學(xué)生進(jìn)行積極的思考，從而在培養(yǎng)創(chuàng)新能力和增強(qiáng)信息化素養(yǎng)方面發(fā)揮應(yīng)有的作用。

4、科學(xué)原則：軟件中所要表達(dá)的知識要具有科學(xué)性，措辭要準(zhǔn)確，行文要流暢。

5、協(xié)作性原則：網(wǎng)絡(luò)教學(xué)軟件要充分發(fā)揮協(xié)作學(xué)習(xí)的優(yōu)勢，提供協(xié)作學(xué)習(xí)和協(xié)同工作的工具和網(wǎng)絡(luò)空間。

6、教學(xué)設(shè)計(jì)原則：要重視教學(xué)設(shè)計(jì)。注意分析學(xué)習(xí)者的特征、教學(xué)目標(biāo)和教學(xué)內(nèi)容的結(jié)構(gòu)、設(shè)計(jì)符合學(xué)生認(rèn)知心理知識的表現(xiàn)形式，設(shè)計(jì)能夠有力促進(jìn)主動建構(gòu)知識意義的學(xué)習(xí)策略。

（二）Web課件的交互功能的設(shè)計(jì)

Web課件可分為多種類型，如問題解決型、個(gè)別指導(dǎo)型等。各種類型的課件雖有各自不同的特點(diǎn)，但其都具有一共同的特性，即實(shí)時(shí)交互性。課件的交互性是課件設(shè)計(jì)的關(guān)鍵。實(shí)現(xiàn)課件的交互功能可以有以下方法：

1、鼠標(biāo)的交互作用。為更多地發(fā)揮鼠標(biāo)的交互作用，可以利用JavaScript腳本語言對MouseOver事件的處理功能，實(shí)現(xiàn)在課件中產(chǎn)生鼠標(biāo)觸摸的交互效果。如果我們感到Web狀態(tài)欄的提示不足以引起學(xué)生的重視和注意，還可以將OnMouseOver的處理定義成“window．a(chǎn)lert”的控制方式，在Web的正中彈出消息窗口。Alert消息窗口將windows應(yīng)用程序的工作焦點(diǎn)緊握在手，學(xué)生必須選擇窗口的確認(rèn)按鈕后才能繼續(xù)他們的學(xué)習(xí)。

2、ActiveX技術(shù)。采用ActiveX技術(shù)在Web頁面插入學(xué)習(xí)控件的工作窗口，且在設(shè)計(jì)這個(gè)控件時(shí)充分利用多媒體人機(jī)交互的特性，可實(shí)現(xiàn)HTML達(dá)不到的教學(xué)效果。

3、Internet的遠(yuǎn)程通訊功能?？梢允峭降膽?yīng)用形式，如：討論板、白板、軟件共享、網(wǎng)上電話、網(wǎng)上CHAT等；也可以是異步的應(yīng)用形式，如：電子郵件、BBS、網(wǎng)上查詢等。這些應(yīng)用為Web課件實(shí)現(xiàn)討論學(xué)習(xí)模式、集中授課模式、探索學(xué)習(xí)模式等奠定了基礎(chǔ)。

（三）Web課件的基本結(jié)構(gòu)設(shè)計(jì)

根據(jù)網(wǎng)上教學(xué)的特點(diǎn)和人才培養(yǎng)的需要，結(jié)合基于校園網(wǎng)的多媒體CAI課件實(shí)例，Web課件的基本結(jié)構(gòu)設(shè)計(jì)之解決方案如圖1所示。

（四）Web課件的導(dǎo)航設(shè)計(jì)

由于Web課件信息量巨大，內(nèi)部信息之間的關(guān)系可能異常復(fù)雜。為避免學(xué)生迷失方向，除了要求在信息結(jié)構(gòu)上要合理設(shè)計(jì)外，對信息的導(dǎo)航策略要求也十分重要。

圖1 Web課件的設(shè)計(jì)流程

導(dǎo)航策略用于Web課件，實(shí)際上是教學(xué)策略的體現(xiàn)。這是一種避免學(xué)習(xí)者偏離教學(xué)目標(biāo)，引導(dǎo)學(xué)習(xí)者進(jìn)行有效學(xué)習(xí)，提高學(xué)習(xí)效率的策略。在Web課件設(shè)計(jì)中，導(dǎo)航手段通常包括：檢索表單、索引表、幫助、線索、導(dǎo)航條、演示控制、書簽、框架結(jié)構(gòu)。

主框架可以是學(xué)習(xí)區(qū)，副框架則可用作動態(tài)導(dǎo)游圖，以顯示當(dāng)前的學(xué)習(xí)進(jìn)度，并可以點(diǎn)擊導(dǎo)游圖直接到達(dá)某個(gè)進(jìn)度；常見的導(dǎo)航界面技術(shù)有以下幾種：菜單、按鈕、宇體與顏色、圖像、動態(tài)表達(dá)。

三、基于校園網(wǎng)的Web課件的開發(fā)

下面結(jié)合基于校園網(wǎng)的多媒體CAI課件實(shí)例，探討Web課件的開發(fā)。

（一）開發(fā)技術(shù)

圖2 基于Web的B／S方案

目前基于Web的課件開發(fā)廣泛使用了B／S方案，如圖2所示，其關(guān)鍵技術(shù)主要包括W eb數(shù)據(jù)庫訪問技術(shù)、動態(tài)頁面制作技術(shù)、多媒體信息傳輸技術(shù)、虛擬實(shí)現(xiàn)技術(shù)等。該方案由客戶端（Web瀏覽器），Web服務(wù)器、課件數(shù)據(jù)庫服務(wù)器三層分布結(jié)構(gòu)組成，結(jié)構(gòu)的核心部分是Web服務(wù)器，通過CGI、API、ASP、PHP等幾種技術(shù)方案與課件資源數(shù)據(jù)庫服務(wù)器傳遞信息。

CGI（Common G ateway Interface）技術(shù)規(guī)范一度成為訪問數(shù)據(jù)庫的通用標(biāo)準(zhǔn)，但缺點(diǎn)是：當(dāng)站點(diǎn)訪問人數(shù)激增時(shí)，速度慢與效率低。為此出現(xiàn)了Web服務(wù)器技術(shù)API。API技術(shù)在速度上提升很大，但程序編寫復(fù)雜、數(shù)據(jù)庫功能弱，且只用于特定的Web服務(wù)器。新一代的ASP技術(shù)運(yùn)行速度快、數(shù)據(jù)庫操作功能強(qiáng)大，不足是只能運(yùn)行于個(gè)別平臺。PHP（Pesonal Homepage）作為一種跨平臺（可在UNIX、LINUX或 Windows上運(yùn)行）的網(wǎng)頁制作技術(shù)，其最大優(yōu)點(diǎn)是對數(shù)據(jù)庫層操作的功能強(qiáng)大，且操作簡單。

W e b課件的開發(fā)需要課件資源數(shù)據(jù)庫，因此W eb服務(wù)器與課件資源數(shù)據(jù)庫服務(wù)器之間的連接是開發(fā)Web課件的關(guān)鍵技術(shù)。

（二）開發(fā)工具

1、框架設(shè)計(jì)軟件

框架設(shè)計(jì)一般使用Front Page、Dreamweaver等軟件。FrontPage重視網(wǎng)頁的開發(fā)效率、易學(xué)易用；Dreamweaver有強(qiáng)大的網(wǎng)頁控制、設(shè)計(jì)能力及創(chuàng)意的完全發(fā)揮；Authorwware是多媒體創(chuàng)作工具，簡便易用，功能完善，可對其作品進(jìn)行網(wǎng)絡(luò)打包，創(chuàng)建網(wǎng)絡(luò)課件，以流方式進(jìn)行網(wǎng)上傳送；Director主要用于多媒體項(xiàng)目的集成開發(fā)；還可以使用PowerPoint、W ord等軟件制作網(wǎng)頁。

2、圖像處理軟件

Fireworks或PhotoShop等可進(jìn)行界面及藝術(shù)字的美觀設(shè)計(jì)。Fireworks是專為網(wǎng)絡(luò)圖形設(shè)計(jì)的軟件，簡化了網(wǎng)絡(luò)圖形設(shè)計(jì)的工作難度，適用于專業(yè)設(shè)計(jì)家和業(yè)余愛好者。PhotoShop是目前PC機(jī)上最好的通用平面美術(shù)設(shè)計(jì)軟件，它的功能完善，性能穩(wěn)定，使用方便。ACDSee也是一款很受歡迎的圖形瀏覽及圖形簡單處理軟件。

3、動畫制作軟件

Flash是網(wǎng)頁交互動畫制作工具，它具有矢量描述、播放流暢、數(shù)據(jù)量小、色彩鮮明等特點(diǎn)。幾何畫板是優(yōu)秀的演示工具，能準(zhǔn)確、動態(tài)地表達(dá)及演示幾何問題，還可打包成網(wǎng)頁格式，Cool3D是專門制作文宇3D效果的軟件。3Dmax是三維造型及動畫制作軟件，可制作AVI及FIC動畫。

4、聲音工具

Goldwave，及Soundforge是常用的音效處理軟件，能對聲音的格式轉(zhuǎn)換和效果進(jìn)行編輯。

5、訪問數(shù)據(jù)庫工具

通過CCI、API、ASP、PHP等技術(shù)可訪問課件資源數(shù)據(jù)庫服務(wù)器。

四、Web課件面臨的主要問題及解決方案

由于目前Web技術(shù)發(fā)展的局限性，使基于Web的課件方案也存在一些不足，主要是面臨網(wǎng)絡(luò)帶寬、網(wǎng)絡(luò)傳輸速度、平臺兼容性等問題的困擾。因此，在開發(fā)過程中必須對課件的頁面及兼容性進(jìn)行優(yōu)化，使之能在Web上很好的運(yùn)行，從而解決以上困擾。

（一）頁面優(yōu)化

頁面優(yōu)化的關(guān)鍵是頁面下載速度的優(yōu)化。課件頁面下載速度可分成三部分：下載時(shí)間、渲染時(shí)間和可視性，應(yīng)在這三者中找到一個(gè)平衡點(diǎn)，進(jìn)而產(chǎn)生理想的下載。

加快課件頁面下載的普遍原則是：

1、去除不必要的多媒體效果和內(nèi)容；

2、減少各種多媒體元素的大??；

3、優(yōu)先使用相同的圖形或多媒體內(nèi)容；

4、提供低帶寬備用內(nèi)容；

5、對不是所有人都有必要看到的大型多媒體文件另置一頁。

對圖形、表格以及其他多媒體元素作優(yōu)化處理，可有效加快課件頁面下載速度。

1、圖形優(yōu)化：減少圖形文件大小，如減小圖形面積、降低色彩深度、調(diào)整圖像中的對比水平等；

2、表格優(yōu)化：將一個(gè)單一的大表格拆成多個(gè)小表格門；適當(dāng)使用width屬性，定義的單元格寬度至少應(yīng)與內(nèi)容寬度一致，以避免瀏覽器對其進(jìn)行兩次渲染；盡量不要嵌套表格。

3、動畫優(yōu)化：對Direct或Authorware動畫應(yīng)盡量壓縮幀數(shù)，并使用流式傳輸處理，對一般網(wǎng)頁上常見的GIF動畫、FLASH動畫或JaveScript動畫應(yīng)盡量少用。

（4）背景音樂：優(yōu)先選用midi格式，如需語音，盡量使用男聲，這可以采用更低的設(shè)置。盡量將聲音做成可選設(shè)置，優(yōu)先選用流式聲音傳輸格式。

（5）腳本程序優(yōu)化：盡量將腳本嵌入頁面中，而不使用SRC屬性，因?yàn)檫@將引起對服務(wù)器的另一次情求，延長下載時(shí)間。

（二）兼容性優(yōu)化

在兼容性問題上，既要考慮課件對各種操作系統(tǒng)和硬件平臺的兼容性，更要考慮課件對各種瀏覽器的兼容性。

1、平臺兼容性優(yōu)化：Web本身的跨平臺特性已使我們免于多次開發(fā)，但為了使課件能夠在各種平臺上正常顯示，仍需要我們在定義潛在用戶群時(shí)考慮許多細(xì)節(jié)，包括：顯示器的分辨率和色深，對音頻和視頻的支持情況，各種平臺上相同字體的差異，各種平臺上顯示調(diào)色板之間的差別等。

2、瀏覽器兼容性優(yōu)化：瀏覽器版本不向后兼容性和各種瀏覽器不統(tǒng)一性，使課件開發(fā)者關(guān)心的問題是如何消除瀏覽器兼容性對課件開發(fā)的影響。目前Netscape和IE合計(jì)占瀏覽器市場的90%以上，所以開發(fā)時(shí)建議以IE為主，同時(shí)兼顧Netscap：對某些重要功能，則分別開發(fā)兩個(gè)版本，由服務(wù)器對用戶瀏覽器進(jìn)行判別后分別下載。在腳本語言方面Javascript是唯一選擇，因?yàn)榇蠖鄶?shù)主流瀏覽器均支持。

五、結(jié)束語

基于校園網(wǎng)及Web的多媒體CAI課件即Web課件是未來多媒體課的主要形式，也是將來發(fā)展網(wǎng)上教學(xué)的一個(gè)資源基礎(chǔ)。因此必須對這一有強(qiáng)大生命力的事物做深入的研究和開發(fā)，使其能夠以多種渠道、多種形式為教學(xué)服務(wù)，為實(shí)現(xiàn)教育現(xiàn)代化服務(wù)。

［1］高尚，趙宏，常桂然.基于W W W的遠(yuǎn)程教育課件設(shè)計(jì)中若干問題的解決[J].計(jì)算機(jī)應(yīng)用.1999,6

［2］周星，吳澤暉.開發(fā)基于web的CAI課件的實(shí)現(xiàn)技術(shù)[J].重慶大學(xué)學(xué)報(bào).2000．11

［3］邵波，袁勤儉.基于W e b的多媒體教學(xué)系統(tǒng)的構(gòu)筑和實(shí)現(xiàn)[J].現(xiàn)代圖書情報(bào)技術(shù). 2000，2

10.3969/j.issn.1001-8972.2011.12.122