網(wǎng)頁(yè)設(shè)計(jì)與制作插入多媒體對(duì)象課件

我們可以很方便地在網(wǎng)頁(yè)中插入文字、圖像、表格、表單等元素。也可以很輕松地在網(wǎng)頁(yè)中添加多媒體元素。如Java小程序，QuickTime或Shockwave影片，F(xiàn)lash動(dòng)畫(huà)，ActiveX控件、MP3音樂(lè)文件，F(xiàn)lash按鈕和文本對(duì)象或其他聲音和視頻對(duì)象。通過(guò)這些元素的加入，可以將文字、聲音和圖像等元素以交互且動(dòng)態(tài)的方式呈現(xiàn)在網(wǎng)頁(yè)上。第八章插入多媒體對(duì)象

第八章插入多媒體對(duì)象

8.1插入Flash動(dòng)畫(huà)

8.2插入Shockwave影片

8.3插入ActiveX控件

8.4添加插件

8.5插入FireworksHTML

8.6添加JavaApplet

8.7添加聲音

8.8插入其他對(duì)象

8.1插入Flash動(dòng)畫(huà)

【垂直邊距】和【水平邊距】：指影片上、下、左、右的留白間距。

【品質(zhì)】：為運(yùn)行影片的object和embed標(biāo)簽設(shè)置quality參數(shù)。該設(shè)置關(guān)系到影片回放時(shí)使用的防鋸齒的級(jí)別。在高的設(shè)置下看起來(lái)會(huì)好些，但這便要求一個(gè)更快的CPU在屏幕上進(jìn)行顯示?！镜推焚|(zhì)】設(shè)置重點(diǎn)強(qiáng)調(diào)速度，而【高品質(zhì)】盡可能強(qiáng)調(diào)外觀(guān)。【自動(dòng)高品質(zhì)】則會(huì)在開(kāi)始時(shí)盡量保證兩個(gè)方面的質(zhì)量，但在需要時(shí)會(huì)犧牲品質(zhì)來(lái)?yè)Q取速度。

【比例】：確定影片如何適合在【寬】和【高】文本框中設(shè)置的尺寸。

【默認(rèn)值】設(shè)置顯示整個(gè)影片，維持原始的縱橫比；

【無(wú)邊框】使影片適合設(shè)定的尺寸，超出部分將自動(dòng)裁剪，維持原始的縱橫比；

【嚴(yán)格匹配】

對(duì)影片影片進(jìn)行縮放以適合設(shè)定的尺寸，而不管原始的縱橫比如何。會(huì)壓縮變形【參數(shù)】：將打開(kāi)一個(gè)對(duì)話(huà)框，可在其中輸入傳遞給影片的附加參數(shù)，如圖8-2所示。影片必須已設(shè)計(jì)好，可以接收這些附加參數(shù)。當(dāng)用戶(hù)在文檔中插入一個(gè)Flash影片時(shí)，DreamweaverMX2004將同時(shí)使用object標(biāo)簽（Microsoft為ActiveX控件定義的標(biāo)簽）和embed標(biāo)簽（Netscape為插件定義的標(biāo)簽），以便在所有的瀏覽器類(lèi)型中都能獲得最佳效果。當(dāng)用戶(hù)在【屬性】面板中對(duì)影片作修改時(shí)，DreamweaverMX2004將同時(shí)對(duì)object標(biāo)簽和embed標(biāo)簽中的參數(shù)作適當(dāng)?shù)男薷摹?/p>

8.1插入Flash動(dòng)畫(huà)8.2插入Shockwave影片

Shockwave電影是Macromedia公司在Web上的交互式多媒體。用于播放插入網(wǎng)頁(yè)中應(yīng)用Director軟件創(chuàng)建的多媒體電影。Shockwave電影可以集動(dòng)畫(huà)、位圖、視頻和聲音于一體，并將它們合成一個(gè)交互式界面。Shockwave電影允許媒體文件通過(guò)Macromedia的控制器下載，下載速度十分快，而且能被絕大多數(shù)的瀏覽器播放。Microsoft公司的InternetExplorer與Netscape公司的Navigator兩種瀏覽器都可以播放Shockwave電影.DreamweaverMX2004是利用object標(biāo)簽與embed標(biāo)簽來(lái)插入Shockwave電影的；object標(biāo)簽是通過(guò)Microsoft公司的ActiveX控件來(lái)定義的；embed標(biāo)簽是通過(guò)Navigator的插件來(lái)定義的。插入Shockwave電影的具體操作如下：(1)

打開(kāi)文檔，將光標(biāo)定位于要插入Shockwave影片的地方。(2)

通過(guò)下列步驟之一插入Shockwave影片：l

在【常用】工具欄單擊【媒體】下拉列表，從中選擇【Shockwave】。l

選擇【插入菜單/【媒體】/【Shockwave】。(3)

在彈出對(duì)話(huà)框中的選擇文件，選取一個(gè)Shockwave影片文件，Shockwave影片文件的擴(kuò)展名為dcr、dir、dxr?！疚臋n】窗口中將出現(xiàn)一個(gè)Shockwave占位符。(4)設(shè)置Shockwave影片的屬性，如圖8-3所示。8.2插入Shockwave影片

l

【名稱(chēng)】：為腳本程序指定Shockwave影片的名稱(chēng)。l

【寬】和【高】：指定Shockwave影片的寬度和高度，默認(rèn)單位為象素。還可以指定以下單位：pc（十二點(diǎn)活字）、pt（點(diǎn)）、in（英寸）、cm（厘米）或%。l

【文件】：指定Shockwave影片文件的路徑。點(diǎn)擊文件夾圖標(biāo)可查找文件，或者鍵入路徑。l

【垂直邊距】和【水平邊距】：指影片上、下、左、右的留白間距。

l

【對(duì)齊】：確定電影與頁(yè)面的對(duì)齊方式。l

【背景顏色】：指定電影區(qū)域的背景顏色。l

【播放】：?jiǎn)螕艨捎^(guān)察電影的播放效果。l

【參數(shù)】：將打開(kāi)一個(gè)對(duì)話(huà)框，在對(duì)話(huà)框中可輸入其他參數(shù)傳遞給電影。

8.2插入Shockwave影片

8.3插入ActiveX控件

ActiveX控件實(shí)際上是一個(gè)程序，它可以嵌入到網(wǎng)頁(yè)中，隨網(wǎng)頁(yè)傳送到客戶(hù)的瀏覽器上，只要客戶(hù)端的瀏覽器有支持ActiveX的功能，就會(huì)自動(dòng)下載并執(zhí)行它。ActiveX控件擴(kuò)展了Web瀏覽器的功能。要插入ActiveX控件，具體操作如下：(1)打開(kāi)文檔，將光標(biāo)定位于要插入ActiveX控件的地方。(2)

通過(guò)下列步驟之一插入ActiveX控件：l

在【常用】工具欄單擊【媒體】下拉列表，從中選擇【ActiveX】。l

選擇【插入】菜單/【媒體】/【ActiveX】。(3)【文檔】窗口中將出現(xiàn)ActiveX控件的一個(gè)占位符。(4)

設(shè)置ActiveX控件的屬性，如圖8-4所示。l【名稱(chēng)】：為腳本程序指定ActiveX的名稱(chēng)。l

【寬】和【高】：指定ActiveX對(duì)象的寬度和高度，默認(rèn)單位為象素。還可以指定以下單位：pc（十二點(diǎn)活字）、pt（點(diǎn)）、in（英寸）、cm（厘米）或%。

l【ClassID】：用于瀏覽器識(shí)別ActiveX控件。輸入一個(gè)值，或在下拉列表中選擇一個(gè)選項(xiàng)，載入頁(yè)面時(shí)，瀏覽器使用ClassID確定播放ActiveX對(duì)象的ActiveX控件位置。l

【嵌入】：為ActiveX控件在Object標(biāo)簽內(nèi)添加embed標(biāo)簽。如果ActiveX控件具有等效和NetcaspeNavigateor插件，則Embed將激活該插件。l

【源文件】：如果啟用了【嵌入】選項(xiàng)，將要用于NetscapeNavigator插件的數(shù)據(jù)文件。如果沒(méi)有輸入值，則有Dreamweaver將嘗試根椐已輸入的ActiveX屬性確定該值。8.3插入ActiveX控件

l

【垂直邊距】和【水平邊距】：指ActiveX對(duì)象的上、下、左、右的留白間距，單位為像素。l

【基址】：指定包含該ActiveX控件的URL，如果在訪(fǎng)問(wèn)者的系統(tǒng)中尚未安裝該ActiveX控件，則InternetExplorer從該位置下載它。如果沒(méi)有指定【基址】參數(shù)，并且訪(fǎng)問(wèn)者尚未安裝相應(yīng)的ActiveX控件，則瀏覽器不能顯示ActiveX對(duì)象。l

【編號(hào)】：該文本框定義了ActiveX控件中的ID參數(shù)，該參數(shù)專(zhuān)門(mén)供ActiveX控件使用。l

【數(shù)據(jù)】：為ActiveX控件指定載入的數(shù)據(jù)文件，許多ActiveX控件（如Shockwave和RealPlayer）不支持這個(gè)參數(shù)。l

【替代圖像】：該屬性（只有當(dāng)使用Object標(biāo)簽時(shí)才有效）指定一個(gè)圖像，當(dāng)用戶(hù)的瀏覽器不支持ActiveX控件時(shí)，就顯示該圖像。l

【參數(shù)】：將打開(kāi)一個(gè)對(duì)話(huà)框，在其中可以為該ActiveX對(duì)象添加更多的參數(shù)。8.3插入ActiveX控件

8.4添加插件

在瀏覽網(wǎng)頁(yè)時(shí)，常會(huì)遇到一些瀏覽器無(wú)法處理的文件，如動(dòng)畫(huà)文件、音樂(lè)文件。為了解決這個(gè)問(wèn)題，要借助于插件，通過(guò)下載媒體公司為瀏覽器開(kāi)發(fā)的插件，可以看到更多的媒體類(lèi)型。插件處理程序是為擴(kuò)展Netscape處理多媒體內(nèi)容的能力而安裝在Netscape瀏覽器中的執(zhí)行程序。通過(guò)使用插件可以在Web站點(diǎn)上顯示并播放一些已安裝了插放器的媒體文件。插件主要是針對(duì)NetscapeNavigator瀏覽器制作的，雖然

InternetExplorer也支持該功能，但仍有少數(shù)的插件在執(zhí)行時(shí)會(huì)出問(wèn)題。添加插件的具體操作步驟如下：(1)打開(kāi)文檔，將光標(biāo)定位于要插入插件的地方(2)通過(guò)下列步驟之一添加插件：l

在【常用】工具欄單擊【媒體】下拉列表，從中選擇【插件】。l

選擇【插入】菜單/【媒體】/【插件】。

(3)

在彈出對(duì)話(huà)框中選擇文件，這里選擇一個(gè)mp3的聲音文件，然后單擊【確定】按鈕。設(shè)置插件屬性，【插件】的屬性面板如圖8-5所示：

8.4添加插件

l【源文件】：設(shè)置數(shù)據(jù)文件的路徑及文件名。l

【插件URL】：該設(shè)置是針對(duì)源文件中文件的類(lèi)型來(lái)設(shè)置的，即此處應(yīng)為播放源文件中數(shù)據(jù)文件的程序。例如，若源文件中選擇的是mp3的聲音文件，則此處應(yīng)為RealonePlayer這一插件。如果瀏覽該網(wǎng)頁(yè)的用戶(hù)沒(méi)有安裝該插件，瀏覽器會(huì)將此位置指定的應(yīng)用程序下載。l

其他參數(shù)的設(shè)置與【Active控件】相同。Active控件和插件的區(qū)別是：如果有人載入了一個(gè)網(wǎng)頁(yè)，且網(wǎng)頁(yè)中帶有他的瀏覽器不支持的ActiveX控件，瀏覽器就會(huì)自動(dòng)安裝所需軟件；如果是插件，用戶(hù)必須親自找出支持軟件并進(jìn)行安裝。但兩者的作用還是基本相同的。8.4添加插件

8.5插入FireworksHTML

Fireworks主要用于網(wǎng)頁(yè)的設(shè)計(jì)和圖像的優(yōu)化設(shè)計(jì)及處理。通過(guò)Fireworks所設(shè)計(jì)的網(wǎng)頁(yè)避免了在Dreamweaver中設(shè)計(jì)網(wǎng)頁(yè)的種種弊端，并能導(dǎo)出為HTML文檔格式以供在Dreamweaver中使用。在Dreamweaver文檔中，可以插入Fireworks的HTML文件，具體操作如下：(1)打開(kāi)文檔，將光標(biāo)定位。(2)

選擇【插入】/【圖像對(duì)象】/【FireworksHTML】，打開(kāi)如圖8-6所示對(duì)話(huà)框。(3)

點(diǎn)擊【瀏覽】按鈕，選擇要插入的FireworksHTML文件。(4)

如果勾選【插入后刪除文件】，則完成該操作后，會(huì)將原始的FireworksHTML文件移至【回收站】。(5)單擊【確定】按鈕，完成操作。選中剛插入的對(duì)象，切換到設(shè)計(jì)視圖，可以看到它是用表格標(biāo)簽把圖像、切片以HTML語(yǔ)言的格式組織起來(lái)。8.6添加JavaApplet

Java是一種面向?qū)ο蟮木W(wǎng)絡(luò)編程語(yǔ)言。Applet是Java開(kāi)發(fā)的小程序，可以嵌入到網(wǎng)頁(yè)中，瀏覽器只要安裝了java虛擬機(jī)，就可以解釋并執(zhí)行applet小程序。Dreamweaver使用<applet>標(biāo)簽來(lái)標(biāo)識(shí)applet小程序?，F(xiàn)在的瀏覽器大多支持Java虛擬機(jī)，以InternetExplorer為例，打開(kāi)IE瀏覽器，選擇菜單【工具】/【internet選項(xiàng)…】，切換到【高級(jí)】選項(xiàng)卡，勾選【Java】選項(xiàng)。重新啟動(dòng)計(jì)算機(jī)，瀏覽器就可以對(duì)applet進(jìn)行解釋執(zhí)行。插入Java小程序的具體操作如下：(1)打開(kāi)文檔，將光標(biāo)定位于要插入applet的地方(2)

通過(guò)下列步驟之一添加apple：l

在【常用】工具欄單擊【媒體】下拉列表，從中選擇【applet】。l

選擇菜單【插入】/{媒體}/【applet】。(3)

在出現(xiàn)的文件選擇對(duì)話(huà)框中，選擇一個(gè)applet小程序的文件，擴(kuò)展名為.class。（注：要插入的Java小程序的擴(kuò)展名為.class，該文件需放在與引用文件相同的文件夾下，引用文件名要區(qū)分大小寫(xiě)。）(4)在【屬性】面板中對(duì)apple的參數(shù)進(jìn)行設(shè)置。如圖8-7的所示。8.6添加JavaApplet

l

【Applet名稱(chēng)】：為腳本程序指定Applet小程序的名稱(chēng)。l

【代碼】：指定Applet文件的路徑。點(diǎn)擊文件夾圖標(biāo)可查找文件，或者鍵入路徑。l

【基址】：指定包含選定JavaApplet文件的文件夾。l

【替代】：如果用戶(hù)的瀏覽器不支持Applet程序或者Java被禁止，該選項(xiàng)將指定一個(gè)代替顯示的內(nèi)容，如文本或圖像。其他參數(shù)的設(shè)置與插件【屬性】面板相同。

8.6添加JavaApplet

8.7添加聲音

1．.聲音文件格式

下面的列表描述了一些常見(jiàn)的聲音文件，以及每種聲音格式用于Web設(shè)計(jì)時(shí)的優(yōu)點(diǎn)和缺點(diǎn)。.midi或.mid（電子樂(lè)器化數(shù)據(jù)接口）主要用于電子樂(lè)器音樂(lè)。很多瀏覽器不用插件也可以支持MIDI文件。雖然其聲音品質(zhì)非常好，但同時(shí)也取決于訪(fǎng)問(wèn)者聲卡的好壞。一個(gè)非常小的MIDI文件卻可以提供相當(dāng)長(zhǎng)的聲音剪輯。MIDI文件不能錄制，而必須在計(jì)算機(jī)上使用特殊的硬件和軟件進(jìn)行人工合成。.wav（波形擴(kuò)展）該文件有好的聲音品質(zhì)，很多瀏覽器不用插件也可以支持WAV文件。可以從CD，磁帶，麥克風(fēng)等輸入設(shè)備錄制自己的WAV文件。但它的文件非常大，限制了在Web頁(yè)上使用聲音剪輯的長(zhǎng)度。.aif（聲音交換文件格式，或AIFF）和WAV格式一樣它也有非常好的聲音品質(zhì)，很多瀏覽器不用插件也可以支持AIF文件。也可以從CD，磁帶，麥克風(fēng)等輸入設(shè)備錄制自己的AIF文件，但它的文件很大，在Web頁(yè)上使用聲音剪輯的長(zhǎng)度。.mp3（電影專(zhuān)家組聲音，或者M(jìn)PEG-AudioLayer-3）一種使聲音文件大小有實(shí)質(zhì)性縮小的壓縮格式。其聲音品質(zhì)非常好：它的播放采用”流”的方式，文件邊下載邊播放，節(jié)省了等待的時(shí)間，很適合網(wǎng)上播放。這樣來(lái)訪(fǎng)者就無(wú)須等待下載整個(gè)文件便可以聽(tīng)到音樂(lè)。然而MP3文件大小比Real聲音文件要大，所以如果要通過(guò)普通電話(huà)線(xiàn)連接傳輸一首完整的歌曲可能要等上一段時(shí)間。若要播放MP3文件，來(lái)訪(fǎng)者必須下載并安裝一個(gè)輔助應(yīng)用程序或插件如QuickTime，WindowsMediaPlayer或RealonePlayer。.ra，.ram，.rpm或RealAudio有非常高的壓縮比，所以比MP3文件還要小。完整的歌曲文件可以在較短的時(shí)間內(nèi)完成下載。由于該類(lèi)文件可以從一個(gè)普通的Web服務(wù)器上“流式”播放，所以來(lái)訪(fǎng)者可以在文件還沒(méi)完全下載之前便開(kāi)始欣賞音樂(lè)。這類(lèi)文件音質(zhì)不如MP3文件，但最新版本的播放器和解碼器已經(jīng)極大地提高了聲音品質(zhì)。來(lái)訪(fǎng)者必須下載并安裝RealonePlayer應(yīng)用程序輔助插件來(lái)播放這些文件。8.7添加聲音

2．鏈接到聲音文件

鏈接到聲音文件是將聲音添加到Web頁(yè)面的一種簡(jiǎn)單而有效的方式。這種結(jié)合聲音文件的方式讓來(lái)訪(fǎng)者可以選擇他們所感興趣的文件。具體操作如下：(1)在文檔中輸入聲音文件名，例如”小小少年”，選中文本。(2)在【屬性】面板中，點(diǎn)擊【鏈接】文件夾圖標(biāo)選取聲音文件，或者在【鏈接】域中鍵入文件名稱(chēng)和路徑，例“02.mp3”。如圖8-8所示。保存文檔，按F12預(yù)覽，查看效果。

8.7添加聲音

3．嵌入聲音

嵌入聲音是將聲音播放器直接結(jié)合到頁(yè)面中，但只有在站點(diǎn)來(lái)訪(fǎng)者裝有可以播放選定聲音文件的插件時(shí)，才可以播放聲音。如果需要將聲音作為背景音樂(lè)或者需要更多對(duì)聲音表現(xiàn)的控制時(shí)，可以嵌入聲音文件。例如，可以設(shè)置音量，設(shè)置播放器在頁(yè)面上的外觀(guān)，設(shè)置聲音文件自動(dòng)開(kāi)始播放或按下按鈕后開(kāi)始播放，是否循環(huán)等。8.7添加聲音

(1)

打開(kāi)文檔，將光標(biāo)定位在需要嵌入聲音文件的地方。(2)選擇菜單【插入】＞【媒體】＞【插件】。(3)在【屬性】面板中，點(diǎn)擊文件夾圖標(biāo)選取聲音文件，或者在【鏈接】域中鍵入文件名稱(chēng)和路徑。在【屬性】面板中設(shè)置【寬度】和【高度】的值，或者在【文檔】窗口中調(diào)整插件占位符的大小。這些值決定了聲音控制在頁(yè)面中顯示的大小。如圖8-9所示。

保存文檔，按F12預(yù)覽，查看效果

8.7添加聲音

4．使用行為播放聲音使用「播放聲音」行為可以播放聲音。例如，在鼠標(biāo)經(jīng)過(guò)某鏈接時(shí)播放聲音文件，或者在加載頁(yè)面時(shí)播放音樂(lè)剪輯等(1)在文檔中輸入文本，例如“我是草原小騎手”，選中該文本，在【屬性】面板為文本建立空鏈接。(2)打開(kāi)【行為】面板，點(diǎn)擊（+）添加按鈕并從【行為】彈出式菜單中選擇【播放聲音】。如圖8-10所示。(1)點(diǎn)擊【瀏覽】按鈕，選取聲音文件，或者在【播放聲音】域中輸入路徑和文件名稱(chēng)。

(2)點(diǎn)擊【確定】，檢查默認(rèn)事件是否是需要的事件。保存文檔，按F12預(yù)覽，查看效果。

8.7添加聲音

8.8插入其他對(duì)象

8.8.1插入文件頭標(biāo)簽

1．插入Meta

2．插入關(guān)鍵字

3．插入說(shuō)明

4．插入刷新

8.8.2插入特殊字符

8.8.3插入注釋8.8.4插入時(shí)間

文件頭標(biāo)簽就是<meta>標(biāo)簽，包含在<head></head>中間，瀏覽網(wǎng)頁(yè)是不會(huì)被顯示。Meta標(biāo)簽中記錄當(dāng)前頁(yè)面的重要信息，如文檔類(lèi)型、語(yǔ)言編碼、關(guān)鍵字、文檔說(shuō)明等。

META最大的作用就是提供搜索引擎關(guān)于本站的描述關(guān)鍵字，簡(jiǎn)單的說(shuō)，當(dāng)搜索網(wǎng)站的機(jī)器人搜索到你的網(wǎng)站時(shí)，會(huì)首先檢查META所描述的關(guān)鍵字，然后把這些關(guān)鍵字加入到數(shù)據(jù)庫(kù)中，所以，利用好META標(biāo)簽會(huì)讓你在搜索引擎中被搜索到的機(jī)會(huì)增加。8.8.1插入文件頭標(biāo)簽【屬性】：下拉列表中包括【名稱(chēng)】和【HTTP-equivalent】?jī)蓚€(gè)選項(xiàng)?！久Q(chēng)