HTML语言与网页设计3.ppt

《HTML语言与网页设计3.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

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

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

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

4、像和添加图像效果创建Web对象优化图像导出图像Part2常用图像处理如何获得图像素材？直接在网上下载使用图像资源光盘自行创建使用图形图像软件使用扫描仪使用数码相机捕捉屏幕图像演示——下载网页中的图像1、下载2、优化3、使用演示——使用图像资源光盘1、获取2、优化3、使用演示——捕捉屏幕图像1、捕捉（使用【PrintScreen】或【Alt+PrintScreen】）2、优化3、使用演示——修改图像大小page42演示——图像的优化与导出page43Part3在网页中使用图像在网页中插入图像IMG标记符Src属性用于指定要插入

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

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

7、和标记符使用映射图：AREA标记符Shape属性（rect、circle、poly）Coords属性Href属性演示——图像映射效果That’sallforthischapter!