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

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

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

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

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

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

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

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

8、，能夠被絕大多數(shù)瀏覽器支持。因此，F(xiàn)LASH被廣泛應(yīng)用于網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域。7.2 網(wǎng)頁(yè)中的FLASH FLASH是一種重要的網(wǎng)頁(yè)元素，它不僅表現(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動(dòng)畫1插入SWF格式的FLASH動(dòng)畫 首先將鼠標(biāo)光標(biāo)定位在目標(biāo)位置，選擇【插入】/【媒體】/【SWF】命令，彈出【選擇SWF】對(duì)話框，如圖所示。 7.2.2 插入FLASH動(dòng)畫1插入SWF格式的

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

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

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

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

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

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

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

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

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

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