This tutorial discusses issues and techniques relating to Web graphics. It includes information about creating animated GIFs, clickable image maps, and efficient Web graphics.

这份教程将重点讨论与网站图形相关的议题和技术。它包含了关于创建动态GIF图形的信息，可点击的图形映射和有效的网站图形。

Although Adobe PhotoShop is one of the more popular applications for creating Web graphics, you can use any application that supports the GIF and JPEG file formats. Other programs include PaintShop Pro, GraphicConverter, or Microsoft Image Composer that comes with Microsoft FrontPage.

尽管Photoshop是当今最受欢迎的创建网站图形的应用程序之一，你也可以使用其它应用程序来创建GIF和JPEG文件格式。其它包含PaintShop Pro、GraphicConverter以及微软图形设计师的程序都是与微软的FrontPage共同发布的。

Scanning
扫描

You may have an image you would like to convert from paper to electronic. Scanning is the process of converting printed material into digital images (i.e. photographs, postcards) that can be manipulated using graphics software. To scan a document, you must have a computer with a scanner connected to it and scanning software. The scanner imports the printed material into the computer and the software allows you to manipulate and edit the scanned image.

你可能会希望把一幅纸张上的图形转换成电子格式。扫描就可以实现将印刷文稿转换成可以被图形软件处理的数字图像（如：照片、明信片）。如果需要对一个文档进行扫描，那么，你就需要一个连接有扫描仪的计算机和扫描仪驱动软件。扫描仪将印刷文稿输入计算机，相关的软件可以让你对扫描的图像进行操作和编辑。

The <IMG> Tag
<IMG>标签

Use the <IMG> tag to include inline images in a Web page. An inline image appears in the page itself and does not open in a separate window or require a helper application to display. For example

使用<IMG>标签将图像内嵌到网页中。内置图像在页面中是独立出现的，不需要再重新打开一个窗口或是使用其它的帮助软件来显示图形。举个例子：

<IMG SRC="car.jpg" ALT="Web Banner Graphics" width="317" height="216" >

displays the image called car.jpg and alternative text "Web Banner Graphics". This image appears below.

显示的图形名称为“car.jpg”，替换文字是“Web Banner Graphics”。显示的图形如下：



The ALT attribute specifies a text alternative for the image so when users have images turned off or are using a browser that does not display images, they see the alternative text. The attributes for the <IMG> tag appear below.

“ALT”属性的作用是：当用户关闭图像或浏览器不允许显示图像时，它将显示“ALT”属性的内容。下表将列举<IMG>标签所对应的属性：

Attribute 属性	Meaning 涵义
SRC="url"	The source URL for the image 指定图像的源文件URL
ALT="text"	Alternative text to display if the image is not loaded. Some browsers display the ALT text when the mouse is over the image. 如果图像不能加载，将显示这个替换文本。在使用某些浏览器时，当鼠标移动到图像之上时，也会显示“ALT”中的文本内容。
HEIGHT="n" WIDTH="m"	The height, in pixels, that the image should display. If the actual image height does not equal n, the browser will scale the image to fit the specified dimensions. Although the HEIGHT and WIDTH attributes are not required, the page will layout more quickly if they are specified. 图像高度，单位：像素。如果图片原来的高度值不等于n，那么浏览器将图片调节至合适的尺寸。尽管高度和宽度属性不是必要参数，但是，如果设定了这两个值，将会增加浏览器的加载速度。
BORDER="n"	Set the border pixel width around images contained within hyperlinks. If the image is a link, a blue border displays around the images unless BORDER="0" is specified 设置图像的边框宽度，它包含在超链接内。如果图像也是一个超链接，那么它将默认显示蓝色的边框，除非你将“Border”值设置为“0”。
USEMAP="url"	Specify location of the map information for an image map 为一个图像映射指定具体的映射信息地址
ALIGN="left,right, top, middle, or bottom"	Specify how the image aligns with text on the same line. 指定图像与同行内的文本之间的对齐方式

File Formats
文件格式

The two most common graphic file formats for the Web are GIF files and JPEG files. Browsers and most popular Web graphics programs support both these file formats. But which file format is better? It depends on the nature of the image. The table below summarizes the features of the different file formats and some of their advantages and disadvantages.

在网络中，应用最普遍的两种图形文件格式就是GIF文件和JPEG文件。浏览器和当今最流行的网络图形程序都支持这两种图形文件格式。但是，这两者，那个更好一点呢？这主要根据图像的本质来判断。下面的表格总结了这两种不同格式图形的特征以及优劣点：

GIF	JPEG
File format is limited to 256 colors. 文件格式限制在256色	Format is 24 bit, which supports millions of colors. 文件格式为24位，支持上百万种颜色
Best for images that have fewer colors and large areas of similar colors. File size of clip-art, graphic text, or banners is usually smaller in the GIF format. 对于颜色数量不多，大面积显示同一种颜色的图像来说更加占优。GIF格式的剪贴画、艺术字或图标通常文件尺寸相对较小	Compressions optimized for photographic images with a wide range of colors. File size of scanned images will usually be smaller in JPEG format. 对于色彩丰富的图形来说，压缩效果通常较好。JPEG的扫描图形尺寸通常相对较小
GIF 89A format can specify one color as transparent so portions of the graphic will allow the background to appear. GIF 89A 格式可以指定其中一个颜色作为透明色，因此，可以使图形的一部分显示背景	Does not support transparency. 不支持透明
GIF 89A format supports animation. GIF 89A 格式支持动画	Does not support animation. 不支持动画

A few examples appear below. In Figure 1A, the GIF file, is much smaller than Figure 1B because it has few colors and the green appears in a large block. The GIF file format is optimized for compressing graphics like this. In Figure 2B however, the JPEG file is much smaller than Figure 2A because it has many colors and the JPEG file format compresses it more effectively.

下面列举几个例子。“图 1A”的GIF文件比“图 1B”的JPEG文件要小得多，主要是因为这幅图具体包含的颜色数量很少，大部分都是以绿色显示的，因此，GIF图片格式可以将图形压缩到最优化的程度；然而，“图 2B”的JPEG文件比“图 2A”的GIF文件要小得多，主要因为这幅图所包含的颜色数量很多，因此，JPEG文件格式可以将它进行更加有效的压缩。

图 1A - 13K GIF 格式

图 1B - 23K JPEG 格式

图 2A - 51K GIF 格式

图 2B - 39K JPEG 格式

评论 (0) All

登陆 | 还没注册？