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

1、網(wǎng) 站 設(shè) 計 與 建 設(shè)Website design and developments第第3章章 圖形與圖形與Web設(shè)計設(shè)計第一部分 Web基礎(chǔ)知識31 網(wǎng)站圖像的重要性網(wǎng)站圖像的重要性n圖像地圖導(dǎo)航、圖形按鈕、 徽標(biāo)n何純文本相比，圖像更加直觀、生動、易于理解和接受。n圖像可以將那些文字無法表達(dá)的信息傳達(dá)出來。文字的精確性圖像的模糊性 在修飾網(wǎng)站和表達(dá)網(wǎng)站主題達(dá)到了文字不可替代的作用， 32 網(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)的右邊一般放在主頁的最上方，位于

2、網(wǎng)站徽標(biāo)的右側(cè)，絕大部分都是特殊的藝術(shù)字或名人手寫體，應(yīng)該使用圖像文字圖像(圖片)顏色要與網(wǎng)站色系協(xié)調(diào)一致圖像的文件尺寸應(yīng)該要足夠小圖像盡量避免使用高分辨率的真彩照片在網(wǎng)頁中勿濫用圖像Internet和Intranet的圖像區(qū)別切割大幅圖像對于一個網(wǎng)頁確實需要一幅大尺寸的圖像，可以使用一些圖形處理工具例如Photoshop 33 數(shù)字圖像1像素計算機(jī)顯示器是由行列組成柵格，每一個柵格可以顯示一個圖像元素，這些圖像元素叫做像素。像素是計算機(jī)顯示器顯示的最小單元 每一個像素在某一時刻只能顯示一種顏色 3顏色分辨率顯示器的分辨率決定了屏幕顯示圖像的精度。屏幕分辨率由顯示器高度和寬度表示屏幕區(qū)域的像素

3、數(shù)目決定 n1024X7684圖像分辨率圖像分辨率以每英寸的像素數(shù)(PPI， Pixels Per Inch)來衡量。n例如圖像分辨率為500PPI，就是每英寸有500個像素。 ， 5顯示器設(shè)備分辨率顯示器上每單位長度顯示的像素或點(diǎn)的數(shù)量，通常以點(diǎn)/英寸 (dpi) 來表示顯示器有兩個重要指標(biāo)：顯示器大小和點(diǎn)距，n例如17英寸顯示器(指熒光屏對角線長度為17英寸)，點(diǎn)距0.25mm。n那么該顯示器分辨率約為100DPI：25.3995（mm/inch）/0.25（mm/Dot）100(Dot/inch) 6打印機(jī)分辨率通常以點(diǎn)/英寸 (dpi) 來表示2顏色深度(像素深度)使用顏色位數(shù)描述顏色

4、的深度，用來度量圖像中有多少顏色信息可用于顯示或打印像素。顏色深度決定了每一個像素可以顯示多少顏色。7調(diào)色板n在一個窗口可以顯示256種顏色，每一副圖像都具有獨(dú)立的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)致異常的顏色組合 9Web安全的顏色調(diào)色板nWeb 安全顏色是瀏覽器使用的由8位顯示器支持的 216 種顏色，與平臺無關(guān)。n在 8 位屏幕上顯示顏色時，瀏覽器將圖像中的所有顏色

5、更改成這些顏色。 10圖像壓縮以較少的比特有損或無損地表示原來的像素矩陣的技術(shù) 34 位圖圖像和矢量圖形1.位圖圖像(Bitmap)n位圖圖像（技術(shù)上稱為柵格圖像）使用顏色網(wǎng)格（也就是常說的像素）來表現(xiàn)圖像。n每個像素都有自己特定的位置和顏色值。nJPEG和GIF格式都是位圖。n如果增加圖像的尺寸，文件的大小就會增加。n當(dāng)放大查看時會呈現(xiàn)鋸齒狀。n位圖圖像很適合于照片、投射陰影的效果，以及軟化、鑲邊或者模糊邊緣。 常用的位圖圖像工具有：常用的位圖圖像工具有：Adobe Photoshop Adobe Fireworks Microsoft 畫圖Corel Paint Shop Pro XCor

6、el Painter IXPhotoshop人物照片換頭術(shù) n使用“套索工具”圍繞頭部繪制一個如圖3所示的選區(qū)。n復(fù)制 粘貼n適當(dāng)調(diào)整頭像的大小和位置 n選擇工具箱中的“橡皮擦工具”，設(shè)置合適的畫筆大小(可以按快捷鍵或來改變畫筆大小)，適當(dāng)放大視圖，然后沿頭像的面部邊緣擦除多余的像素， n選擇工具箱中的“仿制圖章工具”，如果此前擦除像素后露出了底部圖層中的耳朵，則現(xiàn)在需要將它去除。克隆背景像素，將耳朵掩蓋掉 n選擇菜單命令“圖像|調(diào)整|色相/飽和度” ，對兩個圖層都進(jìn)行色相/飽和度調(diào)整，以使得兩部分的色調(diào)能夠互相吻合，使人看不出破綻。2.矢量圖形(Vector)n矢量圖形由被稱為矢量的數(shù)學(xué)對象

7、定義的線條和曲線組成。n矢量根據(jù)圖像的幾何特性描繪圖像。n調(diào)整其大小或更改其顏色時不會降低圖形的品質(zhì)， 常用的矢量圖形工具有：Adobe Illustrator CS3Adobe Flash CorelDRAW Graphics Suite X3Adobe IllustrationAdobe Illustration35 常用圖形文件格式n網(wǎng)頁的圖像標(biāo)準(zhǔn)文件格式僅包括GIF、JPEG和PNG，其他的文件格式必須使用插件才能瀏覽。 n圖形類型、文件大小、圖形文件的顯示尺寸以及圖像的下載方式來確定最佳格式。 1)GIFnGraphics Interchange Format “圖像互換格式”，nG

8、IF具有8位的色彩信息，即最多支持 256 種顏色不能顯示實景圖象 nGif98a動畫gif圖像文件。n透明GIF。n無損壓縮?；贚ZW算法的連續(xù)色調(diào)的無損壓縮格式。提取原始文本文件數(shù)據(jù)中的不同字符，基于這些字符創(chuàng)建一個編譯表，然后用編譯表中的字符的索引來替代原始文本文件數(shù)據(jù)中的相應(yīng)字符，減少原始數(shù)據(jù)大小?？雌饋砗驼{(diào)色板圖象的實現(xiàn)原理差不多其壓縮率一般在50%左右GIF 壓縮格式的優(yōu)點(diǎn)之一: “漸顯”nGIF與只包含少數(shù)清晰顏色的圖像（如線條畫和黑白圖像）一起使用時，GIF 格式的圖形為最佳選擇2)JPEGnJPEG文件的擴(kuò)展名為.jpg或.jpegnJoint Photographic E

9、xperts Group聯(lián)合圖像專家小組nJPEG件可以包含最多24位的顏色信息(1670萬種顏色)，特別適于具有豐富色彩的實景圖形和照片，建議Web中使用的JPEG圖像使用8位顏色(256種顏色)。n瀏覽器只能從頂行到底行線性地下載 JPEG 格式的圖形n有損壓縮方式允許用不同的壓縮比例對文件進(jìn)行壓縮是可以把文件壓縮到最小的格式。優(yōu)點(diǎn)：廣泛支持 Internet 標(biāo)準(zhǔn)，有損壓縮，隔行掃描，通過調(diào)節(jié)圖像壓縮比，可以調(diào)節(jié)圖像質(zhì)量和文件大小，文件尺寸較小，下載速度快。缺點(diǎn)：有損壓縮會降低圖像質(zhì)量，設(shè)計者不能控制24位顏色被映射到客戶顯示使用的256色的調(diào)色板。3)JPEG2000nJPEG2000

10、 作為JPEG的升級版nJPEG2000 同時支持有損和無損壓縮，而 JPEG 只能支持有損壓縮。n實現(xiàn)漸進(jìn)傳輸，即先傳輸圖像的輪廓，然后逐步傳輸數(shù)據(jù)，不斷提高圖像質(zhì)量，讓圖象由朦朧到清晰顯示nJPEG2000還支持所謂的“感興趣區(qū)域”特性，可以任意指定影像上感興趣區(qū)域的壓縮質(zhì)量，還可以選擇指定的部份先解壓縮。nJPEG 2000 和 JPEG 相比優(yōu)勢明顯，且向下兼容nJPEG2000可應(yīng)用于傳統(tǒng)的JPEG市場，如掃描儀、數(shù)碼相機(jī)等，亦可應(yīng)用于新興領(lǐng)域，如網(wǎng)路傳輸、無線通訊等等。4)PNGn流式網(wǎng)絡(luò)圖形格式(Portable Network Graphic Format n位圖格式支持 24

11、 位圖像并產(chǎn)生無鋸齒狀邊緣的背景透明度，PNG 保留灰度和 RGB 圖像中的透明度。nPNG格式是將GIF和JPEG的優(yōu)點(diǎn)結(jié)合形成的一種格式，也是一種有損壓縮格式無損壓縮方式nW3c 96年推薦。IE瀏覽器從4.0版本開始支持png圖像瀏覽 n顯示速度很快，只需下載1/64的圖像信息就可以顯示出低分辨率的預(yù)覽圖像；nPNG的缺點(diǎn)是不支持動畫應(yīng)用效果nMacromedia公司的Fireworks軟件的默認(rèn)格式就是PNG。5) BMPnBMP是英文Bitmap（位圖）的簡寫n不支持文件壓縮不適用于 Web頁的。n它是Windows操作系統(tǒng)中的標(biāo)準(zhǔn)圖像文件格式，是由一系列小點(diǎn)組成的圖片，且支持高達(dá)

12、24 位的圖像。6)TIFFnTag lmage File Format , Mac中廣泛使用的圖像格式naldus和Microsoft公司為桌上出版系統(tǒng)研制開發(fā)的一種較為通用的圖像文件格式。n特點(diǎn)是圖像格式復(fù)雜、存貯信息多。正因為它存儲的圖像細(xì)微層次的信息非常多，圖像的質(zhì)量也得以提高，故而非常有利于原稿的復(fù)制。 n該格式有壓縮和非壓縮二種形式，其中壓縮可采用LZW無損壓縮方案存儲。nTIFF格式靈活易變，它又定義了四類不同的格式：TIFF-B適用于二值圖像：TIFF-G適用于黑白灰度圖像；TIFF-P適用于帶調(diào)色板的彩色圖像：TIFF-R適用于RGB真彩圖像。 7)PSDnPhotoshop的專用格式Photoshop Document（PSD）。n包含有各種圖層、通道、遮罩等多種設(shè)計的樣稿，以便于下次打開文件時可以修改上一次的設(shè)計。8)SWFn利用Flash可以制作出一種后綴名為SWF（Shockwave Format）的動畫，n這種格式的動畫圖像能夠用比較小的體積來表現(xiàn)豐富的多媒體形式。nSWF動畫是基于矢量技術(shù)制作的9)SVG：n縮放向量圖形 Scalable Vector Graphics n。它是基于XML，由W3C聯(lián)盟進(jìn)行開發(fā)的。嚴(yán)格來說應(yīng)該是一種開放標(biāo)準(zhǔn)的矢量圖形語言，可讓你設(shè)計激動人心的、高分辨率的Web圖形頁面。n