课件的制作与实现

计算机辅助教学理论与实践课件的制作与实现第6章下一页上一页结束

*XXXXXXXXXXXXXXXXXX目录6.1课件的编辑与制作

6.1.1程序设计语言6.1.2课件写作语言6.1.3课件制作工具6.1.4多媒体著作系统6.1.5常用的课件写作工具下一页上一页结束6.2制作工具的评价与选用

6.2.1基本要求

6.2.2评价及选用

第6章课件的制作与实现

*XXXXXXXXXXXXXXXXXX目录6.3电子教案制作工具——PowerPoint6.3.1创建演示文稿6.3.2文本处理6.3.3插入图片6.3.4声音媒体6.3.5插入Flash动画6.3.6影片媒体6.3.7幻灯片切换6.3.8添加动画效果6.3.9演示文稿打包下一页上一页结束第6章课件的制作与实现

*XXXXXXXXXXXXXXXXXX目录6.4二维动画制作软件Flash6.4.1工作区简介6.4.2Flash中的基本概念6.4.3图形的编辑6.4.4简单的动画设计6.4.5带有简单动作脚本的动画设计下一页上一页结束第6章课件的制作与实现

*XXXXXXXXXXXXXXXXXX目录6.5移动课件制作技术—HTML56.5.1移动课件制作技术—HTML56.5.2HTML5属性概要6.5.3Web页面的实现6.5.4HTML5脚本6.5.5在HTML5中使用视频6.5.6在HTML5中使用音频6.5.7在HTML5中实现拖放6.5.8在HTML5中绘图6.5.9一个简单的移动课件示例下一页上一页结束第6章课件的制作与实现第6章课件的制作与实现下一页上一页结束

如何将脚本转换成可在计算机上运行的课件，是本节所要讲述的问题。目前常用的课件制作工具可分为四类：程序设计语言；课件写作语言；课件制作工具和制作多媒体著作系统。6.1课件的编辑与制作XXXXXXXXXXXXXXXXXX6.1课件的编辑与制作

所谓程序设计语言，指的是Java、Jsp、Asp、Php、VC、C#、VisualBasic、VisualFoxPro等。迄今为止，程序设计语言已达千余种之多。下一页上一页结束

6.1.1程序设计语言XXXXXXXXXXXXXXXXXX6.1课件的编辑与制作

6.1.2课件写作语言

下一页上一页结束

TUTOR、PILOT是国外早期广泛流行的写作语言的代表，课件写作语言一般都有以下特点：1．表达方式简单易学；2．提供多种形式的人机交互形式；3．具有多种匹配及判断的能力；4．支持多媒体编辑与处理；5．具有专用的课件制作与管理命令；6.具有数据库管理功能。XXXXXXXXXXXXXXXXXX6.1课件的编辑与制作

所谓课件制作工具是指专门为制作课件（或专门为制作某一学科的课件）而开发设计的工具软件。这种系统专用性强，使用简单，一般都具有学科特点。下一页上一页结束

6.1.3课件制作工具XXXXXXXXXXXXXXXXXX6.1课件的编辑与制作

制作多媒体著作系统又叫多媒体开发环境，一般由一组实现各种功能的工具软件组组成，典型的多媒体著作系统由媒体编辑处理工具、多媒体集成工具、作品演播环境等几部分构成。媒体编辑处理工具主要完成对课件制作中所要用到的媒体素材进行采集、编辑等处理工作，使媒体素材达到课件制作的需要。媒体编辑处理工具可分为：文本编辑、图形/图象编辑、声音编辑、动画制作、视频采集与编辑等几类。下一页上一页结束

6.1.4多媒体著作系统XXXXXXXXXXXXXXXXXX6.1课件的编辑与制作

6.1.5常用的课件写作工具下一页上一页结束

目前创作课件的工具很多，但大致可分为五种主要类型。1．帧页型2．图标型3．时序型4．网页制作型5．程序型XXXXXXXXXXXXXXXXXX6.2制作工具的评价与选用

对于课件制作者来说，懂得如何对写作工具进行评价是十分重要的，常言道“磨刀不误砍柴工”，只有学会了对写作工具进行评价，才能有的放矢的选用更适合自己使用的工具，才能多快好省地开发出好的课件来。下一页上一页结束XXXXXXXXXXXXXXXXXX6.2制作工具的评价与选用

6.2.1基本要求下一页上一页结束

从课件制作的角度来看，一个理想的课件制作工具，应能满足以下要求，才能很好的完成课件制作任务。1．制作出的课件适应性强，可应用于不同的软硬件环境，以便在不同的教学环境下使用。2．能很好的表述课件的逻辑结构和教学思想。3．提供适合教学需要的交互方式、对话界面，以适应学生提问、练习及测验的操作。4．具有数据储存与处理的能力，用于满足如学生分数统计、身份验证、随机出题等数据处理的要求。6.2制作工具的评价与选用5．能灵活控制和改变课件的执行顺序，按要求跳转到指定的教学内容中，以此实现因时、因地、因人施教的教学原则。6．可以按需要使用不同的媒体进行教学，并有良好的媒体播放与控制能力及同步协调能力。7．具有教师与课件同时表达教学内容的能力，如提供白版等。8．具有链接其它资源及课件的能力。9．具有很好的容错能力，此功能可以很好的避免由于误操作而引起的教学故障。10．易学、易用。对于不同类型的课件，使用的开发工具的要求也不尽相同。下一页上一页结束6.2.1基本要求6.2制作工具的评价与选用

从不同的角度评价一个写作工具，会得出不同的结论。而作为课件制作者，其评价写作工具的目的在于选择更适合自己需要的工具。一般来说，可采取下列方法进行评价。可按照所设计课件类型、功能、规模等因素来与候选的工具逐个进行评选，看能否完成设计要求。具体的可考虑以下几点。1．工具的基本特性（1）对开发支持环境及课件运行环境的要求；（2）开发工具功能的评选。下一页上一页结束6.2.2评价及选用6.2制作工具的评价与选用

2.开发者的需求在评价选用开发工具时还应从开发者的角度进行考虑。如：自身所拥有的开发设备情况，开发经费的承受能力，开发队伍的知识结构与素质等因素。

3.最终用户的需求在评价与选用开发工具时还应考虑课件最终使用者的因素。如课件的运行环境的要求，使用者的年龄、文化层次、计算机操作水平等因素。下一页上一页结束6.2.2评价及选用XXXXXXXXXXXXXXXXXX6.3电子教案制作工具——PowerPoint

不论哪种工具制作课件，都要符合课件制作的原则，适应课堂教学设计的需要，能解决教学中的实际问题，提高课堂教学效率。合适的多媒体制作工具往往也是一件成功多媒体课件的关键，制作工具的选择决定课件开发效率。选择多媒体制作工具，应考虑到编程环境、超级链接能力、媒体集成能力、动画创作能力、易学习性、易使用性、文档是否丰富等。一般情况下我们不会选择一种工具来开发整个课件，而是针对各种情况选择多种制作工具来协作完成。PowerPoint是微软公司的Office组件之一，目前通用版本为2013，简单易用的特点使广大一线教师非常钟爱，大大减少课件开发周期。下一页上一页结束6.3电子教案制作工具——PowerPoint6.3.1创建演示文稿

一份演示文稿通常由一张“标题”幻灯片和若干张“普通”幻灯片组成。启动PowerPoint2013，选择“文件”→“新建”命令，出现“新建演示文稿”任务窗口，它提供了多种创建演示文稿的方法。下一页上一页结束图6-1创建演示文稿6.3电子教案制作工具——PowerPoint6.3.2文本处理

以下几小节的内容均以小学语文教学中的《江雪》为例，介绍演示文稿制作中常用的文本处理方法。下一页上一页结束图6-3输入标题和副标题6.3电子教案制作工具——PowerPoint6.3.3插入图片

插入一张新幻灯片，选择菜单栏中的“插入”→“图片”→“来自文件”命令，打开“插入图片”对话框，在“查找范围”下拉列表框中，找到事先准备好的图片文件“江雪.jpg”，单击选中，然后单击“插入”按钮。下一页上一页结束图6-7设置图片尺寸6.3电子教案制作工具——PowerPoint6.3.4声音媒体

插入声音文件。下一页上一页结束图6-8“插入声音”幻灯片中显示的声音文件6.3电子教案制作工具——PowerPoint6.3.5插入Flash动画

幻灯片中插入flash影片，可以形象的说明要说明的教学问题。下一页上一页结束图6-10PowerPoint选项6.3电子教案制作工具——PowerPoint6.3.6影片媒体

选择菜单栏中的“插入”→“视频”→“PC上的视频”命令，打开“插入视频文件”对话框，选择需要的视频素材，单击“确定”按钮。下一页上一页结束图6-14视频播放属性框6.3电子教案制作工具——PowerPoint6.3.7幻灯片切换

在PowerPoint2013中，用户可以分别给每张幻灯片的切换增加动画效果，即由一张幻灯片切换到另一张幻灯片时，切换效果可以用多种不同的形式将下一张幻灯片显示到屏幕上。如果演示文稿是一个有四张幻灯片组成的文件，幻灯片切换操作步骤如下：在第一张幻灯片中，选择“切换”命令，打开如图6-15所示的“幻灯片切换”窗口。选择“页面卷曲”切换效果。单击“播放”按钮可以为当前幻灯片设置这种切换效果，如果希望所有的幻灯片都设置成这种切换效果，单击“全部应用”按钮。下一页上一页结束图6-15幻灯片切换6.3电子教案制作工具——PowerPoint6.3.8添加动画效果

所谓动画效果，就是当打开幻灯片时，幻灯片中的各个主要对象不是一次全部显示，而是按照某种规律，以动画的效果逐个被显示出来。在幻灯片中使用动画效果将使演示文稿更生动。本例的动画效果设置步骤如下。执行“动画”命令，如图6-16所示。下一页上一页结束图6-16“动画”任务窗口6.3电子教案制作工具——PowerPoint6.3.9演示文稿打包

如果播放演示文稿的计算机没有安装PowerPoint2013，又没有安装其他播放器，可以在制作演示文稿的计算机上，将演示文稿的播放器一并打包，然后拷贝到播放演示文稿的计算机中解压播放。下一页上一页结束图6-18“打包成CD”对话框XXXXXXXXXXXXXXXXXX6.4二维动画制作软件Flash

Flash是Macromedia公司推出的一款非常成功的矢量动画制作软件，同时也是很优秀的网络交互动画制作工具。它不仅能制作出很多特殊的动画效果，还能配合Dreamweaver、Fierworks等网页开发软件制作出精美的网页画面，很多优秀的教学课件、网络动画、网页都是用flash制作的。Flash从推出到现在经历了很多不同的版本，在此以AdobeFlashCS6为例，介绍一下其主要功能的应用。下一页上一页结束6.4二维动画制作软件Flash6.4.1工作区简介

安装完成AdobeFlashCS6以后，可以在Windows的“开始”菜单中将其启动，进入AdobeFlashCS6的工作界面，如图6-19所示：下一页上一页结束图6-19AdobeFlashCS6工作界面6.4二维动画制作软件Flash6.4.2Flash中的基本概念

1.帧帧是动画播放的基本单位，每一个动画都是由多个帧组成的，每个帧代表一个动作，帧频可以改变每秒钟帧的数量，一般默认为12帧每秒。帧可分为两种类型，普通帧和关键帧，其中关键帧又可分为空白关键帧和有内容的关键帧。

2.图层图层就像绘画时使用的透明的纸，几个图层叠加在一起，透过没有绘画的区域，可以看到下面图层中所绘制的对象，上面图层的对象会遮挡住下面图层的对象。下一页上一页结束6.4二维动画制作软件Flash6.4.2Flash中的基本概念

3.元件元件是一个可以重复使用的小部件，它可以独立于主动画进行播放，在一定意义上说，它也是一个小动画。

4.库在Flash中，库是存放各种对象的集合，其中包括创建的各种元件和从外部导入的各种图形对象等。下一页上一页结束6.4二维动画制作软件Flash6.4.3图形的编辑

常用工具如下：线条工具铅笔工具椭圆工具和矩形工具任意变形工具下一页上一页结束钢笔工具6.4二维动画制作软件Flash6.4.4简单的动画设计1．变形动画下一页上一页结束2．引导动画3．遮罩动画6.4二维动画制作软件Flash6.4.5带有简单动作脚本的动画设计

ActionScript语句是Flash中提供的一种动作脚本语言，它具备了强大的交互功能，能够提供动画与用户之间的交互，并使得用户对动画元件的控制得到加强。通过对其中相应的语句进行调用，使Flash实现了一些特殊的功能。如对动画的播放和停止进行控制、控制动画中的音效、指定鼠标动作、制作游戏和创建交互的网页等。下一页上一页结束6.5移动课件制作技术—HTML5

HTML是英文HyperTextMarkupLanguage的缩写，中文含义是“超文本标志语言”，是一种建立网页文件的语言，其透过标记式的指令(Tag)，将文字、图片、声音、影像等连结显示出来，通过浏览器解释浏览。HTML5是由W3C（WorldWideWebConsortium）起草制定的HTML第5版标准。下一页上一页结束6.5移动课件制作技术—HTML56.5.1HTML5元素

以下是一个基本HTML文档结构:<html><body><p>这是一个段落。</p></body></html>下一页上一页结束6.5移动课件制作技术—HTML56.5.2HTML5属性概要

1.文本<h1align="center">这是显示位置居中字体大小级别为1的标题</h1><palign="left">这段文字是左对齐</p><h2style="background-color:red">背景颜色为红色的标题</h2><pstyle="background-color:green">背景颜色为绿色的一段文字</p><pstyle="font-family:仿宋;color:red;font-size:20px;">一段文字</p><ahref="/"target="_blank">百度</a>下一页上一页结束6.5移动课件制作技术—HTML56.5.2HTML5属性概要2.背景页面背景颜色（Bgcolor）设置为黑色：<bodybgcolor="#000000">背景（Background）设置为图片：<bodybackground="clouds.gif">下一页上一页结束6.5移动课件制作技术—HTML56.5.2HTML5属性概要3.表格下面是一个简单表格的HTML5程序：<tableborder="1"><tr><td>第1行，第1列</td><td>第1行，第2列</td></tr><tr><td>第2行，第1列</td><td>第2行，第2列</td></tr><tr><td>第3行，第1列</td><td>第3行，第2列</td></tr></table>下一页上一页结束在浏览器显示如图6-51所示：

图6-51表格6.5移动课件制作技术—HTML56.5.3Web页面的实现

下面是使用HTML5编写的一个简单Web页面的程序

<!DOCTYPEHTML><html><head><METAcharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-

scale=1">

<basehref="/"target="_blank"/>下一页上一页结束6.5移动课件制作技术—HTML56.5.3Web页面的实现

<TITLE>HTML5页面</TITLE><styletype="text/css">a{padding:16px;font-size:20px;text-decoration:none;}a:hover{border:solid1px#ccc;background-color:#eee;}</style></head>下一页上一页结束6.5移动课件制作技术—HTML56.5.3Web页面的实现

<body><palign="center">我的网页课件制作</p><ahref="index.html">测试页面</a></body></html>该页面在安卓系统手机中浏览器下执行的页面效果如图6-52所示。下一页上一页结束图6-52页面效果6.5移动课件制作技术—HTML56.5.4HTML5脚本

在新建的页面中增加一个文本框“txtContent”和一个按钮“请点击我”；当单击按钮时，通过页面中加入的JavaScript脚本代码获取文本框中的内容，并且显示在浏览页面中，其代码如下：下一页上一页结束6.5移动课件制作技术—HTML56.5.4HTML5脚本

<scripttype="text/javascript"async="true">functionBtn_Click(){varstrTxt=document.getElementById("txtContent").value;varstrDiv=document.getElementById("divShow");strDiv.style.display="block";strDiv.innerHTML="您输入的字符是："+strTxt;}</script>下一页上一页结束6.5移动课件制作技术—HTML56.5.4HTML5脚本

页面效果如图6-53所示。下一页上一页结束图6-53页面效果6.5移动课件制作技术—HTML56.5.5在HTML5中使用视频

网页中的视频，大多数是通过插件（比如Flash）来显示的，然而，并非所有的浏览器或者智能终端都拥有同样的插件。HTML5的出现很好的解决了这一问题。

HTML5规定了一种通过video元素来包含视频的标准方法。video元素支持三种视频格式：Ogg、MPEG4和WebM。在HTML5中显示视频代码如下：<videosrc="movie.ogg"width="320"height="240"controls="controls">您的浏览器不支持video元素。</video>下一页上一页结束6.5移动课件制作技术—HTML56.5.6在HTML5中使用音频

在浏览的网页时，大多数音频是通过插件（比如Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。HTML5规定了一种通过audio元素来表现音频的标准方法。

audio元素能够播放声音文件或者音频流。audio元素支持三种音频格式：OggVorbis、MP3和Wav。播放音频的语句格式为：<audiosrc="song.ogg"controls="controls">下一页上一页结束6.5移动课件制作技术—HTML56.5.7在HTML5中实现拖放

在HTML5中，任何元素都能够拖放。拖放是一种常见的特性，即抓取对象以后拖到另一个位置。一般来说InternetExplorer9、Firefox、Opera12、Chrome10和Safari5等浏览器及以上版本支持拖放。以下为一个简单的拖放实例的源程序：<!DOCTYPEHTML><html><head><styletype="text/css">#div1{width:600px;height:200px;padding:10px;border:1pxsolid#001100;}</style>下一页上一页结束6.5移动课件制作技术—HTML56.5.7在HTML5中实现拖放<title>拖放</title><scripttype="text/javascript">functionallowDrop(ev){ev.preventDefault();}functiondrag(ev){ev.dataTransfer.setData("Text",ev.target.id);}下一页上一页结束6.5移动课件制作技术—HTML56.5.7在HTML5中实现拖放functiondrop(ev){ev.preventDefault();vardata=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}</script></head><body><divid="div1"ondrop="drop(event)"ondragover="allowDrop(event)"></div><imgid="drag1"src="img.jpg"draggable="true"ondragstart="drag(event)"width="336"height="69"/></body></html>下一页上一页结束6.5移动课件制作技术—HTML56.5.7在HTML5中实现拖放下一页上一页结束图6-54拖放页面效果

浏览效果如图6-54所示，选择图片可将其拖动到矩形框中。6.5移动课件制作技术—HTML56.5.8在HTML5中绘图

1.canvas元素绘图<canvasid="myCanvas"width="200"height="100"></canvas>

（1）绘制矩形脚本<scripttype="text/javascript">varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,120,60);</script>下一页上一页结束6.5移动课件制作技术—HTML56.5.8在HTML5中绘图下一页上一页结束图6-55矩形框效果绘制效果如图6-55所示。6.5移动课件制作技术—HTML56.5.8在HTML5中绘图

1.canvas元素绘图（2）绘制线条脚本通过指定从何处开始，在何处结束，来绘制线条，JavaScript代码如下：<scripttype="text/javascript">varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");cxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke();</script>下一页上一页结束6.5移动课件制作技术—HTML56.5.8在HTML5中绘图

1.canvas元素绘图（2）绘制线条脚本canvas元素：<canvasid="myCanvas"width="400"height="200"style="border:1pxsolid#c0c0c0;">您的浏览器不支持canvas元素。</canvas>绘制效果如图6-56所示。下一页上一页结束

图6-56线条效果6.5移动课件制作技术—HTML56.5.8在HTML5中绘图

1.canvas元素绘图（3）绘制圆形脚本通过规定尺寸、颜色和位置，来绘制圆形，JavaScript代码如下：<scripttype="text/javascript">varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*2,true);cxt.closePath();cxt.fill();</script>下一页上一页结束