网页制作中的图片处理

《网页制作中的图片处理》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、网页制作中的图片处理北京市回民学校魏征课题网页制作中的图片处理授课教师魏征时间2010-4-20班级初二1班教材分析本节课的教学内容是教材第七章《网页制作》中关于图片的相关处理。本章教材中并没有单独安排对于图片处理的内容，但图片在网页制作和应用中的作用是举足轻重的。由于图片处理需要涉及到其他相关软件，本节课在教材的基础上对教学内容做了适当的调整：将学生的日常应用、图片处理技术和网页制作技术结合起来进行讲解和任务安排。这样安排的目的，主要在于力求让学生能够理解：解决一个问题往往要使用多种工具，运用多种方法。学情分析本章为初中信息技术的最后一章，在

2、此之前的学习中，学生通过对计算机操作系统、Office相关软件、Flash动画制作软件的学习，已经具备了一定的计算机基础知识，也具备了基本的计算机操作能力。初中二年级的学生，对于新鲜事物的接受能力比较强，但绝大多数学生对于计算机的操作还处于一种模仿阶段，主动联系实际和主动思考举一反三的能力还有待加强。教学目标知识与技能：1、了解常见图片的格式、特点、应用范畴；2、能够进行图片格式的转换；3、能够修改图片的尺寸；4、理解缩略图的概念和意义，学会如何在网页中应用缩略图。过程与方法：5、在实践中，掌握网页时对图片进行操作（先期处理图片，中期插入图片，

3、后期浏览图片）的完整过程，体会技术操作的有序性。情感态度与价值观：6、培养学生在生活中发现问题，并尝试以探究的方式去解决问题的意识和能力。教学重点常用图片处理的操作：格式转换、缩略图的应用。教学难点让学生能够真正理解图片处理的操作在网页制作中的意义。教学方法任务驱动教学用具多媒体网络教室、演示文稿、学生实践素材、实践帮助文档等。板书设计网页制作中的图片处理一、格式静态：JPEG动态：GIF格式转换二、尺寸缩略图网页制作中的图片处理北京市回民学校魏征教学环节教学过程教师活动学生活动引入提问：同学们在学校或在家用计算机上网的时候有没有遇到过网页显示

4、速度很慢的情况？为什么会出现这种情况？学生回答：有过，可能因为带宽窄，机器配置不高，有病毒，网页内容过多等。播放视频，用同一台机器访问两个不同页面时速度不同，为什么？学生回答：第一个网页图片少所以快，另一个图片多所以慢。从我们制作网页的角度来看，怎样解决这个问题？我们需要对图片先期处理之后再插入到网页中去。图片处理的目的：节省空间、节省时间。本质上就是要把图片处理小。从哪些角度去对图片进行处理呢？一是格式，二是尺寸。提问引导播放视频板书思考回答观看视频新课一、图片的格式。1、网络中常用的图片格式列出部分图片格式。挑出其中较常见的格式。BMP,J

5、PEG,GIF,PNG把一个相同内容的图片分别存储为四种格式，让学生比较大小和清晰度，并分组从网上搜集一种格式的主要特点。请同学分别简单介绍它们的原理、特点，教师总结。BMP：清晰度高，文件最大。JPEG：清晰度一般，文件最小。GIF：清晰度一般，文件较小，支持动画。PNG：结合了JPEG和GIF的优点，文件偏大，但兼容性差，未来应用前景较好。请同学们选择在网页中应该选用哪种。提示选择原则：1、图片能正常显示。2、图片质量不影响浏览。3、占用空间越小越好。结论：网页中常用的图片格式是JPEG和GIF。讲解引导板书自己动手观察，搜集信息，总结成表

6、。网页制作中的图片处理北京市回民学校魏征2、图片格式的转换简单介绍各种图片处理软件。我们所用的软件：Photoshop。方法：1）、文件->打开，打开需要进行格式转换的图片。2）、文件->存储为..，在格式一项点选下拉菜单，在列表中选择jpeg，保存。学生任务一：把“素材图片”文件夹中的图片统一改成JPEG格式。注意查看处理前后图片文件的大小。演示巡视指导操作二、图片的尺寸我们把鼠标悬停在一个图片文件上，可以看到它的尺寸。图片的尺寸我们通常用像素来表示：如我们的显示器桌面的尺寸为1024*768，分别是宽和高的像素数量。1、缩略图的概念和意义。

7、同学们都用过百度图片，当我们搜索后，它会为我们列出很多备选图片，每个图片大小和尺寸也都不是很小，为什么就可以快速响应呢？在搜索到的图片上点右键保存，得到的是原始大小的图片吗？请同学们尝试。搜索到的图片并不是我们想要得图片，而是原图的缩略图，点击缩略图后弹出网页，当中显示的才是真正的原图。当网页中涉及到大量图片浏览或下载时，就要使用缩略图。既能全面浏览，又能有针对性的下载。下面就用缩略图的理念指导我们制作一个能够快速响应的网页。2、尺寸的修改网页当中图片的尺寸一般所看即所得，网页设计时为图片预留了多大位置，就应该把图片处理成多大。方法：1）、文件

8、->打开，打开需要更改尺寸的图片。2）、图像->图像大小，在弹出的对话框中将像素大小的宽度改成网页中需要的大小。保证“锁定纵横比”被勾选中，否则图片的