《Web應(yīng)用開發(fā)》課件-03 圖像

本章簡(jiǎn)介：圖像和多媒體是網(wǎng)頁中的重要元素，在網(wǎng)頁中的應(yīng)用越來越廣泛。本章主要講解圖像和多媒體在網(wǎng)頁中的應(yīng)用方法和技巧，通過這些內(nèi)容的學(xué)習(xí)，可以使設(shè)計(jì)制作的網(wǎng)頁更加美觀形象、生動(dòng)豐富，更可以增加網(wǎng)頁的動(dòng)感，使網(wǎng)頁更具有吸引力。第3章在網(wǎng)頁中插入圖像課堂學(xué)習(xí)目標(biāo)掌握在網(wǎng)頁中插入和編輯圖像的方法掌握多媒體在網(wǎng)頁中的應(yīng)用方法和技巧3.1圖像的基本操作在網(wǎng)頁中插入圖像設(shè)置圖像屬性圖像占位符課堂案例—環(huán)球旅游網(wǎng)頁3.1.1在網(wǎng)頁中插入圖像要在DreamweaverCS6文檔中插入的圖像必須位于當(dāng)前站點(diǎn)文件夾內(nèi)或遠(yuǎn)程站點(diǎn)文件夾內(nèi)，否則圖像不能正確顯示，所以在建立站點(diǎn)時(shí)，網(wǎng)站設(shè)計(jì)者常先創(chuàng)建一個(gè)名叫“images”的文件夾，并將需要的圖像復(fù)制到其中。3.1.2設(shè)置圖像屬性插入圖像后，在“屬性”面板中顯示該圖像的屬性。屬性面板3.1.3圖像占位符在網(wǎng)頁中插入圖像占位符的具體操作步驟如下。（1）在文檔窗口中，將插入點(diǎn)放置在要插入占位符圖形的位置。（2）通過以下幾種方法啟用“圖像占位符”命令，彈出“圖像占位符”對(duì)話框。選擇“插入”面板中的“常用”選項(xiàng)卡，單擊“圖像”展開式工具按鈕，選擇“圖像占位符”選項(xiàng)。選擇“插入>圖像對(duì)象>圖像占位符”命令。在“圖像占位符”對(duì)話框中，按需要設(shè)置圖像占位符的大小和顏色，并為圖像占位符提供文本標(biāo)簽，單擊“確定”按鈕，完成設(shè)置。3.1.4環(huán)球旅游網(wǎng)頁使用“圖像”按鈕，插入圖像；使用“CSS樣式”命令，控制圖像的水平邊距。效果圖3.2多媒體在網(wǎng)頁中的應(yīng)用插入Flash動(dòng)畫課堂案例——現(xiàn)代木工網(wǎng)頁3.2.1插入flash動(dòng)畫DreamweaverCS6提供了使用Flash對(duì)象的功能，雖然Flash中使用的文件類型有Flash源文件(.fla)、FlashSWF文件(.swf)、Flash模板文件(.swt)，但DreamweaverCC只支持FlashSWF(.swf)文件，因?yàn)樗荈lash(.fla)文件的壓縮版本，已進(jìn)行了優(yōu)化，便于在Web上查看。3.2.2課堂案例—現(xiàn)代木工網(wǎng)頁使用“媒體：SWF”按鈕，為網(wǎng)頁文檔插入Flash動(dòng)畫效果；使用“播放”按鈕，在文檔窗口中預(yù)覽效果。效果圖課堂練習(xí)—兒童零食網(wǎng)頁

使用“圖像”按鈕，插入圖像；使用“代碼”視圖，手動(dòng)輸入代碼設(shè)置圖像的水平間距。效果圖課后習(xí)題—準(zhǔn)媽媽課堂網(wǎng)頁

使用“