Dreamweaver網(wǎng)頁設(shè)計(jì)培訓(xùn)教程課件

第6課為網(wǎng)頁加入動(dòng)態(tài)元素本課要點(diǎn)具體要求本課導(dǎo)讀上機(jī)練習(xí)第6課為網(wǎng)頁加入動(dòng)態(tài)元素本課要點(diǎn)本課要點(diǎn)插入Flash媒體元素插入其他媒體元素本課要點(diǎn)插入Flash媒體元素具體要求插入Flash動(dòng)畫插入Flash按鈕插入Flash文本插入FlashPaper插入Flash視頻插入Shockwave影片插入背景音樂具體要求插入Flash動(dòng)畫本課導(dǎo)讀

網(wǎng)頁中只有圖像和文本，表現(xiàn)力畢竟有限，如果在網(wǎng)頁中加入一些動(dòng)感十足的Flash動(dòng)畫，可以吸引更多瀏覽者的注意。如果再加上背景音樂，那就能創(chuàng)建圖像、文本、動(dòng)畫和音樂四位一體的多媒體效果了。本課導(dǎo)讀 網(wǎng)頁中只有圖像和文本，表現(xiàn)力畢竟有限，如果在網(wǎng)頁中6.1插入Flash媒體元素

在網(wǎng)頁中添加動(dòng)態(tài)元素可使網(wǎng)頁看起來更吸引人。Flash動(dòng)畫是網(wǎng)頁中最常見的動(dòng)態(tài)元素。 Flash動(dòng)畫是一種矢量動(dòng)畫，它具有生成的動(dòng)畫文件較小、效果好、并能夠?qū)崿F(xiàn)交互等優(yōu)點(diǎn)。要制作Flash動(dòng)畫，可以使用Macromedia公司出品的Flash軟件。6.1插入Flash媒體元素 在網(wǎng)頁中添加動(dòng)態(tài)元素可使網(wǎng)6.1插入Flash媒體元素6.1.1

知識講解6.1.2

典型案例——為網(wǎng)頁添加Flash元素6.1插入Flash媒體元素6.1.1知識講解6.1.1知識講解

在Dreamweaver8中可以直接插入發(fā)布后的Flash動(dòng)畫（.swf文件），可插入的Flash動(dòng)畫包括Flash動(dòng)畫文件、Flash按鈕和Flash文本等。6.1.1知識講解 在Dreamweaver8中可以直6.1.1知識講解1.了解Flash文件格式2.插入Flash動(dòng)畫3.插入Flash按鈕4.插入Flash文本5.插入FlashPaper6.插入Flash視頻7.設(shè)置Flash背景透明

6.1.1知識講解1.了解Flash文件格式1.了解Flash文件格式

Flash文件主要有以下三種文件類型。.swf：該類文件是Flash電影文件，是運(yùn)用于網(wǎng)絡(luò)中的最佳格式文件，是一種壓縮 格式的Flash文件。fla：該類文件是Flash的源文件，在Flash應(yīng)用程序中創(chuàng)建并且只能在Flash應(yīng)用程序中打開。.swt：該類文件是Flash庫文件，這種類型的文件允許修改Flash動(dòng)畫文件中的信息，這類文件常用于Flash按鈕對象中。

1.了解Flash文件格式 Flash文件主要有以下三種文2.插入Flash動(dòng)畫具體操作如下：（1）將光標(biāo)插入點(diǎn)定位到需插入Flash動(dòng)畫文件的位置。（2）選擇【插入】→【媒體】→【Flash】命令，打開【選擇文件】對話框。（3）在該對話框的【查找范圍】下拉列表框中選擇文件所在的位置，然后在文件列表框中選中要插入的Flash文件。（4）單擊【確定】按鈕，完成Flash動(dòng)畫文件的插入。

2.插入Flash動(dòng)畫具體操作如下：3.插入Flash按鈕

在Dreamweaver8中集成了許多精美的Flash按鈕，這為增加網(wǎng)頁動(dòng)態(tài)效果提供了方便。在制作網(wǎng)頁時(shí)可以將自己制作的Flash按鈕插入到網(wǎng)頁中，也可插入Dreamweaver8集成的按鈕。 具體操作步驟請教師參照書中步驟進(jìn)行講解。3.插入Flash按鈕 在Dreamweaver8中集成4.插入Flash文本

在網(wǎng)頁中還可以插入Flash文本，F(xiàn)lash文本是Dreamweaver8中集成的文本動(dòng)畫，通過【插入Flash文本】對話框創(chuàng)建。 具體操作步驟請教師參照書中步驟進(jìn)行講解。4.插入Flash文本在網(wǎng)頁中還可以插入Flash文5.插入FlashPaper

FlashPaper是一種特殊的Flash動(dòng)畫文件，可以通過FlashPaper軟件制作。制作網(wǎng)頁時(shí)，可以利用插入FlashPaper功能在網(wǎng)頁中插入MacromediaFlashPaper文檔。這樣在瀏覽器中打開包含F(xiàn)lashPaper文檔的網(wǎng)頁時(shí)，用戶就可瀏覽FlashPaper文檔中的所有頁面，而無須加載新的網(wǎng)頁。用戶也可以搜索、打印和縮放該文檔。 具體操作步驟請教師參照書中步驟進(jìn)行講解。5.插入FlashPaperFlashPaper是一6.插入Flash視頻插入Flash視頻也是目前網(wǎng)頁制作中常用的方法。用Dreamweaver8可以輕松地在網(wǎng)頁中插入Flash視頻內(nèi)容，這是Dreamweaver8新增的功能。 具體操作步驟請教師參照書中步驟進(jìn)行講解。6.插入Flash視頻插入Flash視頻也是目前網(wǎng)頁7.設(shè)置Flash背景透明有時(shí)為了提高網(wǎng)頁視覺效果，可在表格的單元格中插入背景圖像，然后再在該單元格中插入Flash影片，這時(shí)需要將Flash影片設(shè)置為背景透明，否則就看不見下面的背景圖像。 具體操作步驟請教師參照書中步驟進(jìn)行講解。7.設(shè)置Flash背景透明有時(shí)為了提高網(wǎng)頁視覺效果，6.1.2典型案例——為網(wǎng)頁添加 Flash元素

案例目標(biāo) 本案例將在“天府美食”網(wǎng)頁中插入一些Flash動(dòng)畫，主要練習(xí)插入Flash動(dòng)畫、Flash按鈕和Flash文本的操作，最終效果如圖6.17所示。 素材位置：【\第6課\素材\6.1.2\】 效果圖位置：【\第6課\源文件\6.1.2\index1.html】6.1.2典型案例——為網(wǎng)頁添加 F6.1.2典型案例——為網(wǎng)頁添加 Flash元素

操作思路（1）插入Flash文本。（2）插入4個(gè)Flash按鈕用來制作導(dǎo)航條。（3）插入一個(gè)Flash動(dòng)畫文件。6.1.2典型案例——為網(wǎng)頁添加 F6.1.2典型案例——為網(wǎng)頁添加 Flash元素

操作步驟

具體操作步驟請教師參照軟件和書中內(nèi)容進(jìn)行講解。6.1.2典型案例——為網(wǎng)頁添加 F6.1.2典型案例——為網(wǎng)頁添加 Flash元素

案例小結(jié)

本案例是在一個(gè)已有的框架網(wǎng)頁中插入Flash媒體文件，在制作時(shí)主要是為這個(gè)網(wǎng)頁添加Flash文本、Flash按鈕和Flash動(dòng)畫文件，使整個(gè)頁面看起更加生動(dòng)、協(xié)調(diào)。6.1.2典型案例——為網(wǎng)頁添加 F6.2插入其他媒體元素

在Dreamweaver8中除了可以插入Flash媒體元素外還可添加其他媒體元素，如Shockwave影片、JavaApplet及背景音樂等。6.2插入其他媒體元素 在Dreamweaver8中除6.2插入其他媒體元素 6.2.1

知識講解 6.2.2

典型案例——在“天府美食”網(wǎng)頁插入插件6.2插入其他媒體元素 6.2.1知識講解6.2.1知識講解

下面講解在Dreamweaver8中插入Shockwave影片、JavaApplet以及背景音樂的方法。6.2.1知識講解 下面講解在Dreamweaver86.2.1知識講解1.插入Shockwave影片2.插入JavaApplet3.插入背景音樂4.插入插件6.2.1知識講解1.插入Shockwave影片1.插入Shockwave影片

Shockwave影片具有文件小、下載速度快、被目前主流的瀏覽器所支持等優(yōu)點(diǎn)，所以被廣泛應(yīng)用于網(wǎng)頁制作中，它是使用MacromediaDirector制作的多媒體影片文件。具體操作請教師參照軟件和書中內(nèi)容進(jìn)行講解。1.插入Shockwave影片 Shockwave影片具有2.插入JavaApplet

JavaApplet是Java的應(yīng)用程序，是一種動(dòng)態(tài)、安全、跨平臺的網(wǎng)絡(luò)應(yīng)用程序。它能在網(wǎng)頁中實(shí)現(xiàn)一些特殊效果，如下雪、水紋、下雨等。JavaApplet常被嵌入到HTML語言中，可以實(shí)現(xiàn)較為復(fù)雜的控制和各種動(dòng)態(tài)效果。具體操作請教師參照軟件和書中內(nèi)容進(jìn)行講解。2.插入JavaApplet JavaApplet是J3.插入背景音樂

在Dreamweaver8中，可以為網(wǎng)頁添加背景音樂，背景音樂是在網(wǎng)頁后臺播放的音樂，在制作時(shí)可以采用在源代碼中添加代碼的方法來添加背景音樂。具體操作請教師參照軟件和書中內(nèi)容進(jìn)行講解。3.插入背景音樂 在Dreamweaver8中，可以為網(wǎng)頁4.插入插件

如果想在瀏覽器中訪問更多類型的媒體對象，就必須借助插件。利用插件功能可以在網(wǎng)頁中插入各種類型的媒體元素，插件包括的范圍很廣，如視頻文件、音樂文件、動(dòng)畫文件等。前面介紹的Shockwave影片就是插件中的一員。具體操作請教師參照軟件和書中內(nèi)容進(jìn)行講解。4.插入插件 如果想在瀏覽器中訪問更多類型的媒體對象，就必

6.2.2典型案例——在“天府美食”網(wǎng)頁插入插件

案例目標(biāo) 本案例將在“天府美食”網(wǎng)頁插入一個(gè)插件，使網(wǎng)頁內(nèi)容更加豐富，主要練習(xí)插入插件的操作，其效果如圖6.28所示的右下角部分內(nèi)容。 素材位置：【\第6課\素材\6.1.2\】 效果圖位置：【\第6課\源文件\6.1.2\index2.html】6.2.2典型案例——在“天府美食”網(wǎng)頁插入插件案

6.2.2典型案例——在“天府美食”網(wǎng)頁插入插件

操作思路（1）插入插件。（2）設(shè)置插件屬性。6.2.2典型案例——在“天府美食”網(wǎng)頁插入插件操

6.2.2典型案例——在“天府美食”網(wǎng)頁插入插件

操作步驟

具體操作步驟請教參照軟件和書中內(nèi)容進(jìn)行講解。6.2.2典型案例——在“天府美食”網(wǎng)頁插入插件操

6.2.2典型案例——在“天府美食”網(wǎng)頁插入插件

案例小結(jié)

本案例在“天府美食”網(wǎng)頁中插入一個(gè)插件，使網(wǎng)頁的內(nèi)容更具觀賞性，在制作過程中主要練習(xí)了插入插件以及設(shè)置插件的屬性等操作。制作本案例主要是為了讓讀者靈活掌握插入插件的方法，從而鞏固在網(wǎng)頁制作過程中插入其他媒體元素的方法。6.2.2典型案例——在“天府美食”網(wǎng)頁插入插件案6.3上機(jī)練習(xí)6.3.1網(wǎng)上購物頁面的制作6.3.2在網(wǎng)頁中插入Shockwave影片6.3上機(jī)練習(xí)6.3.1網(wǎng)上購物頁面的制作6.3.1網(wǎng)上購物頁面的制作

本次練習(xí)將制作一個(gè)網(wǎng)上購物的網(wǎng)頁，主要練習(xí)插入Flash動(dòng)畫和Flash按鈕。制作出的效果如圖6.31所示。 素材位置：【\第6課\素材\6.3.1\】 效果圖位置：【\第6課\源文件\6.3.1\shipinwangye1.html】6.3.1網(wǎng)上購物頁面的制作 本次練習(xí)將制作一個(gè)網(wǎng)上購物6.3.1網(wǎng)上購物頁面的制作

操作思路在網(wǎng)頁的頂部插入“音符.swf”。插入“音符.swf”插入Flash按鈕在左側(cè)插入5個(gè)Flash按鈕。6.3.1網(wǎng)上購物頁面的制作操作思路6.3.2在網(wǎng)頁中插入Shockwave影片 本次練習(xí)將在網(wǎng)上購物頁面中插入一個(gè)圖片欣賞效果，主要練習(xí)插入Shockwave影片的方法，其效果如圖6.32所示。 素材位置：【\第6課\素材\6.3.1\】 效果圖位置：【\第6課\源文件\6.3.1\shipinwangye2.html】6.3.2在網(wǎng)頁中插入Shockwave影片 本次練習(xí)將在網(wǎng)6.3.2在網(wǎng)頁中插入Shockwave影片操作思路在網(wǎng)頁左下角單元格中插入“圖片.dcr”。在【屬性】面板中設(shè)置其寬度為400像素，高度為300像素。6.3.2在網(wǎng)頁中插入Shockwave影片操作思路第6課為網(wǎng)頁加入動(dòng)態(tài)元素本課要點(diǎn)具體要求本課導(dǎo)讀上機(jī)練習(xí)第6課為網(wǎng)頁加入動(dòng)態(tài)元素本課要點(diǎn)本課要點(diǎn)插入Flash媒體元素插入其他媒體元素本課要點(diǎn)插入Flash媒體元素具體要求插入Flash動(dòng)畫插入Flash按鈕插入Flash文本插入FlashPaper插入Flash視頻插入Shockwave影片插入背景音樂具體要求插入Flash動(dòng)畫本課導(dǎo)讀

網(wǎng)頁中只有圖像和文本，表現(xiàn)力畢竟有限，如果在網(wǎng)頁中加入一些動(dòng)感十足的Flash動(dòng)畫，可以吸引更多瀏覽者的注意。如果再加上背景音樂，那就能創(chuàng)建圖像、文本、動(dòng)畫和音樂四位一體的多媒體效果了。本課導(dǎo)讀 網(wǎng)頁中只有圖像和文本，表現(xiàn)力畢竟有限，如果在網(wǎng)頁中6.1插入Flash媒體元素

在網(wǎng)頁中添加動(dòng)態(tài)元素可使網(wǎng)頁看起來更吸引人。Flash動(dòng)畫是網(wǎng)頁中最常見的動(dòng)態(tài)元素。 Flash動(dòng)畫是一種矢量動(dòng)畫，它具有生成的動(dòng)畫文件較小、效果好、并能夠?qū)崿F(xiàn)交互等優(yōu)點(diǎn)。要制作Flash動(dòng)畫，可以使用Macromedia公司出品的Flash軟件。6.1插入Flash媒體元素 在網(wǎng)頁中添加動(dòng)態(tài)元素可使網(wǎng)6.1插入Flash媒體元素6.1.1

知識講解6.1.2

典型案例——為網(wǎng)頁添加Flash元素6.1插入Flash媒體元素6.1.1知識講解6.1.1知識講解

在Dreamweaver8中可以直接插入發(fā)布后的Flash動(dòng)畫（.swf文件），可插入的Flash動(dòng)畫包括Flash動(dòng)畫文件、Flash按鈕和Flash文本等。6.1.1知識講解 在Dreamweaver8中可以直6.1.1知識講解1.了解Flash文件格式2.插入Flash動(dòng)畫3.插入Flash按鈕4.插入Flash文本5.插入FlashPaper6.插入Flash視頻7.設(shè)置Flash背景透明

6.1.1知識講解1.了解Flash文件格式1.了解Flash文件格式

Flash文件主要有以下三種文件類型。.swf：該類文件是Flash電影文件，是運(yùn)用于網(wǎng)絡(luò)中的最佳格式文件，是一種壓縮 格式的Flash文件。fla：該類文件是Flash的源文件，在Flash應(yīng)用程序中創(chuàng)建并且只能在Flash應(yīng)用程序中打開。.swt：該類文件是Flash庫文件，這種類型的文件允許修改Flash動(dòng)畫文件中的信息，這類文件常用于Flash按鈕對象中。

1.了解Flash文件格式 Flash文件主要有以下三種文2.插入Flash動(dòng)畫具體操作如下：（1）將光標(biāo)插入點(diǎn)定位到需插入Flash動(dòng)畫文件的位置。（2）選擇【插入】→【媒體】→【Flash】命令，打開【選擇文件】對話框。（3）在該對話框的【查找范圍】下拉列表框中選擇文件所在的位置，然后在文件列表框中選中要插入的Flash文件。（4）單擊【確定】按鈕，完成Flash動(dòng)畫文件的插入。

2.插入Flash動(dòng)畫具體操作如下：3.插入Flash按鈕

在Dreamweaver8中集成了許多精美的Flash按鈕，這為增加網(wǎng)頁動(dòng)態(tài)效果提供了方便。在制作網(wǎng)頁時(shí)可以將自己制作的Flash按鈕插入到網(wǎng)頁中，也可插入Dreamweaver8集成的按鈕。 具體操作步驟請教師參照書中步驟進(jìn)行講解。3.插入Flash按鈕 在Dreamweaver8中集成4.插入Flash文本

在網(wǎng)頁中還可以插入Flash文本，F(xiàn)lash文本是Dreamweaver8中集成的文本動(dòng)畫，通過【插入Flash文本】對話框創(chuàng)建。 具體操作步驟請教師參照書中步驟進(jìn)行講解。4.插入Flash文本在網(wǎng)頁中還可以插入Flash文5.插入FlashPaper

FlashPaper是一種特殊的Flash動(dòng)畫文件，可以通過FlashPaper軟件制作。制作網(wǎng)頁時(shí)，可以利用插入FlashPaper功能在網(wǎng)頁中插入MacromediaFlashPaper文檔。這樣在瀏覽器中打開包含F(xiàn)lashPaper文檔的網(wǎng)頁時(shí)，用戶就可瀏覽FlashPaper文檔中的所有頁面，而無須加載新的網(wǎng)頁。用戶也可以搜索、打印和縮放該文檔。 具體操作步驟請教師參照書中步驟進(jìn)行講解。5.插入FlashPaperFlashPaper是一6.插入Flash視頻插入Flash視頻也是目前網(wǎng)頁制作中常用的方法。用Dreamweaver8可以輕松地在網(wǎng)頁中插入Flash視頻內(nèi)容，這是Dreamweaver8新增的功能。 具體操作步驟請教師參照書中步驟進(jìn)行講解。6.插入Flash視頻插入Flash視頻也是目前網(wǎng)頁7.設(shè)置Flash背景透明有時(shí)為了提高網(wǎng)頁視覺效果，可在表格的單元格中插入背景圖像，然后再在該單元格中插入Flash影片，這時(shí)需要將Flash影片設(shè)置為背景透明，否則就看不見下面的背景圖像。 具體操作步驟請教師參照書中步驟進(jìn)行講解。7.設(shè)置Flash背景透明有時(shí)為了提高網(wǎng)頁視覺效果，6.1.2典型案例——為網(wǎng)頁添加 Flash元素

案例目標(biāo) 本案例將在“天府美食”網(wǎng)頁中插入一些Flash動(dòng)畫，主要練習(xí)插入Flash動(dòng)畫、Flash按鈕和Flash文本的操作，最終效果如圖6.17所示。 素材位置：【\第6課\素材\6.1.2\】 效果圖位置：【\第6課\源文件\6.1.2\index1.html】6.1.2典型案例——為網(wǎng)頁添加 F6.1.2典型案例——為網(wǎng)頁添加 Flash元素

操作思路（1）插入Flash文本。（2）插入4個(gè)Flash按鈕用來制作導(dǎo)航條。（3）插入一個(gè)Flash動(dòng)畫文件。6.1.2典型案例——為網(wǎng)頁添加 F6.1.2典型案例——為網(wǎng)頁添加 Flash元素

操作步驟

具體操作步驟請教師參照軟件和書中內(nèi)容進(jìn)行講解。6.1.2典型案例——為網(wǎng)頁添加 F6.1.2典型案例——為網(wǎng)頁添加 Flash元素

案例小結(jié)

本案例是在一個(gè)已有的框架網(wǎng)頁中插入Flash媒體文件，在制作時(shí)主要是為這個(gè)網(wǎng)頁添加Flash文本、Flash按鈕和Flash動(dòng)畫文件，使整個(gè)頁面看起更加生動(dòng)、協(xié)調(diào)。6.1.2典型案例——為網(wǎng)頁添加 F6.2插入其他媒體元素

在Dreamweaver8中除了可以插入Flash媒體元素外還可添加其他媒體元素，如Shockwave影片、JavaApplet及背景音樂等。6.2插入其他媒體元素 在Dreamweaver8中除6.2插入其他媒體元素 6.2.1

知識講解 6.2.2

典型案例——在“天府美食”網(wǎng)頁插入插件6.2插入其他媒體元素 6.2.1知識講解6.2.1知識講解

下面講解在Dreamweaver8中插入Shockwave影片、JavaApplet以及背景音樂的方法。6.2.1知識講解 下面講解在Dreamweaver86.2.1知識講解1.插入Shockwave影片2.插入JavaApplet3.插入背景音樂4.插入插件6.2.1知識講解1.插入Shockwave影片1.插入Shockwave影片

Shockwave影片具有文件小、下載速度快、被目前主流的瀏覽器所支持等優(yōu)點(diǎn)，所以被廣泛應(yīng)用于網(wǎng)頁制作中，它是使用MacromediaDirector制作的多媒體影片文件。具體操作請教師參照軟件和書中內(nèi)容進(jìn)行講解。1.插入Shockwave影片 Shockwave影片具有2.插入JavaApplet

JavaApplet是Java的應(yīng)用程序，是一種動(dòng)態(tài)、安全、跨平臺的網(wǎng)絡(luò)應(yīng)用程序。它能在網(wǎng)頁中實(shí)現(xiàn)一些特殊效果，如下雪、水紋、下雨等。JavaApplet常被嵌入到HTML語言中，可以實(shí)現(xiàn)較為復(fù)雜的控制和各種動(dòng)態(tài)效果。具體操作請教師參照軟件和書中內(nèi)容進(jìn)行講解。2.插入JavaApplet JavaApplet是J3.插入背景音樂

在Dreamweaver8中，可以為網(wǎng)頁添加背景音樂，背景音樂是在網(wǎng)頁后臺播放的音樂，在制作時(shí)可以采用在源代碼中添加代碼的方法來添加背景音樂。具體操作請教師參照軟件和書中內(nèi)容進(jìn)行講解。3.插入背景音樂 在Dreamweaver8中，可以為網(wǎng)頁4.插入插件

如果想在瀏覽器中訪問更多類型的媒體對象，就必須借助插件。利用插件功能可以在網(wǎng)頁中插入各種類型的媒體元素，插件包括的范圍很廣，如視頻文件、音樂文件、動(dòng)畫文件等。前面介紹的Shockwave影片就是插件中的一員。具體操作請教師參照軟件和書中內(nèi)容進(jìn)行講解。4.插入插件 如果想在瀏覽器中訪問更多類型的媒體對象，就必

6.2.2典型案例——在“天府美食”網(wǎng)頁插入插件

案例目標(biāo) 本案例將在“天府美食”網(wǎng)頁插入一個(gè)插件，使網(wǎng)頁內(nèi)容更加豐富，主要練習(xí)插入插件的操作，其效果如圖6.28所示的右下角部分內(nèi)容。 素材位置：【\第6課\素材\6.1.2\】 效果圖位置：【\第6課\源文件\6.1.2\index2.html】6.2.2典型案例——在“天府美食”網(wǎng)頁插入插件案

6.2.2