Web 编程入门经典 第3章 图像和对象

第3章图像和对象在本章中，您将开始学习一些能够给Web页面注入生机的Web设计技巧。首先将学习如何利用img元素向文档中添加图像。您将了解用于Web上的图像的主要格式之间的区别，并了解如何准备用于Web的图像。本章还将介绍如何将图像制作为链接，甚至是如何将图像划分为多个部分，以便不同的部分链接到不同的页面——这被称为图像映射。本章然后将介绍object元素，可以利用它向页面中插入各种对象，从MP3、Flash电影到ActiveX控件，甚至是图像。3.1在站点中添加图像图像和图形能够为站点带来生机。在本节中不仅将介绍如何向页面中插入图像和图形，而且将介绍在Web中能够使用的不同的图像格式(例如GIF、JPEG和PNG)。您将了解到什么时候应当选择何种图像格式。在Web中使用图像时必须非常小心，因为如果没有正确地准备它们，将降低页面的加载速度——速度慢的站点将无法吸引到访问者。另外，您很可能是在桌面计算机或笔记本计算机上编写您的第一个站点，因而无法意识到页面加载的时间长短，直到它真正地加载到Web服务器上。因此，选择正确格式的图像并正确地保存它们，将有助于使得站点的加载速度更快，并使得访问者更乐意访问该站点。注意：为了练习目的，可以从其他站点下载一些图像，方式是右击图像（或者Ctrl+单击）并选择“下载图像到磁盘”或者“图像另存为”选项。但是请记住，图像是有版权的，如果在站点中使用了其他人的图像，将会负法律责任。掌握如何向页面中插入正确类型的图像之后，您将学习如何将它们转化为链接，甚至是如何编写用于划分它们的代码，以便当用户单击图像的不同部分时会被转到不同的Web页面。3.1.1图像格式的类型首先有必要了解计算机如何存储和绘制图片。计算机创建图形的方式主要包括两种：位图图形：位图图形将图片划分为由像素组成的网格，并指定每一个像素的颜色，类似于计算机告诉显示屏幕每一个像素的颜色。广义地说，位图是照片以及色调与颜色的复杂渐变的理想格式。存在几种不同的位图格式；常见的包括JPEG、GIF、TIFF、PNG，这些格式被相当混淆地统一命名为位图或BMP。在本章后面的部分中将更详细地介绍JPEG、GIF和PNG。矢量图形：：矢量图形将图像划分为线和形状（类似于线框制图），并以坐标的形式存储线，然后利用颜色填充线之间的空间。矢量图形通常用于艺术线条、图解和动画，它们通常适用于具有大面积单调颜色（相对于纹理、多种色调的颜色和摄影风格）的图像。在早期，位图是Web中使用的主要图像格式。但是，最近有些格式(例如Flash和SVG)））也采用了矢量图形。3.1.2位图图像Web上的大多数静态图像是位图图像。本章前面已经提到，位图被划分为由像素组成的网格。如果近距离观察计算机屏幕，则能够发现组成屏幕的像素。请查看图3-1，该示例中的位图图像的一部分已经被修改，以演示像素如何组成图像。图3-1屏幕的每平方英寸中像素的数量称为图像的分辨率。Web中的图像最大能够每英寸显示72个像素；用于打印的图像通常具有更高的分辨率，提供给打印机的图像的分辨率通常是每英寸300点（注意，屏幕所采用的分辨率单位是“像素／英寸”，而打印机所采用的单位是“点／英寸”）。图像每英寸包含的像素或点的数目越多，则文件的尺寸将越大。因而，Web上使用的任意图像所采用的分辨率是每英寸72点。如果以更高的分辨率保存Web上的图像，则将创建不必要的大型文件，从而导致更长的下载时间。注意：虽然可以很容易将300点/英寸的图像存储为72像素/英寸以用于Web，但是不能简单地将72像素/英寸的图像增加为300点/英寸，因为无法知道每平方英寸中另外228个像素的颜色。如果尝试增加图像的分辨率，则图像将可能呈现为颗粒状。因此，如果拥有300点/英寸的高分辨率图片，则以该尺寸保存它是有意义的，以便将来以较大尺寸或较高分辨率显示它。浏览器通常支持3种常用的位图图形格式，大多数图形程序以这3种格式保存图像：GIF:GraphicsInterchangeFormat(图形交换格式，发音为“gif”“或者“jif”)JPEG：JointPhotographicExpertsGroupFormat(联合照相专家组格式，发音为“jaypeg”)PNG:PortableNetworkGraphics(可移植网络图形，发音为“ping”或者“peeengee”)下面简单介绍这些格式，因为理解这些格式的工作原理将有助于选择如何保存图像。1．GIF图像在Web出现的早期，GIF(或图形交换格式)是所有Web图形的标准。使用多达256色的调色板创建GIF图像，其中图像的每一个像素是256种颜色的一种。每一幅不同的GIF图像具有不同的256色调色板，而这256种颜色是从超过1600万种颜色中选出来的。保存图像的程序将选择能够最好表示图像的调色板。GIF文件将调色板存储在查找表中，每一个像素参考查找表中的颜色信息，而不是为每个像素指定单独的颜色信息。因此，如果许多像素使用相同的颜色，则图像不用重复相同的颜色信息，并最终产生较小的图像文件。这种存储图像的方式称为索引颜色格式。图3-2中给出了由AdobePhotoshop软件创建的一个GIF文件。可以在图的右边看到用于该图像的颜色调色板，即图像右边下半部分由一组方格组成的部分。图3-2因为GIF图像保存颜色信息的方式是采用查找表，所以它们特别适合于具有大面积单调颜色区域的图像。单调颜色区域是指只有一种色调的区域；例如，只具有一种蝌绿色的矩形就是单调颜色，而一幅草地图片则具有多种不同的绿色。图像所使用的颜色越少，则它的GIF文件将越小。如果一幅GIF图像中的颜色少于16种(这种情况下也可以称为4位GIF)，则它的文件尺寸将只有使用256种颜色的GIF文件(称为8位GIF)的一半。因此，如果创建的图像使用少于16种颜色，则有必要检查程序是否自动地将图像保存为4位GIF，因为这将导致产生更小的文件，并且下载该文件的速度乏比下载8位GIF文件的速度更快。注意：如果文本或线本来具有两种颜色（例如黑色和白色），但使用了平滑边以使它们看上去更平滑，则图像所包含的颜色将超过两种，因为边使用了多种其他颜色以便使图像看上去更平滑。如果GIF文件需要使用256种以上的颜色，则大多数图形程序在保存GIF文件时使用一种称为抖动的技术，以更好地表示额外的颜色。因此，它们在相邻像素中使用两种或更多的颜色以创建第三种颜色的效果。抖动具有下面两种缺陷：它会在颜色中产生一些条带。这种情况通常发生在图像的某些地方初始时看上去颜色很单调，但实际上具有很多种不同的色调。例如，当一种颜色和另外一种颜色之间具有平滑的过渡（称为渐变）时，抖动将使用许多种不同的颜色以创建平滑效果。此时，颜色之间的改变将变得更加明显。如果抖动颜色旁边具有单调色，则将能够看到颜色改变发生的位置（因为抖动颜色实际上由多种颜色组成）。图3-3演示了保存为GIF格式时，即使一个简单的渐变也可以产生条带，原因是图像中包含了256种以上的颜色一如果仔细地观察图像，您会发现梯度具有垂直线，而不是平滑地从黑色过渡为白色。图3-3因为GIF格式仅支持256种颜色，不得不使用抖动技术以获得更多的颜色，所以它们不适合包含256种以上的颜色的详细照片。如果照片、渐变或任意图像中具有相同颜色的相似色调，最好是使用JPEG格式，它能够支持无限种颜色；或者使用PNG格式——接下来将介绍这两种格式。为了使得GIF文件更小，可以采用一种称为LZW的压缩技术压缩它们。该技术扫描图像的所有行，查找具有相同颜色的连续像素。当遇到这些像素时，该技术就会指示从某个点开始向后x个像素具有相同的颜色。LZW压缩是一种无损压缩技术，因为不丢失任何数据，所以不影响图像质量（相反的一种技术称为有损压缩技术，在压缩时某些数据被抛弃，因此无法通过压缩文件恢复）。但是，当具有相同颜色的连续像素的数目较少时，该技术的压缩率将较低。因此，该技术不能很好地压缩相片图像，因为在相片中相邻像素看上去可能相同，但实际上具有非常轻微的差别。此外，如果图片使用复杂的抖动技术以获得细微差别的着色效果，则找到具有相同颜色的连续像素的机会较少，因此文件不能被很好地压缩。有些程序能够将文件保存为交错图像。交错意味着图像中线的存储顺序与它们在图像中的出现顺序不同，浏览器将依次显示每个第8条线，然后填充它们之间的线。交错图像的思想是，如果拥有一个大文件并且网络速度较慢，则用户将提前看到某些内容，并且图像将逐渐变得清晰。但是，随着Web的连接速度的提升，交错GIF逐渐退出了历史舞台。2．动画GIFGIF图像能够在一个文件中存储多个帧（或者多个图像副本），这使得GIF图像能够在不同版本／帧之间循环，并创建简单的动區画效果。它的原理与翻书动画类似。在翻书动画中，书的每一页的绘图与前一页具有轻微的差别，因此当用户翻书时，图像看上去好像在移动。如果动画图像中包含大面积的单调颜色，则这种技术非常适用。这种技术的压缩非常高效，因为仅需要存储每一帧中改变的像素以及这些像素的位置。但是，对于照片这种技就不太适合，因为这样存储的图像文件会非常大。注意：在使用动画GIF时需要非常谨慎。许多站点都提供动画GIF，从做有趣事情的卡通人物到跳跃或燃烧的项目符号。尽管第一次看到这样的页面可能会留下深刻印象，但不久就会厌倦，因为它们会降低网站的访问速度，并且让用戶无法专注于实际的内容。因此，虽然动画GIF能够使得个人主页看上去有趣，但在大公司的站点中很少能够看到它们。如果尝试创建外观看上去专业的网站，最好是仅当动画GIF能够向用户提供额外的信息时才使用它们。3．JPEG图像开发JPEG图像格式的目的是用于存储和压缩具有很多种颜色的图像，例如照片。在保存JPEG时，通常可以指定图像的压缩程度——具体依赖于想要得到的图像质量。压缩JPEG图像的过程包括抛弃人们通常无法感知的颜色数据，例如微小的颜色改变。但是当图像被压缩时，因为该图像格式抛弃了某些数据，所以这些数据将丢失，从而无法从压缩的版本恢复到最初版本——因此该压缩技术是一种有损压缩技术。不同图像应用的压缩量是不同的，并且仅能在压缩JPEG之后才能判断它的压缩程度。因此压缩后文件的大小随着图像的压缩程度而改女变。当保存JPEG图像时，用户经常会被询问使用的质量百分比；100%表明根本不压缩图片；对于照片，通常可以将质量比设置为60%左右（但通常不要更低）。某些程序使用单词“极好”、“非常好”、“好”等取代百分比来描述图像的质量。优秀的图像编辑程序能够在用户选择压缩的程度时，并排比较初始图像和压缩后的图像。图3-5中给出了当用户准备保存JPEG图像以用于Web时，AdobePhotoshop软件在相邻的位置比较两个版本图像的情形。其中，左边的是初始图像，右边的是即将保存以用于Web的图像版本。由于JPEG格式用于操作类似于照片的现实图像，因此不适合于存储具有大量单调颜色或者高对比度硬边线（例如雕刻字和素描画）的图像。随着JPEG图像压缩比的增加，也可能在颜色相似的位置看到条带。当使用ProgressiveJPEG时，JPEG也支持交错存储，从而可以首先下载具有斑驳画面的图像，然后随着图像剩余部分的加载，填充更详细的画面。这种技术最重要的用途是，它可以让用户了解正在下载的图像的大小，以及大概的下载完成程度。但是，Web中逐渐不再使用JPEG图像，因为它们包含太多的细节，在实际看到想要的画面之前往往需要浏览图像的大量细节。图3-54．PNG图像可移植网络图形(PortableNetworkGraphics)格式是最近才出现的格式，它开发于20世纪90年代末期，原因是当时拥有GIF专利的公司(Unisys)决定向开发能够创建和查看GIF的软件公司收取使用该技术的许可费。虽然Web设计人员和Web浏览人员不受这种收费情况的影响，但制作GIF相关软件的公司却需要付费。PNG格式的用途和GIF图像类似，但设计人员创建它是为了解决GIF格式存在的一些缺陷。8位的PNG和8位的GIF具有相同的限制