网页制作教程 教学课件 作者 赵丰年 1_3使用图像.ppt

《网页制作教程 教学课件 作者 赵丰年 1_3使用图像.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、Web编程基础——使用图像1学习目标理解矢量图和位图的区别，了解常用的Web图像格式。理解Web图像的处理流程，初步掌握基本的Web图像处理操作。掌握在网页中插入图像的方法，理解图像在网页中的作用和Web图像的基本使用原则。2Part1Web图像基础3矢量图与位图矢量图形是指用线条和填充色等数学信息来描述图像的一种图像类型。制作矢量格式图像的软件有Freehand、Illustrator、CorelDraw、AutoCAD。4演示——Flash动画的效果5矢量图与位图位图是指用像素一点一点地描述图像的一种图像类型。常用的位图

2、编辑软件有Fireworks、Photoshop、ImageReady、PhotoImpact等。6常用Web图像格式常用的Web网页图像格式包括：GIFJPEGPNG7GIFGIF（GraphicsInterchangeFormat，图形交换格式）格式的特点：无损压缩最多256色能够使用透明色交错式Gif（interlacedgif）动画Gif8演示——透明GIF效果9JPEGJPEG（JointPhotographicExpertGroup，联合图形专家组）格式的特点：有损压缩没有颜色限制可以控制压缩比渐进式JPEG（p

3、rogressiveJPEG）10演示——不同质量的JPEG11PNGPNG（PortableNetworkGraphics，可移植的网络图形）格式的特点：无损压缩没有颜色限制支持透明度12常用图像处理软件Windows画图照片编辑器PhotoShopPhotoDrawFireworksFreehandCorelDrawIllustratorVisio13使用网页图像的要点确保文件较小使图像具有所需的像素大小采用正确的格式进行优化处理控制图像的数量和质量重复使用图像合理使用动画14Web图像的处理流程打开或创建图像修改图像和

4、添加图像效果创建Web对象优化图像导出图像15Part2常用图像处理16如何获得图像素材？直接在网上下载使用图像资源光盘自行创建使用图形图像软件使用扫描仪使用数码相机捕捉屏幕图像17演示——下载网页中的图像1、下载2、优化3、使用18演示——使用图像资源光盘1、获取2、优化3、使用19演示——捕捉屏幕图像1、捕捉（使用【PrintScreen】或【Alt+PrintScreen】）2、优化3、使用20演示——修改图像大小page5321演示——图像的优化与导出page5322Part3在网页中使用图像23在网页中插入图像IM

5、G标记符Src属性用于指定要插入的图像的文件名（包括路径）Alt属性表示图像的简单文本说明24演示——插入图像25在网页中插入图像IMG标记符WIDTH和HEIGHT属性指定图像的显示大小BORDER属性指定图像的边框26演示——width和height属性27在网页中插入图像IMG标记符align属性设置对齐方式hspace属性设置水平方向的空白vspace属性设置垂直方向的空白28演示——hspace和vspace属性29使用动画gif什么是动画gif一系列的图像按累进顺序排列，每个图像的显示与前面一个图像有所不同，当这

6、些图像连续显示时，动画效果就产生了。在网页中插入动画gif与插入普通图片一样用IMG标记符30演示——动画gif的效果31演示——动画gif的原理在Fireworks中打开刚才的动画文件……32图像与超链接图像既可以作为超链接的源，也可以作为超链接的目标。例如，Web相册。图像映射是指在同一幅图中定义若干区域，不同区域对应不同的超链接，单击不同区域可跳转到相应页面。33演示——图像链接效果34客户端图像映射什么是客户端图像映射在同一幅图中定义若干区域，不同区域对应不同的超链接，单击不同区域可跳转到相应页面。客户端图像映射的使

7、用（1）定义映射图（2）使用映射图35客户端图像映射定义映射图：