网页制作中图片处理

板书设计
一、格式 静态：JPEG 格式转换
二、尺寸 缩略图
网页制作中的图片处理 动态：GIF
教学 环节 引入
新课
教学过程
教师活动
提问：同学们在学校或在家用计算机上网的时候有
没有遇到过网页显示速度很慢的情况？为什么会出现 提问引导
这种情况？
学生回答：有过，可能因为带宽窄，机器配置不高，
有病毒，网页内容过多等。
本章为初中信息技术的最后一章，在此之前的学习中，学生通过对计算机 操作系统、Office 相关软件、Flash 动画制作软件的学习，已经具备了一定的 计算机基础知识，也具备了基本的计算机操作能力。
初中二年级的学生，对于新鲜事物的接受能力比较强，但绝大多数学生对 于计算机的操作还处于一种模仿阶段，主动联系实际和主动思考举一反三的 能力还有待加强。 知识与技能： 1、 了解常见图片的格式、特点、应用范畴； 2、 能够进行图片格式的转换； 3、 能够修改图片的尺寸； 4、 理解缩略图的概念和意义，学会如何在网页中应用缩略图。 过程与方法： 5、 在实践中，掌握网页时对图片进行操作（先期处理图片，中期插入图片，
播放视频，用同一台机器访问两个不同页面时速度
不同，为什么？
播放视频
学生回答：第一个网页图片少所以快，另一个图片
多所以慢。
从我们制作网页的角度来看，怎样解决这个问题？
我们需要对图片先期处理之后再插入到网页中去。 板书
图片处理的目的：节省空间、节省时间。
本质上就是要把图片处理小。
从哪些角度去对图片进行处理呢？
完成任务
展示 评价
切换学生机让学生展示自己的完成情况，教师就技 术层面和设计层面予以评价和鼓励。 评价标准：
技术层面：1、缩略图大小合适。 2、超链接建立正确。
设计层面：1、文字设计合理。 2、配色美观大方。
评价鼓励
展示成果
小结
本节课学习的主要内容： 网页制作中的图片处理
格式 常用图片格式 图片格式的转换
学生活动 思考回答 观看视频
自己动手观 察，搜集信息， 总结成表。
操作
网页制作中的图片处理 北京市回民学校 魏征
二、图片的尺寸 我们把鼠标悬停在一个图片文件上，可以看到它的
尺寸。图片的尺寸我们通常用像素来表示：如我们的 显示器桌面的尺寸为 1024*768，分别是宽和高的像素 数量。 1、缩略图的概念和意义。
后期浏览图片）的完整过程，体会技术操作的有序性。 情感态度与价值观： 6、培养学生在生活中发现问题，并尝试以探究的方式去解决问题的意识和能 力。
教学重点 常用图片处理的操作：格式转换、缩略图的应用。
教学难点 让学生能够真正理解图片处理的操作在网页制作中的意义。
教学方法 任务驱动
教学用具 多媒体网络教室、演示文稿、学生实践素材、实践帮助文档等。
同学们都用过百度图片，当我们搜索后，它会为 我们列出很多备选图片，每个图片大小和尺寸也都不 是很小，为什么就可以快速响应呢？在搜索到的图片 上点右键保存，得到的是原始大小的图片吗？
请同学们尝试。
讲解
观察思考 上网求证
搜索到的图片并不是我们想要得图片，而是原图的 缩略图，点击缩略图后弹出网页，当中显示的才是真 正的原图。
板书
2、图片格式的转换
简单介绍各种图片处理软件。
我们所用的软件：Photoshop。
方法：
演示
1）、文件->打开，打开需要进行格式转换的图片。
2）、文件->存储为..，在格式一项点选下拉菜单，
在列表中选择 jpeg，保存。
学生任务一：把“素材图片”文件夹中的图片统一改
成 JPEG 格式。注意查看处理前后图片文件的大小。 巡视指导
一是格式，二是尺寸。
一、图片的格式。
1、网络中常用的图片格式
讲解
列出部分图片格式。挑出其中较常见的格式。
BMP,JPEG,GIF,PNG
把一个相同内容的图片分别存储为四种格式，让学生
比较大小和清晰度，并分组从网上搜集一种格式的主
要特点。
请同学分别简单介绍它们的原理、特点，教师总结。
BMP：清晰度高，文件最大。
JPEG：清晰度一般，文件最小。
GIF：清晰度一般，文件较小，支持动画。
PNG：结合了 JPEG 和 GIF 的优点，文件偏大，但兼 引导
容性差，未来应用前景较好。
请同学们选择在网页中应该选用哪种。
提示选择原则：1、图片能正常显示。
2、图片质量不影响浏览。
3、占用空间越小越好。
结论：网页中常用的图片格式是 JPEG 和 GIF。
课题
网页制作中的图片处理
授课教师
魏征
时间
2010-4-20
ቤተ መጻሕፍቲ ባይዱ
班级
初二 1 班
教材分析 学情分析 教学目标
本节课的教学内容是教材第七章《网页制作》中关于图片的相关处理。本 章教材中并没有单独安排对于图片处理的内容，但图片在网页制作和应用中 的作用是举足轻重的。由于图片处理需要涉及到其他相关软件，本节课在教 材的基础上对教学内容做了适当的调整：将学生的日常应用、图片处理技术 和网页制作技术结合起来进行讲解和任务安排。这样安排的目的，主要在于 力求让学生能够理解：解决一个问题往往要使用多种工具，运用多种方 法。
当网页中涉及到大量图片浏览或下载时，就要使用 缩略图。既能全面浏览，又能有针对性的下载。
下面就用缩略图的理念指导我们制作一个能够快 速响应的网页。
2、尺寸的修改 网页当中图片的尺寸一般所看即所得，网页设计时
为图片预留了多大位置，就应该把图片处理成多大。 方法：
1）、文件->打开，打开需要更改尺寸的图片。 2）、图像->图像大小，在弹出的对话框中将像 素大小的宽度改成网页中需要的大小。保证“锁定纵 横比”被勾选中，否则图片的比例会有所改变。 3）、将图片另存。 学生任务二、在“素材图片”文件夹中选择 3 张图片， 巡视指导 把他们的宽度改为 300，另存为“原文件名 small”
完成任务
3、缩略图网页的实现 原图和缩略图我们都已准备好，最后我们在网页
中用超链接将他们链接在一起。 步骤：
1）、将用于网页的原图和缩略图复制到网页的 images 文件夹中。
2）、用 frontpage 打开网页模板，把缩略图插入网 页相应位置。
3）、在缩略图上点右键添加超链接，指向原图。
学生任务三：根据给定模板制作一个图片下载的网页， 巡视指导 显示至少 6 张图片的缩略图，点击缩略图打开原始图 片。每张图片配上简单的介绍。