网页中图片的使用教案

《网页中图片的使用》教案上海市风华初级中学顾坚教学目标：知识与技能目标：了解图片在网页中的作用；掌握网页中图片的插入与保存；初步学会在网页中合理布局图片。过程与方法目标：通过观察，尝试，检验的过程，知道举一反三，归纳 总结 初级经济法重点总结下载党员个人总结TXt高中句型全总结.doc高中句型全总结.doc理论力学知识点总结pdf 的学习方法。情感态度价值观目标：体验与同学分享学习方法经验的乐趣；养成合理分类存放文件的学习习惯；初步形成对网页版面“形”的美学追求。教学重点：网页中图片的插入的方法和必须注意的一些问题。教学难点：理解网站中文件管理的思想和在网页中图片合理布局的认识。教学方法：问题迁移，自主探究，评价小结。现状分析：这节课是华师大教材第五章学建网站的第四课时。学生已在前几课中学习了网站设计思路，网站结构规划和网站构建，在后序课中还将按小组设定的网站主题，搜索整理和网站主题相关的素材，常用素材和组件的插入，超链接设置，并分工完成主题网站的制作，最后在校园网发布主题网站。预备班的学生在小学时大多都制作过版报，所以对图片插入到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软件的保存过程有不同的地方，有些同学不知所措，有些同学知道要将图片保存到站点中，但很少有同学会将图片保存在网站的images分类文件夹中。让学生自主探究看看不同的处理方法得到的结果会是一样的吗？让学生悟出“图片”和“网页”跟着一起走的道理。）板书：1、网页和图片都要保存在网站文件夹内2、图片保存在images文件夹中3、“图片”和“网页”跟着一起走四、网页中图片的应用展示学生的作品，让学生互相评论，发现问题，讨论得出正确决定。（课前预见：学生由于心理年龄特征，可能对图片的插入非常感兴趣，往往在一个网页中大量地放入了各种图片，有与主题相关的，也有无关主题的。这时需要教师指出需要他们在插入图片时要考虑的问题：①图片不能太大，网络这种特殊状态下，受带宽的限制，人们是很难忍受等待之苦的，这就要求把图片的体积缩小，同时又要使图片尽量清楚，直观，最大限度的发挥它的作用，把握这个度是很关键的。②另外图片的排布也很讲究，特别是多图的情况，就要是图片与图片之间的联系凸现，同时又要融为一个整体，使看起来有条理。③图片的插入应与网页主题呼应。）板书：网页中图片的应用图片大小适当，图片布局合理，图文环绕，烘托主题，……五、小结网页制作中要注意的问题学到的技术及所解决的问题学习过程中，所采取解决问题的方法解决问题过程中获得体会表三六、拓展练习练一练：（图片在pic文件夹中选择）1、在web站点文件夹的h2.htm中，选择图片插入。2、调整网页中的图片，并合理布局。3、给网页加上适当的网页背景图片或表格背景图片。（选做）4、保存好文件，将web站点上传至过程性评价平台的个人档案袋中。预期效果落实的知识技能：一是通过让学生观察截图，了解图片在网页中的作用。二是利用迁移教学法，让学生找到网页中插入图片的方法。通过学生的观察和检验，让学生知道浏览器窗口和网页编辑器软件中的预览效果在没保存之前是不一样的。三是要学生掌握网页和图片的保存。在学业水平考试中发现有很多学生在上传了网页后，图片无法显示。后来发现是学生不能理解网页和图片要跟着一起走的道理。所以设想在课中先让学生自己去体验二种情况：1、图片不在站点文件夹内的话，是否要把图片保存到站点文件夹中。2、如果把图片保存到网站里了，让学生尝试不同的上传方法，得到的结果是不同的。从而感悟到图片与网页一起走。四是要学生初步学会在网页中合理布局图片。初预的学生掌握插入图片的技能没多大的问题，但是他们的关注点放在图片插入上，而忽视图片大小，图片内容，图片布局和图文环绕对网页整体效果的作用。培养的能力素养：通过观察，尝试，检验的过程，知道举一反三，归纳总结的学习方法。养成的意识习惯：一是培养学生及时存盘的习惯。有些学生可能在平时操作时没有养成及时对修改的作品进行存盘操作的习惯，就无法看到修改的结果。我设想让学生操作后，发现问题引起思考，发现及时保存文件的重要性，使学生养成及时存盘的好习惯。二是养成合理分类存放文件的学习习惯。发现大多数同学在将图片保存到站点的时候，直接就保存在站点文件夹根目录，而不会保存到站点的分类文件夹中。如果网站比较大型的话，文件不分类管理的话，就会显得杂乱无章。设想引导学生观察网页和图片的保存时的对话框，让学生知道网站中文件管理的思想，从而养成合理分类存放文件的学习习惯。提高的教师能力：