計(jì)算機(jī)軟件及應(yīng)用使用圖像PPT課件

1、1Part 1Web圖像基礎(chǔ)第1頁/共40頁2/41矢量圖與位圖 矢量圖形是指用線條和填充色等數(shù)學(xué)信息來描述圖像的一種圖像類型。 制作矢量格式圖像的軟件有 Freehand、Illustrator、CorelDraw、AutoCAD 。第2頁/共40頁3/41演示Flash動畫的效果第3頁/共40頁4/41矢量圖與位圖 位圖是指用像素一點(diǎn)一點(diǎn)地描述圖像的一種圖像類型。 常用的位圖編輯軟件有 Fireworks、Photoshop、ImageReady、PhotoImpact 等。第4頁/共40頁5/41常用Web圖像格式常用的Web網(wǎng)頁圖像格式包括： GIF JPEG PNG第5頁/共40頁6

2、/41GIFGIF（Graphics Interchange Format，圖形交換格式）格式的特點(diǎn)：無損壓縮最多256色能夠使用透明色交錯式Gif（interlaced gif）動畫Gif第6頁/共40頁7/41演示透明GIF效果第7頁/共40頁8/41JPEGJPEG（Joint Photographic Expert Group，聯(lián)合圖形專家組）格式的特點(diǎn)：有損壓縮沒有顏色限制可以控制壓縮比漸進(jìn)式JPEG（progressive JPEG）第8頁/共40頁9/41演示不同質(zhì)量的JPEG第9頁/共40頁10/41PNGPNG（Portable Network Graphics，可移植的網(wǎng)絡(luò)

3、圖形）格式的特點(diǎn)： 無損壓縮 沒有顏色限制 支持透明度第10頁/共40頁11/41常用圖像處理軟件 Windows 畫圖 照片編輯器 PhotoShop PhotoDraw FireworksnFreehandnCorelDrawnIllustratornVisio第11頁/共40頁12/41使用網(wǎng)頁圖像的要點(diǎn) 確保文件較小 使圖像具有所需的像素大小 采用正確的格式進(jìn)行優(yōu)化處理 控制圖像的數(shù)量和質(zhì)量 重復(fù)使用圖像 合理使用動畫第12頁/共40頁13/41Web 圖像的處理流程 打開或創(chuàng)建圖像 修改圖像和添加圖像效果 創(chuàng)建Web對象 優(yōu)化圖像 導(dǎo)出圖像第13頁/共40頁14Part 2常用圖像處

4、理第14頁/共40頁15/41如何獲得圖像素材？直接在網(wǎng)上下載使用圖像資源光盤自行創(chuàng)建 使用圖形圖像軟件 使用掃描儀 使用數(shù)碼相機(jī) 捕捉屏幕圖像第15頁/共40頁16/41演示下載網(wǎng)頁中的圖像1、下載2、優(yōu)化3、使用第16頁/共40頁17/41演示使用圖像資源光盤1、獲取2、優(yōu)化3、使用第17頁/共40頁18/41演示捕捉屏幕圖像1、捕捉（使用【Print Screen】或【Alt + Print Screen】）2、優(yōu)化3、使用第18頁/共40頁19/41演示修改圖像大小page53第19頁/共40頁20/41演示圖像的優(yōu)化與導(dǎo)出page53第20頁/共40頁21Part 3在網(wǎng)頁中使用圖像

5、第21頁/共40頁22/41在網(wǎng)頁中插入圖像 IMG 標(biāo)記符 Src 屬性用于指定要插入的圖像的文件名（包括路徑） Alt 屬性表示圖像的簡單文本說明第22頁/共40頁23/41演示插入圖像第23頁/共40頁24/41在網(wǎng)頁中插入圖像 IMG 標(biāo)記符 WIDTH 和 HEIGHT 屬性指定圖像的顯示大小 BORDER 屬性指定圖像的邊框第24頁/共40頁25/41演示width和height屬性第25頁/共40頁26/41在網(wǎng)頁中插入圖像 IMG 標(biāo)記符 align屬性設(shè)置對齊方式 hspace屬性設(shè)置水平方向的空白 vspace屬性設(shè)置垂直方向的空白第26頁/共40頁27/41演示hspac

6、e和vspace屬性第27頁/共40頁28/41使用動畫gif 什么是動畫gif 一系列的圖像按累進(jìn)順序排列，每個圖像的顯示與前面一個圖像有所不同，當(dāng)這些圖像連續(xù)顯示時，動畫效果就產(chǎn)生了。 在網(wǎng)頁中插入動畫gif 與插入普通圖片一樣用IMG標(biāo)記符第28頁/共40頁29/41演示動畫gif的效果第29頁/共40頁30/41演示動畫gif的原理在 Fireworks 中打開剛才的動畫文件第30頁/共40頁31/41圖像與超鏈接 圖像既可以作為超鏈接的源，也可以作為超鏈接的目標(biāo)。例如，Web相冊。 圖像映射是指在同一幅圖中定義若干區(qū)域，不同區(qū)域?qū)?yīng)不同的超鏈接，單擊不同區(qū)域可跳轉(zhuǎn)到相應(yīng)頁面。第31頁

7、/共40頁32/41演示圖像鏈接效果第32頁/共40頁33/41客戶端圖像映射 什么是客戶端圖像映射 在同一幅圖中定義若干區(qū)域，不同區(qū)域?qū)?yīng)不同的超鏈接，單擊不同區(qū)域可跳轉(zhuǎn)到相應(yīng)頁面。 客戶端圖像映射的使用（1）定義映射圖（2）使用映射圖第33頁/共40頁34/41客戶端圖像映射 定義映射圖：標(biāo)記符和標(biāo)記符 使用映射圖：第34頁/共40頁35/41AREA標(biāo)記符 Shape屬性（rect、circle、poly） Coords屬性 Href屬性第35頁/共40頁36/41演示圖像映射效果第36頁/共40頁37Part 4作業(yè)2：在網(wǎng)站中增加圖像第37頁/共40頁38/41要求 至少6頁，在第一次作業(yè)的基礎(chǔ)上制作。 導(dǎo)航結(jié)構(gòu)要