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