人教版-信息技术-三年级下册-浏览器和管理图片 教学设计

《浏览器和管理图片》教案

教学目标：

知识与技能目标：了解图片在网页中的作用；掌握网页中图片的插入与保存；初步学会在网页中合理布局图片。

过程与方法目标：通过观察，尝试，检验的过程，知道举一反三，归纳总结的学习方法。

情感态度价值观目标：体验与同学分享学习方法经验的乐趣；养成合理分类存放文件的学习习惯；初步形成对网页版面“形”的美学追求。

教学重点：网页中图片的插入的方法和必须注意的一些问题。

教学难点：理解网站中文件管理的思想和在网页中图片合理布局的认识。

教学方法：问题迁移，自主探究，评价小结。

现状分析：

这节课是华师大教材第五章学建网站的第四课时。学生已在前几课中学习了网站设计思路，网站结构规划和网站构建，在后序课中还将按小组设定的网站主题，搜索整理和网站主题相关的素材，常用素材和组件的插入，超链接设置，并分工完成主题网站的制作，最后在校园网发布主题网站。

预备班的学生在小学时大多都制作过版报，所以对图片插入到Word文档中的操作比较熟悉，而FrontPage插入图片的方法有相似之处，可以利用这一点完成知识与技能的迁移。有些同学还没养成做完作品及时保存的习惯在文件保存过程，两种软件有较大的不同。第一，网页中图片的保存对学生来说在理解上有一定的难度；第二，大多数同学没有形成分类存放文件的意识和习惯。在图片的布局时大多数同学由于年龄特点，往往把关注点放在图片的内容中，而忽视了图片与网页主题的关系，对图片在网页中的作用考虑较少。

教学过程：

一、新课引入

1.观察下面三个网站的截图，能知道分别是什么网站吗？说说理由。

分别是汽车，卡通动画，苹果网站。从文字和图片中看出来。

俗话说，“一幅图画胜过千言万语”。如果希望向网站访问者快速传达信息，或者只是希望网站更具吸引力，使用图形是一种很好的方法。

2.图片格式有几种？

可以有BMP，GIF，JPG，PSD等。

图片可具有多种不同的文件格式。但GIF、JPG 和PNG三种格式的图片文件，文件较小，

从而最适合在网络上进行快速传递。怎样将它们放到网页中呢？

二、网页中图片的插入

试一试：以小组为单位，尝试在网站主页插入图片的方法。（小组汇总）

1.找找图片在网站文件夹中的位置。

2.根据Word中插入图片的方法，在主页插入图片。

表一

板书：网页中图片插入的方法：1.“插入”→“图片”→“来自文件……”

2.常用工具栏→“插入文件中的图片”按钮

3.图片工具栏→“插入文件中的图片”按钮

4.直接从文件夹列表拖曳图片文件

（课堂预见：由于在小学制作版报时，插入图片用的是复制粘帖的方法，在这儿可能也用这种方法。如果出现这种情况，教师应先鼓励学生，同时可有针对地提出：不是所有版本的网页编辑器都支持这种插入图片的方法；不是所有媒体都能用这种方法插入；如果复制下来的图片只是引用了网上的地址，会出现什么情况。）

想一想：利用网页编辑器，同学们已经在网页中插入了图片，在预览窗口也能正常显示。

为什么在浏览器窗口中网页中的图片不见了？

（课堂预见：网页制作中，如果不对修改的网页进行保存的话，是无法在浏览器窗口看到修改结果的。有些学生可能在平时操作时没有养成及时对修改的作品进行存盘操作的习

惯，也就无法看到修改的结果。教师在此让学生操作后，发现问题引起思考，发现及时保存文件的重要性，使学生养成及时存盘的好习惯。同时也指出预览和浏览器窗口所看到的，有时不一定一致。）

板书：网页修改后要保存

网页和图片的保存

三、网页和图片的保存

试一试：当图片来源在站点文件夹内和不在站点文件夹内，保存网页时有什么不同？

要求：

1.以个人为单位，尝试在web站点文件夹的h1.htm中合适位置，插入恰当的图片，并保存。（图片在E盘的pic文件夹中）

2.请根据第二步观察到的现象，完成网页和图片的保存在线反馈练习。

表二

想一想：上传网页和上传网站至个人档案袋，在浏览器中浏览网页的结果一样吗？为什么？

（课堂预见：学生在保存时会发现与其他office软件的保存过程有不同的地方，有些同学不知所措，有些同学知道要将图片保存到站点中，但很少有同学会将图片保存在网站的images分类文件夹中。让学生自主探究看看不同的处理方法得到的结果会是一样的吗？让学生悟出“图片”和“网页”跟着一起走的道理。）

板书：1.网页和图片都要保存在网站文件夹内

2.图片保存在images文件夹中

3.“图片”和“网页”跟着一起走

四、网页中图片的应用

展示学生的作品，让学生互相评论，发现问题，讨论得出正确决定。

（课前预见：学生由于心理年龄特征，可能对图片的插入非常感兴趣，往往在一个网页中大量地放入了各种图片，有与主题相关的，也有无关主题的。这时需要教师指出需要他们在插入图片时要考虑的问题：①图片不能太大，网络这种特殊状态下，受带宽的限制，人们是很难忍受等待之苦的，这就要求把图片的体积缩小，同时又要使图片尽量清楚，直观，最大限度的发挥它的作用，把握这个度是很关键的。②另外图片的排布也很讲究，特别是多图的情况，就要是图片与图片之间的联系凸现，同时又要融为一个整体，使看起来有条理。③图片的插入应与网页主题呼应。）

板书：网页中图片的应用

图片大小适当，图片布局合理，图文环绕，烘托主题，……

五、小结

表三

六、拓展练习

练一练：（图片在pic文件夹中选择）

1.在web站点文件夹的h

2.htm中，选择图片插入。

2.调整网页中的图片，并合理布局。

3.给网页加上适当的网页背景图片或表格背景图片。（选做）

4.保存好文件，将web站点上传至过程性评价平台的个人档案袋中。