Web 开发与技术设计10_1.ppt

Web开发与技术设计第十讲 Web上的图像 济南大学网络中心 孙润元 nicstaff@ujn.edu.cn 网页中的插图处理 这里的插图，是指除系统产生的字符和色彩以外的图形图像。包括广告、图画、照片、文字等等。 网页中的插图是网站建设的主要内容之一，就信息发布的角度而言，插图可以起到文字说明不了的内容，同时插图也是网页装饰的主要手段。 插图大体可分为两大类型：一是照片类；二是绘画类。 照片类插图 照片类插图是指由数码相机、扫描仪等扫描照片得到的图像，这类图像的特点在于它们能够真实地记录现实中事物的原貌，给人以真实可靠的印象。 从技术上讲，它们属于全色调图像，利用色调的明暗变化，全方位地表现事物的形态结构，空间体积，质感等视觉属性。最典型的就是新闻照片，是图形图像中最为客观真实的一种，。 照片类图像是比较容易得到的，除了数码相机拍摄图片以外，普通照片扫描后即可使用。另外，一些图片社、广告公司也提供图片素材光盘，从中可以找到许多精美的图像资料。 照片类插图被广泛地运用于网页设计之中，如宣传产品、发布新闻信息、广告设计、页面装饰美化。 绘画类插图 绘画类插图一般来自于手工绘画或软件制作，如常见的卡通图画、装饰图案、文字图形以及用图形图像软件处理加工过的照片等（当然它们也可以绘制出与照片效果类似的3D 图像）。 绘画类插图在网页设计中具有自己的优势，它可以根据作者的创意，按照网站的风格设计创作画面，使网站的效果统一，富于整体感；它可以随心所欲地创作图像或广告，具有传达信息的优势；另外，这类图像更易于制作成较小的图像文件，更便于网上的传输。 一般来说，照片类插图与绘画类插图可以配合使用，这也是电子商务网站的客观需要，只是绘画类插图的创作需有专业人员才能完成。 图像的虚实效果 图像的虚实效果是人对图像的感觉，指的是图像的清晰强烈或模糊含蓄的程度，简单的虚实效果可以这样理解，实：图像清晰，线条分明；虚：图像模糊，色彩浅淡（灰暗）。 图像的虚实效果 实的图像 一种是有规范的四边，像未经处理的照片类图像，一般都带有裁切后自然留下的边框，是四条清晰的线条，由于图像的色调、线条与背景色形成强烈的对比，给人以坚硬、实在的感觉，假如网页上的图像都是这种样式，就显得整齐规范，同时也显得死板、生硬； 图像的虚实效果 实的图像 另一种是不规范外轮廓，即轮廓清晰，其图像背景色与网页背景色一致（将图像背景色处理成透明色），许多卡通画插图都采用这种样式。 图像的虚实效果 虚的图像 是指图的外轮廓与网页的背景色自然衔接过渡，给人以十分柔和含蓄的感觉，比较自然地与网页结合为一体。 图像的虚实效果 虚的图像 另外一种虚的图像，整个色调被极大地淡化处理，作为背景色的图案出现，衬托前景的文字。 图像的格式 计算机的数字图形图像的储存、交换技术上，图形图像的格式就显得十分重要了。没有统一的格式，图形图像就不能方便地在其他计算机上显示，网络上的图形图像更是受到网络传输速度的限制。 如何使有限的带宽得到合理的利用，节省浏览者的等候时间，压缩图像文件是十分必要的。用数据压缩工具优化你的图像文件，不但节省有限的信道带宽，加快网上访问速度，同时，还可以节省可观的上网费用（无论是服务器端还是客户端），当然同样可以节省磁盘空间。 在网页的制作过程中，首先要确定图像的格式，在HTML文件中使用*.jpg、*.gif、*.bmp 等文件格式均可以显示出来，但是绝大多数网页只选择前面的两种，因为这两种文件格式能对图像进行很大程度的压缩，使得在产生相近视觉效果的前提下，图像文件的容量会小很多。 常见的图像文件格式 BMP格式 　　BMP是英文Bitmap（位图）的简写，它是Windows操作系统中的标准图像文件格式，能够被多种Windows应用程序所支持。随着Windows操作系统的流行与丰富的Windows应用程序的开发，BMP位图格式理所当然地被广泛应用。这种格式的特点是包含的图像信息较丰富，几乎不进行压缩，但由此导致了它与生俱生来的缺点--占用磁盘空间过大。所以，目前BMP在单机上比较流行。 常见的图像文件格式 GIF格式 　　GIF是英文Graphics Interchange Format（图形交换格式）的缩写。 　GIF格式的特点是压缩比高，磁盘空间占用较少，所以这种图像格式迅速得到了广泛的应用。 最初的GIF只是简单地用来存储单幅静止图像（称为GIF87a），后来随着技术发展，可以同时存储若干幅静止图象进而形成连续的动画，使之成为当时支持2D动画为数不多的格式之一（称为GIF89a），而在GIF89a图像中可指定透明区域，使图像具有非同一般的显示效果，这更使GIF风光十足。 常见的图像文件格式 JPEG格式