網(wǎng)頁視覺設(shè)計(jì)PPT課件

1、1.1 網(wǎng)頁尺寸與分辨率網(wǎng)頁尺寸與分辨率 網(wǎng)頁尺寸和顯示器的分辨率有直接關(guān)系，分辨率是以像素為單位的。在網(wǎng)頁尺寸和顯示器的分辨率有直接關(guān)系，分辨率是以像素為單位的。在15寸陰極射寸陰極射線管線管(CRT)顯示器普及的年代，顯示器普及的年代，800 x600的分辨率為主流，那時(shí)寬度為的分辨率為主流，那時(shí)寬度為778像素的網(wǎng)頁最像素的網(wǎng)頁最為常見，是為常見，是778像素而不是像素而不是800像素是為了給網(wǎng)頁瀏覽器的滾動(dòng)條留出位置。像素是為了給網(wǎng)頁瀏覽器的滾動(dòng)條留出位置。 出于瀏覽者的易用性考慮，出于瀏覽者的易用性考慮，高度是允許向下延展高度是允許向下延展的，所以一般對(duì)高度不限制。對(duì)于一屏來說，一般

2、沒的，所以一般對(duì)高度不限制。對(duì)于一屏來說，一般沒有一個(gè)固定值，有一個(gè)固定值， 因?yàn)槊總€(gè)人的瀏覽器的工具欄不同，因?yàn)槊總€(gè)人的瀏覽器的工具欄不同，我見過有的瀏覽器工具欄被插件占了半個(gè)屏幕，所以我見過有的瀏覽器工具欄被插件占了半個(gè)屏幕，所以高度沒有確切值。高度沒有確切值。 在在17寸陰極射線管寸陰極射線管(CRT)顯示器普及的年代，顯示器普及的年代，1024x768的分辨率為主流，這時(shí)寬度的分辨率為主流，這時(shí)寬度為為10011003像素的網(wǎng)頁最為常見，同樣，是像素的網(wǎng)頁最為常見，同樣，是1002像素而不是像素而不是1024像素是為了給網(wǎng)頁瀏像素是為了給網(wǎng)頁瀏覽器的滾動(dòng)條留出位置。覽器的滾動(dòng)條留出位置

3、。CRT 顯示器顯示器第1頁/共23頁 對(duì)于對(duì)于17、19英寸英寸普屏液晶普屏液晶(LCD)顯示器，其顯示器，其最佳分辨率為最佳分辨率為1280 x1024，這時(shí)寬度為，這時(shí)寬度為1259像素的網(wǎng)頁才能在寬度上滿屏顯示，同樣，是像素的網(wǎng)頁才能在寬度上滿屏顯示，同樣，是1259像素而不是像素而不是1280像素是為了給像素是為了給網(wǎng)頁瀏覽器的滾動(dòng)條留出位置。網(wǎng)頁瀏覽器的滾動(dòng)條留出位置。17寸普屏液晶顯示器寸普屏液晶顯示器19寸寬屏液晶顯示器寸寬屏液晶顯示器 現(xiàn)在流行的寬屏液晶顯示器的顯示比例有現(xiàn)在流行的寬屏液晶顯示器的顯示比例有16:10和和16:9兩種，對(duì)于兩種，對(duì)于19英寸英寸16:10比例比

4、例的寬屏液晶顯示器，的寬屏液晶顯示器，1440 x900為最佳分辯率；為最佳分辯率； 對(duì)于對(duì)于19英寸英寸16:9比例的寬屏液晶顯示器，比例的寬屏液晶顯示器，1366x768為最佳分辯率。為最佳分辯率。1.1 網(wǎng)頁尺寸與分辨率網(wǎng)頁尺寸與分辨率第2頁/共23頁顯示器分辨率：顯示器分辨率：800600網(wǎng)頁寬度：網(wǎng)頁寬度：778像素第3頁/共23頁顯示器分辨率：顯示器分辨率：1024768網(wǎng)頁寬度：網(wǎng)頁寬度：778像素第4頁/共23頁顯示器分辨率：顯示器分辨率：1212801024網(wǎng)頁寬度：網(wǎng)頁寬度：778像素第5頁/共23頁顯示器分辨率：顯示器分辨率：1024768網(wǎng)頁寬度：網(wǎng)頁寬度：1002像素

5、第6頁/共23頁顯示器分辨率：顯示器分辨率：1212801024網(wǎng)頁寬度：網(wǎng)頁寬度：1002像素第7頁/共23頁顯示器分辨率：顯示器分辨率：800600網(wǎng)頁寬度：網(wǎng)頁寬度：1002像素第8頁/共23頁960 像素；像素；950 像素；像素；950 像素；像素；960 像素；像素；950 像素；像素；1.2 各大網(wǎng)站的網(wǎng)頁規(guī)格各大網(wǎng)站的網(wǎng)頁規(guī)格第9頁/共23頁2網(wǎng)頁的圖像網(wǎng)頁的圖像第10頁/共23頁網(wǎng)頁圖像主要包含網(wǎng)站Logo、內(nèi)容圖像、背景圖像、廣告圖像、圖標(biāo)等。2.1 網(wǎng)頁圖像的種類網(wǎng)頁圖像的種類第11頁/共23頁JPEG （Joint Photograhic Experts Group，聯(lián)

6、合圖像專家組），這種圖像，聯(lián)合圖像專家組），這種圖像的擴(kuò)展名為的擴(kuò)展名為jpg。 JPG最主要的優(yōu)點(diǎn)是能支持上百萬種顏色。由于最主要的優(yōu)點(diǎn)是能支持上百萬種顏色。由于JPG圖片使用更有效的有損壓縮圖片使用更有效的有損壓縮算法，它的壓縮比相當(dāng)高，使用專門的算法，它的壓縮比相當(dāng)高，使用專門的JPG壓縮工具其壓縮比可達(dá)壓縮工具其壓縮比可達(dá)180：1，有損壓縮，有損壓縮會(huì)放棄圖像中的某些細(xì)節(jié)，但是圖像質(zhì)量從瀏覽角度來講質(zhì)量受損不會(huì)太大，從而使會(huì)放棄圖像中的某些細(xì)節(jié)，但是圖像質(zhì)量從瀏覽角度來講質(zhì)量受損不會(huì)太大，從而使圖像文件量更小，這樣就大大方便了網(wǎng)絡(luò)傳輸和磁盤交換文件。圖像文件量更小，這樣就大大方便了網(wǎng)

7、絡(luò)傳輸和磁盤交換文件。JPG格式適合表現(xiàn)顏格式適合表現(xiàn)顏色數(shù)目多、漸變豐富、無清晰輪廓的連續(xù)調(diào)圖像（如人物、景象照片），色數(shù)目多、漸變豐富、無清晰輪廓的連續(xù)調(diào)圖像（如人物、景象照片），因?yàn)樵谡掌驗(yàn)樵谡掌袚p失一些細(xì)節(jié)不像對(duì)藝術(shù)線條那么明顯。中損失一些細(xì)節(jié)不像對(duì)藝術(shù)線條那么明顯。 但是從長遠(yuǎn)來看，但是從長遠(yuǎn)來看，JPG隨著帶寬的不斷提高和存儲(chǔ)介質(zhì)的發(fā)展，隨著帶寬的不斷提高和存儲(chǔ)介質(zhì)的發(fā)展， 它也應(yīng)該是一它也應(yīng)該是一種被淘汰的圖片格式，因?yàn)橛袚p壓縮對(duì)圖像會(huì)產(chǎn)生不可恢復(fù)的損失。所以經(jīng)過壓縮的種被淘汰的圖片格式，因?yàn)橛袚p壓縮對(duì)圖像會(huì)產(chǎn)生不可恢復(fù)的損失。所以經(jīng)過壓縮的JPG的圖片一般不適合打印，在備份

8、重要圖片時(shí)也最好不要使用的圖片一般不適合打印，在備份重要圖片時(shí)也最好不要使用JPG。 還有，還有，JPG也也不如不如GIF圖像那么靈活，它不支持圖形漸進(jìn)、背景透明，更不支持動(dòng)畫。圖像那么靈活，它不支持圖形漸進(jìn)、背景透明，更不支持動(dòng)畫。2.2 網(wǎng)頁圖像的格式網(wǎng)頁圖像的格式第12頁/共23頁原圖像：原圖像：435KB2.1 網(wǎng)頁圖像的種類網(wǎng)頁圖像的種類第13頁/共23頁JPG壓縮后：壓縮后：95.2KB2.1 網(wǎng)頁圖像的種類網(wǎng)頁圖像的種類第14頁/共23頁GIF格式：格式：164KB2.1 網(wǎng)頁圖像的種類網(wǎng)頁圖像的種類第15頁/共23頁GIF （Graphics Interchange forma

9、t，圖形交換格式），圖形交換格式），GIF圖片的擴(kuò)展名是圖片的擴(kuò)展名是gif。GIF是一種索引顏色格式，最多只有是一種索引顏色格式，最多只有256種顏色，種顏色，適合存儲(chǔ)顏色數(shù)量不多、層次變化適合存儲(chǔ)顏色數(shù)量不多、層次變化少、顏色邊緣清晰的圖片（如網(wǎng)站少、顏色邊緣清晰的圖片（如網(wǎng)站logo、單一圖形、圖標(biāo)）、單一圖形、圖標(biāo)）。它的優(yōu)點(diǎn)主要有：。它的優(yōu)點(diǎn)主要有：支持背景透明支持背景透明 GIF圖片如果背景色設(shè)置為透明，它將與瀏覽器背景相結(jié)合，生圖片如果背景色設(shè)置為透明，它將與瀏覽器背景相結(jié)合，生成非矩形的圖片，但效果不理想。成非矩形的圖片，但效果不理想。 支持簡易動(dòng)畫支持簡易動(dòng)畫 在在Flash

10、動(dòng)畫出現(xiàn)之前，動(dòng)畫出現(xiàn)之前，GIF動(dòng)畫可以說是網(wǎng)頁中唯一的動(dòng)畫形式。動(dòng)畫可以說是網(wǎng)頁中唯一的動(dòng)畫形式。GIF格式可以將單幀的圖象組合起來，然后輪流播放每一幀而成為動(dòng)畫。格式可以將單幀的圖象組合起來，然后輪流播放每一幀而成為動(dòng)畫。支持無損壓縮支持無損壓縮 無損壓縮是不損失圖像細(xì)節(jié)而壓縮圖片的有效方法，由于無損壓縮是不損失圖像細(xì)節(jié)而壓縮圖片的有效方法，由于GIF格格式采用無損壓縮，式采用無損壓縮， GIF格式它更適合于存儲(chǔ)線條、圖形、圖標(biāo)等顏色數(shù)較少、色塊化格式它更適合于存儲(chǔ)線條、圖形、圖標(biāo)等顏色數(shù)較少、色塊化明顯的圖像。明顯的圖像。2.1 網(wǎng)頁圖像的種類網(wǎng)頁圖像的種類第16頁/共23頁GIF格式

11、：格式：41.7KB2.1 網(wǎng)頁圖像的種類網(wǎng)頁圖像的種類第17頁/共23頁JPG格式：格式：43.3KB2.1 網(wǎng)頁圖像的種類網(wǎng)頁圖像的種類第18頁/共23頁P(yáng)NG（Portable Network Graphics）是一種新興的網(wǎng)絡(luò)圖像格式，）是一種新興的網(wǎng)絡(luò)圖像格式，PNG結(jié)合結(jié)合JPG及及GIF及兩種格式的優(yōu)點(diǎn)，及兩種格式的優(yōu)點(diǎn)， 1996年年10月月1日由日由PNG向國際網(wǎng)絡(luò)聯(lián)盟提出并得到推薦認(rèn)可向國際網(wǎng)絡(luò)聯(lián)盟提出并得到推薦認(rèn)可標(biāo)準(zhǔn)，并且大部分繪圖軟件和瀏覽器開始支持標(biāo)準(zhǔn)，并且大部分繪圖軟件和瀏覽器開始支持PNG圖像瀏覽。圖像瀏覽。 PNG格式的優(yōu)點(diǎn)：格式的優(yōu)點(diǎn)： 存貯形式豐富，兼有存

12、貯形式豐富，兼有GIF和和JPG的色彩模式；的色彩模式； 它的另一個(gè)特點(diǎn)能把圖像文件壓縮到極限以利于網(wǎng)絡(luò)傳輸，但又能保留所有與圖它的另一個(gè)特點(diǎn)能把圖像文件壓縮到極限以利于網(wǎng)絡(luò)傳輸，但又能保留所有與圖像品質(zhì)有關(guān)的信息，因?yàn)橄衿焚|(zhì)有關(guān)的信息，因?yàn)镻NG是采用無損壓縮方式來減少文件的大小，這一點(diǎn)與犧牲是采用無損壓縮方式來減少文件的大小，這一點(diǎn)與犧牲圖像品質(zhì)以換取高壓縮率的圖像品質(zhì)以換取高壓縮率的JPG有所不同；有所不同； 顯示速度很快，只需下載顯示速度很快，只需下載1/64的圖像信息就可以顯示出低分辨率的預(yù)覽圖像；的圖像信息就可以顯示出低分辨率的預(yù)覽圖像； 同樣支持透明圖像的制作，透明圖像在制作網(wǎng)頁圖像的時(shí)候很有用，我們可以把同樣支持透明圖像的制作，透明圖像在制作網(wǎng)頁圖像的時(shí)候很有用，我們可以把圖象背景設(shè)為透明，用網(wǎng)頁本身的顏色信息來代替設(shè)為透明的色彩，這樣可讓圖像和圖象背景設(shè)為透明，用網(wǎng)頁本身的顏色信息來代替設(shè)為透明的色彩，這樣可讓圖像和網(wǎng)頁背景很和諧地融合在一起。網(wǎng)頁背景很和諧地融合在一起。 PNG格式