计算机软件及应用使用图像.pptx

1/41学习目标理解矢量图和位图的区别，了解常用的Web图像格式。理解Web图像的处理流程，初步掌握基本的Web图像处理操作。 掌握在网页中插入图像的方法，理解图像在网页中的作用和Web图像的基本使用原则。

2Part1Web图像基础

3/41矢量图与位图矢量图形是指用线条和填充色等数学信息来描述图像的一种图像类型。制作矢量格式图像的软件有Freehand、Illustrator、CorelDraw、AutoCAD。

4/41演示——Flash动画的效果

5/41矢量图与位图位图是指用像素一点一点地描述图像的一种图像类型。常用的位图编辑软件有Fireworks、Photoshop、ImageReady、PhotoImpact等。

6/41常用Web图像格式常用的Web网页图像格式包括：GIFJPEGPNG

7/41GIFGIF（GraphicsInterchangeFormat，图形交换格式）格式的特点：无损压缩最多256色能够使用透明色交错式Gif（interlacedgif）动画Gif

8/41演示——透明GIF效果

9/41JPEGJPEG（JointPhotographicExpertGroup，联合图形专家组）格式的特点：有损压缩没有颜色限制可以控制压缩比渐进式JPEG（progressiveJPEG）

10/41演示——不同质量的JPEG

11/41PNGPNG（PortableNetworkGraphics，可移植的网络图形）格式的特点：无损压缩没有颜色限制支持透明度

12/41常用图像处理软件Windows画图照片编辑器PhotoShopPhotoDrawFireworksFreehandCorelDrawIllustratorVisio

13/41使用网页图像的要点确保文件较小使图像具有所需的像素大小采用正确的格式进行优化处理控制图像的数量和质量重复使用图像合理使用动画

14/41Web图像的处理流程打开或创建图像修改图像和添加图像效果创建Web对象优化图像导出图像

15Part2常用图像处理

16/41如何获得图像素材？直接在网上下载使用图像资源光盘自行创建使用图形图像软件使用扫描仪使用数码相机捕捉屏幕图像

17/41演示——下载网页中的图像1、下载2、优化3、使用

18/41演示——使用图像资源光盘1、获取2、优化3、使用

19/41演示——捕捉屏幕图像1、捕捉（使用【PrintScreen】或【Alt+PrintScreen】）2、优化3、使用

20/41演示——修改图像大小page53

21/41演示——图像的优化与导出page53

22Part3在网页中使用图像

23/41在网页中插入图像IMG标记符Src属性用于指定要插入的图像的文件名（包括路径）Alt属性表示图像的简单文本说明

24/41演示——插入图像

25/41在网页中插入图像IMG标记符WIDTH和HEIGHT属性指定图像的显示大小BORDER属性指定图像的边框

26/41演示——width和height属性

27/41在网页中插入图像IMG标记符align属性设置对齐方式hspace属性设置水平方向的空白vspace属性设置垂直方向的空白

28/41演示——hspace和vspace属性

29/41使用动画gif什么是动画gif一系列的图像按累进顺序排列，每个图像的显示与前面一个图像有所不同，当这些图像连续显示时，动画效果就产生了。在网页中插入动画gif与插入普通图片一样用IMG标记符

30/41演示——动画gif的效果

31/41演示——动画gif的原理在Fireworks中打开刚才的动画文件……

32/41图像与超链接图像既可以作为超链接的源，也可以作为超链接的目标。例如，Web相册。图像映射是指在同一幅图中定义若干区域，不同区域对应不同的超链接，单击不同区域可跳转到相应页面。

33/41演示——图像链接效果

34/41客户端图像映射什么是客户端图像映射在同一幅图中定义若干区域，不同区域对应不同的超链接，单击不同区域可跳转到相应页面。客户端图像映射的使用（1）定义映射图（2）使用映射图

35/41客户端图像映射定义映射图：map标记符和area标记符使用映射图：imgusemap=#映射图名称

36/41AREA标记符Shape属性（rect、circle、poly）Coords属性Href属性

37/41演示——图像映射效果

38Part4作业2：在网站中增加图像

39/41要求至少6页，在第一次作业的基础上制作。导航结构要清楚。合理使用图像对网站进行修饰。所有图像文件都存放在images子目录中。

40/41That’sallforthisc