網(wǎng)頁設(shè)計與制作第四章

4圖像和其他媒體4.1插入圖像4.2插入動畫、視頻與聲音4.1插入圖像4.1.1在Web中使用的圖像格式目前互聯(lián)網(wǎng)上支持的圖像格式主要有GIF、JPEG、PNG三種。其中GIF和JPEG兩種格式的圖像文件由于文件較小，適合于網(wǎng)絡(luò)傳輸，而且能夠被大多數(shù)瀏覽器完全支持，所以是網(wǎng)頁制作中最為常用的圖像文件格式。（1）GIF格式GIF全稱為“graphicsinterchangeformat”，意為可交換圖像格式。它是支持網(wǎng)頁的第一種圖像格式，在PC機(jī)和蘋果機(jī)上都能被正確識別。它最多支持256種顏色，可以使圖像容量變得相當(dāng)小。GIF圖像可以在網(wǎng)頁中以透明方式顯示，還可以包含動態(tài)信息，即GIF動畫。（2）JPEG格式JPEG全稱為“jointphotographicexpertsgroup”，意為聯(lián)合圖像專家組。它可以高效地壓縮圖像，丟失人眼不易察覺的部分圖像，使文件在變小的同時基本不失真，通常用來顯示顏色豐富的精美圖像。（3）PNG格式PNG全稱為“portablenetworkgraphics”，意為便攜網(wǎng)絡(luò)圖像。它是目前逐漸流行的網(wǎng)絡(luò)圖像格式。PNG格式既融合了GIF能透明顯示的特點，又具有JPEG處理精美圖像的優(yōu)勢，且可以包含圖層等信息，通常用于制作網(wǎng)頁效果圖。4.1.2圖像的插入用戶可以在文本段落、表格、表單、AP元素和框架中插入圖像，而插入的圖像可以是本地磁盤中的圖像，也可以是網(wǎng)絡(luò)圖像。如果選擇的圖像文件不在站點內(nèi)，系統(tǒng)就會提示是否將圖像復(fù)制到站點內(nèi)，這時，需要單擊【是】按鈕；否則，網(wǎng)頁上傳到服務(wù)器后，圖像將不會顯示。插入圖像的操作步驟如下：①新建一個空白網(wǎng)頁，單擊網(wǎng)頁的空白處，執(zhí)行【插入】|【圖像】命令，彈出【選擇圖像源文件】對話框②在【選擇圖像源文件】對話框中選擇好需要的圖像文件，單擊【確定】按鈕，圖像即被插入頁面中。插入圖像后單擊圖像，打開圖像【屬性】面板，如圖4-2所示。在該面板中，可以對圖像的各項屬性進(jìn)行設(shè)置，操作步驟如下：a．在縮略圖右側(cè)的文本框中輸入圖像的名稱。由于該名稱用于客戶端腳本編程，所以請盡量使用英文名稱。b．在【寬】文本框中輸入圖像顯示的寬度，在【高】文本框中輸入圖像顯示的高度，【源文件】文本框中顯示該圖像的路徑，【鏈接】文本框通常用來設(shè)置圖像的超鏈接。c．在【替換】文本框中輸入圖像的說明文字。這樣，當(dāng)圖像無法顯示時，將顯示說明文字，用戶即使看不到圖像，也可以看到圖像所顯示的信息。4.1.3將圖像設(shè)置為背景使用圖像作為背景，可以賦予整個網(wǎng)頁明確的主題，提升網(wǎng)頁的美感。設(shè)置網(wǎng)頁背景圖像時，需要控制圖像文件的大小。如果文件太大，用戶看完網(wǎng)頁，才顯示圖像，就無法起到背景圖像應(yīng)有的作用了。設(shè)置網(wǎng)頁背景圖像的操作步驟如下：①新建一個空白網(wǎng)頁。②執(zhí)行【修改】│【頁面屬性】命令，打開【頁面屬性】對話框。③單擊【背景圖像】文本框后的【瀏覽】按鈕，選擇背景圖像文件。④單擊【確定】按鈕，關(guān)閉對話框，保存網(wǎng)頁，在瀏覽器中預(yù)覽網(wǎng)頁。4.1.4圖像超鏈接和圖像地圖（1）插入圖像超鏈接用戶對網(wǎng)頁美感的要求越來越高。由于文本超鏈接可以實現(xiàn)的效果有限所以現(xiàn)在廣泛使用圖像超鏈接。圖像超鏈接和文本超鏈接基本類似，只是鏈接的載體不同。設(shè)置圖像超鏈接的操作步驟如下：①創(chuàng)建一個空白網(wǎng)頁。執(zhí)行【插入】|【圖像】命令，打開【選擇圖像源文件】對話框。選擇“tree.jpg”文件，單擊【確定】按鈕，打開【圖像標(biāo)簽輔助功能屬性】對話框，如圖4-3所示。②在【替換文本】文本框中輸入文本“樹木”,單擊【確定】按鈕,關(guān)閉對話框。③在【屬性】面板的【鏈接】文本框中輸入“”。④保存網(wǎng)頁，在瀏覽器中預(yù)覽。單擊該圖像，可以鏈接到263個人郵件網(wǎng)站的首頁。（2）圖像地圖圖像地圖也稱為圖像映射，是將圖像劃分為若干個區(qū)域，每個區(qū)域稱為一個熱點，每個熱點分別設(shè)置不同的超級鏈接。在DreamweaverCS6中，熱點可以是不同的形狀，如圓形、矩形、不規(guī)則多邊形等。設(shè)置圖像映射的操作步驟如下：①在文檔窗口中插入一幅圖像，選定圖像，打開【屬性】面板，在面板左下角出現(xiàn)矩形熱點工具、橢圓形熱點工具及多邊形熱點工具。②單擊任一熱點工具，將光標(biāo)移動到圖像上并按下鼠標(biāo)拖動。③選中熱點，在【屬性】面板上單擊【鏈接】文本框右端的文件夾按鈕，打開【選擇文件】對話框，從中選擇鏈接文件，也可在【鏈接】文本框中直接輸入要鏈接對象的路徑。④在【目標(biāo)】下拉列表中選擇鏈接文件在瀏覽器中出現(xiàn)的位置。⑤在【替換】文本框中輸入有關(guān)熱點的說明或提示。當(dāng)在瀏覽器中鼠標(biāo)指向該熱點時，此處就會顯示輸入的文本。⑥按【F12】功能鍵，打開瀏覽器，預(yù)覽網(wǎng)頁，用鼠標(biāo)單擊熱點。4.2插入動畫、視頻與聲音4.2.1插入Flash動畫Flash是Macromedia公司力薦的網(wǎng)頁動畫標(biāo)準(zhǔn)，所以，F(xiàn)lash在DreamweaverCS6中得到了很好的支持。用戶可以直接在網(wǎng)頁中插入Flash動畫和Flash影片對象，操作步驟如下：①新建一個空白網(wǎng)頁。②單擊網(wǎng)頁空白處，移動光標(biāo)到需要插入Flash動畫的地方，執(zhí)行【插入】|【媒體】|【SWF】命令，在彈出的【選擇文件】對話框中選擇要插入的Flash動畫。③單擊【確定】按鈕，將Flash動畫插入網(wǎng)頁中。④保存網(wǎng)頁文檔，在瀏覽器中預(yù)覽網(wǎng)頁，查看Flash效果。如果不符合要求，可以在【屬性】面板中重新設(shè)置，其中各個選項的功能如下：【FlashID】：指定Flash動畫的標(biāo)識名，該名稱用來進(jìn)行腳本調(diào)用。【寬】和【高】：指定動畫的寬度和高度，以像素為單位。【文件】：指定Flash或Shockwave文件的路徑。【編輯】：單擊該按鈕，啟動Flash用以更新.fla文件。如果計算機(jī)上沒有安裝Flash，此按鈕將被禁用?！狙h(huán)】：選擇該選項，動畫將連續(xù)播放；如果沒有選中該選項，動畫只播放一次。【自動播放】：選擇該選項，在加載頁面時，自動播放動畫?！敬怪边吘唷亢汀舅竭吘唷浚褐付▌赢嬌?、下、左、右間距，單位為像素。【品質(zhì)】：該選項用以設(shè)置Flash動畫播放的質(zhì)量?！颈壤浚涸撨x項設(shè)置動畫如何適合在寬度和高度文本框中設(shè)定的尺寸?！澳J(rèn)值”選項設(shè)置顯示整個動畫?！盁o邊框”選項設(shè)置動畫適合設(shè)定的尺寸?！皣?yán)格匹配”選項設(shè)置動畫進(jìn)行縮放以適合設(shè)定的尺寸?！緦R】：該選項設(shè)置動畫在頁面上的對齊方式?！颈尘邦伾浚涸O(shè)置動畫區(qū)域的背景顏色?！緟?shù)】：單擊該按鈕，打開【參數(shù)】對話框，在該對話框中可以輸入動畫的參數(shù)值。4.2.2插入Flash視頻Flash視頻是現(xiàn)有網(wǎng)絡(luò)應(yīng)用最廣的視頻格式。使用Flash視頻，無需特殊技術(shù)支持，只要用戶瀏覽器中安裝了FlashPlayer，就可以將視頻添加到網(wǎng)頁中。插入Flash視頻的操作步驟如下：①執(zhí)行【插入】|【媒體】|【FLV】命令，提示用戶先保存網(wǎng)頁，然后打開【插入FLV】對話框。其中【視頻類型】選項用于設(shè)置視頻類型，包括“累進(jìn)式下載視頻”和“流視頻”兩種類型。對話框默認(rèn)打開界面為選擇“累進(jìn)式下載視頻”選項后的界面。②當(dāng)選擇“流視頻”選項后，彈出如下界面其中各個選項的功能如下：【服務(wù)器URL】：設(shè)置Flash視頻文件所在服務(wù)器的地址。【流名稱】：設(shè)置Flash視頻文件名稱。【URL】：設(shè)置Flash視頻的文件地址，單擊【瀏覽】按鈕就可以瀏覽文件并選定，也可以在文本框中直接輸入Flash視頻文件的相對或絕對路徑。【外觀】：設(shè)置播放器控制按鈕的顯示樣式，在下面顯示樣式效果?！緦挾取亢汀靖叨取浚涸O(shè)置Flash視頻的寬度和高度?！鞠拗聘邔挶取浚焊鶕?jù)外觀設(shè)置Flash視頻，進(jìn)行總體控制。【檢測大小】：單擊該按鈕可以自動檢測Flash視頻文件大小。【實時視頻輸入】：可以為Flash視頻提供實時的活動支持。【自動播放】：可以自動播放Flash視頻。【自動重新播放】：可以自動重新播放Flash視頻。【緩沖時間】：設(shè)置Flash視頻下載的緩沖時間。4.2.3插入背景音樂在實際設(shè)計中，使用背景音樂和使用背景圖像一樣，可以表達(dá)網(wǎng)頁特定的主題。例如，在論壇的短消息頁面中，通過添加背景音樂可以提示用戶是否有新短消息。①MID格式。MIDI（musicalinstrumentdigitalinterface）允許數(shù)字合成器和其他設(shè)備交換數(shù)據(jù)。MID文件格式由MIDI繼承而來。MID文件并不是一段錄制好的聲音，而是記錄聲音的信息，然后再告訴聲卡如何再現(xiàn)音樂的一組指令。這樣一個MID文件每存1分鐘的音樂大約只用5～10KB。②WAV格式。WAV是微軟公司開發(fā)的一種聲音文件格式，它符合PIFFResourceInterchangeFileFormat文件規(guī)范，用于保存Windows平臺的音頻信息資源，被Windows平臺及其應(yīng)用程序所支持。WAV格式支持SADPCM、CCITTA-LAW等多種壓縮算法，支持多種音頻位數(shù)、采樣頻率和聲道，③MP3格式。MP3指的是MPEG標(biāo)準(zhǔn)中的音頻部分，也就是MPEG音頻層。根據(jù)壓縮質(zhì)量和編碼處理的不同分為三層，分別對應(yīng)*.mp1、*.mp2、*.mp3這三種聲音文件。需要提醒大家注意的地方是：MPEG音頻文件的壓縮是一種有損壓縮，相同長度的音樂文件，用*.mp3格式來存儲，一般只有*.wav文件大小的1/10，而音質(zhì)要次于CD格式或WAV格式的聲音文件。（2）插入背景音樂插入背景音樂的操作步驟如下：①新建一個空白網(wǎng)頁。②單擊網(wǎng)頁空白處，執(zhí)行【插入】|【媒體】|【插件】命令，打開【選擇文件】對話框。③選擇一個音樂文件，單擊【確定】按鈕，網(wǎng)頁中將顯示一個插件圖標(biāo)。④選中該圖標(biāo)，在【屬性】面板中設(shè)置屬性值。⑤單擊【播放】按鈕，可以試聽一下音樂效果。⑥單擊【參數(shù)】按鈕，打開