同图异质——图片的分类及格式 教学设计 初中信息技术上册(江苏)第6章

教学环节

教师行为

学生行为

设计意图

一、设疑导入

　【操作】PPT展示图片：

　 ……
　【提问】以上这类图片很特殊，以单纯、显著、易识别的物象、图形或文字符号为直观语言，具有表达意义、情感和指令行动等作用。这类图片叫什么？
　【提问】学校也常常将自己的办学理念设计成标志，称之为什么？
　【操作】PPT展示本校校标图片四幅。
　(动画)
　【互动】找不同Ⅰ：以第一幅为准，找出其他三幅图与第一幅图的不同之处。
　【提问】导致内容相同的图千差万别的秘密是什么呢？
　【引入】PPT展示课题：同图异质——  ？
　我们这节课的任务就是找出导致内容相同的图性质不同的谜底。

观察并回答
【回答】Windows窗口、安全标志、邗江实验学校校标……
【回答】标志
【回答】校标
观察、思考、回答
【回答】有的图片会动而有的图片是静止的；有的图片文件大，有的则很小；有的清晰，有的模糊……

通过“找不同”这个游戏，学生观察到图片的区别，从而引出疑问：内容相同的图为什么千差万别？有效地激发了学生的探知欲。带着疑问探究本课知识，学习效率会更好

二、基本任务

——图片分类

　【讲解】要想找出答案，就必须亲手实践。请大家使用不同的软件绘制相同内容的图片——本校校标简易图。
　【任务1】(1)分别在画图、Flash、Photoshop中完成简易校标半成品的绘制。
　
　【示范】填色：用滴管或吸管取色，用油漆桶填色。
　【提问】这三张图有什么不同？
　当图片的区别比较细微时，我们可以借助什么工具？
　【任务1】(2)找不同Ⅱ。
　找出画图、Flash、Photoshop中绘制的校标有什么不同？
　【提问】你知道是什么原因导致这种现象的呢？
　请大家看学习资料，从中找出原因，并得出结论。
　【任务1】(3)[学习资料]图片分类——位图和矢量图。
　结论：画图中制作的图像是(    )；
　　　　Flash中制作的图像是(    )；
　　　　Photoshop中制作的图像是(   )。
　　　　选项： 位图    矢量图
　【提问】从学习资料中你还了解到位图和矢量图有哪些区别？
　【讲解】请大家比较这三个图像文件的大小以验证，但不是图像文件，请大家转换成图像文件。
　【任务1】(4)将Flash中制作的图像转换为SWF图像文件。比较三幅图像文件的大小。
　转换方法提示： “Ctrl”+“回车”组合键。
　【提问】到这里我们可以找出同图异质的第一个原因是什么？
　 揭题(PPT)：同图异质——图片的分类
　【提问】你学会分辨位图和矢量图了吗？
　【讲解】文件大小的比较因为很难量化，所以用于验证比较好，用于辨别不够准确。
　【提问】刚才生成SWF图像文件后，文件夹中出现了两个名为“Flash” 、的文件，为什么一个文件夹中可以共存文件主名相同的文件？

学生演示打开三个软件
学生根据教师示范，给三个一样尺寸、颜色的简易校标图填色
【回答】放大镜
放大图片，观察回答
【回答】画图、Photoshop中的图放大后有锯齿，Flash中没有
浏览学习资料
【回答】位图以像素为单位，放大会出现“边缘锯齿”现象，矢量图不会
【回答】画图和Photoshop中制作的图像是位图，Flash中制作的图像是矢量图
【回答】位图大，矢量图小
学生导出SWF文件，
学生演示查看文件大小，比较验证
【回答】图片的分类
【回答】放大后看是否失真，比较文件大小
【回答】因为扩展名不同

通过“用放大镜找不同”这个游戏，学生能主动积极、轻松愉快地探究知识，观察现象，从而很快学会辨别位图和矢量图，深刻理解图片的分类，揭示出疑问的第一个答案

三、基本任务
——图片格式

　【示范】显示文件扩展名。
　【讲解】文件名即文件主名.扩展名，扩展名不同，文件主名相同就没有关系了。
　扩展名由文件保存时的文件格式决定，那么有哪些常见的文件格式呢？请大家看学习资料，并完成任务2的练习。
　【任务2】
　(1) [学习资料]图片常见格式——BMP、JPG、GIF、PSD、SWF。
　(2) 查看任务1中的三个图像文件的格式。
　画图中制作的图像文件的格式是(  )；
　Flash中制作的图像文件的格式是(  )；
　Photoshop中制作的图像文件格式是(　 )。
　选项：BMP  PSD   SWF
　(3) 比较文件大小：(填“大”或“小”)
　图像内容相同的情况下，BMP格式文件( )，PSD格式文件( )，SWF格式文件( )。

学生浏览学习资料，完成练习
学生显示扩展名

【回答】画图中制作的格式是BMP，Flash中制作的格式是SWF，Photoshop中制作的格式是PSD
图像内容相同的情况下 ，BMP、PSD格式文件大， SWF格式文件小

通过“两个文件主名相同的文件共存一个文件夹”这个问题情境，自然过渡到图片的格式
通过纵向对比BMP、PSD、SWF，感性了解图片的这三种格式

四、拓展任务——图片格式转换

　【提问】对照学习资料中常见的图片格式，刚才浏览的图片中还少哪些格式？
　那么JPG、GIF格式的图片文件怎么生成？
　【讲解】基本的图像加工软件都提供多种图片格式，用“另存为”(Flash是“导出”)就可以转换成其他的格式。也可以用看图软件ACDSee实现各种图片格式之间的转换。
　【任务3】
　(1) 在画图中打开“任务3”文件夹中的“校标1.bmp”，用“另存为”的方法将其转换为“校标1.jpg”“校标1.gif”。
　(2) 找不同Ⅲ。
　提示：比较转换好格式的图片，其色彩是否有损伤？

　(    )损伤严重些？
　再比较(    )文件最大， (     )最小？
　选项： BMP   JPG   GIF
　【提问】到这里我们可以找出同图异质的第二个原因是什么？
　揭题：同图异质——图片的分类及格式
　【提问】学习资料中讲网络上大量的彩色动画文件多为GIF格式。那么GIF动画文件怎么生成的呢？
　【拓展任务】GIF动画校标制作。参考帮助视频，使用GifAnimator的动画向导将提供的校标系列图制作成GIF动画图片。

【回答】JPG、GIF

学生了解图片的格式转换的方法

学生将BMP格式的校标图片转换为JPG、GIF格式，并找出三种格式的图片间的不同

【回答】JPG、GIF格式色彩都有损，GIF格式严重些
BMP格式文件最大，JPG格式文件最小


【回答】图片的格式

学有余力的学生参考帮助视频制作校标动画文件

通过图片的格式转换和“找不同”的游戏，横向比较BMP、JPG、GIF，感性了解图片的这三种格式

通过纵向和横向两次比较图片的格式，深刻理解图片的压缩格式对图片的影响。揭示出疑问的第二个答案

    通过拓展任务，让学生更深入了解GIF

五、拓展小结

　【提问】如果要将校标图片放在校园网的网页上做标志(logo)，为了尽量不影响网络传输速度，保证浏览时的清晰度，最好使用位图还是矢量图？为什么？
　【提问】位图有如此缺点，还有存在价值吗？
　【操作、讲解】展示多幅位图和矢量图。
　位图能较好表现色彩浓度与层次，主要应用于照片或复杂图像；而矢量图可展示清楚线条或文字，主要应用于文字、商标、动画等相对规则的图形。
　【提问】如果网页上使用静态的位图校标，那么BMP、JPG、GIF哪种格式更理想些？为什么？
　【讲解】所以JPG才是网络上最流行的图像格式之一。

【回答】矢量图。因为位图文件容量通常都很大，放大时图像易失真。矢量图文件小，放大时图像不易失真
【回答】JPG更理想些，因为文件小，且色彩损伤小些

通过实例小结知识，并让学生能利用所学解决实际问题
通过欣赏美图，让学生拓展位图和矢量图的知识，领略图片的魅力

教学反思

　图片的分类及格式是“图片获取”这一节的难点，空泛的概念学生根本无法理解，如何让学生更轻松地理解本课这些专业性强且抽象的知识呢？
　(1) 从学生熟悉的学校校标，及感兴趣的Flash、动画图片制作的知识入手，让学生动手实践，生成不同分类、不同格式的相同内容的校标图片，调动学生的学习积极性，提升参与度。
　(2) 通过“同图异质”的主题，设置疑问：导致内容相同的图千差万别的秘密是什么？让学生在学习的过程中寻找谜底，激发学生的探究欲。
　(3) 通过“找不同”的游戏，提升学生的兴奋度，让学生多次比较不同分类、不同格式的图片，从而切身体会到位图、矢量图，及BMP、JPG、SWF、GIF等专业名词的真正含义。
　(4) 通过实例问答，让学生内化知识，并能利用所学知识解决实际问题。