Dreamweaver 8.0 多媒體網(wǎng)頁制作教程

1、第8章 多媒體網(wǎng)頁制作學(xué)習(xí)目標(biāo)1.了解Dreamweaver 8.0標(biāo)準(zhǔn)工作界面各個組成部分的名稱和主要功能；2.學(xué)會創(chuàng)建和管理本地站點的基本步驟和方法；3.了解頁面設(shè)置的主要內(nèi)容和操作方法；4.掌握利用表格進(jìn)行頁面布局的基本技能；5.掌握向頁面添加文本、圖像、音頻、視頻的基本技能和不同方法，并能設(shè)置各種媒體的相關(guān)屬性和常用參數(shù)；6.掌握向頁面插入Flash動畫和Flash對象的基本方法，并能設(shè)置其相關(guān)屬性和常用參數(shù)；7.掌握向頁面插入Shockwave動畫、Java Applet應(yīng)用小程序、ActiveX控件、插件、Flash元素的基本方法，并能設(shè)置它們的相關(guān)屬性和常用參數(shù)。隨著多媒體技術(shù)和

2、計算機(jī)網(wǎng)絡(luò)技術(shù)的飛速發(fā)展，多媒體信息的呈現(xiàn)方式越來越趨于數(shù)字化、網(wǎng)絡(luò)化和集成化。本章我們將通過一個實例，介紹利用Macromedia Dreamweaver 8.0軟件將各種多媒體信息表達(dá)元素添加到Web頁中的基本操作方法和步驟。8.1 Dreamweaver 8.0的工作界面啟動Dreamweaver 8.0，新建或打開一個文檔，進(jìn)入Dreamweaver 8.0的標(biāo)準(zhǔn)工作界面。和其它應(yīng)用程序有所不同，Dreamweaver 8.0提供了一個將全部元素集成在一個窗口中顯示的布局方式，如圖8-1所示。它的工作界面包括：標(biāo)題欄、菜單欄、插入面板組、文檔工具欄、文檔窗口、狀態(tài)欄、屬性面板和浮動面板

3、組。狀態(tài)欄屬性面板標(biāo)題欄菜單欄插入面板組文檔工具欄文檔窗口浮動面板組圖8-1 Dreamweaver 8.0的工作界面1.標(biāo)題欄啟動Macromedia Dreamweaver 8.0后，標(biāo)題欄將顯示文字Macromedia Dreamweaver 8.0，新建或打開一個文檔后，在后面還會顯示該文檔所在的位置和文件名稱。2.菜單欄Dreamweaver 8.0的菜單共有10個，即文件、編輯、視圖、插入、修改、文本、命令、站點、窗口和幫助。（1）文件：用來管理文件。例如新建、打開、保存、導(dǎo)入、轉(zhuǎn)換、輸出打印等。（2）編輯：用來編輯文本。例如剪切、復(fù)制、粘貼、查找、替換以及首選參數(shù)設(shè)置等。（3）查

4、看：用來管理、切換視圖模式以及顯示、隱藏工具欄、標(biāo)尺、網(wǎng)格線等輔助視圖功能。（4）插入：用來插入各種元素，例如圖片、多媒體組件、表格、超鏈接等。（5）修改：具有對頁面屬性及頁面元素修改的功能，例如表格的插入、單元格的拆分、合并、對齊對象以及對庫、模板和時間軸等的修改。 （6）文本：用來對文本的格式化操作等。（7）命令：包含所有的附加命令項。（8）站點：用來創(chuàng)建和管理站點。（9）窗口：用來顯示和隱藏控制面板以及各種文檔窗口的切換操作。（10）幫助：聯(lián)機(jī)幫助功能。3.插入面板組插入面板組集成了所有可以在網(wǎng)頁中應(yīng)用的對象，包括“插入”菜單中的選項。插入面板組其實就是圖標(biāo)化了的“插入”菜單命令，如同其

5、它應(yīng)用軟件中的常用工具欄，通過一個個圖標(biāo)化的按鈕，使用戶可以很容易的加入圖像、聲音、多媒體動畫、表格、圖層、框架、表單、Flash和ActiveX等網(wǎng)頁元素，使各項操作更加簡單快捷。4.文檔工具欄 “文檔”工具欄中包含各種按鈕，它們使用戶可以在文檔的不同視圖間快速切換（如“代碼”視圖、“設(shè)計”視圖、同時顯示“代碼”和“設(shè)計”視圖的“拆分”視圖）。“文檔”工具欄中還包含一些與查看文檔、在本地和遠(yuǎn)程站點間傳輸文檔有關(guān)的常用命令和選項。5.文檔窗口“文檔”窗口顯示編輯文檔，是用來對各種網(wǎng)頁元素進(jìn)行編輯操作的主要場所，Dreamweaver 8.0提供了三種不同風(fēng)格的文檔窗口顯示模式，用戶可以根據(jù)需要

6、任選一種視圖并且可以隨時切換和刷新。其中“設(shè)計”視圖是一個用于可視化頁面布局、可視化編輯和快速應(yīng)用程序開發(fā)的設(shè)計環(huán)境；“代碼”視圖是一個用于編寫和編輯 HTML、JavaScript、服務(wù)器語言代碼以及任何其他類型代碼的手工編碼環(huán)境；“代碼和設(shè)計”視圖是“設(shè)計”視圖和“代碼”視圖的有機(jī)結(jié)合，提供了可以在單個窗口中同時看到同一文檔的“代碼”和最終在瀏覽器中看到的可視化效果功能。6.屬性面板屬性面板用來顯示和編輯當(dāng)前選定頁面元素（如文本、圖像等）的最常用屬性。屬性面板的內(nèi)容因選定的元素不同會有所不同。因為屬性面板并不是將所有文檔窗口中頁面元素的屬性加載在面板上，而是根據(jù)選擇的對象來動態(tài)顯示其屬性。

7、例如，當(dāng)前選擇了一幅圖像，那么屬性面板上就出現(xiàn)該圖像的相關(guān)屬性；如果選擇了文本，那么屬性面板就會相應(yīng)的變成文本的相關(guān)屬性。7.狀態(tài)欄狀態(tài)欄用于顯示當(dāng)前編輯文檔的其它有關(guān)信息。如文檔的大小、估計下載時間、窗口大小、縮放比例和標(biāo)簽選擇器等。8.浮動面板組其它面板如CSS、應(yīng)用程序、文件、框架、歷史記錄等可以簡稱為浮動面板，這些面板根據(jù)功能被分成了若干組，它們都可以處在編輯窗口之外，可以使用拓展按鈕展開，都可以通過“窗口”菜單中的命令有選擇的被打開和隱藏。8.2本地站點的創(chuàng)建與管理8.2.1站點的概念Dreamweaver站點提供一種組織所有與Web 站點關(guān)聯(lián)文檔的方法，它的組成根據(jù)開發(fā)環(huán)境和所開發(fā)

8、的Web站點類型的不同而有所不同，主要由以下三個部分組成：（1）本地文件夾要制作一個能被公眾瀏覽的網(wǎng)站，首先需要在本地硬盤上制作這個網(wǎng)站，我們把放置在本地硬盤上的網(wǎng)站叫做“本地站點”。用于存儲站點所需要的各種頁面元素文件的文件夾就是本地文件夾，此文件夾可以位于本地計算機(jī)上，也可以位于網(wǎng)絡(luò)服務(wù)器上。（2）遠(yuǎn)程文件夾網(wǎng)站之所以能夠被很多人瀏覽，就是因為在本地站點的所有文件還可以存儲并運行于Web 服務(wù)器的計算機(jī)上，我們把放在Web 服務(wù)器計算機(jī)上的文件夾叫做遠(yuǎn)程文件夾，把對應(yīng)的站點叫做“遠(yuǎn)端站點”。（3）測試服務(wù)器文件夾該文件夾是 Dreamweaver 用來處理動態(tài)頁的文件夾。測試服務(wù)器文件夾用

9、來管理和提供動態(tài)內(nèi)容的生成和顯示。8.2.2本地站點的創(chuàng)建網(wǎng)站是多個網(wǎng)頁組成的集合體，因此在開始制作網(wǎng)站之前首先要對站點內(nèi)容進(jìn)行規(guī)劃，確定站點的基本結(jié)構(gòu)，以使制作和開發(fā)工作更加高效。最常用的方法就是把站點中涉及到的各種類型的媒體元素以獨立的文件夾存放，以方便管理和維護(hù)。Dreamweaver 8.0實際上為用戶提供了兩種站點的創(chuàng)建辦法：一是根據(jù)向?qū)?chuàng)建；二是根據(jù)用戶的實際需求進(jìn)行高級設(shè)定創(chuàng)建。這里我們看一下根據(jù)向?qū)?chuàng)建一個本地站點的步驟：（1）單擊“站點”菜單，選擇“新建站點”，彈出站點定義對話框如圖8-2所示。輸入站點名稱和地址后，單擊“下一步”按鈕。（2）接下來將彈出如圖8-3所示的對話框

10、，提示選擇當(dāng)前編輯的站點是否需要各種服務(wù)器技術(shù)，如ASP、ASP.NET、JSP、PHP等。這里點擊選擇“否”，然后單擊“下一步”。圖8-2定義網(wǎng)站名稱圖8-3定義使用的服務(wù)器技術(shù)（3）然后需要選擇在開發(fā)過程中使用文件的方式（在本地計算機(jī)上還是在WEB服務(wù)器上進(jìn)行編輯）以及文件存儲的位置，如圖8-4所示。（4）下面需要設(shè)置網(wǎng)站連接到遠(yuǎn)程服務(wù)器的方式，一般我們都是在本地建立完成后通過FTP上傳到服務(wù)器上，所以選擇“無”，如圖8-5所示。圖8-4設(shè)置編輯方式及文件存儲位置圖8-5設(shè)置遠(yuǎn)程服務(wù)器連接方式（5）最后顯示新建站點所包含的基本設(shè)置對話框，包括本地信息，遠(yuǎn)程信息和測試服務(wù)器的設(shè)置，如圖8-6

11、所示。單擊“完成”，至此就完成了一個新站點的創(chuàng)建。同時在右側(cè)的文件面板上就出現(xiàn)了剛才建立的站點文件夾，如圖8-7所示。圖8-6完成本地站點定義圖8-7文件面板顯示新建站點8.2.3本地站點的管理Dreamweaver 8.0還為用戶提供了很好的管理站點服務(wù)，在這里可以直接新建站點，也可以對現(xiàn)有的站點進(jìn)行編輯、復(fù)制和刪除，還可通過已建立的站點定義文件直接進(jìn)行導(dǎo)入和導(dǎo)出操作?？梢酝ㄟ^“站點”菜單下的“管理站點”子菜單完成該項操作，其對話框如圖8-8所示。實際上管理站點通常采用把網(wǎng)站中的各種文件分門別類存儲的方法，可以在文件面板當(dāng)前站點所在的文件夾上單擊右鍵進(jìn)行文件夾的新建、刪除、拷貝、遮蓋等各項操

12、作。這里我們建立幾個分別用來存放常見網(wǎng)頁媒體元素的文件夾，如圖8-9所示。圖8-8管理站點對話框圖8-9新建站點子文件夾建立本地站點之后，就可以在Dreamweaver 8.0中創(chuàng)建一個基于該站點的Web頁面，并為其添加各種多媒體信息的表達(dá)元素。下面我們結(jié)合實例介紹如何將各種多媒體信息表達(dá)元素添加到Web頁面，該頁面的最終瀏覽效果如圖8-10所示。圖8-10實例效果8.3頁面設(shè)計和布局8.3.1頁面設(shè)置現(xiàn)在，我們就開始制作如圖8-10所示的Web頁面。在開始制作之前，首先要對頁面進(jìn)行總體的設(shè)計，主要是文件頭內(nèi)容和頁面屬性的總體設(shè)置。1.文件頭內(nèi)容的設(shè)置文件頭內(nèi)容在瀏覽器中是不可見的，但卻攜帶著

13、網(wǎng)頁的重要信息，如關(guān)鍵字、作者版權(quán)等描述性文字信息。還可以實現(xiàn)一些非常重要的功能，如自動刷新功能等。文件頭內(nèi)容的設(shè)置包含META、關(guān)鍵字、說明、刷新、基礎(chǔ)和鏈接六項。其中，META標(biāo)簽是記錄有關(guān)當(dāng)前頁面的信息（如字符編碼、作者、版權(quán)信息或關(guān)鍵字），也可以用來向服務(wù)器提供信息，如頁面的失效日期、刷新間隔等。關(guān)鍵字用來幫助搜索引擎搜索網(wǎng)頁，因此此項設(shè)置是比較重要的。這里我們介紹一下文件頭內(nèi)容中關(guān)鍵字設(shè)置的基本步驟。（1）啟動Dreamweaver 8.0并新建一個文檔，將其保存為“index.html”。（2）單擊插入面板組的下拉菜單按鈕，選擇“HTML”，再單擊按鈕，指向“關(guān)鍵字”子菜單，如圖8

14、-11所示。（3）接下來會彈出如圖8-12所示的關(guān)鍵字對話框，在其中輸入相應(yīng)的關(guān)鍵字即可。圖8-11設(shè)置文件頭內(nèi)容關(guān)鍵字圖8-12輸入關(guān)鍵字2.設(shè)置頁面屬性頁面屬性的設(shè)置可以確定當(dāng)前頁面的外觀、鏈接、標(biāo)題、標(biāo)題/編碼和跟蹤圖像等的基本信息和格式，比如：默認(rèn)字體的類型、大小、顏色、背景圖像及顏色、頁面邊框的寬度、標(biāo)題名稱、鏈接顏色和字體等。頁面屬性的設(shè)置和更改可以用兩種方法實現(xiàn)：一是單擊屬性面板上的“頁面屬性”按鈕（如圖8-13所示），在彈出的頁面屬性對話框（如圖8-14所示）中來設(shè)置；另一種是通過菜單“修改|頁面屬性”啟動頁面屬性對話框來設(shè)置。圖8-13屬性面板中的頁面屬性按鈕圖8-14頁面屬

15、性對話框8.3.2表格的插入表格是網(wǎng)頁設(shè)計與制作中非常重要的元素，主要用來將各種媒體表達(dá)元素如文本、圖片、表單、Flash等整齊劃一的顯示在頁面上，對頁面排版具有重要的意義。使用表格布局頁面操作靈活，而且具有較好的兼容性。下面我們就利用表格實現(xiàn)圖8-10所示頁面的布局，其布局如圖8-15所示。圖8-15表格布局效果1.表格的插入及屬性設(shè)置（1）在“index.html”文檔窗口單擊鼠標(biāo)，確定表格插入點。（2）單擊插入面板組的常用工具欄，如圖8-16所示，單擊插入表格圖標(biāo)。圖8-16常用工具欄（3）在彈出的表格屬性對話框中設(shè)置如圖8-17所示的參數(shù)。圖8-17表格屬性對話框（4）單擊“確定”。這

16、樣一個寬度為750像素，邊框粗細(xì)、單元格邊距和間距均為0的1行2列的表格就顯示在文檔窗口中，同時在屬性面板上也會顯示出該表格的相關(guān)屬性。（5）單擊文檔窗口的其它任意位置取消對當(dāng)前表格的選擇狀態(tài)，然后執(zhí)行同樣的操作再插入第2和第3個表格，將其行數(shù)設(shè)為2，列數(shù)設(shè)為4，其它參數(shù)同上。（6）如第5步所做再插入第4個表格，并將其行數(shù)設(shè)為2，列數(shù)設(shè)為3，其它參數(shù)不變。注意：這里我們使用了4個表格來完成對頁面的編排，也可以使用其他表格組合方式來完成排版或者利用嵌套表格的方法來完成，一般情況下如果頁面元素比較大的話，應(yīng)當(dāng)使用多個表格來完成，因為網(wǎng)頁最終瀏覽時是逐步顯示各個表格所包含的元素，這樣可以緩解因長時間

17、下載元素導(dǎo)致的頁面空白區(qū)過大的問題。2.設(shè)置表格屬性（1）通過單擊插入面板組中的布局按鈕，切換布局模式到擴(kuò)展模式，這樣可以使被設(shè)置為0的表格邊框及單元格等可視化程度增加，方便操作，但實際瀏覽時不會有邊框。（2）通過鼠標(biāo)或者標(biāo)簽選擇器的“table”標(biāo)簽選擇相應(yīng)的表格，在對應(yīng)的屬性面板設(shè)置或者更改表格的屬性，如圖8-18所示。圖8-18設(shè)置表格屬性“表格Id”用來為當(dāng)前選定的表格命名?！靶小薄ⅰ傲小?、“寬”、“高”分別用來設(shè)定表格的行數(shù)、列數(shù)、寬度和高度?！疤畛洹焙汀伴g距”分別用來設(shè)定表格單元格的邊距和間距?！皩R”和“邊框”分別用來設(shè)定表格的對齊方式和邊框大小?！氨尘邦伾?、“邊框顏色”和“背

18、景圖像”分別用來設(shè)定表格的背景顏色、邊框顏色和背景圖像。分別用來清除列寬和行寬以及將表格寬度和高度在百分比和像素間切換。（3）如第2步的做法，對其余表格的各項屬性進(jìn)行設(shè)置。注意：通過上面的操作我們可以看出，表格的屬性設(shè)置主要是對表格整體的大小、行列數(shù)、行寬和列高以及邊框數(shù)值和背景顏色等進(jìn)行設(shè)定。這里尤其需要注意行寬和列高的設(shè)置有兩種單位，分別是百分比和像素，百分比是相對的度量方式，與用戶分辨率的設(shè)定有一定關(guān)系，像素是絕對的度量方式，在不同的分辨率下窗口大小都是一樣的。8.3.3插入圖像占位符圖像占位符是在插入真正的圖像之前用來起替代作用的，尤其在進(jìn)行頁面布局的時候是非常有用的。（1）定位圖像占

19、位符要插入的位置，單擊鼠標(biāo)定位在第1行第1個單元格。（2）單擊插入面板組中常用工具欄的插入圖像占位符圖標(biāo)，彈出對話框如圖8-19所示。圖8-19圖像占位符對話框（3）輸入各項參數(shù)如圖8-19所示，單擊“確定”。8.4插入多媒體內(nèi)容8.4.1插入文本內(nèi)容1.插入文本文本可以直接在單元格內(nèi)輸入，也可以從其它文本文件中拷貝。（1）在創(chuàng)建的第3個表格第1行第3列的單元格內(nèi)單擊，確定文本插入的位置。（2）按“Ctrl+C”復(fù)制文本，然后按“Ctrl+V”完成粘貼。此時文本就被插入到相應(yīng)的位置了，并且隨著文本的現(xiàn)有屬性可能擴(kuò)展單元格。（3）在屬性面板中設(shè)置文本的屬性，如圖8-20所示。圖8-20設(shè)置文本屬

20、性2.插入導(dǎo)航條文本（1）在創(chuàng)建的第2個表格的第1行第1列單元格內(nèi)單擊，輸入“導(dǎo)航條文本”字樣。（2）在創(chuàng)建的第2個表格的第2行第1列單元格內(nèi)單擊，輸入導(dǎo)航文本內(nèi)容。（3）在屬性面板中設(shè)置文本的屬性。3.為文本創(chuàng)建鏈接（1）拖動鼠標(biāo)選擇要創(chuàng)建鏈接的文本。（2）單擊鏈接列表框后面的文件夾圖標(biāo)，選擇鏈接文件的名稱，然后單擊“確定”，如圖8-21所示。圖8-21設(shè)置文本鏈接8.4.2插入圖像圖像是網(wǎng)頁制作的重要元素之一，可以美化頁面，更重要的是可以攜帶更加形象直觀的信息。插入圖片的方法很多，下面我們就用不同的方式為先前創(chuàng)建的頁面添上圖像。1.通過替換圖像占位符插入圖像（1）雙擊位于頂行第1列的圖像占

21、位符，彈出選擇圖像源文件對話框如圖8-22所示。（2）選擇“digital_02.JPG”文件，單擊“確定”。圖8-22選擇圖像源文件2.通過“插入”菜單插入圖像（1）在第3個表格第1行第1列的單元格上單擊，確定圖像插入的具體位置。（2）單擊“插入|圖像”菜單，彈出“選擇圖像源文件”對話框，選擇“ima_33.gif”文件，單擊“確定”，圖像即被插入。3.從文件面板中直接拖曳插入圖像（1）單擊第3個表格第1行第2列的單元格，確定圖像拖曳的具體位置。（2）在窗口右側(cè)的浮動面板組中選擇文件面板，雙擊或者單擊“imge”文件夾前面的“+”號，展開該文件夾，如圖8-23所示。（3）選擇“jiawa.j

22、pg”圖像文件，按住鼠標(biāo)左鍵拖拽到單元格中松開，下面的操作和通過“插入”菜單完成圖像的插入一樣，這里不再贅述。4.從資源面板中插入圖像（1）單擊定位圖像插入點的位置在第3個表格第2行第2列的單元格。（2）點擊窗口右側(cè)文件面板的“資源”選項卡并通過其左側(cè)的圖像視圖圖標(biāo)切換到圖像資源，如圖8-24所示。圖8-23展開圖像文件夾資源視圖切換圖標(biāo)圖8-24資源選項卡中的圖像文件（3）選擇要插入的圖像文件“p2p.gif”，利用鼠標(biāo)拖動操作將圖像插入，或者使用資源頁簽下面的“插入”命令按鈕完成圖像的插入。注意：以上介紹了在單元格中插入圖像的四種方式，其中通過圖像占位符插入圖像的方法在頁面布局中很常用，通

23、過資源面板插入的方式有很多的優(yōu)勢，可以用于在不同的位置快速插入多張圖片，基于菜單和插入面板的操作是最常用的方法。8.4.3插入音頻在網(wǎng)頁中插入音頻常見的方式可以說有三種：即手寫代碼添加背景音樂，鏈接到音頻文件，嵌入音頻文件。下面我們就來看看這三種插入方式是如何實現(xiàn)的。1.手寫代碼添加背景音樂（1）打開我們前面編輯的文件“index.html”。（2）切換視圖到“代碼”視圖，找到</body>標(biāo)記（可以通過Ctrl+F快捷鍵或者菜單“編輯/查找和替換”快速查找），并將光標(biāo)定位在其之前。（3）在光標(biāo)的位置寫下代碼<bgsound src="midi/zdan.mp3&q

24、uot;>，如圖8-25所示。圖8-25手寫代碼（4）按下F12鍵試聽剛才添加的背景音樂效果。如果需要設(shè)置背景音樂的其它參數(shù)比如循環(huán)、延遲、平衡、音量屬性還可以繼續(xù)編寫代碼。2.鏈接到音頻文件（1）選擇用來鏈接音頻文件的文本、圖元或者其他對象。（2）在對應(yīng)屬性面板的“鏈接”列表中輸入音頻文件的路徑和名稱，或者通過“瀏覽”按鈕直接選擇即可。3.嵌入音頻文件（1）打開我們前面編輯的文件“index.html”。（2）單擊第2個表格第2行第2列的單元格將嵌入音頻媒體插件的位置定位在這里。（3）單擊插入面板組常用工具欄中的“媒體”圖標(biāo)，選擇“插件”，如圖8-26所示。圖8-26插入插件（4）在彈

25、出的選擇文件對話框中選擇文件“zdan.mp3”，然后單擊“確定”。（5）此時用于嵌入音頻媒體插件的圖標(biāo)已顯示在當(dāng)前單元格中，在屬性面板中定義其寬度和高度分別為278和74像素。（6）按F12預(yù)覽其效果，在瀏覽器中可能會彈出“限制此文件顯示”的字樣，在“單擊此處查看選項”處單擊選擇“允許阻止的內(nèi)容”如圖8-27所示，即可顯示嵌入的音頻播放器，如圖8-28所示。圖8-27顯示阻止訪問信息圖8-28音頻播放組件當(dāng)然，我們也可以通過屬性面板上的“參數(shù)”按鈕或者直接在代碼視圖中對嵌入的音頻播放組件進(jìn)行諸如：自動播放、循環(huán)、隱藏等屬性參數(shù)的設(shè)定。注意：以上介紹的三種常見插入音頻的方式各有特點，手寫代碼的

26、插入方式簡單易行，但用戶對其的可控性比較差；鏈接到音頻文件的方式是將聲音添加到 Web 頁面的一種簡單而有效的方法。這種集成聲音文件的方法可以使用戶有選擇是否收聽該文件的權(quán)利，同時也可使文件用于最廣范圍的受眾。嵌入音頻將聲音直接插入頁面中，但對訪問站點的用戶有一定的要求，只有在用戶具有所選聲音文件的適當(dāng)插件后，聲音才可以播放。一般這種方式用于訪問用戶具有自主控制音頻（如播放、停止、音量、外觀等）需求的時侯。8.4.4插入視頻在網(wǎng)頁中常見的視頻有兩種：即Flash視頻和非Flash視頻，下面我們就來看一下插入視頻的基本操作。1.在網(wǎng)頁中插入Flash視頻（1）打開前面制作的“index.html

27、”文件，在第2個表格第2行第2列的單元格單擊確定插入點的位置。（2）點擊插入面板組常用工具欄的“媒體”按鈕，選擇“Flash Video”，如圖8-29所示。圖8-29插入Flash Video（3）在彈出的“插入Flash視頻”對話框中做如圖8-30所示的設(shè)置，然后單擊“確定”。在“視頻類型”列表框中有“累進(jìn)式下載視頻”和“流視頻”兩種類型。“累進(jìn)式下載視頻”將 Flash 視頻文件下載到站點訪問者的硬盤上，然后播放。但是，與傳統(tǒng)的“下載并播放”視頻傳送方法不同，漸進(jìn)式下載允許在下載完成之前就開始播放視頻文件。“流視頻”對 Flash 視頻內(nèi)容進(jìn)行流式處理，并在一段很短時間的緩沖（可確保流暢

28、播放）后在Web頁上播放Flash 視頻內(nèi)容。但要在Web頁上啟用流視頻，站點訪問用戶必須具有訪問 Macromedia Flash Communication Server 的權(quán)限。在“URL”列表框右側(cè)單擊“瀏覽”選擇插入的Flash視頻文件。在“外觀”列表框中點擊右側(cè)的下拉菜單按鈕，選擇Flash視頻組件的外觀，同時在下面可以設(shè)定其寬度和高度以及是否自動播放和自動重新播放屬性，這些也可以在屬性面板中設(shè)置。勾選檢測用戶是否擁有查看 Flash 視頻所需的正確 Flash Player 版本，并可以在消息列表框中輸入提示和詢問信息。圖8-30設(shè)置Flash視頻（4）保存頁面，按下F12鍵進(jìn)行

29、預(yù)覽。2.插入非Flash視頻我們可以在Web頁面中通過不同方式將不同格式的視頻文件插入。在頁面中插入非Flash視頻的主要方法有兩種，即鏈接到視頻和嵌入視頻。（1）鏈接到視頻選擇用來鏈接到視頻文件的文本或者其它對象。在對應(yīng)的屬性面板上單擊“鏈接”列表右側(cè)的文件夾，選擇視頻文件即可。這種插入視頻的方式可以使用戶具有較高的可控性和選擇性。（2）嵌入視頻在文檔窗口中單擊定位嵌入視頻文件的位置。單擊插入面板組常用工具欄中的“媒體”圖標(biāo)，選擇“插件”。在彈出的選擇文件對話框中選擇文件“bsztyd.mpg”，然后單擊“確定”。此時用于嵌入視頻媒體插件的圖標(biāo)已顯示在單元格中，在屬性面板中定義其寬度和高度

30、分別為160和103像素。保存頁面并按F12預(yù)覽其效果。同嵌入音頻文件一樣，這種方式將視頻文件直接并入頁面中，但需訪問站點的用戶具有適當(dāng)視頻組件插件才可以播放視頻。8.4.5插入Flash動畫及對象1.插入Flash動畫在頁面中插入Flash動畫的步驟如下：（1）單擊常用工具欄上的按鈕，從彈出的下拉菜單中選擇“Flash”，如圖8-31所示。圖8-31插入Flash圖8-32插入的Flash動畫（2）在打開的“選擇文件”屬性對話框中選擇要插入的Flash動畫文件“qxpaio_03121.swf”，單擊“確定”。此時我們可以在文檔窗口中看到以Flash的標(biāo)志為中心的灰色區(qū)域，如圖8-32所示。

31、Flash動畫的內(nèi)容不會直接在這里顯示，需要在瀏覽器或者點擊屬性面板的播放按鈕預(yù)覽。（3）在屬性面板中設(shè)置Flash動畫的屬性，如圖8-33所示。圖8-33設(shè)置Flash動畫的屬性可以在圖8-33所示的左上側(cè)的文本框中為該Flash動畫命名。“寬”和“高”用來設(shè)置Flash動畫的寬度和高度，直接輸入數(shù)值，單位為像素?！拔募蔽谋究蛴脕碓O(shè)置Flash動畫的路徑和名稱。“循環(huán)”和“自動播放”復(fù)選框用來設(shè)置Flash動畫是否循環(huán)和自動播放?！按怪边吘唷焙汀八竭吘唷庇脕碓O(shè)置Flash動畫和頁面其它對象間的距離?！捌焚|(zhì)”和“比例”分別用來設(shè)置Flash動畫的播放質(zhì)量和視圖比例，可以點擊下拉菜單按鈕進(jìn)行

32、設(shè)定。“對齊”和“背景顏色”分別用來設(shè)置Flash動畫的對齊方式和背景色彩。單擊“編輯”按鈕可以啟動Flash重新編輯Flash動畫，單擊“重設(shè)大小”使Flash動畫恢復(fù)到原始大小。“播放”按鈕用來在文檔窗口預(yù)覽Flash動畫，該按鈕可以隨需求在“播放”與“停止”間轉(zhuǎn)換?！皡?shù)”按鈕用來設(shè)置Flash動畫的相關(guān)屬性，如透明屬性等。（4）按下F12鍵預(yù)覽插入的Flash動畫效果。2.插入Flash按鈕對象我們可以在Dreamweaver 8.0文檔中創(chuàng)建、插入和修改Flash按鈕，無需單獨啟動Flash應(yīng)用程序。Flash按鈕對象是基于Flash模板的可更新按鈕，設(shè)計開發(fā)人員可以自定義Flash

33、按鈕對象，并為其添加文本、背景顏色以及指向其它文件的鏈接等等。在頁面中插入Flash按鈕對象的步驟如下：（1）將光標(biāo)定位在要插入Flash按鈕的位置。（2）單擊常用工具欄上的按鈕，從彈出的下拉菜單中選擇“Flash按鈕”子菜單。（3）在彈出的插入Flash按鈕對話框中輸入各項設(shè)置，如圖8-34所示。圖8-34設(shè)置Flash按鈕“范例”是用來預(yù)覽當(dāng)前選擇的Flash按鈕的最終效果?！皹邮健笔翘峁〧lash按鈕的外觀。“按鈕”文本框用來輸入按鈕上的文字信息，對應(yīng)下面的“字體”列表和“大小”可以設(shè)定文字的字體和大小。“鏈接”用來設(shè)置Flash按鈕的鏈接，可單擊“瀏覽”按鈕查找鏈接文件?！澳繕?biāo)”用來設(shè)

34、置顯示鏈接內(nèi)容的窗口。“背景色”用來設(shè)置Flash按鈕的背景顏色。“另存為”用于設(shè)定Flash按鈕保存的路徑和名稱。（4）在屬性面板設(shè)定Flash按鈕的相關(guān)屬性，保存頁面并按下F12鍵預(yù)覽插入的Flash按鈕的動畫效果。3.插入Flash文本對象Flash 文本對象支持創(chuàng)建和插入只包含文本信息的SWF 文件。在頁面中插入Flash文本對象的操作如下：（1）將光標(biāo)定位在要插入Flash文本的位置。（2）單擊常用工具欄上的按鈕，從彈出的下拉菜單中選擇“Flash文本”子菜單。（3）在彈出的插入Flash文本對話框中輸入各項設(shè)置，如圖8-35所示。圖8-35設(shè)置Flash文本“字體”、“大小”、“鏈

35、接”、“目標(biāo)”、“背景色”和“另存為”屬性與Flash按鈕對話框中的比較一致，這里不再贅述。在“字體”列表下面可以直接設(shè)置Flash文本的加粗、傾斜以及對齊方式。“文本”列表用來輸入Flash文本內(nèi)容?！稗D(zhuǎn)滾顏色”用來設(shè)置在瀏覽器中鼠標(biāo)放在Flash文本上時字體的顏色。（4）在屬性面板設(shè)定Flash文本的相關(guān)屬性，保存頁面并按下F12鍵預(yù)覽插入的Flash文本對象效果。4.插入Flash PaperFlash Paper可以將一些主流的文檔格式（如Office文檔，PDF文檔，文本文件，網(wǎng)頁，F(xiàn)LA文件等）輕松地轉(zhuǎn)換成SWF格式，便于在網(wǎng)絡(luò)上瀏覽和打印。在頁面上插入Flash Paper的步驟

36、如下：（1）將光標(biāo)定位在要插入Flash Paper的位置。（2）單擊常用工具欄上的按鈕，從彈出的下拉菜單中選擇“Flash Paper”子菜單。（3）在彈出的插入Flash Paper對話框中輸入Flash Paper SWF文件的路徑和名稱，如圖8-36所示。圖8-36設(shè)置Flash Paper“源”用來輸入Flash Paper的路徑和名稱?！皩挾取焙汀案叨取庇脕磔斎隖lash Paper的寬度和高度值。（4）在屬性面板設(shè)定Flash Paper的相關(guān)屬性，保存頁面并按下F12鍵預(yù)覽插入Flash Paper的效果。8.4.6插入Shockwave動畫Shockwave 作為Web上交互

37、式多媒體的Macromedia標(biāo)準(zhǔn)，是一種經(jīng)壓縮的格式，使得在Macromedia Director中創(chuàng)建的多媒體文件能夠被快速下載，而且可以在大多數(shù)常用瀏覽器中進(jìn)行播放。插入Shockwave動畫的步驟如下：（1）將光標(biāo)定位在要插入Shockwave動畫的位置。（2）單擊常用工具欄上的按鈕，從彈出的下拉菜單中選擇“Shockwave”子菜單。（3）在彈出的選擇文件對話框中選擇Shockwave動畫文件的名稱“1.swf”，然后單擊“確定”按鈕。同樣插入后的Shockwave并不會在文檔窗口中顯示內(nèi)容，而是以Shockwave占位符來顯示。（4）在屬性面板設(shè)定Shockwave的相關(guān)屬性，保存

38、頁面并按下F12鍵預(yù)覽插入Shockwave動畫的效果。8.4.7插入Java AppletJava是一種完全開放的編程語言，通過它可以開發(fā)可嵌入Web頁中的小型應(yīng)用程序Applet，它的“交互”性很強，只要有支持Java的瀏覽器就可以運行。在頁面中插入Java Applet的步驟如下：（1）將光標(biāo)定位在要插入Java Applet的位置。（2）單擊常用工具欄上的按鈕，從彈出的下拉菜單中選擇“Applet”子菜單。（3）在彈出的選擇文件對話框中選擇1個Java Applet小程序，然后單擊“確定”按鈕，這樣就可以在頁面中插入1個Java Applet小程序。（4）選中插入到頁面中的Java A

39、pplet圖標(biāo)，在屬性面板上設(shè)置其屬性如圖8-37所示。圖8-37設(shè)置Java Applet“代碼”列表用來設(shè)置這個Java Applet小程序的名稱?！盎贰蔽谋究蛴脕盹@示這個Java Applet小程序所在的文件夾?！疤鎿Q”用來設(shè)置當(dāng)該Java Applet小程序無法正常顯示時將顯示的替換對象。（5）單擊屬性面板的“參數(shù)”按鈕，打開“參數(shù)”對話框，設(shè)置參數(shù)如圖8-38所示。其中，參數(shù)名稱為圖像，參數(shù)值為圖像文件的實際名稱，然后單擊“確定”按鈕。圖8-38設(shè)置參數(shù)（6）保存頁面并按下F12鍵預(yù)覽插入Java Applet小程序的效果。8.4.8插入ActiveX控件ActiveX控件是可以充當(dāng)瀏覽器插件的可重復(fù)使用的組件，有些像微型的應(yīng)用程序。Windows系統(tǒng)上的Internet Explorer為ActiveX控件提供了良好的運行環(huán)境。在頁面中插入ActiveX控件的步驟如下：（1）將光標(biāo)定位在要插入