《網(wǎng)頁設(shè)計與制作（第2版）》第5章 圖像與多媒體

第

五

章圖像與多媒體網(wǎng)頁設(shè)計與制作（第2版）2023/1/3第5章圖像與多媒體1第

5

章圖像與多媒體5.1網(wǎng)頁中常用的圖像格式6.2關(guān)于鏈接路徑6.3創(chuàng)建超鏈接的方法6.4各種類型超鏈接的創(chuàng)建6.5管理超鏈接6.6綜合案例：創(chuàng)建“我愛攝影網(wǎng)”2023/1/3第5章圖像與多媒體25.1網(wǎng)頁中常用的圖像格式5.1.1GIF格式圖像GIF（GraphicsInterchangeFormat）格式圖像，可譯為“圖像交換格式”，文件擴展名為“.gif”。是一種無損壓縮格式的圖像。只要圖像不多于256色，GIF格式既可減少文件的大小，GIF格式具有圖像文件體積小、成像相對清晰、下載速度快，又能保持成像的質(zhì)量。它可支持圖像文件大小的最小化，支持動畫模式GIF，又分為靜態(tài)GIF和動畫GIF兩種，能在一個圖像文件中包含多幀圖像頁，在瀏覽器瀏覽時可看到動感圖像效果。網(wǎng)上小一點的動畫一般都是GIF格式的圖像。大一些的圖像多為JPEG格式的。

2023/1/3第5章圖像與多媒體35.1.2JPEG格式圖像JPG/JPEG（JointPhotographicExpertsGroup）可譯為“聯(lián)合圖像專家組”，是24位的圖像文件格式，也是一種與平臺無關(guān)壓縮格式的圖像。而這種壓縮方式的最大特點是，通過壓縮可使其在圖像品質(zhì)和文件大小兩者之間達(dá)到較好的平衡，在壓縮中損失掉的是圖像中不易被人察覺到的內(nèi)容，JPEG獲得較小的文件尺寸，使得圖像在瀏覽和下載時的速度加快。

2023/1/3第5章圖像與多媒體45.1.3PNG格式圖像PNG（PortableNetworkGraphic）可譯為“便攜網(wǎng)絡(luò)圖像”，是一種格式極為靈活的圖像，用網(wǎng)頁上無損壓縮和顯示圖像。在使用網(wǎng)頁制作“三劍客”之一的Fireworks制作的圖像的默認(rèn)格式就是PNG，這種文件格式比較小，現(xiàn)在網(wǎng)頁上用得非常普遍。PNG圖像還支持多種顏色數(shù)目，可從8位、16位、24位到32位。具有對引色、灰度、真色彩圖像及透明背景的支持效果。

2023/1/3第5章圖像與多媒體55.2插入與設(shè)置圖像5.2.1網(wǎng)頁中插入圖像（1）在站點中打開一個已經(jīng)創(chuàng)建的網(wǎng)頁或創(chuàng)建一個新的網(wǎng)頁。

2023/1/3第5章圖像與多媒體6（2）將光標(biāo)置于網(wǎng)頁中要插入圖像的位置，光標(biāo)閃動。在菜單欄中選擇“插入”→“圖像”命令，出現(xiàn)如圖5-2所示的對話框。

2023/1/3第5章圖像與多媒體7在插入圖像前，最好將準(zhǔn)備好的圖像素材放在站點相應(yīng)的文件夾（如images）中，這將有利于網(wǎng)站的整體管理。對于動畫、視頻等素材也放在網(wǎng)站中對應(yīng)所建立的文件夾中。

2023/1/3第5章圖像與多媒體8（3）單擊圖

“圖像標(biāo)簽輔助功能屬性”對話框的“替換文本”文本框中輸入“華山”文字，然后按“確定”按鈕后，將出現(xiàn)圖所示的結(jié)果。

2023/1/3第5章圖像與多媒體9（4）對所建立的網(wǎng)頁進(jìn)行瀏覽。如果已經(jīng)關(guān)閉網(wǎng)站，可在網(wǎng)站文件夾中找到該網(wǎng)頁，雙擊就可打開瀏覽。也可在網(wǎng)頁編輯頁面工具欄中單擊“在瀏覽器中預(yù)覽”按鈕，并在其下選擇相應(yīng)的瀏覽器，可看到圖5-6所示的瀏覽效果。

2023/1/3第5章圖像與多媒體105.2.2設(shè)置圖像屬性“屬性”面板轉(zhuǎn)化為設(shè)置圖像的屬性的內(nèi)容。

●“圖像”：在該文本框中可以輸入圖像的名稱，以便在以后可以調(diào)用該圖像文件。●“寬”和“高”：在“寬”和“高”文本框中可以輸入數(shù)值，以設(shè)置文件的寬度和高度?！瘛霸次募保猴@示當(dāng)前圖像文件的地址，單擊文本框后面的文件夾按鈕，可以重新設(shè)置當(dāng)前圖像文件的地址。

2023/1/3第5章圖像與多媒體115.2.2設(shè)置圖像屬性

●“鏈接”：在該文本框中可以設(shè)置當(dāng)前圖像的鏈接地址?！瘛疤鎿Q”：在該文本框中可以輸入文本，用于設(shè)置當(dāng)前圖像文件的描述。在瀏覽網(wǎng)頁文件時，將鼠標(biāo)指針移動到當(dāng)前圖像上時，就可顯示圖像的描述信息?！瘛熬庉嫛眳^(qū)域：在該區(qū)域中列出了編輯當(dāng)前圖像文件可以使用的工具。●“邊框”：在該文本框中可以設(shè)置圖像的邊框?qū)挾?，相?dāng)于給圖像加一個邊框，其寬度以像素為單位?！瘛皩R”：在下拉列表框中選擇圖像對齊的方式。當(dāng)網(wǎng)頁中包括圖像和文本時，需要對圖像進(jìn)行對齊設(shè)置?！瘛暗貓D”區(qū)域：在該文本框中可以設(shè)定圖像地圖的名稱；使用熱點工具“矩形、圓形、多邊形”在圖像中插入熱點區(qū)域。●邊距區(qū)域：有“垂直邊距”和“水平邊距”，其文本框用于設(shè)置圖像周圍的邊距，調(diào)整它與周圍元素間的距離，其單位為像素。

2023/1/3第5章圖像與多媒體125.3插入其他圖像元素5.3.1插入圖像占位符（1）啟動DreamweaverCS6，打開或新建一個網(wǎng)頁，并將光標(biāo)定位于網(wǎng)頁的文檔中。（2）插入占位符可用菜單方式和“插入”面板組兩種方式操作實現(xiàn)?！癫藛尾僮鞣ǎ哼x擇菜單“插入”→“圖像對象”→“圖像占位符”命令，如圖5-8所示?！瘛安迦搿泵姘褰M操作法：在菜單“窗口”下選擇“插入”命令，在頁面窗口左側(cè)出現(xiàn)“插入”面板組。由此可以看出，面板組可通過在“窗口”下級菜單中根據(jù)需要進(jìn)行相應(yīng)的選擇，從而實現(xiàn)面板組的顯示或隱藏。具體如圖5-9所示。

2023/1/3第5章圖像與多媒體135.3插入其他圖像元素2023/1/3第5章圖像與多媒體145.3插入其他圖像元素2023/1/3第5章圖像與多媒體155.3插入其他圖像元素2023/1/3第5章圖像與多媒體16在網(wǎng)頁中插入圖像占位符后，在網(wǎng)頁中選中占位符，可在其屬性面板中對占位符進(jìn)行一些設(shè)置。屬性中設(shè)置項含義與操作和對網(wǎng)頁中圖像屬性的設(shè)置基本相似，這里不再作過多陳述。

2023/1/3第5章圖像與多媒體175.3.2插入鼠標(biāo)經(jīng)過圖像（1）打開或新建一個網(wǎng)頁，用插入占位符的操作方式打開圖5-8或圖5-9，并在菜單中選擇“鼠標(biāo)經(jīng)過圖像”命令，出現(xiàn)圖5-12所示的對話框。

2023/1/3第5章圖像與多媒體18（2）在“圖像名稱”文本框中可以輸入名稱。單擊“原始圖像”右邊的“瀏覽”按鈕，打開“原始圖像”對話框，向其中添加圖像。單擊“鼠標(biāo)經(jīng)過圖像”右側(cè)的“瀏覽”按鈕，以如上方式添加另一幅圖像。單擊“確定”按鈕，將出現(xiàn)圖5-13所示的設(shè)置效果。（3）保存文檔。也可按F12鍵，在瀏覽圖5-13所示的網(wǎng)頁時，當(dāng)鼠標(biāo)移入圖（a）所示的原始圖像時，就會出現(xiàn)圖（b）所示的圖像效果。

2023/1/3第5章圖像與多媒體192023/1/3第5章圖像與多媒體202023/1/3第5章圖像與多媒體215.4多媒體在網(wǎng)頁中的應(yīng)用5.4.1添加Flash動畫對象（1）在把Flash動畫（.swf）插入網(wǎng)頁之前，需要把準(zhǔn)備好的Flash動畫素材保存到站點相應(yīng)的文件夾下，如本站點中的“flash”文件夾，以便管理和操作使用。（2）打開或新建一個網(wǎng)頁，并將光標(biāo)定位在頁面中要插入的位置。（3）在菜單欄中選擇“插入”→“媒體”→“SWF”命令，如圖5-14所示。2023/1/3第5章圖像與多媒體225.4多媒體在網(wǎng)頁中的應(yīng)用5.4.1添加Flash動畫對象2023/1/3第5章圖像與多媒體235.4多媒體在網(wǎng)頁中的應(yīng)用在彈出的圖5-15所示的“選擇SWF”對話框中選擇Flash文件，如行“駛的小車.swf”文件。單擊“確定”按鈕后，將出現(xiàn)圖5-16所示的“對象標(biāo)簽輔助功能屬性”對話框，并在“標(biāo)題”文本框中輸入“生長的樹木動畫演示”，然后單擊“確定”按鈕2023/1/3第5章圖像與多媒體245.4多媒體在網(wǎng)頁中的應(yīng)用2023/1/3第5章圖像與多媒體255.4多媒體在網(wǎng)頁中的應(yīng)用●“循環(huán)”與“自動播放”：當(dāng)選中這兩項時，在瀏覽窗口中就會自動循環(huán)播放?！瘛氨尘邦伾保哼x擇一種背景顏色，則可改變Flash在瀏覽窗口播放時的背景顏色?！瘛安シ拧卑粹o：可以在當(dāng)前的編輯頁面中看到Flash動畫的播放效果，在播放狀態(tài)時，“播放”按鈕變成“停止”按鈕形式，此時按“停止”按鈕可中斷播放?！瘛癢mode”：為SWF文件設(shè)置Wmode參數(shù)，以避免與DHTML元素（如Spry構(gòu)件）相沖突?！瘛熬庉嫛保簡覨lash以更新.fla文件（即使用Flash創(chuàng)作工具創(chuàng)建的文件）。2023/1/3第5章圖像與多媒體265.4.2插入FLV視頻Dreamweaver提供以下兩種類型的FLV視頻?！?Flash視頻文件（擴展名為.flv）：是一種視頻文件，通過FlashPlayer傳送?！?累進(jìn)式下載視頻：將FLV文件下載到站點訪問者的硬盤上，然后進(jìn)行播放。但與傳統(tǒng)的“下載并播放”視頻傳送方式不同，其允許在下載完成之前就開始播放視頻文件。● 流視頻：對視頻內(nèi)容進(jìn)行流式處理，緩沖很短的一段時間，而這段時間可確保視頻在網(wǎng)頁上流暢播放。下面介紹插入FLV視頻在網(wǎng)頁中的具體實現(xiàn)方法：（1）打開已有或創(chuàng)建一個新的網(wǎng)頁。并將光標(biāo)定位在要插入FLV文件的網(wǎng)頁位置。（2）選擇“插入”→“媒體”→“FLV”命令，如圖5-19所示。

2023/1/3第5章圖像與多媒體275.4.2插入FLV視頻

2023/1/3第5章圖像與多媒體28（3）在彈出的如圖5-20所示的“插入FLV”對話框中，在“視頻類型”選項下可選擇“累進(jìn)式下載視頻”或“流視頻”方式。

2023/1/3第5章圖像與多媒體29（4）單擊“確定”按鈕，在頁面中出現(xiàn)如圖5-21所示的FLV占位符，說明所選擇的FLV文件已經(jīng)添加到頁面中了。如果要刪除FLV組件，可選擇占位符按“Delete”鍵。占位符的大小不能用鼠標(biāo)進(jìn)行調(diào)整。可通過在“屬性”面板中的“高”和“寬”文本框中輸入相應(yīng)值進(jìn)行大小調(diào)整。

2023/1/3第5章圖像與多媒體305.4.3網(wǎng)絡(luò)中的音頻文件類型● .mid（MusicalInstrumentDigitalInterface，數(shù)字音樂）格式：是網(wǎng)頁設(shè)計中最常用的文件格式。不需要特定的插件支持播放，一般的瀏覽器都可以支持。● .wav（Wave）格式：這種格式聲音品質(zhì)也比較好，不需要提供額外插件作為運行條件。缺點是這種格式的文件比較大，占用空間大，可能會影響網(wǎng)頁的運行速度?！?.mp3（MotionPictureExpertsGroupAudioLayer-3）格式：在3種音頻類型中，它的聲音品質(zhì)最好。缺點是文件容量比較大，再就是.mp3需要插件的支持，例如WindowsMediaPlayer以及RealPlayer等播放軟件的支持?！?.wma（WindowsMediaAudio）是微軟公司推出的與MP3格式齊名的一種新的音頻格式（文件擴展名為“.wma”）?！?.ra（RealAudio）是RealNetworks公司所開發(fā)的一種流式音頻文件格式（文件擴展名為“.ra”）。

2023/1/3第5章圖像與多媒體315.4.4網(wǎng)絡(luò)中的視頻文件類型● .wmv（WindowsMediaVideo）是微軟推出的一種流媒體格式（文件擴展名為“.wmv”），它是由ASF（AdvancedStreamFormat）格式升級延伸而來?！?.MP4（MPEG-4Part14）是一種使用MPEG-4對音頻、視頻信息進(jìn)行壓縮的編碼格式（文件擴展名為“.mp4”），以儲存數(shù)碼音訊及數(shù)碼視訊為主。● .RM格式是RealNetworks公司開發(fā)的一種流媒體視頻文件格式（文件擴展名為“.rm”）。RM可以根據(jù)網(wǎng)絡(luò)數(shù)據(jù)傳輸?shù)牟煌俾手贫ú煌膲嚎s比率，從而實現(xiàn)低速率的網(wǎng)絡(luò)進(jìn)行視頻文件的實時傳送和播放?！?.RMVB是在流媒體的RM影片格式上升級延伸而來的一種視頻文件格式，RMVB中的VB指VBR（VariableBitRate），可改變之比特率?！?Shockwave是Macromedia公司（后被Adobe公司收購）制定的用于在Web中插放豐富的交互式多媒體內(nèi)容的業(yè)界標(biāo)準(zhǔn)（文件擴展名為“.dcr”、“.dir”、“.dxr”）?？梢酝ㄟ^Director來創(chuàng)建Shockwave影片，它生成的壓縮格式可以被瀏覽器快速下載，并且可被目前的主流瀏覽器所支持。

2023/1/3第5章圖像與多媒體325.4.5在網(wǎng)頁中插入Shockwave影片（1）打開或新建一個網(wǎng)頁，并將光標(biāo)定位到網(wǎng)頁中的某一個位置。（2）選擇“插入”→“媒體”→“Shockwave”菜單命令，如圖5-19所示。打開如圖5-23對話框。選擇wave.dcr文件，按“確定”。

2023/1/3第5章圖像與多媒體335.4.5在網(wǎng)頁中插入Shockwave影片（3）選擇wave.dcr文件，按“確定”。如圖5-24所示。

2023/1/3第5章圖像與多媒體345.4.6在網(wǎng)頁中插入ActiveX控件（1）打開或新建一個網(wǎng)頁，并將光標(biāo)定位到網(wǎng)頁中的某一個位置。（2）選擇“插入”→“媒體”→“ActiveX”菜單命令，如圖5-19所示。得到如圖5-26的ActiveX占位圖。

2023/1/3第5章圖像與多媒體355.4.6在網(wǎng)頁中插入ActiveX控件（3）在圖5-26的屬性面板中的“源文件”選擇相應(yīng)文件夾中的.wmv文件。在“ClassID”的下列表中選擇“RealPlayer/clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA”。如圖5-27所示。而圖5-27中的ShockwaveforDirector6支持Shockwave格式文件；ShockwaveforFlash支持SWF格式文件。

2023/1/3第5章圖像與多媒體365.4.7在網(wǎng)頁中插入插件（1）打開或新建一個網(wǎng)頁，并將光標(biāo)定位到網(wǎng)頁中的某一個位置。（2）選擇“插入”→“媒體”→“插件”菜單命令，如圖5-28所示。

2023/1/3第5章圖像與多媒體375.4.7在網(wǎng)頁中插入插件（3）在單擊“插件”命令后出現(xiàn)的對話框中選擇要添加的音視頻文件，在可能根據(jù)頁面顯示播放窗口的大小在“屬性”面板中可設(shè)置占位符“高”和“寬”，例如本例設(shè)寬為400，高為285，執(zhí)行后會出現(xiàn)圖5-29所示的情況。

2023/1/3第5章圖像與多媒體385.4.7在網(wǎng)頁中插入插件（4）如果插入得的是音樂，在“屬性”面板中可設(shè)置占位符“高”和“寬”，例如設(shè)寬為700，高為60，則可看到占位符在頁面中變成圖5-30所示的大小。其作用是顯現(xiàn)在瀏覽頁面中播放音樂移動塊距離大小為長方形。

2023/1/3第5章圖像與多媒體395.4.7在網(wǎng)頁中插入插件如果希望打開頁面時音、視頻文件能夠自動播放，可以單擊“屬性”面板中的“參數(shù)”按鈕，在彈出的“參數(shù)”對話框中，分別在“參數(shù)”項和“值”項文本框中輸入“autostart”（定義音頻在瀏覽時是否開始自動播放）和“true”（是）值，如圖5-31所示。然后單擊“確定”按鈕

2023/1/3第5章圖像與多媒體405.4.7在網(wǎng)頁中插入插件

2023/1/3第5章圖像與多媒體415.4.8在網(wǎng)頁中插入背景音樂（1）打開一個網(wǎng)頁，如PHjiaoti.html。（2）單擊工具欄的“代碼”按鈕，則將窗口轉(zhuǎn)換成“代碼”視圖，在圖5-33中<body>右側(cè)輸