当前位置: 首页 > 网络学院 > 设计教程 > 设计理念 > 图形简介:第一部分
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 |
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. |
HEIGHT="n" | 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. |
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 |
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. | Format is 24 bit, which supports millions of colors. |
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. | Compressions optimized for photographic images with a wide range of colors. File size of scanned images will usually be smaller in JPEG format. |
GIF | Does not support transparency. |
GIF | Does not support animation. |
A few examples appear below. In Figure
下面列举几个例子。“图
图
图 1B - 23K JPEG 格式
图
图 2B - 39K JPEG 格式