用備課系統(tǒng)開(kāi)發(fā)遠(yuǎn)程教育課件

摘要：本文介紹了一種使用簡(jiǎn)單、方便的遠(yuǎn)程教育課件開(kāi)發(fā)工具--備課系統(tǒng)并對(duì)其中使用的將RTF文件轉(zhuǎn)換成HTML格式文件的技術(shù)和課件框架生成的技術(shù)做了詳細(xì)的說(shuō)明，并且給出了制作完成的課件的效果。

關(guān)鍵字：遠(yuǎn)程教育、備課系統(tǒng)、課件、RTF文件、HTML文件

一、前言
隨著Internet的不斷普及，網(wǎng)上的各種素材和資料越來(lái)越多，也越來(lái)越豐富，這給網(wǎng)絡(luò)遠(yuǎn)程教育的迅速發(fā)展帶來(lái)了機(jī)會(huì)。越來(lái)越多的網(wǎng)絡(luò)課件被開(kāi)發(fā)出來(lái)，給老師和學(xué)生的教與學(xué)帶來(lái)了極大的方便�？墒沁@些課件一般都是由某個(gè)或某些老師根據(jù)自己的需要和講課習(xí)慣來(lái)編寫(xiě)制作的，有很濃的個(gè)人特色。而對(duì)于其他的學(xué)校、其他的老師，這些課件往往不能滿足他們的要求。但是制作自己課件又需要很大的工作量，導(dǎo)致許多老師對(duì)于網(wǎng)絡(luò)遠(yuǎn)程教育望而止步。怎樣才能夠讓老師們能快速，方便的制作自己的課件呢？

二、備課系統(tǒng)
本文介紹一個(gè)由暨南大學(xué)軟件工具研究所研制開(kāi)發(fā)的網(wǎng)絡(luò)課件開(kāi)發(fā)工具--老師備課系統(tǒng)。這個(gè)系統(tǒng)的主要功能是將文字，圖片，聲音，動(dòng)畫(huà)等素材以編輯文檔的方式制作成老師的課件，然后將課件轉(zhuǎn)換成網(wǎng)頁(yè)的形式發(fā)布到網(wǎng)上，老師就可以進(jìn)行遠(yuǎn)程教學(xué)了。系統(tǒng)的操作界面與Microsoft
word非常相似（如圖1），對(duì)于那些熟悉word的老師來(lái)說(shuō)操作起來(lái)就駕輕就熟了。系統(tǒng)還提供課件框架生成器，以樹(shù)形目錄的方式管理課件中的網(wǎng)頁(yè)，這樣老師講課就可以更加清晰有條理了。

 
圖1
系統(tǒng)用的核心技術(shù)是將Microsoft word支持的一種通用的文件格式--Rich text format(RTF)，轉(zhuǎn)換成網(wǎng)頁(yè)的格式--html。對(duì)于許多人來(lái)說(shuō)，html已經(jīng)十分熟悉了，可是對(duì)于RTF則不太了解，下面就來(lái)分析一下RTF的結(jié)構(gòu)。

三、RTF文件格式
RTF的結(jié)構(gòu)其實(shí)并不復(fù)雜，實(shí)際上每個(gè)RTF文件都是一個(gè)文本文件，里面包括"命令"和"正文"，然后由編輯器來(lái)解釋這個(gè)文本文件，分析里面的各種命令，并將相應(yīng)的正文顯示出來(lái)。
RTF文件中的命令都是一些以"\"符號(hào)開(kāi)始的字符串，例如在文件的一開(kāi)始就以"\rtf"來(lái)表示這個(gè)文件是一個(gè)RTF格式的文件。另外一個(gè)完整的RTF文件包括文件頭和文件體兩部分。在文件頭中包括字體表、文件表、顏色表的幾個(gè)數(shù)據(jù)結(jié)構(gòu)，文件體中的字體、表格的風(fēng)格都是根據(jù)文件頭中的信息來(lái)格式化的。文件頭中的每一個(gè)表都以一對(duì)大括號(hào)括起來(lái)。下面就是一個(gè)顏色表的例子。
{\colortbl;\red0\green0\blue0;\red0\green0\blue255;\red0\green255\blue255;\red0\green255\blue0;\red255\green0\blue255;\red255\green0\blue0;\red255\green255\blue0;\red255\green255\blue255;\red0\green0\blue128;\red0\green128\blue128;\red0\green128\blue0;\red128\green0\blue128;\red128\green0\blue0;\red128\green128\blue0;\red128\green128\blue128;\red192\green192\blue192;}
首先由一個(gè)"\colortbl"來(lái)表示大括號(hào)內(nèi)是顏色表，然后由\red0\green0\blue0來(lái)表示正文顯示時(shí)用到的一種顏色。這種顏色的紅綠藍(lán)分量分別都是0。其他以此類推，兩種顏色之間用分號(hào)隔開(kāi)。在內(nèi)容中以"\cf0"命令來(lái)表示當(dāng)前的文字用第0號(hào)顏色來(lái)顯示。
文件體由版面格式化命令、正文和各種特殊命令組成的。版面格式化命令是用來(lái)控制要顯示的正文的字體，顏色和其他與版面有關(guān)的項(xiàng)目的。而特殊的命令則是在顯示一些例如圖象，表格等特殊正文時(shí)所使用的。有一些特殊命令會(huì)用到大括號(hào)來(lái)括住他的一些子命令，但無(wú)論如何，左大括號(hào)的數(shù)目和右大括號(hào)的數(shù)目中是一一對(duì)應(yīng)的（注意：整個(gè)RTF文件也由一對(duì)大括號(hào)括起來(lái)）。另外，在由于字符"\"用來(lái)表示命令的開(kāi)始，所以用"\\"來(lái)表示正文中的字符"\"。
對(duì)于中文字，RTF文件進(jìn)行了特殊的處理，眾所周知，一個(gè)中文字是由一個(gè)16位的數(shù)字組成的內(nèi)碼來(lái)表示的，也就是兩個(gè)ASCII字符的長(zhǎng)度。RTF文件中并不是簡(jiǎn)單的將這兩個(gè)ASCII字符放在正文中，因?yàn)檫@樣會(huì)引起特殊ASCII字符和中文字的沖突。RTF文件使用了命令的方式來(lái)表示中文字："\'內(nèi)碼1\'內(nèi)碼2"其中的內(nèi)碼是以文本的方式存儲(chǔ)的。例如"老師備課系統(tǒng)"在RTF中表示為"\'c0\'cf\'ca\'a6\'b1\'b8\'bf\'ce\'cf\'b5\'cd\'b3"。
另外，RTF文件對(duì)圖形的處理是一個(gè)很重要的問(wèn)題，也是實(shí)現(xiàn)備課系統(tǒng)的一個(gè)難點(diǎn)。在RTF文件中，圖形以兩種方式存在。第一種是直接嵌入的方式，以"\pict"命令開(kāi)始，第二種方式將圖片作為OLE對(duì)象嵌入，以"\object"命令開(kāi)始。并且無(wú)論以那種方式，整個(gè)圖片的數(shù)據(jù)都是由一對(duì)大括號(hào)括起來(lái)的（即"{\object
……}"）。每一個(gè)OLE對(duì)象在RTF中分為兩個(gè)部分，第一部分是OLE的數(shù)據(jù)，如果RTF的文件解釋器能進(jìn)行OLE操作時(shí)，可以利用這部分的數(shù)據(jù)得到OLE的屬性參數(shù)并對(duì)其進(jìn)行修改顯示，第二部分由"\result"命令引出，后面跟的其實(shí)是一個(gè)圖片，當(dāng)RTF的文件解釋器不能進(jìn)行OLE操作時(shí)，則可以簡(jiǎn)單的顯示該圖片。但這樣就不能對(duì)該OLE對(duì)象進(jìn)行修改了。圖片數(shù)據(jù)是以Microsoft內(nèi)部使用的一種矢量圖"METAFILE"格式來(lái)存儲(chǔ)的。在RTF中存放了一個(gè)完整的METAFILE文件，但其數(shù)據(jù)是以ASCII字符的方式存在。由于大多數(shù)瀏覽器都不支持這種格式的圖片文件，因此需要將其轉(zhuǎn)換成通用的圖片格式，例如：BMP、GIF、JPG等等，但是在Microsoft
Windows的軟件開(kāi)發(fā)手冊(cè)中沒(méi)有對(duì)METAFILE進(jìn)行說(shuō)明，因此無(wú)法對(duì)起進(jìn)行直接的轉(zhuǎn)換，但是在Microsoft Windows的軟件開(kāi)發(fā)包(SDK)（software
develop kid）中有兩個(gè)函數(shù)"GetMetaFile"和"PlayMetaFile"，這兩個(gè)函數(shù)可以將一個(gè)METAFILE格式的圖片直接顯示在屏幕上，這樣就為格式的轉(zhuǎn)換提供了方便，方法是：首先將以ASCII字符形式存放在RTF中的METAFILE文件變成以16進(jìn)制數(shù)形式存放的獨(dú)立的文件保存在磁盤(pán)的一個(gè)臨時(shí)文件中，然后用"GetMetaFile"和"PlayMetaFile"將其顯示在屏幕上（這里的屏幕實(shí)際上是一個(gè)虛擬的屏幕，即在內(nèi)存中建立一個(gè)假的屏幕數(shù)據(jù)結(jié)構(gòu)--Memory
DC，里面有虛擬的顯示內(nèi)存，因此在實(shí)際的屏幕上看不見(jiàn)圖片的顯示）

。然后用抓圖的方法就可以將圖片的像素取出來(lái)并將其保存成BITMAP圖片格式文件了。再通過(guò)一些通用的圖形轉(zhuǎn)換程序就可以將其保存成容量比較小的GIF或JPG格式了。（具體程序如附錄1）
下面具體介紹一下從RTF轉(zhuǎn)換成HTML的流程，流程圖如圖2：

圖2
轉(zhuǎn)換的流程其實(shí)也是很簡(jiǎn)單的，就是搜尋命令字的前導(dǎo)符"\"，然后對(duì)其后面的命令進(jìn)行相應(yīng)的處理，要注意的是大括號(hào)的匹配，因?yàn)檫@會(huì)直接影響到命令的作用域問(wèn)題，一般在進(jìn)入一個(gè)命令的處理程序后，如果發(fā)現(xiàn)有左大括號(hào)存在，則這個(gè)命令會(huì)一直起作用，直到有相應(yīng)的右括號(hào)與其相匹配為止，如果有大括號(hào)的嵌套，則命令將一直起作用到所有的左大括號(hào)都有相應(yīng)的右大括號(hào)與其匹配為止（正文中的大括號(hào)用"\{"、"\}"來(lái)表示）。
有了RTF到HTML的轉(zhuǎn)換器，備課系統(tǒng)可以說(shuō)已經(jīng)完成了一半了（圖3所示就是圖1的RTF文檔轉(zhuǎn)成的html后的效果）。
圖3

四、課件框架生成器
為了老師上課的方便，單單將一個(gè)文檔變成網(wǎng)葉是不夠的，老師講課是根據(jù)一定的層次、一定的順序來(lái)講課的，所以還要增加一個(gè)課件框架生成器，這里利用了一個(gè)控件"Treeview"，這個(gè)控件可以顯示一個(gè)樹(shù)形的數(shù)據(jù)結(jié)構(gòu)，利用每個(gè)節(jié)點(diǎn)帶有的屬性（key表示接點(diǎn)的ID；tag表示節(jié)點(diǎn)所連接的網(wǎng)頁(yè)路徑；text表示節(jié)點(diǎn)的名稱）就可以樹(shù)的形式顯示一個(gè)課件的層次關(guān)系了。（如圖4）

圖4
這個(gè)樹(shù)的結(jié)構(gòu)可以存盤(pán)，以便下次老師修改。另外還可以通過(guò)javascript將其在網(wǎng)頁(yè)上顯示出來(lái)，具體的做法是：首先編寫(xiě)一段javascript程序（如附錄2）用來(lái)把一個(gè)數(shù)組在網(wǎng)頁(yè)上顯示成樹(shù)結(jié)構(gòu)形式，其中數(shù)組的部分用一個(gè)標(biāo)識(shí)符號(hào)標(biāo)記，當(dāng)每次要生成課件框架的時(shí)候先將數(shù)形數(shù)據(jù)結(jié)構(gòu)以數(shù)組的形式存放，然后將數(shù)組信息替換掉這個(gè)標(biāo)識(shí)符號(hào)，這樣在網(wǎng)頁(yè)上看到的就是Treeview控件中的數(shù)形結(jié)構(gòu)。（圖5就是圖4的樹(shù)結(jié)構(gòu)在ie上顯示的結(jié)果）

圖5
為了老師使用的方便，系統(tǒng)還提供了超連接、資源管理器、java小程序連接和聲音圖象連接等功能。這樣就形成了一套足夠老師日常備課所使用的備課系統(tǒng)。另外，系統(tǒng)還提供了課件的上載功能，只要老師按要求設(shè)置好服務(wù)器，以后增加或修改課件是非常方便的。但由于我們的著眼點(diǎn)是面向老師使用的系統(tǒng)而不是給一些專業(yè)人士使用的，為了使老師更加方便的使用本系統(tǒng)，系統(tǒng)將一些復(fù)雜的操作盡量簡(jiǎn)化，這樣做帶來(lái)的結(jié)果是功能不能與"fontpage"等專業(yè)軟件相提并論論，可是本系統(tǒng)也有自己的特點(diǎn)是"fontpage"沒(méi)有的，例如"課件框架生成器"。另外，word里面也有將RTF另存為html的功能，但是起轉(zhuǎn)換器經(jīng)常將不能將圖片完全轉(zhuǎn)換出來(lái)。而且老師要用word來(lái)制作一個(gè)完整的課件需要許多工具的配合，給一些對(duì)電腦不太熟悉的老師帶來(lái)了很大的麻煩。本系統(tǒng)為老師提供了完整的制作課件的環(huán)境，從最初的制作到最后的發(fā)布到網(wǎng)上，都有支持，因此與其他的一些系統(tǒng)相比，有其獨(dú)特的地方。當(dāng)然本系統(tǒng)也還有許多不足之處，例如對(duì)表格的轉(zhuǎn)換，由于RTF文檔中的命令隨著要求的不斷提高而改變，特別是表格的處理命令每個(gè)版本的RTF都有修改，因此很難對(duì)表格進(jìn)行支持，所以需要老師將表格轉(zhuǎn)換成圖片才能顯示表格。




附錄1 將metafile轉(zhuǎn)換成bitmap的程序段
int WmfToBmp(int width,int height,char *metafile,char *targetBmp)
{
HMETAFILE hmf;
OFSTRUCT of;
int fh;
HDC hMemDC,hDisplayDC;
HBITMAP hbmp,hold;
BITMAPFILEHEADER hdr;
LPBITMAPINFOHEADER lpbmpih;
HGLOBAL hg;
unsigned int j;
char FileBuffer[640*480];

hmf=::GetMetaFile(metafile);
hDisplayDC=CreateDC("DISPLAY",NULL,NULL,NULL);
hMemDC=::CreateCompatibleDC(hDisplayDC);
hbmp=::CreateCompatibleBitmap(hDisplayDC,width,height);
hold=(HBITMAP)::SelectObject(hMemDC,hbmp);
PatBlt(hMemDC,0,0,width,height,WHITENESS);
SetMapMode(hMemDC,MM_ANISOTROPIC);
SetWindowOrgEx(hMemDC,0,0,NULL);
SetViewportExtEx(hMemDC,width,height,NULL);
PlayMetaFile(hMemDC,hmf);
hbmp=(HBITMAP)::SelectObject(hMemDC,hold);

if((fh=OpenFile(targetBmp,&of,OF_CREATE|OF_READWRITE))==-1)
{
return 0;
}
hdr.bfType=0x4d42;
hdr.bfSize=sizeof(BITMAPFILEHEADER)+sizeof(BITMAPINFOHEADER)+2*256*sizeof(RGBQUAD)+width*height;
hdr.bfReserved1=0;
hdr.bfReserved2=0;
hdr.bfOffBits=sizeof(BITMAPFILEHEA

DER)+sizeof(BITMAPINFOHEADER)+256*sizeof(RGBQUAD);
_lwrite(fh,(LPSTR)&hdr,sizeof(BITMAPFILEHEADER));
hg=GlobalAlloc(GHND,sizeof(BITMAPINFOHEADER)+256*sizeof(RGBQUAD));
lpbmpih=(LPBITMAPINFOHEADER)GlobalLock(hg);
lpbmpih->biSize=sizeof(BITMAPINFOHEADER);
lpbmpih->biWidth=width;
lpbmpih->biHeight=height;
lpbmpih->biPlanes=1;
lpbmpih->biBitCount=8;
lpbmpih->biCompression=0;
lpbmpih->biSizeImage=width*height;
lpbmpih->biXPelsPerMeter=3790;
lpbmpih->biYPelsPerMeter=3780;
lpbmpih->biClrUsed=256;
lpbmpih->biClrImportant=0;
j=GetDIBits(hMemDC,hbmp,0,height,NULL,(BITMAPINFO*)lpbmpih,DIB_RGB_COLORS);
lpbmpih->biSize=sizeof(BITMAPINFOHEADER);
_lwrite(fh,(LPSTR)lpbmpih,sizeof(BITMAPINFOHEADER)+256*sizeof(RGBQUAD));
j=GetDIBits(hMemDC,hbmp,0,height,(LPSTR)FileBuffer,(BITMAPINFO*)lpbmpih,DIB_RGB_COLORS);

if(j==0)
{
LPVOID lpMsgBuf;
FormatMessage(FORMAT_MESSAGE_ALLOCATE_BUFFER |
FORMAT_MESSAGE_FROM_SYSTEM | FORMAT_MESSAGE_IGNORE_INSERTS, NULL,
GetLastError(),
MAKELANGID(LANG_NEUTRAL, SUBLANG_DEFAULT),
(LPTSTR) &lpMsgBuf, 0, NULL );
MessageBox( NULL, (LPCTSTR)lpMsgBuf, "Error", MB_OK | MB_ICONINFORMATION );
LocalFree( lpMsgBuf );
}
_hwrite(fh,(LPSTR)FileBuffer,256*sizeof(RGBQUAD)+width*height);
_lclose(fh);
GlobalUnlock(hg);
GlobalFree(hg);
DeleteDC(hMemDC);
DeleteDC(hDisplayDC);
DeleteObject(hbmp);
DeleteObject(hold);
DeleteMetaFile(hmf);
return 0;
}
附錄2 將數(shù)組顯示在網(wǎng)頁(yè)上的javascript程序
<html>
<head>
<style type="text/css">
<!--
.font {font-size: 9pt ; line-height:13pt;}
.fontlittle{font-size:9pt;}
A{text-transform: none; text-decoration: none;color:blue;}
a:hover {text-decoration:underline;color:red;}
-->
</style>
<title> 老師備課系統(tǒng) </title>
<SCRIPT LANGUAGE="javascript">
<!-- begin hiding of script

var ItemName=new Array();
var ItemLink=new Array();
var ItemID=new Array();
var ItemPre=new Array();
var IDArray=new Array();
var IDLen;
var ItemNumber=@%TOTALITEMNUMBER%@;
var TreeFileName="@%TREEFILENAME%@";

function Initialize()
{
@%INITIALIZEITEM%@

if(location.search==""){IDLen=0;}
else
{
var tmpstr=new String();
tmpstr=location.search;
tmpstr=tmpstr.substring(1,tmpstr.length);
IDLen=tmpstr.length;

for(i=0;i<tmpstr.length;i++)
{
IDArray[i]=tmpstr.substring(i,i+1);
}
}
}

function Extend(layer)
{
var FatherID="";
var ChildID=0;

for(j=0;j<layer-1;j++)
{
FatherID+=IDArray[j];
}
ChildID=FatherID;
ChildID+=IDArray[layer-1];

for(i=0;i<ItemNumber;i++)
{
if(ItemID[i].length==layer)
{
if(ItemID[i].substring(0,ItemID[i].length-1)==FatherID)
{
if(ChildID==ItemID[i])
{
for(k=0;k<layer;k++)
{ document.write("&nbsp;"); }
document.write("<a href='"+TreeF

ileName+"?"+ItemID[i].substring(0,ItemID[i].length-1)+"'><img
src='img/sub.gif' border=0></a><a href='"+ItemLink[i]+"' target=main>"+ItemName[i]+"</a><br>");
l=i;
Extend(layer+1);
i=l;
}
else
{
if(ItemPre[i]!="0")
{
for(k=0;k<layer;k++)
{ document.write("&nbsp;"); }
document.write("<a href='"+TreeFileName+"?"+ItemID[i]+"'><img src='img/plus.gif'
border=0></a><a href='"+ItemLink[i]+"' target=main>"+ItemName[i]+"</a><br>");
}
else
{
for(k=0;k<layer;k++)
{ document.write("&nbsp;"); }
document.write("<img src='img/point.gif' border=0><a href='"+ItemLink[i]+"'
target=main>"+ItemName[i]+"</a><br>");
}
}
}
}
}
}
// end script hiding -->

</SCRIPT>
</head>

<body>
<font size="2">
<SCRIPT LANGUAGE="javascript">
<!-- begin hiding of script
Initialize();
for(i=0;i<ItemNumber;i++)
{
if(ItemID[i].length==1)
{
if(IDArray[0]==ItemID[i])
{
document.write("<a href='"+TreeFileName+"?"+ItemID[i].substring(0,ItemID[i].length-1)+"'><img
src='img/sub.gif' border=0></a><a href='"+ItemLink[i]+"' target=main>"+ItemName[i]+"</a><br>");
l=i;
Extend(2);
i=l;
}
else
{
if(ItemPre[i]!=0)
{
document.write("<a href='"+TreeFileName+"?"+ItemID[i]+"'><img src='img/plus.gif'
border=0></a><a href='"+ItemLink[i]+"' target=main>"+ItemName[i]+"</a><br>");
}
else
{
document.write("<img src='img/point.gif' border=0><a href='"+ItemLink[i]+"'
target=main>"+ItemName[i]+"</a><br>");
}
}
}
}

// end script hiding -->
</SCRIPT>
</font>
</body>
</html>

【用備課系統(tǒng)開(kāi)發(fā)遠(yuǎn)程教育課件】相關(guān)文章：

用備課系統(tǒng)開(kāi)發(fā)遠(yuǎn)程教育課件08-06

用POWERPOINT課件提高《VB基礎(chǔ)編程》課的課堂效果08-13

MIS 系統(tǒng)開(kāi)發(fā)中的項(xiàng)目管理08-06

物資管理信息系統(tǒng)開(kāi)發(fā)08-06

基于DLL的虛擬儀器系統(tǒng)開(kāi)發(fā)08-06

基于ARM的實(shí)時(shí)測(cè)控系統(tǒng)開(kāi)發(fā)平臺(tái)08-06

課件制作技巧08-17

漫談?wù)n件制作08-17

蘇教版《繁星》課件08-16