网页中图片使用教案.doc

PAGE  PAGE 4 《网页中图片的使用》教案 上海市风华初级中学 顾坚 教学目标： 知识与技能目标：了解图片在网页中的作用；掌握网页中图片的插入与保存；初步学会在网页中合理布局图片。 过程与方法目标：通过观察，尝试，检验的过程，知道举一反三，归纳总结的学习方法。 情感态度价值观目标：体验与同学分享学习方法经验的乐趣；养成合理分类存放文件的学习习惯；初步形成对网页版面“形”的美学追求。 教学重点：网页中图片的插入的方法和必须注意的一些问题。 教学难点：理解网站中文件管理的思想和在网页中图片合理布局的认识。 教学方法：问题迁移，自主探究，评价小结。 现状分析： 这节课是华师大教材第五章学建网站的第四课时。学生已在前几课中学习了网站设计思路，网站结构规划和网站构建，在后序课中还将按小组设定的网站主题，搜索整理和网站主题相关的素材，常用素材和组件的插入，超链接设置，并分工完成主题网站的制作，最后在校园网发布主题网站。 预备班的学生在小学时大多都制作过版报，所以对图片插入到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、请根据第二步观察到的现象，完成网页和图片的保存在线反馈练习。 出现情况现象图片在网站文件夹内直接保存网页，不询问是否要保存图片。图片不在网站文件夹内图片不在网站文件夹内时，我选择A、取消图片文件的保存B、保存图片文件，但不更改文件夹C、保存图片文件时，更改其所在文件夹结论：1、网页和图片（一定，不一定）要保存在网站文件夹内。 2、图片应该保存在 文件夹中。表二 想一想：上传网页和上传网站至个人档案袋，在浏览器中浏览网页的结果一样吗？为什么？ （课堂预见：学生在保存时会发现与其他office软件的保存过程有不同的地方，有些同学不知所措，有些同学知道要将图片保存到站