網站設計與建設Website

design

anddevelopments第3章圖形與Web設計第一部分Web基礎知識3．1網站圖像的重要性圖像地圖導航、圖形按鈕、徽標

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

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

PixelsPer

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

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

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

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

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

抖動是在圖像調色板和系統調色板之間調和，圖像調色板上的顏色被和系統調色板上匹配的顏色所替代，如果系統不能找到匹配的顏色，它會使用它認為合適的顏色，這就可能導致異常的顏色組合Web安全的顏色調色板

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

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

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

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

Photoshop②

Adobe

Fireworks③Microsoft畫圖④Corel

Paint

Shop

Pro

X⑤Corel

Painter

IXPhotoshop人物照片換頭術

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

適當調整頭像的大小和位置

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

此前擦除像素后露出

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

朵掩蓋掉

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

綻。矢量圖形(Vector)

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

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

Illustrator

CS3②Adobe

Flash③CorelDRAW

Graphics

Suite

X3Adobe

Illustration3．5常用圖形文件格式

網頁的圖像標準文件格式僅包括GIF、JPEG和PNG，其他的文件格式必須使用插件才能瀏覽。

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

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

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

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

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

JPEG格式的圖形。

優點：廣泛支持

Internet標準，有損壓縮，隔行掃描，通過調節圖像壓縮比，可以調節圖像質量和文件大小，文件尺寸較小，下載速度快。

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

JPEG2000同樣是由JPEG組織負責制定的，與JPEG相

比，它具備更高壓縮率以及更多新功能的新一代靜態影像壓縮技術。

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

JPEG只能支持有損壓縮。

實現漸進傳輸，即先傳輸圖像的輪廓，然后逐步傳輸數據，不斷提高圖像質量，讓圖象由朦朧到清晰顯示

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

2000和JPEG相比優勢明顯，且向下兼容JPEG2000可應用于傳統的JPEG市場，如掃描儀、數碼相機等，亦可應用于新興領域，如網路傳輸、無線通訊等等。4)PNG流式網絡圖形格式(Portable

Network

Graphic

Format位圖格式支持

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

RGB圖像中的透明度。

PNG格式是將GIF和JPEG的優點結合形成的一種格式，也是一種有損壓縮格式無損壓縮方式

W3c

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

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

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

不適用于Web頁的。

它是Windows操作系統中的標準圖像文件格式，是由一系列小點組成的圖片，且支持高達24位的圖像。6)TIFF■■■Tag

lmage

File

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

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

Document（PSD）。

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

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

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

Scalable

Vector

Graphics

。它是基于XML，由W3C聯盟進行開發的。嚴格來說應該是一種開放標準的矢量圖形語言，可讓你設計激動人心的、高分辨率的Web圖形頁面。用戶可以直接用代碼來描繪圖像，可以用任何文字處理工具打開SVG圖像，通過改變部分代碼來使圖像具有交互功能，并可以隨時插入到HTML中通過瀏覽器來觀看。SVG提供了目前網絡流行格式GIF和JPEG無法具備了優勢：可以任意放大圖形顯示，但絕不會以犧牲圖像質量為代價；文字在SVG圖像中保留可編輯和可搜尋的狀態；平均來講，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="