网页中插入图片
第5课、网页中加入图片
本课时教学目的和要求 1、学会在网页中添加合适的图像,丰富网页中的信息。
2、培养学生的美感。
本课时教学重点和难点:1、在网页中插入图像。
2、网页中图像属性的设置。
教学过程
欣赏作品 学生欣赏两张教师提前制作好的网页:一张全文本,一张插入了美丽的图像。
学生说说当你看了这两张网页后,你的感觉如何?
学生: 纯文本的网页过于单调,而在文本的基础上,向网页中添加一些色彩绚丽的
图片,产生图文并茂的显示效果,页面就会更加生动、富有吸引力。
导入新课 由学生的回答,导入新课(板书课题)
复习旧知 1、你还记得以前在POWERPOINT97和WPS2000中如何插入图片。
2、上学期我们学过的多媒体的制作中,
A、图片获得的途径有哪些?
自行绘制、数码相机拍摄、扫描仪扫描、网上下载、抓图软件抓取。
B、用哪个软件可以对图片进行简单的处理?
C、用什么软件进行浏览图片?
讲授新课
一、出示任务
1、[出示任务] 在保护动物网页中加入图片。
2、[分析任务] 板书
A、打开网站
B、插入图片(寻找图片路径)
C、修饰图片
D、保存网页
二、学生带着问题看书上机操作,完成任务
首先观察:状态栏中的传输速率和时间,时间为0,说明无图片,加入图片后再观察数值。(图片下载时间)同时思考问题,以便回答:
1、 在网页中插入图片的方法;
2、 在网页中使用的图像格式有哪些?
3、 可对图片进行哪些属性的调整。
&强调 A、出现问题,举手询问;
B、看书时,先大概浏览课本,通过标号了解本节主要知识点,然后在仔细阅读,会的地
方不必细看,难处仔细推敲。
C、保存网页时注意图片的保存位置。
三、学生回答,教师讲解重点
1、网页中插入图片的格式
A、 GIF---最高支持256色,无损压缩,可增加动画效果。
B、 JPGE---可存取1600万种颜色,采用有损压缩方式,压缩率较大,图片相对教小。
C、PNG----支持真彩色,采用无损压缩
D、其它:BMP 、PCX、RAS、EPS、PCD、WMF
注意:如果图片不是GIF或JPG格式,那么保存网页时,使用256色或更少颜色的图片
会自动被转为GIF格式,其它所有图片转为JPG格式。
若插入的是动画,在浏览器下才能看到动态效果。
说明:虽然PNG有许多优点,但目前网页中使用最多的仍然是GIF和JPGE两种格式。其它图片
最好转换成这两种格式后再插入网页中。那么在网页中到底采用哪一种呢?其实,每一种
格式都有它的优点。GIF格式的图片由于只能包含最多256种颜色,所以适合保存那些一
文字为主、包含颜色数目教少的图片,而JPGE适合保存颜色数目最大的照片、海报等图
片。
总之,色彩鲜艳高分辨率的用JPG格式,色彩单调低分辨率的用GIF格式。
2、网页中添加图片应考虑的问题:
要想使图片达到最佳效果,并不是一件容易的事,大家往往喜欢在网页上添加很多的图像,造
成网页页面杂乱,主题不突出。其实网页中的图像不是越多越好。网页中添加图像时首先要考
虑到以下问题:
A、用图像来达到什么目的?
B、什么样的图片最合适达到这些目的?
C、将插入的图像有多大?
网页中使用的图片不要太大,一般情况最好单张不要超过25-30K,每页图片总量不要超过60K这样站用的磁盘空间较少,网上传输时间较短。
网页设计有“30秒40K”的原则,即浏览网页时,30秒内若无法读取40K以上的资料,面对空荡荡的屏幕,浏览者往往想终止读取。
D、这些图像放在网页的什么位置最好?
3、改变图像的属性
设置方法:
右击图片―选择图片属性,在图片属性对话框中设置
教师演示以下方法:
A、改变大小
B、设置对齐方式
C、给图像加边框
D、更换图片
4、图片处理
A、剪裁图像
B、调整对比度/亮度
C、、删除图片
D、在图片上写文字
说明:只有GIF图片可写文字,所以JPGE文件上加文字,计算机先提示是否转变为GIF文件
E、图片的定位与图层的形成
[提问] 同学们有没有发现我们选中图片后,出现了什么?
[学生回答]又出现了一个工具栏。
[总结]
对了,我们选中图片后会出现“图片工具栏”。我们以下对图片的处理就是利用“图片工具栏”来实现。
[演示]
我们选中图片,然后单击工具栏上的“绝对定位”按钮。现在我们会发现,图片已不在一行文字之间,它可以让我们随意移动了。
同样,我们还可以利用“图片工具栏”对图片进行图层处理,实现图片的叠放。
现在我们插入两个图片,选中第一个图片,然后选择“图片工具栏”上的“上移一层”按钮。这样我们就可以实现两图片的叠放了。
[讲解]
我们插入图片后还希望它更美观,同样,我们的“图片工具栏”也提供了这样的效果。我们可以把图片上的任意颜色设置为透明色
F、图片的透明处理
[演示]选中图片,单击“图片工具栏”上的“设置透明的颜色”按钮。
我们看到指针变成了小魔棒形状,单击我们需要把它变成透明的白色,就产生了透明效果。
4、保存网页
保存时对嵌入式图片应Images文件夹中,已防止文件夹中的文件凌乱。
四、学生上机操作,完成任务。
巩固练习 利用今天学习的知识制作班级网站的真正主页,取名为“index”开始做那张主页改 名为 “index1”。
课堂小结 本节主要讲了如何向网页中插入图片以及对图片属性的调整。
布置作业 无作业
板书设计:
第5课、网页中加入图片
一、插入图片
A、 改变大小
B、 设置对齐方式
C、 给图像加边框
D、 更换图片
二、改变图片属性
三、图片处理
A、裁剪图片
B、调整对比度、亮度
C、删除图片
D、在图片上写字
E、图片的定位和图层的形成
F、透明效果处理
四、保存网页:图片保存位置的选择