网上多媒体CAI课件的制作技术与实.doc

网上多媒体CAI课件的制作技术与实践炮兵学院南京分院 李建春 钟立国摘要：本文就基于Internet与Intranet的网上多媒体CAI课件的制作技术作一探讨，重点讨论了课件的制作模式与方法以及按钮的制作技术，并以工程制图为例，说明了网上多媒体课件的组成结构。关键词：Internet、Intranet、多媒体、超媒体、超链接、WWW、HTML、课件1.概述随着科学技术的不断发展，计算机技术、电信网络技术和电磁光存储技术不断更新发展，信息的纪录载体和记录手段、传播方式日趋多样化。学校教学手段，随着科学的发展、CAI课件的研究和运用水平日趋提高与广泛。90年代初期CAI课件的制作只限于一般语言编程，到了90年代中期随着计算机运算速度的提高，存储容量的进一步扩大，出现单机多媒体课件，它把声音、动画、视频、文字多种媒体整合到一个平台上同时演示，使教师与学生都感受到震动，教学质量有了很大提高。如今，到了90年代末期，计算机技术已发展到网络时代，多媒体教学手段不再是单个人所拥有，通过校园网络，教师在任一课堂，学生在任一地点通过网络都可以使用到教学课件，使教学课件这一资源由独享变成共享，尤其远程教育的推广与发展，网上CAI课件，网上多媒体课件将越来越受到人们的重视，使用也越来越普及，越来越广泛。本文就基于Internet与Intranet的网上多媒体CAI课件的制作技术作一探讨。2.网上多媒体课件的特点与要求多媒体课件是把文字、声音、图象、动画等多种媒体集于一体呈现给读者，一般文件很大，一堂课的课件（用Authorware制作）大小一般在20MB左右。这用光盘存储在单机上运行尚可，若在网上运行，则因文件太大未经压缩处理而不好使用。这是因为网络传输都有一定的带宽限制。为此，网上多媒体课件的制作应注意以下一些问题：(1)多用文字，少用图片与动画，即使用图片与动画也要文件的容量小，对图片来说一般用JPG格式。(2)动画尽量使用二维动画，像GIF动画或Flash动画。(3)一个显示页面文件最大不要超过40KB。(4)从选择要看页面算起到经网上下载完于浏览器看到该页为止最好不要超过30秒钟。(5)图形文件尽量使用颜色少的图形格式以减小文件大小。3.网上多媒体课件的制作模式基于个人计算机的多媒体课件制作，可以使用多种软件平台。因为不受文件容量的限制，几乎是百家争鸣的局面，但网络多媒体课件依托于网络，在网上运行，一方面要求网络带宽要大，另一方面它也受到技术支持及文件容量的制约。网络多媒体CAI课件的制作是基于万维网（WWW）的Web网页制作技术，它的使用是通过Web浏览器运用超媒体和超链接技术而实现的。Web能够交互运行又是得力于HTTP（Hyper Text Transport Protocol 超文本传输协议）的规范。其原理是，当Web浏览器向服务器要求回答文件时，就是使用HTTP来沟通。在HTTP协议中，Web浏览器对Web服务器所要求的每份文件都是一个新的链接。网上多媒体技术开发应用起步较晚，目前开发的成熟系统还不多，笔者就目前开发的系统模式作一介绍。3.1 利用动态服务器网页技术（ASP Active Server Pages）实现对网上多媒体教学系统的控制采用这种技术，首先设计出课件文稿后，用Authorware多媒体整合平台制作出软件原文件。经调试完成后，在打包的时候把程序打包成.a4r文件，然后使用Authorware Afterburner来压缩和分割成一些后缀为.aam的小程序，然后在Frontpage Editor编辑窗口中把.aam文件象插入PlugIns的方法一样把.aam文件插入到一页中。当需运行软件时，如果需要这些分割了的小程序，它们会自动下载到用户的计算机中，这样就把多媒体课件打包成在网络上运行的网络版，安装在NT服务器上，其管理控制模块写成ASP文件，放在服务器上,应用时浏览器引用服务器上的一个ASP文件，执行它的脚本，处理特殊的HTML标记，然后将HTML返回给浏览器。3.2基于WWW的Web网页制作技术来制作课件采用这种技术与制作网页没有根本区别，只是形式上的差异。一般采用Frontpage作为制作平台，也可用其它软件平台，比如，Dreamweaver网页制作工具等，辅以HTML、VRML、Java、Script（用的最多的为：JavaScript、 VBScript)编程,虚拟现实技术及Activex控件、PlugIns插件的使用。课件的组织架构以页面为单位，通过超链接技术，按线性、非线性、层状等不同结构，构架课件实体。课件制作的另外一种模式，是把教学资料做成若干个材料库，按照需要，用写成的编辑程序另时组成课件，这种积件式的课件便于更改，便于增加，具有更好的灵活性。4.按钮的设计技术在网络多媒体课件的制作过程中，超链接的启动是通过超文本与图标作为触发体，而图标做成各种形状并小型化后即成了按钮。在多媒体课件的制作过程中，除了内容丰富、实用外就是美观大方，要做到界面的美观大方除了布局合理、色彩搭配得当外就是按钮的设计。下面就课件中常用按钮的设计技术作一介绍。4.1静态按钮静态按钮制作在网络多媒体课件的界面设计中占有很重要位置，一个页面按钮设计得美观得体，将给人留下深刻印象。按钮的设计一般都采用Photoshop为工具，其步骤如下：(1)在新立或已打开的文件上，用矩形或椭圆形选取工具建立自己需要的按钮形状的选区。建立选区前，在打开的工具选择对话框中把羽化参数设定一个需要值。(2)在选区内填上所需的颜色或图案。(3)复制选区的画面。(4)建立新层，并粘贴上选区画面。(5)点击Layer/Effects（图层/效果）菜单，并选择Bevel and Emboss选项。(6)在弹出的Bevel and Emboss对话框中输入所需参数，并点击确定钮。目前，用于制按钮的软件很多，除了Photoshop外，常用的还有PhotoImpact、Imagestyler 、WebtnFactory等，尤其Photoshop5.5它把Imagestyler2.0集成在一起，用起来更为方便。4.2动态按钮动态按钮是在鼠标指向或点击时改变按钮颜色或改变图案而使软件增色不少，因而，一般的按钮都采用此技术。4.2.1用Frontpage 制作动态按钮的制作通常是用Frontpage 软件，其制作步骤如下：(1)在Frontpage 98的Editor窗口中，点击Insert菜单。(2)选择Insert菜单中的Active Element选项。(3)在Active Element选项中，选择Hover Button子选项。(4)在弹出的对话框内输入完参数，点击OK钮。此时在预览窗口中就可预览效果。当你用Dreamweaver软件制作课件时，动态按钮的制作与用Frontpage制作过程相似。4.2.2用JavaScript语言编程制作若希望你的按钮在正常情况下是一个画面，在鼠标滑过时又变成另一画面，用JavaScript语言编程可以实现。其方法是把编写的程序嵌入到页面的HTML文档中。步骤如下：(1)定义两个变量bu1、 bu1ff，并给它们赋值。(2)写两个函数。(3)在本页的HTML文档中插入JavaScript函数体的调用。下面是一个按钮的JavaScript的程序清单：<Script LANGUAGE=“JavaScript”>bu1=new Image();bu1.src="No1.gif"；bu1ff=new Image();bu1ff.src="No2.gif"function img-mouseover (imgName) imgon=eval(imgName+"on.src");document? imgName? .src=imgon;function img-mouseout(imgName) imgoff=eval(imgName+"off.src");document? imgName? . src=imgoff;</script> 5.工程制图网上多媒体课件的制作5.1课件结构课件采用WWW的Web页面制作模式，其结构为三层的交互式架构。工程制图课堂教学系统 制 正 三 截 组 机 轴 标 机 习 解图 投 交 件 准 基 法 视 与 合 形 测 件 械 本 基 相 状 与 知 础 图 贯 体 表 图 常 图 题 答识 方 用法 件投 点 线 面 体影 的 的 的 的法 投 投 投 投概 影 影 影 影念 平 圆 圆 球面 柱 锥 立 体 体 体体5.2制作注意事项(1)每一页不但要有与上一层下一层相链接，而且也必须与根页相链接。(2)每一页的页眉与页脚均有链接按钮。(3)采用单页制作,按钮热链接技术、共享边界技术，这样有较好的可扩展性。(4)尽量把AVI和FLC动画变成GIF动画。(5)每页要有声音控制按钮。(6)课件字的大小不小于30。附：论文完成人基本情况：李建春部别：炮兵学院南京分院计算机教研究室职别：讲师，教研室主任学历：本科年龄：35岁取得的主要学术成果： 参研的“工程制图多媒体课件”院评比一等奖。1. 参加由兵器工业出版社出版的“工程制图”一 书的编写工作。2. 撰写多篇学术论文在全军与全国性学术会议及刊物上发表。 钟立国部别：炮兵学院南京分院计算机教研究室职别：付教授学历：本科年龄：58岁取得的主要学术成果：1. 撰写的“模拟系统中图形软件设计”一文，在1991 年北京国际图学会议上发表。 完成列装产品微波测距仪测地软件的研制任务。 研制的“工程制图多媒体课件”获院评比一等奖。参加由兵器工业出版社出版的“工程制图”一书的编写工作。参加由高教出版社出版的“工程制图”一书的编写工作。撰写多篇学术论文在全军与全国性学术会议及刊物上发表。