Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)與制作教程課件第3章 圖像和其他媒體

第3章圖像和其他媒體第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第3章圖像及其他媒體內(nèi)容提要圖像及聲音文件的格式插入網(wǎng)頁(yè)圖像的方法插入聲音的方法插入Flash動(dòng)畫(huà)的方法第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第3章圖像及其他媒體3.1插入圖像圖像是一種重要的信息載體，通過(guò)在文檔中插入精美的圖像元素，可以實(shí)現(xiàn)深度視覺(jué)沖擊，使得文檔更具有吸引力，有效突出文檔的主題。3.1.1網(wǎng)頁(yè)中常見(jiàn)的圖像格式在計(jì)算機(jī)中使用的圖像文件有很多種圖形文件格式，例如PCX、PCD、JPEG、PNG、GIF、BMP、TIFF等，但Web頁(yè)面中通常使用的只有三種，即GIF、JPEG和PNG。1.GIF文件GIF（圖形交換格式）是一種基于LZW算法的連續(xù)色調(diào)的無(wú)損壓縮格式，其壓縮率一般在50％左右。GIF文件最多使用256種顏色，最適合顯示色調(diào)不連續(xù)或具有大面積單一顏色的圖像，例如導(dǎo)航條、按鈕、圖標(biāo)、徽標(biāo)或其它具有統(tǒng)一色彩和色調(diào)的圖像。2.JPEG文件JPEG（聯(lián)合圖像專(zhuān)家組標(biāo)準(zhǔn)）文件格式是用于攝影或連續(xù)色調(diào)圖像的高級(jí)格式，這是因?yàn)镴PEG文件可以包含數(shù)百萬(wàn)種顏色。隨著JPEG文件品質(zhì)的提高，文件的大小和下載時(shí)間也會(huì)隨之增加。通?？梢酝ㄟ^(guò)壓縮JPEG文件在圖像品質(zhì)和文件大小之間達(dá)到良好的平衡。3.PNG文件第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第3章圖像及其他媒體3.1插入圖像3.1.2插入網(wǎng)頁(yè)圖像1.在設(shè)計(jì)視圖中插入圖像在將圖像插入Dreamweaver8文檔時(shí)，自動(dòng)在HTML源代碼中生成對(duì)該圖像文件的引用，為了確保引用的正確性，該圖像文件必須位于當(dāng)前站點(diǎn)中。如果圖像文件不在當(dāng)前站點(diǎn)中，Dreamweaver8會(huì)詢(xún)問(wèn)是否要將此文件復(fù)制到當(dāng)前站點(diǎn)中。若要插入圖像，可以執(zhí)行以下操作：（1）在“文檔”窗口中，將插入點(diǎn)放置在要顯示圖像的地方，然后執(zhí)行以下操作之一：在“插入”欄的“常用”類(lèi)別中，單擊“圖像”圖標(biāo)，如圖3.1所示。第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第3章圖像及其他媒體3.1插入圖像3.1.2插入網(wǎng)頁(yè)圖像1.在設(shè)計(jì)視圖中插入圖像（2）出現(xiàn)的“選擇圖像源”對(duì)話框,執(zhí)行下列操作之一：選擇“文件系統(tǒng)”以選擇一個(gè)圖形文件。選擇“數(shù)據(jù)源”以選擇一個(gè)動(dòng)態(tài)圖像源。圖3.2選擇圖像源對(duì)話框（3）瀏覽以選擇要插入的圖像或內(nèi)容源。如果當(dāng)前文檔是一個(gè)未保存的文檔，則Dreamweaver8生成一個(gè)對(duì)圖像文件的引用，將文檔保存到站點(diǎn)中的任何位置后，Dreamweaver8將該引用轉(zhuǎn)換為文檔相對(duì)路徑。（4）單擊“確定”按鈕，將顯示“圖像標(biāo)簽輔助功能屬性”對(duì)話框（該對(duì)話框需要在“首選參數(shù)”中激活），（5）在“替換文本”和“詳細(xì)說(shuō)明”文本框中輸入值，然后單擊“確定”按鈕。

第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第3章圖像及其他媒體3.1插入圖像3.1.2插入網(wǎng)頁(yè)圖像2.在代碼視圖中插入圖像在HTML中，圖像由<img>標(biāo)簽定義。<img>是空標(biāo)簽它只包含屬性，并且沒(méi)有閉合標(biāo)簽。要在頁(yè)面上顯示圖像，需要使用源屬性（src）。src指"source"，源屬性的值是圖像的URL地址。定義圖像的語(yǔ)法是：<imgsrc="url"alt="">URL指存儲(chǔ)圖像的位置。如果名為"boat.gif"的圖像位于

的images目錄中，那么其URL為/images/boat.gif。alt屬性用來(lái)為圖像定義一串預(yù)備的可替換的文本，替換文本屬性的值是用戶定義的。<imgsrc="boat.gif"alt="BigBoat">在瀏覽器無(wú)法載入圖像時(shí)，替換文本屬性告訴讀者失去的信息。此時(shí)，瀏覽器將顯示這個(gè)替代性的文本而不是圖像，為頁(yè)面上的圖像都加上替換文本屬性是個(gè)好習(xí)慣，這樣有助于更好的顯示信息，并且對(duì)于那些使用純文本瀏覽器的人來(lái)說(shuō)是非常有用的。

第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第3章圖像及其他媒體3.1插入圖像3.1.3設(shè)置網(wǎng)頁(yè)圖像的屬性1.圖像的屬性面板在“屬性”面板（“窗口”→“屬性”）中，設(shè)置該圖像的屬性，如圖3.4所示。圖3.4“屬性”面板2.對(duì)齊圖像通過(guò)對(duì)齊圖像操作，可以將圖像與同一行中的文本、另一個(gè)圖像、插件或其它元素對(duì)齊，還可以設(shè)置圖像的水平對(duì)齊方式。若要對(duì)齊圖像，執(zhí)行以下操作：（1）在“設(shè)計(jì)”視圖中選擇該圖像。（2）在“屬性”面板中設(shè)置該圖像的對(duì)齊屬性，如圖3.5所示，可以設(shè)置相對(duì)于同一段落或行中的其它元素的對(duì)齊方式。第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第3章圖像及其他媒體3.1插入圖像3.1.3設(shè)置網(wǎng)頁(yè)圖像的屬性2.對(duì)齊圖像Dreamweaver8提供的對(duì)齊方式，如圖3.6所示：【默認(rèn)值】：默認(rèn)值對(duì)齊通常是指按照指定基線對(duì)齊。（根據(jù)站點(diǎn)訪問(wèn)者的瀏覽器的不同，默認(rèn)值也會(huì)有所不同。）【基線和底部】:基線和底部對(duì)齊是指將文本（或同一段落中的其它元素）的基線與選定對(duì)象的底部對(duì)齊?！卷敹恕?頂端對(duì)齊是將圖像的頂端與當(dāng)前行中最高項(xiàng)（圖像或文本）的頂端對(duì)齊，如圖?！揪又小?居中對(duì)齊是將圖像的中部與當(dāng)前行的基線對(duì)齊?！疚谋旧戏健?文本上方對(duì)齊是將圖像的頂端與文本行中最高字符的頂端對(duì)齊?！窘^對(duì)居中】:絕對(duì)居中對(duì)齊是將圖像的中部與當(dāng)前行中文本的中部對(duì)齊?！窘^對(duì)底部】:絕對(duì)底部對(duì)齊是將圖像的底部與文本行（這包括字母下部，例如在字母g中）的底部對(duì)齊?！咀髮?duì)齊】:左對(duì)齊是將所選圖像放置在左邊，文本在圖像的右側(cè)換行。如果左對(duì)齊文本在行上處于對(duì)象之前，它通常強(qiáng)制左對(duì)齊對(duì)象換到一個(gè)新行?！居覍?duì)齊】:右對(duì)齊是將圖像放置在右邊，文本在對(duì)象的左側(cè)換行。如果右對(duì)齊文本在行上處于對(duì)象之前，它通常強(qiáng)制右對(duì)齊對(duì)象換到一個(gè)新行。第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第3章圖像及其他媒體3.1插入圖像3.1.3設(shè)置網(wǎng)頁(yè)圖像的屬性3.調(diào)整圖像大?。?）在“文檔”窗口中選擇該元素（例如，一個(gè)圖像或SWF文件），選定元素后，元素的底部、右側(cè)及右下角出現(xiàn)調(diào)整大小控制點(diǎn)，如圖3.7所示。如果未出現(xiàn)調(diào)整大小控制點(diǎn)，則單擊要調(diào)整大小的元素以外的部分然后重新選擇它，或在標(biāo)簽選擇器中單擊相應(yīng)的標(biāo)簽以選擇該元素。圖3.7圖像的調(diào)整大小控制點(diǎn)（2）執(zhí)行下列操作之一，調(diào)整元素的大?。喝粢{(diào)整元素的寬度，拖動(dòng)右側(cè)的選擇控制點(diǎn)。若要調(diào)整元素的高度，拖動(dòng)底部的選擇控制點(diǎn)。若要同時(shí)調(diào)整元素的寬度和高度，拖動(dòng)頂角的選擇控制點(diǎn)。若要在調(diào)整元素尺寸時(shí)保持元素的比例（寬高比），在按住Shift鍵的同時(shí)拖動(dòng)頂角的選擇控制點(diǎn)。在可視方式下用戶最小可以將元素大小調(diào)整到8x8像素。若要將元素的寬度和高度調(diào)整到更小的大小（例如1x1像素），在“屬性”面板如圖3.8所示的紅色方框區(qū)域中輸入數(shù)值。圖3.8通過(guò)“屬性”面板調(diào)整大小（3）將調(diào)整過(guò)大小的圖像回復(fù)到其原始大小，執(zhí)行以下操作之一：?jiǎn)螕魣D像“屬性”面板中的“重設(shè)大小”按鈕。在“屬性”面板中刪除“寬”和“高”文本框中的值。（4）重新取樣圖像，通過(guò)重新取樣操作可以實(shí)現(xiàn)將用戶對(duì)圖像的尺寸的調(diào)整寫(xiě)入圖像文件，保存調(diào)整結(jié)果。對(duì)已調(diào)整大小的圖像重新取樣，單擊圖像“屬性”面板中的“重新取樣”按鈕。第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第3章圖像及其他媒體3.1插入圖像3.1.3設(shè)置網(wǎng)頁(yè)圖像的屬性2（1）在“文檔”窗口中選擇該元素（例如，一個(gè)圖像或SWF文件），選定元素后，元素的底部、右側(cè)及右下角出現(xiàn)調(diào)整大小控制點(diǎn)，如圖3.7所示。如果未出現(xiàn)調(diào)整大小控制點(diǎn)，則單擊要調(diào)整大小的元素以外的部分然后重新選擇它，或在標(biāo)簽選擇器中單擊相應(yīng)的標(biāo)簽以選擇該元素。圖3.7圖像的調(diào)整大小控制點(diǎn)（2）執(zhí)行下列操作之一，調(diào)整元素的大?。喝粢{(diào)整元素的寬度，拖動(dòng)右側(cè)的選擇控制點(diǎn)。若要調(diào)整元素的高度，拖動(dòng)底部的選擇控制點(diǎn)。若要同時(shí)調(diào)整元素的寬度和高度，拖動(dòng)頂角的選擇控制點(diǎn)。若要在調(diào)整元素尺寸時(shí)保持元素的比例（寬高比），在按住Shift鍵的同時(shí)拖動(dòng)頂角的選擇控制點(diǎn)。在可視方式下用戶最小可以將元素大小調(diào)整到8x8像素。若要將元素的寬度和高度調(diào)整到更小的大小（例如1x1像素），在“屬性”面板如圖3.8所示的紅色方框區(qū)域中輸入數(shù)值。圖3.8通過(guò)“屬性”面板調(diào)整大?。?）將調(diào)整過(guò)大小的圖像回復(fù)到其原始大小，執(zhí)行以下操作之一：?jiǎn)螕魣D像“屬性”面板中的“重設(shè)大小”按鈕。在“屬性”面板中刪除“寬”和“高”文本框中的值。（4）重新取樣圖像，通過(guò)重新取樣操作可以實(shí)現(xiàn)將用戶對(duì)圖像的尺寸的調(diào)整寫(xiě)入圖像文件，保存調(diào)整結(jié)果。對(duì)已調(diào)整大小的圖像重新取樣，單擊圖像“屬性”面板中的“重新取樣”按鈕。第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第3章圖像及其他媒體3.1插入圖像3.1.3設(shè)置網(wǎng)頁(yè)圖像的屬性4.裁剪圖像Dreamweaver8支持裁剪（或修剪）位圖文件圖像。若需要裁剪圖像文件，執(zhí)行以下操作：（1）打開(kāi)包含要裁剪的圖像的頁(yè)面，選擇圖像，并執(zhí)行下列操作之一：?jiǎn)螕魣D像屬性面板中的“裁減工具圖標(biāo)。選擇“修改”→“圖像”→“裁剪”。（2）將顯示如圖3.9所示的“永久更改”對(duì)話框，提示正在裁剪的圖像文件將在磁盤(pán)上更改，單擊“確定”按鈕，所選圖像周?chē)鷷?huì)出現(xiàn)如圖3.10所示的裁剪控制點(diǎn)。（3）調(diào)整裁剪控制點(diǎn)直到邊界框包含的圖像區(qū)域符合所需大小。（4）在邊界框內(nèi)部雙擊或按Enter鍵裁剪所選區(qū)域，所選位圖的邊界框外的所有像素都將被刪除，但將保留圖像中的其它對(duì)象。（5）若要撤消裁剪命令的效果，執(zhí)行以下操作：選擇“編輯”→“撤消裁剪”回復(fù)原始圖像；在退出Dreamweaver8或在外部圖像編輯應(yīng)用程序中編輯該文件之前，可以撤消“裁剪”命令的效果（并回復(fù)到原始圖像文件）。

第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第3章圖像及其他媒體3.1插入圖像3.1.3設(shè)置網(wǎng)頁(yè)圖像的屬性5.調(diào)整圖像的亮度和對(duì)比度調(diào)整“亮度/對(duì)比度”操作將影響圖像的高亮顯示、陰影和中間色調(diào)，主要用于修正過(guò)暗或過(guò)亮的圖像。若要調(diào)整圖像的亮度和對(duì)比度，執(zhí)行以下操作：（1）打開(kāi)包含要調(diào)整的圖像的頁(yè)面，選擇圖像。（2）拖動(dòng)亮度和對(duì)比度滑動(dòng)塊調(diào)整設(shè)置，設(shè)置值的范圍從-100到100。（3）單擊“確定”按鈕后圖像的亮度更改將保存在文件中。第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第3章圖像及其他媒體3.1插入圖像3.1.3設(shè)置網(wǎng)頁(yè)圖像的屬性6.銳化圖像銳化是通過(guò)增加圖像中對(duì)象邊緣的像素的對(duì)比度，從而增加圖像清晰度或銳度。若要銳化圖像，執(zhí)行以下操作：（1）打開(kāi)包含要銳化的圖像的頁(yè)面，選擇圖像，并執(zhí)行下列操作之一：?jiǎn)螕魣D像屬性面板中的“銳化”按鈕。選擇“修改”→“圖像”→“銳化”，顯示圖3.12所示的“銳化”對(duì)話框。圖3.12“銳化”對(duì)話框（2）可以通過(guò)拖動(dòng)滑塊控件或在文本框中輸入一個(gè)0到10之間的值，來(lái)指定Dreamweaver8應(yīng)用于圖像的銳化程度，同時(shí)可以預(yù)覽對(duì)該圖像所做的更改。（3）單擊“確定”按鈕，圖像的銳化更改將保存在文件中。（4）若要撤消“銳化”命令的效果，可以選擇“編輯”→“撤消銳化”。撤消銳化只能在保存包含圖像的頁(yè)面之前撤消“銳化”命令的效果（并回復(fù)到原始圖像文件），頁(yè)面一旦保存，對(duì)圖像所做更改即永久保存。第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第3章圖像及其他媒體3.1插入圖像3.1.4圖像占位符圖像占位符是在準(zhǔn)備好將最終圖像添加到Web頁(yè)面之前使用的占位圖形。通過(guò)插入指定大小的圖像占位符可以在頁(yè)面中預(yù)留圖像的位置，從而實(shí)現(xiàn)預(yù)覽頁(yè)面基本效果。若要插入圖像占位符，執(zhí)行以下操作：（1）在“文檔”窗口中，將插入點(diǎn)放置在要插入占位符圖形的位置。（2）執(zhí)行下列操作之一：在“常用”插入欄中，單擊“圖像占位符”圖標(biāo)，如圖3.13所示。選擇“插入”→“圖像占位符”，“圖像占位符”對(duì)話框。（3）在該對(duì)話框中，可以為圖像占位符添加相應(yīng)的標(biāo)簽名稱(chēng)、寬度、高度、顏色以及替換文本等屬性。（4）單擊“確定”按鈕。文檔中就會(huì)出現(xiàn)圖像占位符，同時(shí)占位符上會(huì)顯示占位符的顏色、大小和標(biāo)簽屬性的值。第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第3章圖像及其他媒體3.1插入圖像3.1.5設(shè)置網(wǎng)頁(yè)背景圖像在Dreamweaver8中可以將圖片設(shè)置為頁(yè)面背景。若要添加頁(yè)面背景圖像，執(zhí)行以下操作：（1）打開(kāi)“頁(yè)面屬性”對(duì)話框按照2.3.2所述的方法進(jìn)入頁(yè)面屬性設(shè)置對(duì)話框（“修改”→“頁(yè)面屬性”），在“外觀”設(shè)置中有“背景圖像”一欄，如圖3.16中所示。（2）選擇圖像源文件通過(guò)以下的方法之一實(shí)現(xiàn)選擇背景圖像的源文件。直接在“背景圖像”文本框中輸入圖像文件的名稱(chēng)及完整路徑。單擊“背景圖像”的“瀏覽”按鈕，彈出如圖3.17所示的“選擇圖像源文件”對(duì)話框。在該對(duì)話框中選擇相應(yīng)的圖像源文件后單擊“確定”按鈕。（3）設(shè)置網(wǎng)頁(yè)背景圖像的重復(fù)方式通過(guò)選擇在圖3.16的“重復(fù)”一項(xiàng)，可以實(shí)現(xiàn)設(shè)置背景圖像在網(wǎng)頁(yè)上的平鋪方式，對(duì)于網(wǎng)頁(yè)的背景圖片有“不重復(fù)”、“重復(fù)”、“橫向重復(fù)”、“縱向重復(fù)”四個(gè)選項(xiàng)，可以根據(jù)需要進(jìn)行選擇。第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第3章圖像及其他媒體3.1插入圖像在Dreamweaver8中，用戶可以在頁(yè)面中插入鼠標(biāo)經(jīng)過(guò)圖像。鼠標(biāo)經(jīng)過(guò)圖像在瀏覽器中瀏覽時(shí)，當(dāng)鼠標(biāo)經(jīng)過(guò)這種圖像時(shí)，圖像會(huì)發(fā)生變化。鼠標(biāo)經(jīng)過(guò)圖像實(shí)際上由兩個(gè)圖像組成，原始圖像(當(dāng)首次載入頁(yè)時(shí)顯示的圖像)和鼠標(biāo)經(jīng)過(guò)圖像(當(dāng)鼠標(biāo)指針移到原始圖像時(shí)顯示的圖像)。通常情況下這兩張圖像要求大小一致，如果不一致，Dreamweaver8會(huì)自動(dòng)調(diào)整鼠標(biāo)經(jīng)過(guò)圖像的大小使其與原始圖像一致。若要添加鼠標(biāo)經(jīng)過(guò)圖像，執(zhí)行以下操作：（1）確定圖像的位置若要?jiǎng)?chuàng)建鼠標(biāo)經(jīng)過(guò)圖像，在文檔窗口中，將插入點(diǎn)放置在要顯示鼠標(biāo)經(jīng)過(guò)圖像的位置。（2）插入鼠標(biāo)經(jīng)過(guò)圖像選擇主菜單“插入”→“圖像對(duì)象”→“鼠標(biāo)經(jīng)過(guò)圖像”，彈出“插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話框，如圖3.18所示。（3）輸入?yún)?shù)在“插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話框中分別輸入“原始圖像”和“鼠標(biāo)經(jīng)過(guò)圖像”兩個(gè)圖像文件的路徑以及相關(guān)參數(shù)后，單擊“確定”按鈕，即完成鼠標(biāo)經(jīng)過(guò)圖像的創(chuàng)建。第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第3章圖像及其他媒體3.2插入聲音3.2.1常見(jiàn)的音頻文件格式通過(guò)在網(wǎng)頁(yè)中加入聲音可以增強(qiáng)頁(yè)面信息的感染力，烘托頁(yè)面的氛圍，網(wǎng)頁(yè)中常見(jiàn)的音頻格式有wav、midi、ra和mp3等。.midi或.mid（樂(lè)器數(shù)字接口）格式用于器樂(lè)，MIDI文件不能被錄制并且必須使用特殊的硬件和軟件在計(jì)算機(jī)上合成，很小的MIDI文件就可以提供較長(zhǎng)時(shí)間的聲音剪輯。許多瀏覽器都支持MIDI文件，并且不需要插件。盡管MIDI文件的聲音品質(zhì)非常好，但也可能因訪問(wèn)者的聲卡而異。.wav（Waveform擴(kuò)展名）格式文件具有較好的聲音品質(zhì)，許多瀏覽器都支持此類(lèi)格式文件并且不要求插件，可以從CD、磁帶、麥克風(fēng)等錄制自己的WAV文件。但是，其較大的文件大小嚴(yán)格限制了可以在Web頁(yè)面上使用的聲音剪輯的長(zhǎng)度。.mp3（運(yùn)動(dòng)圖像專(zhuān)家組音頻，即MPEG-音頻層-3）格式是一種壓縮格式，它可令聲音文件明顯縮小。其聲音品質(zhì)非常好，如果正確錄制和壓縮MP3文件，其質(zhì)量甚至可以和CD質(zhì)量相媲美。MP3技術(shù)可以對(duì)文件進(jìn)行“流式處理”，以便訪問(wèn)者不必等待整個(gè)文件下載完成即可收聽(tīng)該文件。但是，其文件大小要大于RealAudio文件，因此通過(guò)典型的撥號(hào)（電話線）調(diào)制解調(diào)器連接下載整首歌曲可能仍要花較長(zhǎng)的時(shí)間。若要播放MP3文件，訪問(wèn)者必須下載并安裝輔助應(yīng)用程序或插件，例如QuickTime、WindowsMediaPlayer或RealPlayer。.ra、.ram、.rpm或RealAudio格式具有非常高的壓縮程度，文件大小要小于MP3。全部歌曲文件可以在合理的時(shí)間范圍內(nèi)下載。因?yàn)榭梢栽谄胀ǖ腤eb服務(wù)器上對(duì)這些文件進(jìn)行“流式處理”，所以訪問(wèn)者在文件完全下載完之前就可聽(tīng)到聲音。訪問(wèn)者必須下載并安裝RealPlayer輔助應(yīng)用程序或插件才可以播放這些文件。qt、.qtm、.mov和QuickTime是由AppleComputer開(kāi)發(fā)的音頻和視頻格式。AppleMacintosh操作系統(tǒng)中包含了QuickTime，并且大多數(shù)使用音頻、視頻或動(dòng)畫(huà)的Macintosh應(yīng)用程序都使用QuickTime。PC也可播放QuickTime格式的文件，但是要求特殊的QuickTime驅(qū)動(dòng)程序。QuickTime支持大多數(shù)編碼格式，如Cinepak、JPEG和MPEG。第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第3章圖像及其他媒體3.2插入聲音3.2.2聲音的插入1.鏈接到音頻文件鏈接到音頻文件是將聲音添加到Web頁(yè)面的一種簡(jiǎn)單而有效的方法，這種集成聲音文件的方法可以使訪問(wèn)者能夠選擇他們是否要收聽(tīng)該文件，并且使文件可用于最廣范圍的觀眾。若要?jiǎng)?chuàng)建指向某一音頻文件的鏈接，執(zhí)行以下操作：（1）選擇要用作指向音頻文件的鏈接的文本或圖像。（2）在屬性面板中，單擊文件夾圖標(biāo)瀏覽音頻文件，或者在“鏈接”文本框中鍵入文件的路徑和名稱(chēng)，如圖3.20所示。第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第3章圖像及其他媒體3.2插入聲音3.2.2聲音的插入2.嵌入聲音文件嵌入音頻將聲音直接并入頁(yè)面中，但只有在訪問(wèn)站點(diǎn)的訪問(wèn)者具有所選聲音文件的適當(dāng)插件后，聲音才可以播放。如果希望將聲音用作背景音樂(lè)，或希望控制音量、播放器在頁(yè)面上的外觀或者聲音文件的開(kāi)始點(diǎn)和結(jié)束點(diǎn)，可以采用嵌入文件的方式添加聲音。若要嵌入音頻文件，執(zhí)行以下操作：（1）在“設(shè)計(jì)”視圖中，將插入點(diǎn)放置在要嵌入文件的地方，然后執(zhí)行以下操作之一：在“插入”欄的“常用”類(lèi)別中，單擊“媒體”按鈕，然后選擇“插件”圖標(biāo)，如圖3.21所示。選擇“插入”→“媒體”→“插件”。（2）然后Dreamweaver8會(huì)彈出選擇文件對(duì)話框選擇相應(yīng)的音頻文件后單擊“確定”按鈕。（3）在“屬性”面板中，單擊文件夾圖標(biāo)以瀏覽音頻文件，或者在“鏈接”文本框中鍵入文件的路徑和名稱(chēng)可以對(duì)添加的音頻文件進(jìn)行調(diào)整。（4）在“屬性”面板中的文本框中輸入寬度和高度或者通過(guò)在“文檔”窗口中調(diào)整插件占位符的大小，能夠確定音頻控件在瀏覽器中以多大的大小顯示。

第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第3章圖像及其他媒體3.3插入動(dòng)畫(huà)和視頻除了可以在網(wǎng)頁(yè)中聲音和圖像以外，還可以添加動(dòng)畫(huà)和視頻來(lái)增強(qiáng)網(wǎng)頁(yè)的表現(xiàn)力，豐富文檔的顯示效果，可以在網(wǎng)頁(yè)添加的多媒體內(nèi)容有Flash動(dòng)畫(huà)、Shockwave影片和視頻等。3.3.1插入Flash動(dòng)畫(huà)1.Flash文件類(lèi)型（1）Flash文件

Flash文件擴(kuò)展名為fla，是所有項(xiàng)目的源文件，在Flash程序中創(chuàng)建。此類(lèi)型的文件只能在Flash中打開(kāi)（而不是在Dreamweaver8或?yàn)g覽器中打開(kāi)）?？梢栽贔lash中打開(kāi)Flash文件，然后將它導(dǎo)出為SWF或SWT文件以在瀏覽器中使用。（2）FlashSWF文件FlashSWF文件擴(kuò)展名為swf，是Flash(.fla)文件的壓縮版本，已進(jìn)行了優(yōu)化以便于在Web上查看。此文件可以在瀏覽器中播放并且可以在Dreamweaver8中進(jìn)行預(yù)覽，但不能在Flash中編輯此文件。（3）Flash模板文件Flash模板文件擴(kuò)展名為swt，使用戶能夠修改和替換FlashSWF文件中的信息。這些文件用于Flash按鈕對(duì)象中，能夠用自己的文本或鏈接修改模板，以便創(chuàng)建要插入文檔中的自定義SWF。在Dreamweaver8中，可以在Dreamweaver/Configuration/FlashObjects/FlashButtons和FlashText文件夾中找到這些模板文件。（4）Flash元素文件Flash元素文件擴(kuò)展名為swc，是一個(gè)FlashSWF文件，通過(guò)將此類(lèi)文件合并到Web頁(yè)，可以創(chuàng)建豐富的Internet應(yīng)用程序。Flash元素有可自定義的參數(shù)，通過(guò)修改這些參數(shù)可以執(zhí)行不同的應(yīng)用程序功能。（5）Flash視頻文件格式Flash視頻文件格式flv，是一種視頻文件，它包含經(jīng)過(guò)編碼的音頻和視頻數(shù)據(jù)，用于通過(guò)FlashPlayer傳送。第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第3章圖像及其他媒體3.3插入動(dòng)畫(huà)和視頻（2.FlashSWF文件的插入若要在頁(yè)面中插入FlashSWF文件，可以執(zhí)行以下操作：（1）設(shè)置插入點(diǎn)。在文檔中單擊實(shí)現(xiàn)將插入點(diǎn)置于欲插入動(dòng)畫(huà)的位置。（2）通過(guò)下述的兩種方法之一，執(zhí)行Flash插入命令：通過(guò)菜單操作，選擇主菜單“插入”→“媒體”→“Flash”命令。在“插入”欄的“常用”類(lèi)別中選擇Flash按鈕，如圖3.23所示。圖3.23插入Flash（3）添加文件位置設(shè)置輔助屬性完成文件插入。執(zhí)行完第2步后，Dreamweaver8彈出“選擇文件”對(duì)話框，在對(duì)話框中選擇Flash動(dòng)畫(huà)文件后，緊接著將彈出如圖3.24所示的“對(duì)象標(biāo)簽輔助功能屬性”對(duì)話框，在對(duì)話框的“標(biāo)題”文本框中輸入媒體對(duì)象的標(biāo)題，單擊“確定”按鈕，該動(dòng)畫(huà)即插入到文檔中，插入的Flash動(dòng)畫(huà)以一個(gè)帶有字母F的灰色框來(lái)表示。第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第3章圖像及其他媒體3.3插入動(dòng)畫(huà)和視頻3.FlashSWF動(dòng)畫(huà)的編輯完成對(duì)FlashSWF文件的插入后，用戶可以通過(guò)單擊文檔窗口的動(dòng)畫(huà)圖標(biāo)選中該動(dòng)畫(huà)。選中后就可以在在屬性面板中設(shè)置它的屬性，如圖3.25所示。第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第3章圖像及其他媒體3.3插入動(dòng)畫(huà)和視頻4.Flash按鈕的插入通過(guò)向頁(yè)面中插入Flash按鈕對(duì)象可以實(shí)現(xiàn)在Dreamweaver8中直接插入Flash動(dòng)畫(huà)格式的按鈕。若要實(shí)現(xiàn)在頁(yè)面中插入Flash按鈕首先需保證當(dāng)前網(wǎng)頁(yè)已經(jīng)保存過(guò)，網(wǎng)頁(yè)中可以通過(guò)以下步驟實(shí)現(xiàn)Flash按鈕的插入。（1）設(shè)置插入點(diǎn)在文檔中單擊實(shí)現(xiàn)將插入點(diǎn)置于欲插入Flash按鈕的位置。（2）執(zhí)行插入Flash按鈕命令用戶可以通過(guò)以下兩種方法之一實(shí)現(xiàn)執(zhí)行插入Flash按鈕命令。選擇主菜單的“插入”→“媒體”→“Flash按鈕”命令在“插入”欄的“常用”類(lèi)別中選擇“Flash按鈕”按鈕

。（3）設(shè)置Flash按鈕用戶選擇插入Flash按鈕命令后，會(huì)出現(xiàn)“插入Flash按鈕”對(duì)話框

（4）設(shè)置輔助參數(shù)（5）Flash按鈕的編輯第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第3章圖像及其他媒體3.3插入動(dòng)畫(huà)和視頻5.插入Flash視頻FLV流媒體格式是一種全新的視頻格式，全稱(chēng)是Flashvideo。它的出現(xiàn)有效地解決了視頻文件導(dǎo)入Flash后，使導(dǎo)出的SWF文件體積龐大，不能在網(wǎng)絡(luò)上使用等缺點(diǎn)?？梢酝ㄟ^(guò)以下步驟實(shí)現(xiàn)Flash視頻的插入。（1）設(shè)置插入點(diǎn)在文檔中單擊實(shí)現(xiàn)將插入點(diǎn)置于欲插入Flash按鈕的位置。（2）執(zhí)行插入Flash視頻命令用戶可以通過(guò)以下兩種方法之一實(shí)現(xiàn)執(zhí)行插入Flash視頻命令。選擇主菜單的“插入”→“媒體”→“Flash視頻”命令。在“插入”欄的“常用”類(lèi)別中選擇“FlashVideo”按鈕

（3）設(shè)置Flash視頻參數(shù)（4）編輯Flash視頻屬性第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第3章圖像及其他媒體3.3插入動(dòng)畫(huà)和視頻3.3.2插入視頻在Dreamweaver8中，除了可以在頁(yè)面上加入Flash格式的動(dòng)畫(huà)以及視頻之外，還可以通過(guò)不同方式將不同格式的視頻(AVI、MPEG、WMA等)添加到Web頁(yè)面。在用戶瀏覽頁(yè)面時(shí)，視頻可以下載給用戶，或者可以對(duì)視頻進(jìn)行流式處理以實(shí)現(xiàn)邊下載邊播放。在頁(yè)面中插入視頻的方法有多種，下面著重介紹兩種。第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第3章圖像及其他媒體3.3插入動(dòng)畫(huà)和視頻3.3.2插入視頻1.利用ActiveX控件插入視頻（1）設(shè)置插入點(diǎn)在文檔中單擊實(shí)現(xiàn)將插入點(diǎn)置于欲插入ActiveX控件的位置。（2）執(zhí)行插入ActiveX控件命令用戶可以通過(guò)以下兩種方法之一實(shí)現(xiàn)執(zhí)行插入ActiveX控件命令。選擇主菜單的“插入”→“媒體”→“ActiveX”命令在“插入”欄的“常用”類(lèi)別中選擇“ActiveX”按鈕。彈出“對(duì)象標(biāo)簽輔助功能屬性”對(duì)話框，在對(duì)話框的“標(biāo)題”文本框中輸入對(duì)象的標(biāo)題，單擊“確定”，就會(huì)在文檔中插入一個(gè)ActiveX圖標(biāo)。（3）編輯ActiveX控件選中該圖標(biāo)，在屬性面板中，設(shè)置寬高尺寸，選中“嵌入”復(fù)選框，啟用“源文件”，然后單擊后面的“瀏覽”按鈕選擇視頻文件。然后單擊該面板中的“參數(shù)”按鈕，打開(kāi)“參數(shù)”對(duì)話框，可以在其中為該ActiveX對(duì)象設(shè)置一些參數(shù)。

第1章網(wǎng)頁(yè)設(shè)計(jì)與制作概述第3章圖像及其他媒體3.3插入動(dòng)畫(huà)和視頻3.3.2插入視頻1.利用ActiveX控件插入視頻（1）設(shè)置插入點(diǎn)在文檔中單擊實(shí)現(xiàn)將插入點(diǎn)置于欲插入ActiveX控件的位置。（2）執(zhí)行插入ActiveX控件命令用戶可以通過(guò)以下兩種方法之一實(shí)現(xiàn)執(zhí)行插入ActiveX控件命令。選擇主菜單的“插入”→“媒體”→“ActiveX”命令在“插入”欄的“常用”類(lèi)別中選擇“ActiveX”按鈕。彈出“對(duì)象標(biāo)簽輔助功能屬性”對(duì)話框，在對(duì)話框的“標(biāo)題”文本框中輸入對(duì)象的標(biāo)題，單擊“確定”，就會(huì)在文檔中插入一個(gè)ActiveX圖標(biāo)。（3）編輯ActiveX控件選中該圖標(biāo)，在屬性面板中，設(shè)置寬高尺寸，選中“嵌入”復(fù)選框，啟用“源文件”，然后單擊后面的“瀏覽”按鈕選擇視頻文件。然后單擊該面板中的“參數(shù)”按鈕，打開(kāi)“參數(shù)”對(duì)話框，可以在其中為該Activ