使用图像优秀培训书.ppt

第三课 使用图像 时间 2课时 学习目标 理解矢量图和位图的区别，了解常用的Web图像格式。 理解Web图像的处理流程，初步掌握基本的Web图像处理操作。 掌握在网页中插入图像的方法，理解图像在网页中的作用和Web图像的基本使用原则。 掌握Fireworks 基本操作 Part 1 Web图像基础 矢量图与位图 矢量图形是指用线条和填充色等数学信息来描述图像的一种图像类型。 制作矢量格式图像的软件有 Freehand、Illustrator、CorelDraw、AutoCAD 。 演示——Flash动画的效果 矢量图与位图 位图是指用像素一点一点地描述图像的一种图像类型。 常用的位图编辑软件有 Fireworks、Photoshop、ImageReady、PhotoImpact 等。 常用Web图像格式 常用的Web网页图像格式包括： GIF JPEG PNG GIF格式图像 GIF（Graphics Interchange Format，图形交换格式）格式的特点： 有损压缩 最多256色 能够使用透明色 交错式Gif（interlaced gif） 动画Gif 演示——透明GIF效果 JPEG格式图像 JPEG（Joint Photographic Expert Group，联合图形专家组）格式的特点： 有损压缩 没有颜色限制 可以控制压缩比 渐进式JPEG（progressive JPEG） 演示——不同质量的JPEG PNG格式图像 PNG（Portable Network Graphics，可移植的网络图形）格式的特点： 无损压缩 没有颜色限制 支持透明度 常用图像处理软件 Windows 画图 照片编辑器 PhotoShop PhotoDraw Fireworks 使用网页图像的要点 确保文件较小 使图像具有所需的像素大小 采用正确的格式进行优化处理 控制图像的数量和质量 重复使用图像 合理使用动画 Web 图像的处理流程 打开或创建图像 修改图像和添加图像效果 创建Web对象 优化图像 导出图像 Part 2 常用图像处理 如何获得图像素材？ 直接在网上下载 使用图像资源光盘 自行创建 使用图形图像软件 使用扫描仪 使用数码相机 捕捉屏幕图像 演示——捕捉屏幕图像 1、捕捉（使用【Print Screen】或【Alt + Print Screen】） 2、优化 3、使用 Part 3 在网页中使用图像 在网页中插入图像IMG 标记符 IMG 标记符的功能：在当前位置插入图像。 格式： IMG src=“image-URL” alt=“简单说明” width=“x” height=“y” border=“边框长度” align=“对齐方式”。 IMG 标记符的属性： src：要加入图像文件的URL地址，常用图像格式为gif或jpg。 alt：图像文件的替代说明，当图像无法显示时，显示“简单说明”。 width：设置图像的宽度，可以为点数或相对窗口宽度的百分比。 height：设置图像的高度，可以为点数或相对窗口高度的百分比。 border：设置图像外围边框宽度，其值为正整数。 align：设置在页面中的位置，可以为LEFT，RIGHT或CENTER。 演示——插入图像 在网页中插入图像 IMG 标记符 WIDTH 和 HEIGHT 属性指定图像的显示大小 BORDER 属性指定图像的边框 演示——width和height属性 在网页中插入图像 IMG 标记符 align属性设置对齐方式 hspace属性设置水平方向的空白 vspace属性设置垂直方向的空白 演示 使用动画gif 什么是动画gif 一系列的图像按累进顺序排列，每个图像的显示与前面一个图像有所不同，当这些图像连续显示时，动画效果就产生了。 在网页中插入动画gif 与插入普通图片一样用IMG标记符 演示——动画gif的效果 图像与超链接 图像既可以作为超链接的源，也可以作为超链接的目标。例如，Web相册。 图像映射是指在同一幅图中定义若干区域，不同区域对应不同的超链接，单击不同区域可跳转到相应页面。 演示——图像链接效果 客户端图像映射 什么是客户端图像映射 在同一幅图中定义若干区域，不同区域对应不同的超链接，单击不同区域可跳转到相应页面。 客户端图像映射的使用 （1）定义映射图 （2）使用映射图 客户端图像映射 定义映射图：map标记符和area标记符 使用映射图：img usemap=#映射图名称 AREA标记符 Shape属性（rect、circle、poly） Coords属性 Href属性 演示——图像映射效果 Part 4 Fireworks快速入门 （时间：4学时） 概述 本课内容 1、F