网页制作中的图片处理

1、网页制作中的图片处理教材分析本节课的教学内容是教材第七章 网页制作 中关于图片的相关处理。 本章教材中并没有单独安排对于图片处理的内容， 但图片在网页制作和应用中的作用是举足轻重的。由于图片处理需要涉及到其他相关软件， 本节课在教材的基础上对教学内容做了适当的调整： 将学生的日常应用、 图片处理技术和网页制作技术结合起来进行讲解和任务安排。 这样安排的目的， 主要在于力求让学生能够理解： 解决一个问题往往要使用多种工具，运用多种方法。学情分析本章为初中信息技术的最后一章， 在此之前的学习中， 通过对计算机操作系统、 Office 相关软件、 Flash 动画制作软件的学习，学生已经具备了一定的

2、计算机基础知识，也具备了基本的计算机操作能力。初中二年级的学生， 对于新鲜事物的接受能力比较强， 但绝大多数学生对于计算机的操作还处于一种模仿阶段， 主动联系实际和主动思考举一反三的能力还有待加强。教学目标知识与技能：1. 了解常见图片的格式、特点、应用范畴；2. 能够进行图片格式的转换；3. 能够修改图片的尺寸；4. 理解缩略图的概念和意义，学会如何在网页中应用缩略图。过程与方法：5. 在实践中，掌握网页制作中对图片进行操作 （先期处理图片， 中期插入图片，后期浏览图片）的完整过程，体会技术操作的有序性。情感态度与价值观：6 培养学生在生活中发现问题， 并尝试以探究的方式去解决问题的意识和能

3、力。教学重点常用图片处理的操作：格式转换、缩略图的应用。教学难点让学生能够真正理解图片处理的操作在网页制作中的意义。教学方法任务驱动教学用具多媒体网络教室、演示文稿、学生实践素材、实践帮助文档等。板书设计网页制作中的图片处理一、格式静态： JPEG动态： GIF格式转换二、尺寸缩略图教学环节教学过程教师活动学生活动引入提问：同学们在学校或在家用计算机上网的时候有没有遇到过网页显示速度很慢的情况？为什么会出现这种情况？学生回答：有过，可能因为带宽窄，机器配置不高，有病毒，网页内容过多等。播放视频，用同一台机器访问两个不同页面时速度不同，为什么？学生回答：第一个网页图片少所以快，另一个图片多所以慢

4、。从我们制作网页的角度来看， 怎样解决这个问题？我们需要对图片先期处理之后再插入到网页中去。图片处理的目的：节省空间、节省时间。本质上就是要把图片处理小。从哪些角度去对图片进行处理呢？一是格式，二是尺寸。提问引导播放视频板书思考回答观看视频新课一、图片的格式。1. 网络中常用的图片格式列出部分图片格式。挑出其中较常见的格式。BMP， JPEG ， GIF ， PNG把一个相同内容的图片分别存储为四种格式， 让学生比较大小和清晰度， 并分组从网上搜集一种格式的主要特点。请同学分别简单介绍它们的原理、特点，教师总结。BMP：清晰度高，文件最大。JPEG ：清晰度一般，文件最小。GIF ：清晰度一般

5、，文件较小，支持动画。PNG：结合了 JPEG 和 GIF 的优点，文件偏大，但兼容性差，未来应用前景较好。请同学们选择在网页中应该选用哪种。提示选择原则：1.图片能正常显示。2. 图片质量不影响浏览。3. 占用空间越小越好。结论：网页中常用的图片格式是 JPEG 和 GIF 。讲解引导板书自己动手观察，搜集信息，总结成表。2. 图片格式的转换简单介绍各种图片处理软件。我们所用的软件： Photoshop 。方法：1 ）文件 -打开，打开需要进行格式转换的图片。2 ）文件 - 存储为 . ，在格式一项点选下拉菜单，在列表中选择 jpeg ，保存。学生任务一：把“素材图片”文件夹中的图片统一改成

6、 JPEG 格式。注意查看处理前后图片文件的大小。演示巡视指导操作二、图片的尺寸我们把鼠标悬停在一个图片文件上， 可以看到它的尺寸。 图片的尺寸我们通常用像素来表示： 如我们的显示器桌面的尺寸为 1024*768 ，分别是宽和高的像素数量。1. 缩略图的概念和意义。同学们都用过百度图片，当我们搜索后，它会为我们列出很多备选图片，每个图片大小和尺寸也都不是很小， 为什么就可以快速响应呢？在搜索到的图片上点右键保存，得到的是原始大小的图片吗？请同学们尝试。搜索到的图片并不是我们想要的图片， 而是原图的缩略图， 点击缩略图后弹出网页，当中显示的才是真正的原图。当网页中涉及到大量图片浏览或下载时， 就

7、要使用缩略图。既能全面浏览，又能有针对性地下载。下面就用缩略图的理念指导我们制作一个能够快速响应的网页。2. 尺寸的修改网页当中图片的尺寸一般所看即所得，网页设计时为图片预留了多大位置，就应该把图片处理成多大。方法：1 ）文件 -打开，打开需要更改尺寸的图片。2 ）图像 - 图像大小，在弹出的对话框中将像素大小的宽度改成网页中需要的大小。保证“锁定纵横比”被勾选中，否则图片的比例会有所改变。3 ）将图片另存。学生任务二、在“素材图片”文件夹中选择 3 张图片，把他们的宽度改为 300 ，另存为“原文件名 small ”3. 缩略图网页的实现原图和缩略图我们都已准备好， 最后我们在网页中用超链接

8、将他们链接在一起。步骤：1 ）将用于网页的原图和缩略图复制到网页的images文件夹中。2 ）用 FrontPage打开网页模板，把缩略图插入网页相应位置。3 ）在缩略图上点右键添加超链接，指向原图。学生任务三：根据给定模板制作一个图片下载的网页，显示至少 6 张图片的缩略图，点击缩略图打开原始图片。每张图片配上简单的介绍。讲解巡视指导巡视指导观察思考上网求证完成任务完成任务切换学生机让学生展示自己的完成情况， 教师就技术层面和设计层面予以评价和鼓励。评价标准：技术层面： 1.缩略图大小合适。2. 超链接建立正确。设计层面： 1. 文字设计合理。2. 配色美观大方。评价鼓励展示成果小结本节课学习的主要内容