新媒體網(wǎng)頁設計與制作-Dreamweaver-CS6基礎、案例、技巧實用教程第7章課件

1、第7章 新媒體網(wǎng)頁中的多媒體元素本章學習要點： 1網(wǎng)頁圖像及多媒體文件格式 2插入及編輯網(wǎng)頁圖像 3插入flash對象 4插入其他媒體元素第7章 新媒體網(wǎng)頁中的多媒體元素本章學習要點：7.1 網(wǎng)頁中的圖像 圖像是網(wǎng)頁中最重要的多媒體元素之一，俗話說“一圖勝千文”，它的引入不僅美化了網(wǎng)站頁面，也使網(wǎng)頁變得多姿多彩。在Dreamweaver CS6中，不但提供了普通圖像的插入功能，還可以結(jié)合軟件的內(nèi)置功能添加鼠標經(jīng)過圖像。7.1 網(wǎng)頁中的圖像 圖像是網(wǎng)頁中最重要的多媒7.1.1 網(wǎng)頁圖像格式 雖然圖像的文件格式很多，但并不是所有圖像都適用于網(wǎng)頁，通常用于網(wǎng)頁的格式有3種，即JPG格式、GIF格式和

2、PNG格式。JPG：聯(lián)合圖像專家組,也被稱為JPEG。 GIF：圖像交換格式 。PNG：便攜網(wǎng)絡圖像 。7.1.1 網(wǎng)頁圖像格式 雖然7.1.2 插入圖像1插入圖像 選擇【插入】/【圖像】命令，彈出【選擇圖像源文件】對話框，如圖7-1所示。在該對話框中設置插入圖像所在的位置，并找到需要插入的圖像，單擊【確定】按鈕，打開【圖像標簽輔助屬性功能】對話框，如圖所示。 7.1.2 插入圖像1插入圖像 7.1.2 插入圖像 7.1.2 插入圖像2圖像的屬性設置 選中網(wǎng)頁文檔中的圖像，在【屬性】檢查器中可對圖像的寬、高等屬性進行設置，如圖所示。 7.1.2 插入圖像2圖像的屬性設置 7.1.2 插入圖像7

3、.1.3 插入圖像占位符 圖像占位符是在準備好將最終圖像添加到網(wǎng)頁之前使用的圖形，在發(fā)布站點之前，用適用于網(wǎng)頁的圖像文件替換所有添加的圖像占位符。7.1.3 插入圖像占位符 圖像占位符是在準備7.1.3 插入圖像占位符1插入圖像占位符 首先將鼠標光標定位到目標位置，選擇【插入】/【圖像】/【圖像占位符】命令，彈出【圖像占位符】對話框，為圖像占位符設置大小和顏色等屬性，如圖所示。 7.1.3 插入圖像占位符1插入圖像占位符7.1.3 插入圖像占位符2替換圖像占位符 在文檔窗口中雙擊圖像占位符或單擊圖像占位符，在屬性檢查器中單擊【源文件】文本框旁邊的圖標，彈出【選擇圖像源文件】對話框，選擇要用于替

4、換圖像占位符的圖像即可。 7.1.3 插入圖像占位符2替換圖像占位符7.1.4 插入鼠標經(jīng)過圖像 鼠標經(jīng)過圖像是一種在瀏覽器中查看并使用鼠標指針滑過它時發(fā)生變化的圖像，這種圖像由原始圖像和鼠標經(jīng)過圖像兩部分組成，因此要插入這種圖像，應選用一對或多對圖像。7.1.4 插入鼠標經(jīng)過圖像 鼠標經(jīng)過圖像是一種 選擇【插入】/【圖像】/【鼠標經(jīng)過圖像】命令，彈出【插入鼠標經(jīng)過圖像】對話框，如圖所示。設置所需的選項，單擊【確定】按鈕即可。 7.1.4 插入鼠標經(jīng)過圖像 選擇【插入】/【圖像】/【鼠標經(jīng)過圖像】命令7.1.5 課堂案例插入鼠標經(jīng)過圖像具體操作步驟：1打開素材文件“examplechapter

5、07zhiqingchun.html”。2 插入鼠標經(jīng)過圖像。將鼠標光標置于網(wǎng)頁中間名為“apDiv2”的 AP DIV中，選擇【插入】/【圖像】/【鼠標經(jīng)過圖像】命令，彈出【插入鼠標經(jīng)過圖像】對話框，設置屬性如圖所示。7.1.5 課堂案例插入鼠標經(jīng)過圖像具體操作步驟：7.1.5 課堂案例插入鼠標經(jīng)過圖像7.1.5 課堂案例插入鼠標經(jīng)過圖像網(wǎng)頁顯示效果如圖所示。7.1.5 課堂案例插入鼠標經(jīng)過圖像網(wǎng)頁顯示效果如圖所示。7.1.5 課堂案例插入鼠標經(jīng)過圖像3插入圖像。將鼠標光標置于“apDiv2”右側(cè)的名為“apDiv3”的第一個單元格中，選擇【插入】/【圖像】命令，在彈出的對話框中選擇文件名為

6、“80d.jpg”的圖片文件，單擊【確定】按鈕完成圖像的插入。用同樣的方法在第二個單元格中插入文件名為“qc.jpg”的圖片文件。7.1.5 課堂案例插入鼠標經(jīng)過圖像3插入圖像。將鼠標光標置于“apDiv2”右側(cè)的名為“ap4插入圖像占位符。將鼠標光標置于“apDiv2”右側(cè)的名為“apDiv3”的第三個單元格中，選擇【插入】/【圖像】/【圖像占位符】命令，彈出【圖像占位符】對話框，設置圖像占位符屬性如圖所示。7.1.5 課堂案例插入鼠標經(jīng)過圖像4插入圖像占位符。將鼠標光標置于“apDiv2”右側(cè)的名為7.1.5 課堂案例插入鼠標經(jīng)過圖像 單擊【確定】按鈕完成圖像的插入，如圖所示。7.1.5

7、課堂案例插入鼠標經(jīng)過圖像 單擊【5替換圖像占位符。選中圖像占位符，在【屬性】檢查器的【源文件】文本框中輸入“images/hait.jpg”，完成圖像占位符的替換。6編輯圖像大小。選中替換的圖像，單擊【屬性】檢查器的【寬】右側(cè)的按鈕，使之變成狀態(tài)，然后在【寬】文本框中輸入“150”，返回設計窗口。7.1.5 課堂案例插入鼠標經(jīng)過圖像5替換圖像占位符。選中圖像占位符，在【屬性】檢查器的【源文整個網(wǎng)頁顯示效果如圖所示。7.1.5 課堂案例插入鼠標經(jīng)過圖像整個網(wǎng)頁顯示效果如圖所示。7.1.5 課堂案例插入鼠標經(jīng)過 FLASH是一種重要的網(wǎng)頁元素，它不僅表現(xiàn)力豐富、帶給人們極強的視聽感受，而且它體積小

8、，能夠被絕大多數(shù)瀏覽器支持。因此，F(xiàn)LASH被廣泛應用于網(wǎng)頁設計領域。7.2 網(wǎng)頁中的FLASH FLASH是一種重要的網(wǎng)頁元素，它不僅表現(xiàn)力（1）.fla： FLASH的源文件。（2）.swf：FLASH電影文件（3）.swt：FLASH模板文件。（4）.flv： FLASH視頻文件。7.2.1 FLASH的文件類型（1）.fla： FLASH的源文件。7.2.1 FLASH7.2.2 插入FLASH動畫1插入SWF格式的FLASH動畫 首先將鼠標光標定位在目標位置，選擇【插入】/【媒體】/【SWF】命令，彈出【選擇SWF】對話框，如圖所示。 7.2.2 插入FLASH動畫1插入SWF格式的

9、FLASH 選擇已經(jīng)備好的SWF格式的FLASH動畫，單擊【確定】按鈕，打開【對象標簽輔助功能屬性】對話框，如圖所示。 7.2.2 插入FLASH動畫 選擇已經(jīng)備好的SWF格式的FLASH動畫，單 在該對話框中設置FLASH標題、快速訪問鍵和Tab鍵索引，單擊【確定】按鈕完成FLASH動畫的插入，如圖所示。 7.2.2 插入FLASH動畫 在該對話框中設置FLASH標題、快速訪問鍵和2設置FLASH動畫 選中插入的FLASH動畫文件，在【屬性】檢查器中可以對寬、高等屬性進行設置，如圖所示。7.2.2 插入FLASH動畫2設置FLASH動畫7.2.2 插入FLASH動畫 Flash視頻即擴展名為

10、.flv的Flash文件， 是目前網(wǎng)絡上比較流行的視頻文件格式，用戶可以脫離Flash創(chuàng)作工具向網(wǎng)頁中輕松地添加FLV視頻。7.2.3 插入FLASH 視頻 Flash視頻即擴展名為.flv的Flash1插入FLV視頻文件 將鼠標光標定位到目標位置，選擇【插入】/【媒體】/【FLV】命令，彈出【插入FLV】對話框，如圖所示。 7.2.3 插入FLASH 視頻1插入FLV視頻文件7.2.3 插入FLASH 視頻7.2.3 插入FLASH 視頻 在該對話框中單擊【URL】后的【瀏覽】按鈕，在彈出的【選擇FLV】對話框中選擇視頻文件，如圖所示。 7.2.3 插入FLASH 視頻 在該對話框中7.2.

11、3 插入FLASH 視頻 如果在“視頻類型”中選擇“流視頻”選項，則進入流視頻界面，如圖所示。7.2.3 插入FLASH 視頻 如果在“視頻具體操作步驟：1打開素材文件“examplechapter07flash.html”。2插入flash動畫。將鼠標光標置于網(wǎng)頁頂部單元格中，選擇【插入】/【媒體】/【SWF】命令，在彈出的【選擇SWF】對話框中選擇swf文件夾下的 “pigeon.swf”文件，如圖所示，單擊【確定】按鈕。7.2.4 課堂案例插入flash動畫具體操作步驟：7.2.4 課堂案例插入flash動畫7.2.4 課堂案例插入flash動畫7.2.4 課堂案例插入flash動畫3設

12、置flash動畫屬性。選中插入的SWF文件，在【屬性】檢查器中設置【寬】屬性值為“960”，【W(wǎng)mode】屬性值為“透明”。4插入flash視頻。將鼠標光標置于菜單下面的單元格中，選擇【插入】/【媒體】/【FLV】命令，設置屬性如圖所示。7.2.4 課堂案例插入flash動畫3設置flash動畫屬性。選中插入的SWF文件，在【屬性】7.2.4 課堂案例插入flash動畫7.2.4 課堂案例插入flash動畫網(wǎng)頁預覽效果如圖所示 7.2.4 課堂案例插入flash動畫網(wǎng)頁預覽效果如圖所示 7.2.4 課堂案例插入flash動 在Dreamweaver CS6中，除了支持FLASH動畫、FLV視頻

13、等多媒體元素外，HMTL網(wǎng)頁還支持一種比FLASH具有更強多媒體交互功能的元素，即Shockwave影片。7.3 網(wǎng)頁中的Shockwave影片 在Dreamweaver CS6中，除了支持 Shockwave是由Adobe Director軟件制作而成，影片文件較小，可以被快速下載。常用于制作較復雜的網(wǎng)頁小游戲、多媒體課件等，文件格式有DCR、DXR及DIR等幾種。7.3.1 認識Shockwave影片 Shockwave是由Adobe Direc7.3.2 插入Shockwave影片 首先將鼠標光標定位在目標位置，選擇【插入】/【媒體】/【Shockwave】命令，在彈出的【選擇文件】對話

14、框中選擇要插入的Shockwave影片即可。7.3.2 插入Shockwave影片 首先7.4 網(wǎng)頁中的聲音 聲音在傳達信息中有著不可比擬的優(yōu)勢，也是多媒體網(wǎng)站重要的組成要素之一，選擇合適的音頻能使網(wǎng)站內(nèi)容更加豐富，有更強的感染力。7.4 網(wǎng)頁中的聲音 聲音在傳達信息中有著不可 網(wǎng)頁中支持的音頻格式有很多種，下面是常用的音頻格式。MIDI或MID：樂器數(shù)字接口格式。MP3：全稱為動態(tài)影像專家壓縮標準音頻層面3。WAV：Waveform擴展名格式。RA、R AM、RPM：是一種壓縮程序很高的音頻格式文件 。7.4.1 網(wǎng)頁支持的音頻格式 網(wǎng)頁中支持的音頻格式有很多種，下面7.4.2 鏈接到聲音文

15、件 鏈接到音頻文件是將聲音添加到網(wǎng)頁的一種簡單而有效的方法。要創(chuàng)建指向某一聲音文件的鏈接，首先要選中用于指向音頻文件鏈接的文本或圖像等對象，然后在【屬性】檢查器的【鏈接】文本框中輸入音頻文件的路徑及名稱，或單擊【鏈接】后的 圖標，在彈出對話框中選擇音頻文件即可，如圖所示。 7.4.2 鏈接到聲音文件 鏈接到音頻文件是將7.4.2 鏈接到聲音文件7.4.2 鏈接到聲音文件 首先將鼠標光標定位到目標位置，選擇【插入】/【媒體】/【插件】命令，彈出【選擇文件】對話框，從中選擇要添加的聲音文件，單擊【確定】按鈕，即在網(wǎng)頁中插入一個插件占位符。選中插件占位符，在【屬性】檢查器設置聲音文件屬性，如圖所示。

16、7.4.3 嵌入聲音文件 首先將鼠標光標定位到目標位置，選擇【插入】7.4.4 課堂案例制作默默音樂盒具體操作步驟：1打開素材文件“examplechapter07playmusic.html” 。2鏈接音樂文件。將鼠標光標置于網(wǎng)頁第一幅圖片下方名為“text”的DIV中，選中“Yesterday Once More”文本，在其【屬性】檢查器【鏈接】文本中輸入“music/Yesterday Once More.mp3”。7.4.4 課堂案例制作默默音樂盒具體操作步驟：7.4.4 課堂案例制作默默音樂盒3嵌入音樂。將鼠標光標置于第二幅圖片下方名為“text1”的DIV中，選擇【插入】/【媒體】

17、/【插件】命令，在彈出的【選擇文件】對話框中打開站點的“music”文件夾，選擇“Go home.mp3”，單擊【確定】按鈕。7.4.4 課堂案例制作默默音樂盒3嵌入音樂。將鼠標光標7.4.4 課堂案例制作默默音樂盒4設置嵌入音樂屬性。選中插件占位符，在【屬性】檢查器中設置插件【寬】為“180”。單擊【參數(shù)】按鈕，在彈出的【參數(shù)】對話框中，設置“autoplay”屬性值為“false”，單擊【確定】按鈕，如圖所示。7.4.4 課堂案例制作默默音樂盒4設置嵌入音樂屬性。選網(wǎng)頁預覽效果如下圖所示。7.4.4 課堂案例制作默默音樂盒網(wǎng)頁預覽效果如下圖所示。7.4.4 課堂案例制作默默音樂盒7.5 網(wǎng)

18、頁中的其他媒體對象 7.5.1 插入傳統(tǒng)視頻文件 傳統(tǒng)視頻是區(qū)別于FLV格式的視頻而言，這些視頻文件可以通過傳統(tǒng)的視頻播放器進行播放，包括AVI、WMV、MOV、RM和 RMVB等。傳統(tǒng)視頻的插入方法與使用插件添加聲音文件的方法完全相同，只是需要設置插件的【寬】和【高】屬性，以使能正常觀看視頻。7.5 網(wǎng)頁中的其他媒體對象 7.5.1 插入傳統(tǒng)視頻文件 Applet即Java小程序，是一種動態(tài)、安全、跨平臺的、能夠嵌入在網(wǎng)頁中的、可以執(zhí)行一定小任務的網(wǎng)絡應用程序，擴展名常為.class。 用戶訪問服務器的Applet時，這些Applet就在網(wǎng)絡上傳輸，然后在支持Java的瀏覽器中運行。在執(zhí)行帶有Java效果