多媒体教学网页的制作过程与技术

导语:本文以实际经验为依据,比较详细地论述了多媒体教学网页的制作过程、技术要点和注意事项,包括立题、素材的搜集、多媒体制作和网页的制作等内容。以下是小编整理的资料,欢迎阅读参考。

多媒体教学网页的制作过程与技术

关键词:多媒体、教学网页、制作

前言

计算机网络技术的飞速发展,使网络逐渐渗透到了人类生活的方方面面。特别是国际互联网的日益普及,越来越多的人们投入到网络这个无限的空间中去。在教育领域,将网络运用于教学,已越来越得到人们的重视。目前,各类多媒体软件很多。但一般的多媒体软件动辄两、三百兆,由于网络传输速率的限制,这样的庞然大物根本无法在网上应用;况且,就算网络速度跟得上,这些并非为网络量身定做的软件,其形式和链接关系也不适合在网络上使用。如何在现有条件下,把网络的快捷、方便、可共享等特性应用到教学中去,就成为一个关键而迫切的现实问题。

一个好的办法就是将教学内容制成多媒体网页(教学网站或网校),使学习者可以不受时间和空间的限制自由访问,并且在直接访问中了解和学习知识。本文以某一小型电源系统的调压器为例,对多媒体教学网页的制作过程和技术做一探讨。

一、前期准备工作

(一)教学内容的准备

主要是对教学内容进行选取,确定各部分内容的媒体形式。对字幕表述进行推敲,对其它形式定出表现方案,最后还是要形成一个脚本。

(二)图片素材的收集

1、背景图的取得

背景图的来源主要是书报资料和素材库光盘中的一些图片,如果图片效果不太理想,可以用photoshop进行必要的修饰。

2、实物图片的取得

一般没有现成的实物图片,我们可以找了一个比较完好的实物,从多个角度进行拍摄,分解后,再对各个部件进行拍摄。最后,选择出效果好的图片,利用扫描仪扫描得到数字文件,当然也可以直接使用数码相机拍摄。必要时,也要用photoshop处理。

二、多媒体制作过程

(一)三维动画制作

用3DMAX3.0制作三维动画的过程大致分为三部分,一是制作物体模型,二是设计动画效果,三是渲染与输出。

首先,将调压器可分为三个块:支架(包括与散热器连接的弹簧),散热器和底板,每块又可分为若干个子物体,如散热器中就包括有散热片、碳柱、螺杆、端盖、铁心、线圈、弹簧片,单就一个螺杆来说也是分为六边形杆,螺帽和带有螺纹的一段圆形杆。三部分一一完成后再连接为一体,在这一制作过程中主要用到了3DMAX命令面板中的Create(创建)面板和Modify(修改)面板,开始用Standard primitives(原始几何对象),像Box,Cone等通过对Parameters(参数栏)中的参数的调整来完成所建对象的长,宽,高,半径,变数(平滑度)等的调整以完成所要求的基本物体形状。需要合并两个分别做出的物体时,先点取文件菜单中的Xref Objects选项,在弹出的对话框中点取右上角的添加命令按钮(Add)随后在出现的打开文件对话框中打开需要加入的物体文件。即可完成导入操作。将两物体通过托以旋转,使其位置配合好之后可同时选中并结合成组以后便可以当成一个物体操作。另外各物体在制作完成时一般给它指定材质。对有关材质与贴图的操作都集中在材质编辑器中,可以在工具条中单击Material Editor按钮将材质编辑器打开,另外也可以直接在键盘上按”M”键。3DMAX中有一部分自带的现成材质,也可以在材质样本框中修改后用Assign Material to selection可将其指定给所选中的物体。其实碳调各部件大都是外表涂了油漆或金属表面,所以也可以直接在材质编辑面板中,通过自行调整参数获得与真实部件相似的外观,主要是选择好材质类型,在调整其反光特性等参数。

各个部件基本完成后就要将其做成动画,更清楚的表示出调压器的结构和各部件的安装位置。主要的动画就是旋转和移动。

如果要实现一个物体的旋转,比如支架和散热器部分都有转动的展示。可以单击工具栏中选择并旋转工具(Select and Rotate)将时间滑块拖到50帧,打开动画记录按钮,在透视图中以Y轴为中心将物体旋转180度完成了部件转动展示的动画。

要是需要让某个或某些部件移动位置,像散热器拆解动画,磁铁拆解动画等就需要为其设一条路径,也就是移动的路线,选择型建模工具中的Line命令,在左视图中创建一条合适的路径曲线,路径曲线设好了再把要移动的部件导入,单击File菜单中的Merge命令,在Merge file对话框中,可设置渲染的帧数段。最后输出时一般选Active Time Segment,在Output size中选320*240。在下面的Options中的选项,可以用其默认设置。Reder Output区中需设定要保存输出文件的位置,名称及格式,这里选AVI文件,在Reder scene对话框中第二个卷质栏是MAX Default Scanline A-Buffer(MAX缺省线扫描渲染器A缓冲区)这里的设置也很重要但一般情况下取默认设置也可以输出较好的效果。

(二)三维文字制作

在小的GIF字体动画及立体文字的制作中,用Ulead公司的Cool3D是很方便的,这个软件虽然不大但功能并不少,操作也很简单。比如,主页的标题文字就可以做成一个GIF动画,在Cool3D中的制作过程如下:

先建立一个新文件,调整尺度为384*58像素,再点击输入文本按钮在弹出的对话框内输入“********”,然后将其选中改为方正行楷字体,可以通过移动、旋转、缩放等操作配合添加关键帧来完成动画的制作,当然还要增加一些Cool3D提供的光线、纹理、倾斜等效果,使文字更加饱满圆润,并悦目的纹理和光泽,还可以选择漂亮的背景。各项工作做完后再按需要调整动画的帧数来控制播放时间的长短,通过调整物体(文字)属性工具兰中的环境、光源、表面、反光等各项的亮度、饱和度和色调来达到最佳视觉效果。另外在整个过程中随时可以用编辑文本按钮对所输入的文字进行修改最后一步就是导出动画(GIF或AVI)文件或导出JPEG图像,并且可以自行确定影像的输出质量,比如外场维护中的“工作点的调整”、“外场维护”两个按钮的制作就是这样完成的。当然,质量越高渲染起来就越耗时,着很大程度上也取决于计算机的硬件配置。

在对一些GIF格式的动画进行简单的修改以及绘制平面图是我们选择了Macromedia公司的Flash4.0中文版,他提供了影片岩石,修改及删除、添加帧等操作,还可以自行配音,Flash4.0支持很多格式的声音文件,而且提供了比较齐全的绘图工具,如钢笔、铅笔、吸管、笔刷、墨水瓶等十几种再配合图层工具用起来很方便,操作也更加灵活多样。

(三)图片、背景的处理

在对图片的处理以及按钮的制作中主要用到了Photoshop5.0CS,如所用到的背景图片大都在Photoshop5.0中经过亮度、对比度以及色相、饱和度、色彩均衡等的调整,使之和页面色调相配合,达到最令人满意的效果,另外对一些过大的图片还要进行裁切,调整大小等操作。例如,对真实碳片电压调节器进行拍照,扫描得到的通常分辨率高达3400*4600以上,其文件也有1M甚至3—4M大,而网页页面默认分辨率只有800*600,所以必须对扫描得到的图片进行缩放,裁切,旋转等处理,使其大小和角度均达到要求。

像碳调的调压原理中,就有“必要性”、“方法”和“原理”三部分它们是通过三个按钮来连接的,又如调节误差中有“准确性”及“稳定性”两个按钮,碳调结构中有“支架”、“主体”、“配置”三个按钮,用作这些按钮的图片都是通过Photoshop5.0制作完成的。例如“准确性”和“稳定性”两个按钮,是先选择了一副木纹的材质图作为底图,然后丛中剪切280*110像素大小的一部分成一新文件(假设命名为P1然后选取左侧工具栏中的文字工具,在P1窗口中单击鼠标左键,在文字工具对话框内输入“稳定性”,并将大小定为90像素字体采用方正行楷颜色为黑色,其他各项取默认设置。然后为其添加图层蒙版,对文字进行处理,选取滤镜菜单中的艺术效果—壁画滤镜工具。可将画笔大小,细节,纹理等参数定为2,8,1。单击“好”确认操作,再应用斜面和浮雕效果,使字体具有一定的立体感。为了使按钮更有层次感,可以选取背景图层加入光照效果再合并图层并导出为JPEG格式的图片文件,完成操作。而“支架”、“主体”、“配置”按钮的制作则稍微复杂些,选取背景后,建立一新通道,再输入“支架”两字选中宋黑色字体,然后再复制一个新通道Alpha2,将第一通道载入选区打开滤镜菜单中的模糊工具选取“高斯模糊”滤镜对话框,设半径为5像素,然后再选择反选再一次使用高斯模糊,设半径为8像素,这样字体不在棱角分明而有一种朦胧感,然后应用风格化中的“查找边缘”滤镜对文字进行描边处理,再经调整亮度/对比度后整体再应用一次轻度的高斯模糊,然后打开灯光效果对话框,选择“Default”类型灯光,适当设置参数,如强度15,光泽10,材料60,曝光度0,环绕7,纹理通道选择复制的`通道Alpha2,再将Alpha1载入选区调整色相/饱和度为色相140,饱和度30,亮度25,并选中着色复选框。最后合并图层剪切调整大小即得到我们用来做按钮的原始图片。调压原理中用到的三个按钮制作过程相对来说比较简单,主要是应用了图层蒙版和斜面浮雕效果,具体过程就不再详述。

上面提到在对扫描得到的图片的处理中,需要换成比较美观的背景,所以较多用到选取操作,选取工具很多,如套索或磁性套索工具,魔棒工具以及自由钢笔工具。在被选物与背景色差较大时用魔棒工具是可以得到事半功倍的效果的,不管使用那一种工具再把物体选中后再选择反选,剪切图象后把背景复制为一新图层调整其大小至与边框相配合,然后把物体设为最上层就完成了制作。

(四)平面图、文字、声音和音乐的制作

平面图、文字、声音和音乐等几种媒体形式的制作、录入、合成以及连接都比较简单,不再详述。

三、网页的制作

(一)FrontPage2000简介

随着国际互联网的日益普及,各种各样的网页设计工具应运而生。在各类网页工具,微软的frontpage2000是少数真正“所见即所得”的网页工具,很适合初学者使用。

进入frontpage2000的操作环境,可以看到程序的界面大致可以分为以下几个部分:

*菜单栏

*工具条

*视图条

*工作区

*状态栏

1、主页的制作

对frontpage2000有了一定的了解后,下面,通过主页为例,介绍一下网页的制作过程。

首先,创建一个新网站。

进入frontpage2000开发环境后,选择“文件”菜单中的“新建”菜单项,再选择子菜单项中的“站点”菜单项。

在随后弹出的“新建”对话框中,可以看到一个“站点”标签页,其中显示了frontpage缺省的5中模板和3种向导,点击右边的两个图表可以切换列表显示和大图表显示,组合下拉框中可以输入路径确定新站点的存放位置。

选择最简单的空模板,里面什么也没有,便于我们以后白手起家,建立自己独特的风格,然后单击“确定”即可完成一个空站点的建立。(如图)

然后,建立网站的导航结构。

要想使网站方便访问者浏览,网页与网页之间就必须有合理的结构、导航兰和恰当位置的超链。最好的办法是建立完整的导航结构。

进入导航视图,系统将当前页默认为“主页”,选中主页,单击新建图标就可以建立相应的主页的下一层网页( 如图以此类推),便可以快捷的建立一个完整、直观的网站结构,结构建立后,在页面上插入导航条时,frontpage 会自动加入正确的链接,相当方便。

最后,建设主页。

1、添加背景

返回页面视图,在工作区右击,在弹出的菜单条中选中“网页属性”,在弹出的对话框中点击“背景”标签页,在“背景图片”和“水印”前打上钩,在浏览框输入背景图片的路径,单击确定即可。(如图)

2、设立共享边框

在工作区右击,在弹出的菜单条中选中“共享边框”,在如图所示的对话框中选中“所有网页”“上(T)”“包含导航按钮”,单击确定。这样共享边框就设好了,设共享边框的目的,是为了让所有的页面中都能显示这部分内容,使网页有一个相同的主题,同时减少重复工作。

3、创立表格

为了能够方便的实现图文混排,使网页更生动活泼,达到预想的效果,就必须使用好表格,单击“查看/工具栏/表格”击打开了表格工具栏,选中“”图标,即能进行手动制表,表格建立后,还可以编辑表格的属性,根据需要决定表格的边框粗细、单元格的间距甚至表格的背景等。(如图)

4、导入图片

在共享边框里导入准备好的标头,以及主页的名称“炭调之核心地带",再选中“炭调之核心地带",单击图片工具栏中的 图标,把“炭调之核心地带"移到表头上面,主页的横幅就算大功告成了,由于前面设立了共享边框,所以,在主页以外的其他页面上,也都能看到这个漂亮的横幅了。用同样的方法,把所需的图片分别导入,然后稍加编辑即可。

5、导入文字

在frontpage2000里编辑文字和word完全一样,所以,只要使用过word的人,都能在熟悉的环境里编辑文档。当然,也可以先在别的文档编辑器里编辑好后,直接导入。

6、字幕

为使网页更显生动,我们在适当位置插入了一行活动的欢迎信息。单级“插入/组件/字幕”再如图所示的对话框中,输入想要显示的文字,选择显示速度、显示方式,选择字体、颜色等属性。在主页最下面的作者信息也采用了字幕效果。

7、超联及导航条

现在,主页的主体部分已经基本上制作完成了,还剩下最后一项工作,建立超链。只有建立超链,主页才能链接到其他的页面上去,没有超链的主页不能算真正的网页。单级“插入/超链接”再如图所示的对话框种选择所要链接的目标,单击确定即可。

导航条其实是一系列超链的集合,通常导航条包含了主要页面的超链,显示在每个页面上以方便访问者浏览。为了把导航条显示在每个页面上,当然要放在共享边框中了,单级“插入/导航栏”再如上图所示的对话框种选择所要的效果即可。

8、背景音乐

到这里为止,我们的主页已基本做完,再加上一段轻松的音乐,已增加网页的吸引力。右击,选择网页属性(如下图)选择背景音乐,选择反复播放 ,确定。至此,主页就算大功告成了。最后效果如下图所示。

参考文献

1、《Front Page 2000现用现查》作者:余庆丰 中央广播电视大学出版社 1999年5月

2、《中文版Photoshop 5.5效果与实例》作者:陈晓亚 倪楠 电子工业出版社 1999年11月

3、《火星人-3D Studio MAX三维动画大制作》作者:王琦 北京希望电子出版社 1998年8月