1、dreamweaver 8網頁設計培訓教程第第6課課 為網頁加入動態元素為網頁加入動態元素w 本課要點本課要點w 具體要求具體要求w 本課導讀本課導讀w 上機練習上機練習dreamweaver 8網頁設計培訓教程本課要點本課要點w 插入插入flash媒體元素媒體元素w 插入其他媒體元素插入其他媒體元素 dreamweaver 8網頁設計培訓教程具體要求具體要求w 插入插入flash動畫動畫w 插入插入flash按鈕按鈕w 插入插入flash文本文本w 插入插入flashpaperw 插入插入flash視頻視頻w 插入插入shockwave影片影片w 插入背景音樂插入背景音樂 dreamweav

2、er 8網頁設計培訓教程本課導讀本課導讀網頁中只有圖像和文本，表現力畢竟有限網頁中只有圖像和文本，表現力畢竟有限，如果在網頁中加入一些動感十足的，如果在網頁中加入一些動感十足的flash動畫，可以吸引更多瀏覽者的注意動畫，可以吸引更多瀏覽者的注意。如果再加上背景音樂，那就能創建圖像。如果再加上背景音樂，那就能創建圖像、文本、動畫和音樂四位一體的多媒體效、文本、動畫和音樂四位一體的多媒體效果了。果了。 dreamweaver 8網頁設計培訓教程6.1 插入插入flash媒體元素媒體元素 在網頁中添加動態元素可使網頁看起來更在網頁中添加動態元素可使網頁看起來更吸引人。吸引人。flash動畫是網頁中

3、最常見的動動畫是網頁中最常見的動態元素。態元素。flash動畫是一種矢量動畫，它具有生成動畫是一種矢量動畫，它具有生成的動畫文件較小、效果好、并能夠實現交的動畫文件較小、效果好、并能夠實現交互等優點。要制作互等優點。要制作flash動畫，可以使用動畫，可以使用macromedia公司出品的公司出品的flash軟件。軟件。 dreamweaver 8網頁設計培訓教程6.1 插入插入flash媒體元素媒體元素 6.1.1 知識講解知識講解6.1.2 典型案例典型案例為網頁添加為網頁添加flash元元素素 dreamweaver 8網頁設計培訓教程6.1.1 知識講解知識講解在在dreamweave

4、r 8中可以直接插入發布中可以直接插入發布后的后的flash動畫（動畫（.swf文件），可插入的文件），可插入的flash動畫包括動畫包括flash動畫文件、動畫文件、flash按按鈕和鈕和flash文本等。文本等。 dreamweaver 8網頁設計培訓教程6.1.1 知識講解知識講解1.了解了解flash文件格式文件格式 2.插入插入flash動畫動畫3.插入插入flash按鈕按鈕 4.插入插入flash文本文本 5.插入插入flashpaper 6.插入插入flash視頻視頻 7.設置設置flash背景透明背景透明 dreamweaver 8網頁設計培訓教程1.了解了解flash文件格式

5、文件格式 flash文件主要有以下三種文件類型。文件主要有以下三種文件類型。w .swf：該類文件是：該類文件是flash電影文件，是運用于網絡中的電影文件，是運用于網絡中的最佳格式文件，是一種壓縮最佳格式文件，是一種壓縮格式的格式的flash文件。文件。w fla：該類文件是：該類文件是flash的源文件，在的源文件，在flash應用程序中應用程序中創建并且只能在創建并且只能在flash應用程序中打開。應用程序中打開。w .swt：該類文件是：該類文件是flash庫文件，這種類型的文件允許庫文件，這種類型的文件允許修改修改flash動畫文件中的信息，這類文件常用于動畫文件中的信息，這類文件常

6、用于flash按按鈕對象中。鈕對象中。 dreamweaver 8網頁設計培訓教程2.插入插入flash動畫動畫具體操作如下：具體操作如下：（1）將光標插入點定位到需插入）將光標插入點定位到需插入flash動畫文件動畫文件的位置。的位置。（2）選擇）選擇【插入插入】【媒體媒體】【flash】命令命令，打開，打開【選擇文件選擇文件】對話框。對話框。（3）在該對話框的）在該對話框的【查找范圍查找范圍】下拉列表框中選下拉列表框中選擇文件所在的位置，然后在文件列表框中選中擇文件所在的位置，然后在文件列表框中選中要插入的要插入的flash文件。文件。（4）單擊）單擊【確定確定】按鈕，完成按鈕，完成fla

7、sh動畫文件的動畫文件的插入。插入。 dreamweaver 8網頁設計培訓教程3.插入插入flash按鈕按鈕 在在dreamweaver 8中集成了許多精美的中集成了許多精美的flash按鈕，這為增加網頁動態效果提供按鈕，這為增加網頁動態效果提供了方便。在制作網頁時可以將自己制作的了方便。在制作網頁時可以將自己制作的flash按鈕插入到網頁中，也可插入按鈕插入到網頁中，也可插入dreamweaver 8集成的按鈕。集成的按鈕。具體操作步驟請教師參照書中步驟進行講具體操作步驟請教師參照書中步驟進行講解。解。 dreamweaver 8網頁設計培訓教程4.插入插入flash文本文本 在網頁中還可

8、以插入在網頁中還可以插入flash文本，文本，flash文本是文本是dreamweaver 8中集成的文本動中集成的文本動畫，通過畫，通過【插入插入flash文本文本】對話框創建對話框創建。具體操作步驟請教師參照書中步驟進行講具體操作步驟請教師參照書中步驟進行講解。解。 dreamweaver 8網頁設計培訓教程5.插入插入flashpaper flashpaper是一種特殊的是一種特殊的flash動畫文件，可動畫文件，可以通過以通過flashpaper軟件制作。制作網頁時，可軟件制作。制作網頁時，可以利用插入以利用插入flashpaper功能在網頁中插入功能在網頁中插入macromedia

9、flashpaper文檔。這樣在瀏覽器文檔。這樣在瀏覽器中打開包含中打開包含flashpaper文檔的網頁時，用戶就文檔的網頁時，用戶就可瀏覽可瀏覽flashpaper文檔中的所有頁面，而無須文檔中的所有頁面，而無須加載新的網頁。用戶也可以搜索、打印和縮放加載新的網頁。用戶也可以搜索、打印和縮放該文檔。該文檔。 具體操作步驟請教師參照書中步驟進行講解。具體操作步驟請教師參照書中步驟進行講解。 dreamweaver 8網頁設計培訓教程6.插入插入flash視頻視頻 插入插入flash視頻也是目前網頁制作中常用視頻也是目前網頁制作中常用的方法。用的方法。用dreamweaver 8可以輕松地可以

10、輕松地在網頁中插入在網頁中插入flash視頻內容，這是視頻內容，這是dreamweaver 8新增的功能。新增的功能。 具體操作步驟請教師參照書中步驟進行講具體操作步驟請教師參照書中步驟進行講解。解。 dreamweaver 8網頁設計培訓教程7.設置設置flash背景透明背景透明 有時為了提高網頁視覺效果，可在表格的有時為了提高網頁視覺效果，可在表格的單元格中插入背景圖像，然后再在該單元單元格中插入背景圖像，然后再在該單元格中插入格中插入flash影片，這時需要將影片，這時需要將flash影影片設置為背景透明，否則就看不見下面的片設置為背景透明，否則就看不見下面的背景圖像。背景圖像。 具體操

11、作步驟請教師參照書中步驟進行講具體操作步驟請教師參照書中步驟進行講解。解。 dreamweaver 8網頁設計培訓教程 6.1.2 典型案例典型案例為網頁添加為網頁添加 flash元素元素 w案例目標案例目標本案例將在本案例將在“天府美食天府美食”網頁中插入一些網頁中插入一些flash動畫，主要練習插入動畫，主要練習插入flash動畫、動畫、flash按鈕和按鈕和flash文本的操作，最終效果文本的操作，最終效果如圖如圖6.17所示。所示。素材位置：素材位置：【第第6課課素材素材6.1.2】效果圖位置：效果圖位置：【第第6課課源文件源文件6.1.2index1.html】 dreamweave

12、r 8網頁設計培訓教程 6.1.2 典型案例典型案例為網頁添加為網頁添加 flash元素元素 w操作思路操作思路（1）插入）插入flash文本。文本。（2）插入）插入4個個flash按鈕用來制作導航條。按鈕用來制作導航條。（3）插入一個）插入一個flash動畫文件。動畫文件。 dreamweaver 8網頁設計培訓教程 6.1.2 典型案例典型案例為網頁添加為網頁添加 flash元素元素 w操作步驟操作步驟具體操作步驟請教師參照軟件和書中具體操作步驟請教師參照軟件和書中內容進行講解。內容進行講解。dreamweaver 8網頁設計培訓教程 6.1.2 典型案例典型案例為網頁添加為網頁添加 fl

13、ash元素元素 w案例小結案例小結本案例是在一個已有的框架網頁中插入本案例是在一個已有的框架網頁中插入flash媒體文件，在制作時主要是為這個媒體文件，在制作時主要是為這個網頁添加網頁添加flash文本、文本、flash按鈕和按鈕和flash動畫文件，使整個頁面看起更加生動、協動畫文件，使整個頁面看起更加生動、協調。調。dreamweaver 8網頁設計培訓教程6.2 插入其他媒體元素插入其他媒體元素 在在dreamweaver 8中除了可以插入中除了可以插入flash媒體元素外還可添加其他媒體元素，如媒體元素外還可添加其他媒體元素，如shockwave影片、影片、java applet及背景

14、音及背景音樂等。樂等。 dreamweaver 8網頁設計培訓教程6.2 插入其他媒體元素插入其他媒體元素 6.2.1 知識講解知識講解6.2.2 典型案例典型案例在在“天府美食天府美食”網頁插入插件網頁插入插件 dreamweaver 8網頁設計培訓教程6.2.1 知識講解知識講解下面講解在下面講解在dreamweaver 8中插入中插入shockwave影片、影片、java applet以及背景以及背景音樂的方法。音樂的方法。 dreamweaver 8網頁設計培訓教程6.2.1 知識講解知識講解1.插入插入shockwave影片影片 2.插入插入java applet 3.插入背景音樂插

15、入背景音樂4.插入插件插入插件 dreamweaver 8網頁設計培訓教程1.插入插入shockwave影片影片 shockwave影片具有文件小、下載影片具有文件小、下載速度快、被目前主流的瀏覽器所支持速度快、被目前主流的瀏覽器所支持等優點，所以被廣泛應用于網頁制作等優點，所以被廣泛應用于網頁制作中，它是使用中，它是使用macromedia director制作的多媒體影片文件。具體操作請制作的多媒體影片文件。具體操作請教師參照軟件和書中內容進行講解教師參照軟件和書中內容進行講解 。dreamweaver 8網頁設計培訓教程2.插入插入java applet java applet是是jav

16、a的應用程序，是一種的應用程序，是一種動態、安全、跨平臺的網絡應用程序。它動態、安全、跨平臺的網絡應用程序。它能在網頁中實現一些特殊效果，如下雪、能在網頁中實現一些特殊效果，如下雪、水紋、下雨等。水紋、下雨等。java applet常被嵌入到常被嵌入到html語言中，可以實現較為復雜的控制語言中，可以實現較為復雜的控制和各種動態效果。具體操作請教師參照軟和各種動態效果。具體操作請教師參照軟件和書中內容進行講解件和書中內容進行講解 。dreamweaver 8網頁設計培訓教程3.插入背景音樂插入背景音樂在在dreamweaver 8中，可以為網頁添加中，可以為網頁添加背景音樂，背景音樂是在網頁后

17、臺播放的背景音樂，背景音樂是在網頁后臺播放的音樂，在制作時可以采用在源代碼中添加音樂，在制作時可以采用在源代碼中添加代碼的方法來添加背景音樂代碼的方法來添加背景音樂 。具體操作。具體操作請教師參照軟件和書中內容進行講解請教師參照軟件和書中內容進行講解 。dreamweaver 8網頁設計培訓教程4.插入插件插入插件 如果想在瀏覽器中訪問更多類型的媒體對如果想在瀏覽器中訪問更多類型的媒體對象，就必須借助插件。利用插件功能可以象，就必須借助插件。利用插件功能可以在網頁中插入各種類型的媒體元素，插件在網頁中插入各種類型的媒體元素，插件包括的范圍很廣，如視頻文件、音樂文件包括的范圍很廣，如視頻文件、音

18、樂文件、動畫文件等。前面介紹的、動畫文件等。前面介紹的shockwave影片就是插件中的一員。影片就是插件中的一員。 具體操作請教具體操作請教師參照軟件和書中內容進行講解師參照軟件和書中內容進行講解 。dreamweaver 8網頁設計培訓教程 6.2.2 典型案例典型案例在在“天府美天府美食食”網頁插入插件網頁插入插件 w案例目標案例目標本案例將在本案例將在“天府美食天府美食”網頁插入一個插網頁插入一個插件，使網頁內容更加豐富，主要練習插入件，使網頁內容更加豐富，主要練習插入插件的操作，其效果如圖插件的操作，其效果如圖6.28所示的右下所示的右下角部分內容。角部分內容。素材位置：素材位置：【

19、第第6課課素材素材6.1.2】效果圖位置：效果圖位置：【第第6課課源文件源文件6.1.2index2.html】 dreamweaver 8網頁設計培訓教程 6.2.2 典型案例典型案例在在“天府美天府美食食”網頁插入插件網頁插入插件 w操作思路操作思路（1）插入插件。）插入插件。（2）設置插件屬性。）設置插件屬性。 dreamweaver 8網頁設計培訓教程 6.2.2 典型案例典型案例在在“天府美天府美食食”網頁插入插件網頁插入插件 w操作步驟操作步驟 具體操作步驟請教參照軟件和書中內具體操作步驟請教參照軟件和書中內容進行講解。容進行講解。dreamweaver 8網頁設計培訓教程 6.2

20、.2 典型案例典型案例在在“天府美天府美食食”網頁插入插件網頁插入插件 w案例小結案例小結 本案例在本案例在“天府美食天府美食”網頁中插入一個插網頁中插入一個插件，使網頁的內容更具觀賞性，在制作過件，使網頁的內容更具觀賞性，在制作過程中主要練習了插入插件以及設置插件的程中主要練習了插入插件以及設置插件的屬性等操作。制作本案例主要是為了讓讀屬性等操作。制作本案例主要是為了讓讀者靈活掌握插入插件的方法，從而鞏固在者靈活掌握插入插件的方法，從而鞏固在網頁制作過程中插入其他媒體元素的方法網頁制作過程中插入其他媒體元素的方法。 dreamweaver 8網頁設計培訓教程6.3 上機練習上機練習6.3.1 網上購物頁面的制作網上購物頁面的制作 6.3.2 在網頁中插入在網頁中插入shockwave影片影片 dreamweaver 8網頁設計培訓教程6.3.1 網上購物頁面的制作網上購物頁面的制作 本次練習將制作一個網上購物的