王薇 楊鑫坤 解放軍信息工程大學

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

王薇 楊鑫坤 解放軍信息工程大學

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

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

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

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

一、Web課件概述

（一）CAI課件

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

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

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

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

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

（二）Web課件

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

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

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

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

二、Web課件的設計

（一）Web課件的設計原則

為使Web課件更好地展示信息，傳播知識，在設計課件時應注意以下原則：

1、交互性原則：軟件要有良好的交互性，及時對學生的學習活動作出相應的反饋。

2、界面直觀友好原則；軟件界面要美觀，符合學生的視覺心理；操作要簡單，不需要大量的預備技能：提示信息要詳細、準確、恰當；要為使用者提供導航輔助。

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

4、科學原則：軟件中所要表達的知識要具有科學性，措辭要準確，行文要流暢。

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

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

（二）Web課件的交互功能的設計

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

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

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

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

（三）Web課件的基本結(jié)構設計

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

（四）Web課件的導航設計

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

圖1 Web課件的設計流程

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

主框架可以是學習區(qū)，副框架則可用作動態(tài)導游圖，以顯示當前的學習進度，并可以點擊導游圖直接到達某個進度；常見的導航界面技術有以下幾種：菜單、按鈕、宇體與顏色、圖像、動態(tài)表達。

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

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

（一）開發(fā)技術

圖2 基于Web的B／S方案

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

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

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

（二）開發(fā)工具

1、框架設計軟件

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

2、圖像處理軟件

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

3、動畫制作軟件

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

4、聲音工具

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

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

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

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

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

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

頁面優(yōu)化的關鍵是頁面下載速度的優(yōu)化。課件頁面下載速度可分成三部分：下載時間、渲染時間和可視性，應在這三者中找到一個平衡點，進而產(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)化：將一個單一的大表格拆成多個小表格門；適當使用width屬性，定義的單元格寬度至少應與內(nèi)容寬度一致，以避免瀏覽器對其進行兩次渲染；盡量不要嵌套表格。

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

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

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

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

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

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

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

五、結(jié)束語

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

［1］高尚，趙宏，常桂然.基于W W W的遠程教育課件設計中若干問題的解決[J].計算機應用.1999,6

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

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

10.3969/j.issn.1001-8972.2011.12.122