HTML语言与网页设计3.ppt

HTML语言与网页设计,使用图像,学习目标,理解矢量图和位图的区别，了解常用的Web图像格式。理解Web图像的处理流程，初步掌握基本的Web图像处理操作。掌握在网页中插入图像的方法，理解图像在网页中的作用和Web图像的基本使用原则。,Part1,Web图像基础,矢量图与位图,矢量图形是指用线条和填充色等数学信息来描述图像的一种图像类型。制作矢量格式图像的软件有Freehand、Illustrator、CorelDraw、AutoCAD。,演示Flash动画的效果,矢量图与位图,位图是指用像素一点一点地描述图像的一种图像类型。常用的位图编辑软件有Fireworks、Photoshop、ImageReady、PhotoImpact等。,常用Web图像格式,常用的Web网页图像格式包括：GIFJPEGPNG,GIF,GIF（GraphicsInterchangeFormat，图形交换格式）格式的特点：无损压缩最多256色能够使用透明色交错式Gif（interlacedgif）动画Gif,演示透明GIF效果,JPEG,JPEG（JointPhotographicExpertGroup，联合图形专家组）格式的特点：有损压缩没有颜色限制可以控制压缩比渐进式JPEG（progressiveJPEG）,演示不同质量的JPEG,PNG,PNG（PortableNetworkGraphics，可移植的网络图形）格式的特点：无损压缩没有颜色限制支持透明度,常用图像处理软件,Windows画图照片编辑器PhotoShopPaintShopProPhotoDrawFireworks,FreehandCorelDrawIllustratorCool3DFlashVisio,使用网页图像的要点,确保文件较小使图像具有所需的像素大小采用正确的格式进行优化处理控制图像的数量和质量合理使用动画,Web图像的处理流程,打开或创建图像修改图像和添加图像效果创建Web对象优化图像导出图像,Part2,常用图像处理,如何获得图像素材？,直接在网上下载使用图像资源光盘自行创建使用图形图像软件使用扫描仪使用数码相机捕捉屏幕图像,演示下载网页中的图像,1、下载2、优化3、使用,演示使用图像资源光盘,1、获取2、优化3、使用,演示捕捉屏幕图像,1、捕捉（使用【PrintScreen】或【Alt+PrintScreen】）2、优化3、使用,演示修改图像大小,page42,演示图像的优化与导出,page43,Part3,在网页中使用图像,在网页中插入图像,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）使用映射图,客户端图像映射,定义映射图：标记符和标记符使用映