用備課系統(tǒng)開發(fā)遠程教育課件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

基于ARM的實時測控系統(tǒng)開發(fā)平臺08-06

課件制作技巧08-17

漫談課件制作08-17

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