第4章 圖像電子課件

第4章

圖像知識(shí)要點(diǎn)（1）理解矢量圖和位圖的區(qū)別，了解常用的Web圖像格式（2）理解圖像在網(wǎng)頁(yè)中的作用和Web圖像的使用原則（3）理解Web圖像的處理流程，初步掌握基本的Web圖像處理操作（4）掌握在網(wǎng)頁(yè)中插入和設(shè)置圖像的方法本章目標(biāo)（1）不同類(lèi)型的圖像1．位圖與矢量圖（1）不同類(lèi)型的圖像（1）不同類(lèi)型的圖像2．常用Web圖像格式01GIF02JPEG03PNG（1）不同類(lèi)型的圖像GIFGIF（GraphicsInterchangeFormat，圖形交換格式）GIF無(wú)損壓縮01最多256色02能夠使用透明色03交錯(cuò)式Gif（interlacedgif）04動(dòng)畫(huà)Gif05（1）不同類(lèi)型的圖像JPEGJPEG（JointPhotographicExpertGroup，聯(lián)合圖形專家組）01有損壓縮02沒(méi)有顏色限制03可以控制壓縮比04漸進(jìn)式JPEG（progressiveJPEG）（1）不同類(lèi)型的圖像PNGPNG（PortableNetworkGraphics，可移植的網(wǎng)絡(luò)圖形）01無(wú)損壓縮02沒(méi)有顏色限制03支持透明度（1）不同類(lèi)型的圖像3．使用網(wǎng)頁(yè)圖像的要點(diǎn)確保文件較小使圖像具有所需的像素大小采用正確的格式進(jìn)行優(yōu)化處理控制圖像的數(shù)量和質(zhì)量重復(fù)使用圖像使用圖像時(shí)一定要有充分的理由合理使用動(dòng)畫(huà)（1）不同類(lèi)型的圖像4．關(guān)鍵問(wèn)題1是否真正需要這個(gè)圖片？設(shè)計(jì)（一致的風(fēng)格）信息（有效傳達(dá)）2因?yàn)樗每矗慷沤^用好看圖片填充網(wǎng)頁(yè)的傾向（1）不同類(lèi)型的圖像5．Web圖像的處理流程GIF打開(kāi)或創(chuàng)建圖像01修改圖像和添加圖像效果02創(chuàng)建Web對(duì)象03優(yōu)化圖像04導(dǎo)出圖像05（1）不同類(lèi)型的圖像6．如何獲得圖像素材Part1直接在網(wǎng)上下載Part2使用圖像資源網(wǎng)站/光盤(pán)Part3自行創(chuàng)建使用圖形圖像軟件使用掃描儀（掃描全能王）使用手機(jī)/數(shù)碼相機(jī)捕捉屏幕圖像（printscreen鍵）（2）圖像處理1．常用圖像處理軟件Windows畫(huà)圖照片編輯器PhotoShop（推薦）FireworksFreehandCorelDrawIllustratorVisio（2）圖像處理Photoshop圖像處理GIFPS界面01修改圖像大小02圖像顏色調(diào)整03圖像修補(bǔ)與摳像04保存為不同格式05（2）圖像處理界面菜單欄工具箱選項(xiàng)欄圖像窗口狀態(tài)欄選項(xiàng)面板（2）圖像處理修改圖像大小（2）圖像處理圖像顏色調(diào)整（2）圖像處理圖像顏色調(diào)整（2）圖像處理圖像修補(bǔ)（2）圖像處理?yè)赶瘢?）圖像處理用適當(dāng)格式保存圖像（3）插入與設(shè)置圖像1．在網(wǎng)頁(yè)中插入圖像IMG標(biāo)記符src屬性用于指定要插入的圖像的文件名（包括路徑）alt屬性表示圖像的簡(jiǎn)單文本說(shuō)明align屬性設(shè)置對(duì)齊方式*hspace屬性設(shè)置水平方向的空白*vspace屬性設(shè)置垂直方向的空白*width和height屬性指定圖像的顯示大小*border屬性指定圖像的邊框（3）插入與設(shè)置圖像設(shè)置圖像格式寬高邊框空白水平對(duì)齊垂直對(duì)齊圖文混排圖像的透明度（3）插入與設(shè)置圖像2．垂直對(duì)齊（3）插入與設(shè)置圖像3．圖文混排（3）插入與設(shè)置圖像4．圖像透明度（4）綜合實(shí)例1．首頁(yè)（4）綜合實(shí)例2．二級(jí)頁(yè)面-花卉植物（4）綜合實(shí)例3．二級(jí)頁(yè)面-文玩雅賞（4）綜合實(shí)例4．三級(jí)頁(yè)面-梅拓展：使用多媒體1．多媒體對(duì)象的類(lèi)型音頻MP3、wave、midi等視頻MP4、mov等其他FlashJavaapplet拓展：使用多媒體2．使用多媒體對(duì)象鏈接嵌入<audiocontrols="controls"src="秋日的私語(yǔ).mp3"></audio><videocontrols="controls"src="秋日的私語(yǔ).mp4"></video><embedsrc="秋日的私語(yǔ).mp3"width="100"height="50"autostart="fa