網(wǎng)站設(shè)計與建設(shè)Websitedesignanddevelopments

網(wǎng)站設(shè)計與建設(shè)Website

design

anddevelopments第3章圖形與Web設(shè)計第一部分Web基礎(chǔ)知識3．1網(wǎng)站圖像的重要性圖像地圖導(dǎo)航、圖形按鈕、徽標(biāo)

何純文本相比，圖像更加直觀、生動、易于理解和接受。圖像可以將那些文字無法表達(dá)的信息傳達(dá)出來。文字的精確性圖像的模糊性在修飾網(wǎng)站和表達(dá)網(wǎng)站主題達(dá)到了文字不可替代的作用，3．2網(wǎng)站圖像常用規(guī)則①網(wǎng)站徽標(biāo)應(yīng)適宜大小放在主頁左上方屏幕的左上方是最醒目和最吸引人的位置，徽標(biāo)不易過大，應(yīng)該與標(biāo)題文字大小以及網(wǎng)頁頂部預(yù)留空間相匹配。②網(wǎng)站標(biāo)題應(yīng)放在主頁徽標(biāo)的右邊一般放在主頁的最上方，位于網(wǎng)站徽標(biāo)的右側(cè)，絕大部分都是特殊的藝術(shù)字或名人手寫體，應(yīng)該使用圖像文字③圖像(圖片)顏色要與網(wǎng)站色系協(xié)調(diào)一致④圖像的文件尺寸應(yīng)該要足夠?、輬D像盡量避免使用高分辨率的真彩照片⑥在網(wǎng)頁中勿濫用圖像⑦Internet和Intranet的圖像區(qū)別⑧切割大幅圖像·

對于一個網(wǎng)頁確實需要一幅大尺寸的圖像，可以使用一些圖形處理工具例如Photoshop3．3數(shù)字圖像像素計算機(jī)顯示器是由行列組成柵格，每一個柵格可以顯示一個圖像元素，這些圖像元素叫做像素。像素是計算機(jī)顯示器顯示的最小單元每一個像素在某一時刻只能顯示一種顏色顏色分辨率顯示器的分辨率決定了屏幕顯示圖像的精度。屏幕分辨率由顯示器高度和寬度表示屏幕區(qū)域的像素數(shù)目決定1024X7684．圖像分辨率圖像分辨率以每英寸的像素數(shù)(PPI，

PixelsPer

Inch)來衡量。例如圖像分辨率為500PPI，就是每英寸有500個像素。，5．顯示器設(shè)備分辨率顯示器上每單位長度顯示的像素或點的數(shù)量，通常以點/英寸

(dpi)來表示顯示器有兩個重要指標(biāo)：顯示器大小和點距，

例如17英寸顯示器(指熒光屏對角線長度為17英寸)，點距0.25mm。那么該顯示器分辨率約為100DPI：25.3995（mm/inch）/0.25（mm/Dot）≈100(Dot/inch)6．打印機(jī)分辨率·

通常以點/英寸(dpi)來表示2．顏色深度(像素深度)使用顏色位數(shù)描述顏色的深度，用來度量圖像中有多少顏色信息可用于顯示或打印像素。顏色深度決定了每一個像素可以顯示多少顏色。調(diào)色板

在一個窗口可以顯示256種顏色，每一副圖像都具有獨立的256個調(diào)色板，顯示時更換調(diào)色板便可滿足各幅圖像的顏色要求。系統(tǒng)在系統(tǒng)調(diào)色板中保存著256種顏色。8．抖動·

抖動是在圖像調(diào)色板和系統(tǒng)調(diào)色板之間調(diào)和，圖像調(diào)色板上的顏色被和系統(tǒng)調(diào)色板上匹配的顏色所替代，如果系統(tǒng)不能找到匹配的顏色，它會使用它認(rèn)為合適的顏色，這就可能導(dǎo)致異常的顏色組合Web安全的顏色調(diào)色板

Web安全顏色是瀏覽器使用的由8位顯示器支持的216種顏色，與平臺無關(guān)。

在8位屏幕上顯示顏色時，瀏覽器將圖像中的所有顏色更改成這些顏色。10．圖像壓縮·

以較少的比特有損或無損地表示原來的像素矩陣的技術(shù)3．4位圖圖像和矢量圖形位圖圖像(Bitmap)位圖圖像（技術(shù)上稱為柵格圖像）使用顏色網(wǎng)格（也就是常說的像素）來表現(xiàn)圖像。每個像素都有自己特定的位置和顏色值。JPEG和GIF格式都是位圖。如果增加圖像的尺寸，文件的大小就會增加。當(dāng)放大查看時會呈現(xiàn)鋸齒狀。

位圖圖像很適合于照片、投射陰影的效果，以及軟化、鑲邊或者模糊邊緣。常用的位圖圖像工具有：①Adobe

Photoshop②

Adobe

Fireworks③Microsoft畫圖④Corel

Paint

Shop

Pro

X⑤Corel

Painter

IXPhotoshop人物照片換頭術(shù)

使用“套索工具”圍繞頭部繪制一個如圖3所示的選區(qū)。復(fù)制 粘貼

適當(dāng)調(diào)整頭像的大小和位置

選擇工具箱中的“橡皮擦工具”，設(shè)置合適的畫筆大小(可以按快捷鍵[或]來改變畫筆大小)，適當(dāng)放大視圖，然后沿頭像的面部邊緣擦除多余的像素，選擇工具箱中的“仿制圖章工具”，如果

此前擦除像素后露出

了底部圖層中的耳朵，則現(xiàn)在需要將它去除。克隆背景像素，將耳

朵掩蓋掉

選擇菜單命令“圖像|調(diào)整|色相/飽和度”，對兩個圖層都進(jìn)行色相/飽和度調(diào)整，以使得兩部分的色調(diào)能夠互相吻合，使人看不出破

綻。矢量圖形(Vector)

矢量圖形由被稱為矢量的數(shù)學(xué)對象定義的線條和曲線組成。矢量根據(jù)圖像的幾何特性描繪圖像。

調(diào)整其大小或更改其顏色時不會降低圖形的品質(zhì)，常用的矢量圖形工具有：①Adobe

Illustrator

CS3②Adobe

Flash③CorelDRAW

Graphics

Suite

X3Adobe

Illustration3．5常用圖形文件格式

網(wǎng)頁的圖像標(biāo)準(zhǔn)文件格式僅包括GIF、JPEG和PNG，其他的文件格式必須使用插件才能瀏覽。

圖形類型、文件大小、圖形文件的顯示尺寸以及圖像的下載方式來確定最佳格式。1)

GIF與平臺無關(guān)的文件格式GIF具有8位的色彩信息，即最多支持

256種顏色不能顯示實景圖象無損壓縮。GIF與只包含少數(shù)清晰顏色的圖像（如線條畫和黑白圖像）一起使用時，GIF格式的圖形為最佳選擇。

GIF壓縮格式的優(yōu)點之一是可以“漸顯”，從而改善了瀏覽器下載體驗。Gif98a動畫gif圖像文件。透明GIF。2)JPEGJPEG文件的擴(kuò)展名為.jpg或.jpeg，有損壓縮方式漸進(jìn)式

JPEG支持隔行掃描。可以通過更改圖形質(zhì)量來控制文件的壓縮比例，設(shè)置圖像的質(zhì)量越低，壓縮比例就越高，文件就會越小。JPEG件可以包含最多24位的顏色信息(1670萬種顏色)，特別適于具有豐富色彩的實景圖形和照片，建議Web中使用的JPEG圖像使用8位顏色(256種顏色)。瀏覽器只能從頂行到底行線性地下載

JPEG格式的圖形。

優(yōu)點：廣泛支持

Internet標(biāo)準(zhǔn)，有損壓縮，隔行掃描，通過調(diào)節(jié)圖像壓縮比，可以調(diào)節(jié)圖像質(zhì)量和文件大小，文件尺寸較小，下載速度快。

缺點：有損壓縮會降低圖像質(zhì)量，設(shè)計者不能控制24位顏色被映射到客戶顯示使用的256色的調(diào)色板。3)JPEG2000

JPEG2000同樣是由JPEG組織負(fù)責(zé)制定的，與JPEG相

比，它具備更高壓縮率以及更多新功能的新一代靜態(tài)影像壓縮技術(shù)。

JPEG2000作為JPEG的升級版，其壓縮率比JPEG高約30%左右。與JPEG不同的是，JPEG2000同時支持有損和無損壓縮，而

JPEG只能支持有損壓縮。

實現(xiàn)漸進(jìn)傳輸，即先傳輸圖像的輪廓，然后逐步傳輸數(shù)據(jù)，不斷提高圖像質(zhì)量，讓圖象由朦朧到清晰顯示

JPEG2000還支持所謂的“感興趣區(qū)域”特性，可以任意指定影像上感興趣區(qū)域的壓縮質(zhì)量，還可以選擇指定的部份先解壓縮。JPEG

2000和JPEG相比優(yōu)勢明顯，且向下兼容JPEG2000可應(yīng)用于傳統(tǒng)的JPEG市場，如掃描儀、數(shù)碼相機(jī)等，亦可應(yīng)用于新興領(lǐng)域，如網(wǎng)路傳輸、無線通訊等等。4)PNG流式網(wǎng)絡(luò)圖形格式(Portable

Network

Graphic

Format位圖格式支持

24位圖像并產(chǎn)生無鋸齒狀邊緣的背景透明度，PNG保留灰度和

RGB圖像中的透明度。

PNG格式是將GIF和JPEG的優(yōu)點結(jié)合形成的一種格式，也是一種有損壓縮格式無損壓縮方式

W3c

96年推薦。IE瀏覽器從4.0版本開始支持png圖像瀏覽

顯示速度很快，只需下載1/64的圖像信息就可以顯示出低分辨率的預(yù)覽圖像；PNG的缺點是不支持動畫應(yīng)用效果Macromedia公司的Fireworks軟件的默認(rèn)格式就是PNG。5)

BMPBMP是英文Bitmap（位圖）的簡寫不支持文件壓縮·

不適用于Web頁的。

它是Windows操作系統(tǒng)中的標(biāo)準(zhǔn)圖像文件格式，是由一系列小點組成的圖片，且支持高達(dá)24位的圖像。6)TIFF■■■Tag

lmage

File

Format,Mac中廣泛使用的圖像格式

aldus和Microsoft公司為桌上出版系統(tǒng)研制開發(fā)的一種較為通用的圖像文件格式。特點是圖像格式復(fù)雜、存貯信息多。正因為它存儲的圖像細(xì)微層次的信息非常多，圖像的質(zhì)量也得以提高，故而非常有利于原稿的復(fù)制。該格式有壓縮和非壓縮二種形式，其中壓縮可采用LZW無損壓縮方案存儲。TIFF格式靈活易變，它又定義了四類不同的格式：TIFF-B適用于二值圖像：TIFF-G適用于黑白灰度圖像；TIFF-P適用于帶調(diào)色板的彩色圖像：TIFF-R適用于RGB真彩圖像。7)PSDPhotoshop的專用格式Photoshop

Document（PSD）。

包含有各種圖層、通道、遮罩等多種設(shè)計的樣稿，以便于下次打開文件時可以修改上一次的設(shè)計。8)SWF

利用Flash可以制作出一種后綴名為SWF（ShockwaveFormat）的動畫，

這種格式的動畫圖像能夠用比較小的體積來表現(xiàn)豐富的多媒體形式。SWF動畫是基于矢量技術(shù)制作的9)SVG：■■■縮放向量圖形

Scalable

Vector

Graphics

。它是基于XML，由W3C聯(lián)盟進(jìn)行開發(fā)的。嚴(yán)格來說應(yīng)該是一種開放標(biāo)準(zhǔn)的矢量圖形語言，可讓你設(shè)計激動人心的、高分辨率的Web圖形頁面。用戶可以直接用代碼來描繪圖像，可以用任何文字處理工具打開SVG圖像，通過改變部分代碼來使圖像具有交互功能，并可以隨時插入到HTML中通過瀏覽器來觀看。SVG提供了目前網(wǎng)絡(luò)流行格式GIF和JPEG無法具備了優(yōu)勢：可以任意放大圖形顯示，但絕不會以犧牲圖像質(zhì)量為代價；文字在SVG圖像中保留可編輯和可搜尋的狀態(tài)；平均來講，SVG文件比JPG和GIF格式的文件要小很多，因而下載

也很快。<?xml

version="1.0"standalone="no"?><svg

width="15cm"

height="10cm"

viewBox="0

0

1500

1000"xmlns="/2000/svg"

xmlns:xlink="/1999/xlink"><desc>圓形實例</desc><circle

cx="100"

cy="350"

r="