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

下一页