3使用图像与多媒体【荐】.ppt

Web编程基础 ——使用图像与多媒体 学习目标 理解矢量图和位图的区别，了解常用的Web图像格式。 理解Web图像的处理流程，初步掌握基本的Web图像处理操作。 掌握在网页中插入图像的方法，理解图像在网页中的作用和Web图像的基本使用原则。 学习目标 理解在网页中可使用的对象类型。 掌握在网页中插入多媒体对象和Java小应用程序的方法。 理解Flash动画中的基本概念，初步掌握Flash动画的制作方法。 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 Fireworks 使用网页图像的要点 确保文件较小 使图像具有所需的像素大小 采用正确的格式进行优化处理 控制图像的数量和质量 重复使用图像 使用图像时一定要有充分的理由 合理使用动画 Web 图像的处理流程 打开或创建图像 修改图像和添加图像效果 创建Web对象 优化图像 导出图像 Part 2 常用图像处理 如何获得图像素材？ 直接在网上下载 使用图像资源光盘 自行创建 使用图形图像软件 使用扫描仪 使用数码相机 捕捉屏幕图像 演示——下载网页中的图像 演示——使用图像资源光盘 1、获取 2、优化 3、使用 演示——捕捉屏幕图像 1、捕捉（使用【Print Screen】或【Alt + Print Screen】） 2、优化 3、使用 演示——修改图像大小 page53 演示——图像的优化与导出 page53 Part 3 在网页中使用图像 在网页中插入图像 IMG 标记符 Src 属性用于指定要插入的图像的文件名（包括路径） Alt 属性表示图像的简单文本说明 演示——插入图像 在网页中插入图像 IMG 标记符 WIDTH 和 HEIGHT 属性指定图像的显示大小 BORDER 属性指定图像的边框 演示——width和height属性 在网页中插入图像 IMG 标记符 align属性设置对齐方式 hspace属性设置水平方向的空白 vspace属性设置垂直方向的空白 演示——hspace和vspace属性 使用动画gif 什么是动画gif 一系列的图像按累进顺序排列，每个图像的显示与前面一个图像有所不同，当这些图像连续显示时，动画效果就产生了。 在网页中插入动画gif 与插入普通图片一样用IMG标记符 演示——动画gif的效果 演示——动画gif的原理 在 Fireworks 中打开刚才的动画文件…… 图像与超链接 图像既可以作为超链接的源，也可以作为超链接的目标。例如，Web相册。 图像映射是指在同一幅图中定义若干区域，不同区域对应不同的超链接，单击不同区域可跳转到相应页面。 演示——图像链接效果 客户端图像映射 什么是客户端图像映射 在同一幅图中定义若干区域，不同区域对应不同的超链接，单击不同区域可跳转到相应页面。 客户端图像映射的使用（1）定义映射图（2）使用映射图 客户端图像映射 定义映射图：map标记符和area标记符 使用映射图：img usemap=#映射图名称 AREA标记符 Shape属性（rect、circle、poly） Coords属性 Href属性 演示——图像映射效果 Part 4 网页中的特殊对象 多媒体对象 OBJECT和PARAM标记符 EMBED标记符 embed src=motivational.mov width=540 height=312“ autostart=“false” /embed Flash对象 声音、