《網(wǎng)頁(yè)設(shè)計(jì)與制作（第2版）》第4章 使用圖像和媒體

圖像和媒體與文本一樣，是網(wǎng)頁(yè)制作中不可缺少的重要元素。圖像和媒體不僅可以為網(wǎng)頁(yè)增色添彩，還可以更好地配合文本傳遞信息。本章將介紹圖像和媒體的基本知識(shí)以及在網(wǎng)頁(yè)中插入圖像和媒體的基本方法。第4章使用圖像和媒體學(xué)習(xí)目標(biāo)了解網(wǎng)頁(yè)中常用的圖像和媒體的基本類(lèi)型。掌握插入圖像和圖像占位符的方法。掌握插入SWF動(dòng)畫(huà)、FLV視頻和ActiveX控件的方法。掌握設(shè)置圖像屬性和不同媒體屬性的方法。4.1圖像格式4.1.1GIF圖像4.1.2JPG/JPEG圖像4.1.3PNG圖像4.1.1 GIF圖像GIF格式（GraphicsInterchangeFormat，圖像交換格式，文件擴(kuò)展名為“.gif”）的數(shù)據(jù)是一種連續(xù)色調(diào)的無(wú)損壓縮格式，采用了可變長(zhǎng)度等壓縮算法，壓縮率一般在50%左右。只要圖像不多于256色，GIF格式既可減少文件的大小，又能保持成像的質(zhì)量。但是GIF格式不多于256色的限制局限了其應(yīng)用范圍，不適合顯示有暈光、漸變色彩等顏色細(xì)膩的圖像和照片等。GIF格式最適合顯示色調(diào)不連續(xù)或具有大面積單一顏色的圖像（如圖表、按鈕、圖標(biāo)、徽標(biāo)）或其他具有統(tǒng)一色彩和色調(diào)或只需少量顏色的圖像（如黑白照片等）。GIF分為靜態(tài)GIF和動(dòng)畫(huà)GIF兩種，支持透明背景圖像，適用于多種操作系統(tǒng)。動(dòng)畫(huà)GIF是將多幅圖像保存為一個(gè)圖像文件，從而形成動(dòng)畫(huà)。GIF格式因其具有圖像文件體積小、成像相對(duì)清晰、下載速度快、下載時(shí)隔行顯示、支持透明色以及多個(gè)圖像能組成動(dòng)畫(huà)的特點(diǎn)，因此大受歡迎，是一種在網(wǎng)絡(luò)上使用最早、應(yīng)用非常廣泛的圖形文件格式。目前幾乎所有相關(guān)軟件都支持GIF格式，公共領(lǐng)域有大量的軟件在使用GIF格式圖像文件。4.1.2 JPG/JPEG圖像JPG/JPEG格式（JointPhotographicExpertsGroup，聯(lián)合圖像專(zhuān)家組文件格式，文件擴(kuò)展名為“.jpg”或“.jpeg”），是24位的圖像文件格式，也是一種與平臺(tái)無(wú)關(guān)的高效率壓縮格式。JPG/JPEG標(biāo)準(zhǔn)由ISO與CCITT（國(guó)際電報(bào)電話咨詢(xún)委員會(huì)）共同制定，是面向連續(xù)色調(diào)靜止圖像的一種壓縮標(biāo)準(zhǔn)。JPG/JPEG格式的文件一般有兩種文件擴(kuò)展名：“.jpg”和“.jpeg”，這兩種擴(kuò)展名的實(shí)質(zhì)是相同的，可以把“.jpg”的文件改名為“.jpeg”，而對(duì)文件本身不會(huì)有任何影響。嚴(yán)格來(lái)講，JPEG的文件擴(kuò)展名應(yīng)該為“.jpeg”，但由于DOS系統(tǒng)的8.3文件名命名規(guī)則，PC機(jī)使用了“.jpg”的擴(kuò)展名，而由于Mac系統(tǒng)并不限制擴(kuò)展名的長(zhǎng)度，因此當(dāng)時(shí)蘋(píng)果機(jī)上都使用了“.jpeg”的擴(kuò)展名。雖然現(xiàn)在Windows系統(tǒng)也可以支持任意長(zhǎng)度的擴(kuò)展名了，但大家已經(jīng)習(xí)慣了“.jpg”的用法。這與HTML網(wǎng)頁(yè)文檔擴(kuò)展名“.htm”和“.html”的情況是一樣的，雖然擴(kuò)展名不一樣，但實(shí)際上是一回事。4.1.3 PNG圖像PNG格式（PortableNetworkGraphicsFormat，便攜式網(wǎng)絡(luò)圖形格式，文件擴(kuò)展名為“.png”）。PNG格式設(shè)計(jì)的目的是試圖替代GIF和TIFF文件格式，同時(shí)增加一些GIF文件格式所不具備的特性。網(wǎng)絡(luò)通訊中因受帶寬制約，在保證圖像清晰、逼真的前提下，PNG格式圖像文件體積小，特別適合網(wǎng)絡(luò)傳輸。PNG格式文件具有高壓縮比，它利用特殊的編碼方法標(biāo)記重復(fù)出現(xiàn)的數(shù)據(jù)，因而對(duì)圖像的顏色沒(méi)有影響，也不可能產(chǎn)生顏色的損失，這樣就可以重復(fù)保存而不降低圖像質(zhì)量。PNG-8格式與GIF圖像類(lèi)似，同樣采用8位調(diào)色板將RGB彩色圖像轉(zhuǎn)換為索引彩色圖像。圖像中保存的不再是各個(gè)像素的彩色信息，而是從圖像中挑選出來(lái)的具有代表性的顏色編號(hào)，每一編號(hào)對(duì)應(yīng)一種顏色，圖像的數(shù)據(jù)量也因此減少，這對(duì)彩色圖像的傳播非常有利。PNG格式圖像在瀏覽器上采用流式瀏覽，即使經(jīng)過(guò)交錯(cuò)處理的圖像會(huì)在完全下載之前提供瀏覽者一個(gè)基本的圖像內(nèi)容，然后再逐漸清晰起來(lái)。它允許連續(xù)讀出和寫(xiě)入圖像數(shù)據(jù)，這個(gè)特性很適合于在通信過(guò)程中顯示和生成圖像。PNG格式可以為原圖像定義256個(gè)透明層次，使得彩色圖像的邊緣能與任何背景平滑地融合，從而徹底地消除鋸齒邊緣。這種功能是GIF和JPEG沒(méi)有的。PNG格式還支持真彩和灰度級(jí)圖像的Alpha通道透明度。PNG格式對(duì)于幾乎任何類(lèi)型的網(wǎng)頁(yè)圖像都是非常適合的，是目前使用量逐漸增多的圖像格式。4.2.1 教學(xué)案例━━五月飛雪將素材文檔復(fù)制到站點(diǎn)文件夾下，然后根據(jù)要求設(shè)置網(wǎng)頁(yè)背景和插入圖像，在瀏覽器中的顯示效果如圖4-1所示。(1) 設(shè)置整個(gè)網(wǎng)頁(yè)的背景圖像為“snowbg.jpg”，要求背景圖像縱向和橫向都重復(fù)。(2) 依次插入3個(gè)JPG格式的圖像“snow01.jpg”、“snow02.jpg”、“snow03.jpg”以及一個(gè)PSD格式的圖像“snow04.psd”，替換文本依次為“雪中紅花”、“雪后森林”、“雪中綠樹(shù)”、“雪后大地”。4.2.1 教學(xué)案例━━五月飛雪4.2.2 設(shè)置背景在制作網(wǎng)頁(yè)時(shí)，經(jīng)常需要設(shè)置背景圖像或背景顏色。設(shè)置整個(gè)網(wǎng)頁(yè)的背景圖像或背景顏色，可通過(guò)【頁(yè)面屬性】對(duì)話框進(jìn)行。4.2.3 插入圖像一、通過(guò)【選擇圖像源文件】對(duì)話框插入圖像。在插入圖像時(shí)，有時(shí)會(huì)彈出【圖像標(biāo)簽輔助功能屬性】對(duì)話框。

二、通過(guò)【文件】面板拖曳圖像4.2.3 插入圖像

三、通過(guò)【資源】面板插入圖像4.2.3 插入圖像

四、插入PSD文件。在DreamweaverCS6中，可以直接在網(wǎng)頁(yè)文檔中插入PSD文件，此時(shí)將彈出【圖像優(yōu)化】對(duì)話框。4.2.3 插入圖像4.2.4 圖像屬性圖像插入到網(wǎng)頁(yè)后，不一定完全適合需要，有時(shí)還需要進(jìn)行修飾。最好使用Photoshop等圖像處理軟件對(duì)圖像提前進(jìn)行處理，不過(guò)在DreamweaverCS6中，可以通過(guò)【屬性】面板來(lái)設(shè)置圖像大小，也可以適度地進(jìn)行編輯處理操作，使其更符合實(shí)際需要。4.2.5 圖像占位符選擇菜單命令【插入】/【圖像對(duì)象】/【圖像占位符】，或者在【插入】面板的【常用】類(lèi)別中單擊圖像按鈕組中的【圖像占位符】按鈕，打開(kāi)【圖像占位符】對(duì)話框，根據(jù)需要設(shè)置參數(shù)即可。4.3 媒體類(lèi)型4.3.1SWF4.3.2FLV

4.3.3WMV

4.3.4WMA

4.3.5MP4

4.3.6RA

4.3.7RM4.3.8RMVB

4.3.9ASF

4.3.10Shockwave

4.3.1SWF

SWF（ShockWaveFlash）是一種基于矢量的Flash動(dòng)畫(huà)文件（文件擴(kuò)展名為“.swf”），是Macromedia（現(xiàn)已被ADOBE公司收購(gòu)）公司的動(dòng)畫(huà)設(shè)計(jì)軟件Flash的專(zhuān)用格式，被廣泛應(yīng)用于網(wǎng)頁(yè)設(shè)計(jì)、動(dòng)畫(huà)制作等領(lǐng)域?？梢栽贔lash中創(chuàng)建原始內(nèi)容或者從其它Adobe應(yīng)用程序（如Photoshop或Illustrator）導(dǎo)入它們，快速設(shè)計(jì)簡(jiǎn)單的動(dòng)畫(huà)，以及使用AdobeAcitonScript3.0開(kāi)發(fā)高級(jí)的交互式項(xiàng)目。設(shè)計(jì)人員和開(kāi)發(fā)人員可使用它來(lái)創(chuàng)建演示文稿、應(yīng)用程序和其它允許用戶交互的內(nèi)容。Flash可以包含簡(jiǎn)單的動(dòng)畫(huà)、視頻內(nèi)容、復(fù)雜演示文稿和應(yīng)用程序以及介于它們之間的任何內(nèi)容。通常，使用Flash創(chuàng)作的各個(gè)內(nèi)容單元稱(chēng)為應(yīng)用程序，即使它們可能只是很簡(jiǎn)單的動(dòng)畫(huà)。也可以通過(guò)添加圖片、聲音、視頻和特殊效果，構(gòu)建包含豐富媒體的Flash應(yīng)用程序。4.3.2FLV

FLV（Flash

Video）是隨著Flash

MX的推出而發(fā)展而來(lái)的一種新興的流媒體格式（文件擴(kuò)展名為“.flv”）。由于它形成的文件具有體積小、加載速度極快、CPU占有率低、視頻質(zhì)量良好等特點(diǎn)，使得網(wǎng)絡(luò)觀看視頻文件成為可能。它的出現(xiàn)有效地解決了視頻文件導(dǎo)入Flash后，使導(dǎo)出的SWF文件體積龐大，不能在網(wǎng)絡(luò)上很好地使用等問(wèn)題。而且，F(xiàn)LV利用了網(wǎng)頁(yè)上廣泛使用的FlashPlayer平臺(tái)，訪問(wèn)者只要能看Flash動(dòng)畫(huà)就能看FLV視頻，而無(wú)需再額外安裝視頻插件，F(xiàn)LV視頻的使用給視頻傳播帶來(lái)了極大便利?？梢哉f(shuō)，F(xiàn)LV視頻是目前網(wǎng)絡(luò)上使用最廣泛的視頻傳播格式。4.3.3WMV

WMV（WindowsMediaVideo）是微軟推出的一種流媒體格式（文件擴(kuò)展名為“.wmv”），它是由ASF（AdvancedStreamFormat）格式升級(jí)延伸而來(lái)。在同等視頻質(zhì)量下，WMV格式的文件可以邊下載邊播放，因此很適合在網(wǎng)上傳輸和播放。WMV文件一般同時(shí)包含視頻和音頻部分，視頻部分使用WindowsMediaVideo編碼，音頻部分使用WindowsMediaAudio編碼。WMV-HD，基于WMV9標(biāo)準(zhǔn)，是微軟開(kāi)發(fā)的視頻壓縮技術(shù)系列中的其中一個(gè)版本。盡管WMV-HD是微軟的獨(dú)有標(biāo)準(zhǔn)，但因其在操作系統(tǒng)中大力支持WMV系列版本，從而在桌面系統(tǒng)得以迅速普及。4.3.4WMA

WMA（WindowsMediaAudio）是微軟公司推出的與MP3格式齊名的一種新的音頻格式（文件擴(kuò)展名為“.wma”）。由于WMA在壓縮比和音質(zhì)方面都超過(guò)了MP3，更是遠(yuǎn)勝于RA，即使在較低的采樣頻率下也能產(chǎn)生較好的音質(zhì)。WMA還支持音頻流技術(shù)，適合在網(wǎng)絡(luò)上在線播放。WMA可以用于多種格式的編碼文件中。應(yīng)用程序可以使用WindowsMediaFormatSDK進(jìn)行WMA格式的編碼和解碼。一些常見(jiàn)的支持WMA的應(yīng)用程序包括WindowsMediaPlayer、WindowsMediaEncoder、RealPlayer、Winamp等。其他一些平臺(tái)，例如Linux和移動(dòng)設(shè)備中的軟硬件也支持此格式。4.3.5MP4

MP4（MPEG-4Part14）是一種使用MPEG-4對(duì)音頻、視頻信息進(jìn)行壓縮的編碼格式（文件擴(kuò)展名為“.mp4”），以?xún)?chǔ)存數(shù)碼音訊及數(shù)碼視訊為主。MP4由國(guó)際標(biāo)準(zhǔn)化組織（ISO）和國(guó)際電工委員會(huì)（IEC）下屬的“動(dòng)態(tài)圖像專(zhuān)家組”（MovingPictureExpertsGroup，即MPEG）制定，第一版在1998年10月通過(guò)，第二版在1999年12月通過(guò)。MPEG-4格式的主要用途在于網(wǎng)上流、光盤(pán)、語(yǔ)音發(fā)送（視頻電話）以及電視廣播。MPEG-4包含了MPEG-1及MPEG-2的絕大部份功能及其他格式的長(zhǎng)處，并加入及擴(kuò)充對(duì)虛擬現(xiàn)實(shí)模型語(yǔ)言（VRML，VirtualRealityModelingLanguage）的支持，具有面向?qū)ο蟮暮铣蓹n案（包括音效、視訊和VRML對(duì)象）以及數(shù)字版權(quán)管理（DRM）及其他互動(dòng)功能。MPEG-4比MPEG-2更先進(jìn)，其中一點(diǎn)就是不再使用宏區(qū)塊做影像分析，而是以影像上個(gè)體為變化記錄，因此盡管影像變化速度很快、碼率不足時(shí)，也不會(huì)出現(xiàn)方塊畫(huà)面。4.3.6RA

RA（RealAudio）是RealNetworks公司所開(kāi)發(fā)的一種流式音頻文件格式（文件擴(kuò)展名為“.ra”）。RA文件壓縮比例高，體積小巧，可以隨網(wǎng)絡(luò)帶寬的不同而改變聲音質(zhì)量，能夠很好地實(shí)時(shí)傳送和播放，非常適合在網(wǎng)絡(luò)傳輸速度較低的互聯(lián)網(wǎng)上使用。RA格式文件需要RealPlayer來(lái)播放，其他很多播放器都也可以打開(kāi)RA格式文件。4.3.7RM

RM格式是Real

Networks公司開(kāi)發(fā)的一種流媒體視頻文件格式（文件擴(kuò)展名為“.rm”）。RM可以根據(jù)網(wǎng)絡(luò)數(shù)據(jù)傳輸?shù)牟煌俾手贫ú煌膲嚎s比率，從而實(shí)現(xiàn)低速率的網(wǎng)絡(luò)進(jìn)行視頻文件的實(shí)時(shí)傳送和播放。它主要包含Real

Audio、Real

Video和Real

Flash三部分。這種格式的一個(gè)特點(diǎn)是用戶使用RealPlayer或RealOnePlayer播放器可以在不下載音頻/視頻內(nèi)容的條件下實(shí)現(xiàn)在線播放。RM格式一開(kāi)始就定位在視頻流應(yīng)用方面，可以說(shuō)是視頻流技術(shù)的始創(chuàng)者。RM格式的誕生，使得流文件為更多人所知。這類(lèi)文件可以實(shí)現(xiàn)即時(shí)播放，即先從服務(wù)器上下載一部分視頻文件，形成視頻流緩沖區(qū)后實(shí)時(shí)播放，同時(shí)繼續(xù)下載，為接下來(lái)的播放做好準(zhǔn)備。這種“邊傳邊播”的方法避免了用戶必須等待整個(gè)文件從網(wǎng)絡(luò)上全部下載完畢才能觀看的缺點(diǎn)，因而特別適合在線觀看影視。RM主要用于在低速率的網(wǎng)上實(shí)時(shí)傳輸視頻的壓縮格式，它同樣具有小體積而又比較清晰的特點(diǎn)。RM文件的大小完全取決于制作時(shí)選擇的壓縮率。4.3.8RMVB

RMVB是在流媒體的RM影片格式上升級(jí)延伸而來(lái)的一種視頻文件格式，RMVB中的VB指VBR（VariableBitRate），可改變之比特率。RMVB則打破了原先RM格式那種平均壓縮采樣的方式，在保證平均壓縮比的基礎(chǔ)上，設(shè)定了一般為平均采樣率兩倍的最大采樣率值。將較高的比特率用于復(fù)雜的動(dòng)態(tài)畫(huà)面，而在靜態(tài)畫(huà)面中則靈活地轉(zhuǎn)為較低的采樣率，合理地利用了比特率資源，使RMVB最大限度地壓縮了影片的大小，最終擁有了近乎完美的的視聽(tīng)效果，因此RMVB較上一代RM格式畫(huà)面要清晰了很多。RMVB可以用RealPlayer、暴風(fēng)影音、QQ影音等播放軟件來(lái)播放。4.3.9ASF

ASF（AdvancedStreamingFormat）是由微軟公司開(kāi)發(fā)用于網(wǎng)絡(luò)傳播和播放動(dòng)態(tài)影像的一種流媒體格式（文件擴(kuò)展名為“.asf”），以網(wǎng)絡(luò)數(shù)據(jù)包的形式傳輸，實(shí)現(xiàn)流式多媒體內(nèi)容發(fā)布。它包含音頻、視頻、圖像等多種形式，其最大的特點(diǎn)是體積小，是針對(duì)網(wǎng)絡(luò)傳播而開(kāi)發(fā)的通用多媒體文件格式。ASF支持任意的壓縮/解壓縮編碼方式，并可以使用任何一種底層網(wǎng)絡(luò)傳輸協(xié)議，具有很大的靈活性。MicrosoftMediaplayer是能播放幾乎所有多媒體文件的播放器，支持網(wǎng)絡(luò)上的ASF流文件格式，可以一邊下載一邊實(shí)時(shí)播放。4.3.10Shockwave

Shockwave是Macromedia公司（后被Adobe公司收購(gòu)）制定的用于在Web中插放豐富的交互式多媒體內(nèi)容的業(yè)界標(biāo)準(zhǔn)（文件擴(kuò)展名為“.dcr”、“.dir”、“.dxr”）?？梢酝ㄟ^(guò)Director來(lái)創(chuàng)建Shockwave影片，它生成的壓縮格式可以被瀏覽器快速下載，并且可被目前的主流瀏覽器所支持。Director是美國(guó)Adobe公司開(kāi)發(fā)的一款軟件，主要用于多媒體項(xiàng)目的集成開(kāi)發(fā)。廣泛應(yīng)用于多媒體光盤(pán)、課件、觸摸屏軟件、網(wǎng)絡(luò)電影、網(wǎng)絡(luò)交互式多媒體查詢(xún)系統(tǒng)、企業(yè)多媒體形象展示、游戲和屏幕保護(hù)等的開(kāi)發(fā)制作。使用

Director能夠容易地創(chuàng)建包含高品質(zhì)圖像、數(shù)字視頻、音頻、動(dòng)畫(huà)、三維模型、文本、超文本以及Flash文件的多媒體程序。4.4 應(yīng)用媒體4.4.1

教學(xué)案例━━海坨戴雪4.4.2

插入SWF動(dòng)畫(huà)4.4.3

插入FLV視頻4.4.4

插入Shockwave影片4.4.5

插入Applet4.4.6

插入ActiveX控件4.4.7

插入插件4.4.1 教學(xué)案例━━海坨戴雪將素材文檔復(fù)制到站點(diǎn)文件夾下，然后根據(jù)要求設(shè)置網(wǎng)頁(yè)，在瀏覽器中的顯示效果如圖4-34所示。(1) 設(shè)置整個(gè)網(wǎng)頁(yè)的背景圖像為“haituobg.jpg”，要求背景圖像不平鋪。(2) 插入圖像“haituo.jpg”，設(shè)置替換文本為“海坨戴雪”。(3) 插入SWF動(dòng)畫(huà)“haituodaixue.swf”，要求循環(huán)自動(dòng)播放。(4) 插入FLV視頻“haituo.flv”，要求視頻類(lèi)型設(shè)置為“累進(jìn)式下載視頻”，外觀設(shè)置為“HaloSkin3”。(5) 插入ActiveX控件使其能夠播放WMV視頻文件“daixue.wmv”。4.4.1 教學(xué)案例━━海坨戴雪4.4.2 插入SWF動(dòng)畫(huà)在DreamweaverCS6中，插入SWF動(dòng)畫(huà)的方法是：選擇菜單命令【插入】/【媒體】/【SWF】，或在【插入】/【常用】面板的【媒體】按鈕組中單擊【SWF】按鈕，當(dāng)然也可以在【文件】面板中選中SWF動(dòng)畫(huà)文件直接拖動(dòng)到文檔中。4.4.3 插入FLV視頻在DreamweaverCS6中插入FLV視頻的方法是