DreamweaverCS6第3章圖像和多媒體課件

1、第3章圖像和多媒體本章簡介：圖像在網(wǎng)頁中的作用是非常重要的，圖像、按鈕、標(biāo)記可以使網(wǎng)頁更加美觀、形象生動(dòng)，從而使網(wǎng)頁中的內(nèi)容更加豐富多彩。所謂“媒體”是指信息的載體，包括文字、圖形、動(dòng)畫、音頻和視頻等。在Dreamweaver CS6中，用戶可以方便快捷地向Web站點(diǎn)添加聲音和影片媒體，并可以導(dǎo)入和編輯多個(gè)媒體文件和對象。第3章圖像和多媒體本章簡介：課堂學(xué)習(xí)目標(biāo)掌握圖像的格式掌握圖像的插入、圖像的屬性、圖像占位符、跟蹤圖像的應(yīng)用掌握Flash動(dòng)畫、Flv、Shockwave影片、Applet、ActiveX控件的插入課堂學(xué)習(xí)目標(biāo)掌握圖像的格式3.1圖像的插入課堂案例紙杯蛋糕網(wǎng)頁網(wǎng)頁中的圖像格式

2、插入圖像設(shè)置圖像屬性給圖片添加文字說明插入圖像占位符跟蹤圖像3.1圖像的插入課堂案例紙杯蛋糕網(wǎng)頁3.1.1課堂案例紙杯蛋糕網(wǎng)頁使用“圖像”按鈕，插入圖像；使用“CSS樣式”命令，控制圖像的水平邊距。效果圖3.1.1課堂案例紙杯蛋糕網(wǎng)頁使用“圖像”按鈕，插入3.1.2網(wǎng)頁中的圖像格式 Web頁中通常使用的圖像文件有JPEG、GIF、PNG 3種格式，但大多數(shù)瀏覽器只支持JPEG、GIF兩種圖像格式。因?yàn)橐ＷC瀏覽者下載網(wǎng)頁的速度，所以網(wǎng)站設(shè)計(jì)者也常使用JPEG和GIF這兩種壓縮格式的圖像。 1GIF文件 2JPEG文件 3PNG文件3.1.2網(wǎng)頁中的圖像格式 Web頁中通常使用的圖像文3.1.3

3、插入圖像要在Dreamweaver CS6文檔中插入的圖像必須位于當(dāng)前站點(diǎn)文件夾內(nèi)或遠(yuǎn)程站點(diǎn)文件夾內(nèi)，否則圖像不能正確顯示，所以在建立站點(diǎn)時(shí)，網(wǎng)站設(shè)計(jì)者常先創(chuàng)建一個(gè)名叫“image”的文件夾，并將需要的圖像復(fù)制到其中。3.1.3插入圖像要在Dreamweaver CS6文3.1.4設(shè)置圖像屬性插入圖像后，在“屬性”面板中顯示該圖像的屬性。插入圖像后的“屬性”面板3.1.4設(shè)置圖像屬性插入圖像后，在“屬性”面板中顯示該3.1.5給圖片添加文字說明 當(dāng)圖片不能在瀏覽器中正常顯示時(shí)，網(wǎng)頁中圖片的位置就變成空白區(qū)域。為了讓瀏覽者在不能正常圖片顯示時(shí)也能了解圖片的信息，常為網(wǎng)頁的圖像設(shè)置“替換”屬性?！?/p>

4、屬性”面板效果圖3.1.5給圖片添加文字說明 當(dāng)圖片不能在瀏覽器中正常3.1.6插入圖像占位符 在網(wǎng)頁布局時(shí)，網(wǎng)站設(shè)計(jì)者需要先設(shè)計(jì)圖像在網(wǎng)頁中的位置，等設(shè)計(jì)方案通過后，再將這個(gè)位置變成具體圖像。Dreamweaver CS6提供的“圖像占位符”功能，可滿足上述需求。在網(wǎng)頁中插入圖像占位符的具體操作步驟如下。（1）在文檔窗口中，將插入點(diǎn)放置在要插入占位符圖形的位置。（2）通過以下幾種方法啟用“圖像占位符”命令，彈出“圖像占位符”對話框。 選擇“插入”面板“常用”選項(xiàng)卡，單擊“圖像”展開式工具按鈕 ，選擇“圖像占位符”選項(xiàng) 。選擇“插入 圖像對象 圖像占位符”命令。3.1.6插入圖像占位符 在網(wǎng)頁

5、布局時(shí)，網(wǎng)站設(shè)計(jì)者需要3.1.7跟蹤圖像 在工程設(shè)計(jì)過程中，一般先在圖像處理軟件中勾畫出工程藍(lán)圖，然后在此基礎(chǔ)上反復(fù)修改，最終得到一幅完美的設(shè)計(jì)圖。制作網(wǎng)頁時(shí)也應(yīng)采用工程設(shè)計(jì)的方法，先在圖像處理軟件中繪制網(wǎng)頁的藍(lán)圖，將其添加到網(wǎng)頁的背景中，按設(shè)計(jì)方案對號(hào)入座，等網(wǎng)頁制作完畢后，再將藍(lán)圖刪除。Dreamweaver CS6利用“跟蹤圖像”功能來實(shí)現(xiàn)上述網(wǎng)頁設(shè)計(jì)的方式。3.1.7跟蹤圖像 在工程設(shè)計(jì)過程中，一般先在圖像處理3.2多媒體在網(wǎng)頁中的應(yīng)用課堂案例五谷雜糧網(wǎng)頁插入Flash動(dòng)畫插入FLV插入Shockwave影片影片插入Applet程序插入ActiveX控件3.2多媒體在網(wǎng)頁中的應(yīng)用課堂案

6、例五谷雜糧網(wǎng)頁3.2.1課堂案例綠色農(nóng)場網(wǎng)頁使用“Flash SWF”按鈕，為網(wǎng)頁文檔插入Flash動(dòng)畫效果；使用“屬性”面板，設(shè)置動(dòng)畫為透明；使用“播放”按鈕在文檔窗口中預(yù)覽效果。效果圖3.2.1課堂案例綠色農(nóng)場網(wǎng)頁使用“Flash SW3.2.2插入Flash動(dòng)畫 Dreamweaver CS6提供了使用Flash對象的功能，雖然Flash中使用的文件類型有Flash源文件(.fla)、Flash SWF文件(.swf)、Flash模板文件(.swt)，但Dreamweaver CS56支持Flash SWF(.swf)文件，因?yàn)樗?Flash (.fla) 文件的壓縮版本，已進(jìn)行了優(yōu)化

7、，便于在Web上查看。3.2.2插入Flash動(dòng)畫 Dreamweaver 3.2.3插入FLV在網(wǎng)頁中可以輕松添加FLV視頻，而無需使用Flash創(chuàng)作工具。但在操作之前必須有一個(gè)經(jīng)過編碼的 FLV 文件。使用Dreamweaver插入一個(gè)顯示FLV文件的SWF組件，當(dāng)在瀏覽器中查看時(shí)，此組件顯示所選的FLV文件以及一組播放控件。3.2.3插入FLV在網(wǎng)頁中可以輕松添加FLV視頻，而3.2.4插入Shockwave影片 Shockwave是Web上用于交互式多媒體的Macromedia標(biāo)準(zhǔn)，是一種經(jīng)過壓縮的格式，使得在Macromedia Director中創(chuàng)建的多媒體文件能夠被快速下載，而且

8、可以在大多數(shù)常用瀏覽器中進(jìn)行播放。3.2.4插入Shockwave影片 Shockwav3.2.5影片插入Applet程序 Applet 是用Java編程語言開發(fā)的、可嵌入Web頁中的小型應(yīng)用程序。Dreamweaver CS6提供了將Java Applet 插入 HTML 文檔中的功能。3.2.5影片插入Applet程序 Applet 是用3.2.6插入ActiveX控件 ActiveX控件也稱OLE控件，它是可以充當(dāng)瀏覽器插件的可重復(fù)使用的組件，像微型的應(yīng)用程序。ActiveX控件只在Windows系統(tǒng)上的Internet Explorer中運(yùn)行。Dreamweaver CS6中的ActiveX對象可為瀏覽者瀏覽器中的ActiveX控件提供屬性和參數(shù)。3.2.6插入ActiveX控件 ActiveX控件也3.3課堂練習(xí)咖啡網(wǎng)頁使用“圖像”按鈕，插入圖像；使用“代