“教师多媒体网页课件制作”培训


前言

计算机辅助教学课件从传统的单机环境下使用的PPT幻灯片、Authorware交互课件等等一路走来，到今天已经进入了网络时代，越来越多的家庭将联上英特网，如果我们的课件也能在网上运行，那么远程教育、异地学习将不是梦想。事实有国内外有不少有识之士已经开始基于网络的远程教育，做为一名21世纪的优秀教师，必须掌握网络型课件的制作方法。应该说，做为一名信息技术老师，我们对网络型课件的理解也是比较粗浅的，所以本次培训也只能算是对网络型课件制作的一个入门，更多的路还要靠我们共同去探索。

培训目标

掌握基本的网页制作技术
掌握图片处理技术
  • 文字、段落、图片、链接、表格
  • 能基本看懂网页代码
  • 掌握网页的发布与维护
  • 了解常见的图片格式
  • 掌握图片的裁剪、缩放、加工
掌握音频处理技术
掌握视频处理技术
  • 了解常见的音频格式
  • 掌握音频的录制、转换、分割
  • 了解常见的视频格式
  • 掌握视频的转换、分割
掌握多媒体网页课件制作技术
  
  • 掌握在网页中插入音频的技术
  • 掌握在网页中插入视频的技术
  • 掌握在网页中插入Flash动画的技术
  

视频教程播放说明：
1、下载专用播放器http://www.sxszjzx.com/php/down/show.php?id=102
2、右击“教程下载”-“选目标另存为”
3、在专用播放器中播放视频教程

教程目录

  1. 网页制作基础
    1. 熟悉网页制作软件Dreamweaver 教程下载
      常用的网页制作软件有Dreamweaver和FrontPage，其中前者虽然初学者感到比较难学，但它的功能更强大，生成的网页代码质量好，为广大专业网页制作人员所喜爱。FrontPage是微软Office办公套件中的一个，比较容易上手，但功能不太强大，我们只在需要时（如向网页中加入微软格式的视频），才会使用FrontPage。
    2. 文字处理 教程下载　作业1
      DW中的文字处理与Word中的相似，也有字体、字号等概念。但有4点需要大家区别：
      ⑴一般只推荐使用宋体和黑体，需要其它字体时建议做成图片
      ⑵字体只有1号到7号，7号最大
      ⑶网页制作时可能无法输入多个连续半角空格，应该用全角空格代替
      ⑷需要换行时用<shift>+<回车>，这时只是换行并没换段
    3. 了解网页代码之一(选学) 教程下载
      空白网页的代码
       
      <html> 网页开始
      <head>
      <title>无标题文档</title>
      </head>      		 网页头，放网页标题等
      <body>
      </body>      		 网页体，网页的内容都在这儿
      </html> 网页结束
         

      网页代码的特点
       

      ⑴网页以<html>开始，以</html>结束，网页由网页头和网页体二部分组成，网页中的内容全部在网页体中
      ⑵ 网页代码中含有<body>这样的标记，每个标记代表一种含意，有些标记中还有属性值如<font size=3>
      ⑶ 标记一定要放在<...>之间，许多标记有对应的结束标记，应成对使用，如<body>...</body>
         
      常用的网页标及属性
        ⑴网页开始与结束：<html>....</html>
      ⑵网页头：<head>...</head>
      ⑶网页标题(位于网页头)：<title>...</title>
      ⑷网页体：<body>...</body>
      ⑸文字标记：<font face="黑体" size=6 color="#ff0000">...</font>
         
      理解颜色代码
       

      颜色代码为6位数XXXXXX，X为十六进制数即0-9，A-F(不分大小写)
      颜色由“红、绿、蓝”三原色调合而成，每2位数代表一种颜色的浓度，00代表颜色浓度最小，FF代表颜色浓度最大
      三种颜色的顺序为红、绿、蓝
      理解几种常用的颜色代码：ff0000代表纯红、00ff00代表纯绿、0000ff代表纯蓝、000000代表纯黑、ffffff代表纯白、ffff00代表黄色

      考考您：
      　 00ffff代表什么颜色？f0f0f0代表什么颜色？101010代表什么颜色？
    4. 段落处理、项目符号 教程下载
      ⑴只有当按下回车，就产生了一个段落
      ⑵ 对段落的主要操作是左对齐、居中对齐、右对齐
      ⑶项目符号和数字编号都必须对段落进行设置
      项目符号
      • 计算机专业
        • 信息管理
        • 网络技术
        • 应用维护
      • 美术专业
        • 工艺绘画
        • 广告设计
      数字编号
      1. 计算机专业
        1. 信息管理
        2. 网络技术
        3. 应用维护
      2. 美术专业
        1. 工艺绘画
        2. 广告设计
    5. 插入图片、水平线 教程下载 作业2
      ⑴插入图片前最好先把网页保存一下，以免图片丢失
      ⑵图片要放在网页的同一个目录或子目录下
      ⑶网页、图片文件名只能是英文或数字不能用中文
      ⑷网页中的图片只有独立、左对齐、右对齐三种状态，不能自由摆放图片的位置
    6. 了解网页代码之二(选学) 教程下载
      ⑴用<shift>+<回车>产生的换行：<br>
      ⑵段落：<p align=center>...</p>
        　　　<div align=center>...</div>
      　　align=left|center|right 分别代表左对齐、居中、右对齐
      ⑶项目符号：
      　　 <ul>
      　　　 <li>...</li>
      　　　 <li>...</li>
      　　 </ul>　
      ⑷数字编号：
      　　 <ol>
      　　　 <li>...</li>
      　　　 <li>...</li>
      　　 </ol>
      ⑸图片：<img src=boy.gif> 　注意：<img>单独使用
      ⑹水平线：<hr>
    7. 综合练习一 教程下载
    8. 制作链接 教程下载　作业3　作业4
      制作步骤：⑴选用文字或图片⑵在属性栏中输入链接地址⑶选择合适的网页打开方式
      制作链接前最好放网页先保存一下
      被链接的目标可以是本地网页也可以远程网页，即可以是网页，也可以是图片或声音、视频文件等
      四种链接技术：
      　　 ⑴链接到同网站的其它网页，直接用文件名或目录/文件名，如
      　　　　　 abc.htm 或 aa/abc.com
      　　 ⑵链接到其它网站，必须用http://网址，如
      　　　　　 http://www.cctv.com　　或　　http://www.cctv.com/aa/abc.com
      　　 ⑶链接到校内其它网站，用“http://www.sxszjzx.com/~帐号”(另忘了前面的/号)如
      　　　　　 链到语文组 http://www.sxszjzx.com/~t205
      　　 ⑷链接到同网页的其它地方，用“#锚名”
    9. 制作表格 教程下载　作业5　作业6　作业7
      普通表格的制作
      设置背景颜色和背景图片
      细线表格的制作
      表格在布局中的作用
    10. 综合练习二　教程下载
    11. 了解网页代码之三(选学) 教程下载
      ⑴链接：<a href="aa/abc.htm">链接文字</a>
      ⑵表格：
      　　　 <table>
      　　　 　<tr>　　　
      　　　 　　<td>1行1列</td>
      　　　 　　<td>1行2列</td>
      　　　　 </tr>
      　　　 　<tr>　　　
      　　　 　　<td>2行1列</td>
      　　　 　　<td>2行2列</td>
      　　　　 </tr>
      　　　 </table>
      学习HTML网页代码语法的最好方法是：先在设计视图下做出一个效果，再到代码视图下看代码。
    12. 网页发布技术 教程下载
      把网页上传到服务器的过程叫网页发布。上传可以使用IE，也可以使用专用FTP工具，如CuteFTP。
      发布网页的步骤：
      ⑴登录FTP个人帐号
      ⑵查看自己根目录中有没有“public_html”目录，没有建一个(目录名不能打错)
      ⑶把制作的网页上传到public_html目录即可，注意首页为index.htm
      浏览人个帐号中网页的方法：
      http://www.sxszjzx.com/~帐号名
  2. 图片处理技术 教程下载 作业8
    1. 了解常见的图片格式
      GIF格式：一般用于图标、商标。最多支持256色、支持透明背景、支持动画
      JPG/JPEG格式：一般用于照片。支持真彩，文件体积较大
      PNG格式：新的网络图片格式，有GIF和JPG的优点，但现在还不太流行
      BMP格式：最原始的图片格式，IE支持，但在DW中不可预览
    2. 掌握图片的裁剪、缩放、加工
      专业的图片处理软件有Photoshop、Fireworks
      优秀看图软件ACDSee也有基本的图片处理功能，用它来进行裁剪、缩放非常方便
  3. 音频处理技术 教程下载1 教程下载2
    1. 了解常用的音频格式
      WAV格式：未压缩的声音格式，文件体积与声音采样率有关，一般文件都很大
      WMA格式：微软专用的声音格式，可用Windows Media Player播放，压缩率较高
      MP3格式：压缩率较高，网上很流行
      RM格式：Real公司的专用声音格式，压缩率较高，以前网上较流行
      MID格式：只能保存乐器的声音，不能录其它声音，文件超小。一般用于背景音乐
      虽然音频格式很多，常用的播放器有二个，微软公司的媒体播放器(Windows Media Player)可以放除RM格式以外的大多数音频文件；Real公司的RealPlayer或RealOne可以放除WMA格式以外的大多数音频文件。
    2. 掌握音频的录制、转换、分割
      用advanced mp3_wma recorder.rar进行音频文件的录制
      用ha_mp3splitterjoiner_v2.90.3MP3.rar进行MP3文件的分割
    3. 在网页中插入音频文件
      ⑴如何在网页中插入背景音乐 教程下载　作业9
      　　在文件头<head>..</head>之间插入<bgsound src="音乐文件名" loop="-1">语句即可在网页中插入背景音乐，支持wma、mp3、mid、wav格式，不支持rm格式，src中放音乐的文件名，loop决定音乐播放的次数，-1表示无限数播放。一般推荐使用mid格式的音乐文件，因为文件比较小，下载比较快。
      用<bgsound>制作的背景音乐有二个特点：
      a、当窗口最小化时，声音有没了
      b、<bgsound>是微软的私有网页标记，只被IE所支持，其它浏览器可能不支持
      ⑵如何在网页中控制音乐的播放　教程下载　作业10
      　　在网页中控制音乐文件的播放使用<embed src="音乐文件名" autostart="false" width="300" height="45" type="audio/x-pn-realaudio-plugin"></embed>标记，支持wma、rm、mp3、mid、wav等全部格式，如果放rm文件，则必须在客户机的电脑中安排realplayer或realone。不同的电脑，可能显示的播放器的界面有所不同。如果在本机显示含有<embed>标记的网页，可能会有一些安全性的警告提示。
  4. 视频处理技术
    1. 了解常用的视频格式 教程下载
      WMV格式：微软公司的专用视频格式，压缩率高，用媒体播放器播放
      ASF格式：微软公司的专用流视频格式，压缩率高，用媒体播放器播放
      RM格式：REAL公司的专用视频格式，压缩率高，用Realplayer或Realone播放
      RMVB格式：RM的改进格式，压缩率高，图像清晰，用RealPlyer或Realone播放
      AVI格式：由于AVI格式使用的压缩方法没有统一标准，可能还要安装专门的解码器后才能播放，Real公司的微软公司的播放器均可播放
      MPG格式：主要指MPG-1格式，就是VCD格式，可以使用微软或REAL公司的播放器均可播放
      Flash格式：流行的FLASH动画，支持交互，用IE可直接播放
    2. 掌握视频的转换、分割 教程下载
      用RealEditor进行rm视频文件的分割、合并　教程下载
      用Avi_MPG_WMV_ASF分割软件进行视频文件的分割 教程下载
      用Easy_RealMedia Producer软件把其它格式的视频文件转换为RM、RMVB格式 教程下载
      RealPlayer播放器软件的安装 教程下载
    3. 在网页中插入视频文件 教程下载　作业11
      支持RM、RMVB、WMV、ASF、AVI、MPG等所有格式的播放用类似<EMBED src=video/5.rmvb width=400 height=300 type=audio/x-pn-realaudio-plugin autostart="false" controls="IMAGEWINDOW,ControlPanel,StatusBar"></EMBED>的语句即可
    4. 在网页中插入FLASH文件 教程下载 作业12
      　　插入FLASH动画的方法：a、先把网页保存一遍 b、单击“插入－媒体－FLASH”即可（注意文件名必须不是汉字）
  5. 综合实例　教程下载1　教程下载2　教程下载3 教程下载4 作业13
    本期培训马上就要结束了，我们通过一个综合实例，把所学知识进行一次整理。
    制作一个多媒体网页课件的步骤一般包括以下四步：
    ⑴根据需要寻找图片、音频、视频素材，可能还要进行一定的裁剪、转换
    ⑵建一个文件夹，把所有多媒体素材拷入该目录，如果素材比较多，也可以专门为它们建一个子目录，注意文件名必须改为字母或数字
    ⑶开始制作网页，一般先录入文字、再进行文字与段落的美化、最后插入图片和音视频素材
    ⑷发布到网站中去，并与已有的其它网页进行链接
    注意：综合实例是本期培训的重要作业，各位教师要根据各自的学科，精心设计、精心制作，作品必须原创，优秀作品于6月15日左右在校园网上展出。

软件下载

请到校园网“资源下载”中下载相关软件，网址：http://www.sxszjzx.com/php/down/list.php

教师作业簿　作业簿样稿


绍兴市职教中心　迮勤
zeqin at sxszjzx dot com
2005-05-28