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

1、第6課 為網(wǎng)頁(yè)加入動(dòng)態(tài)元素本課要點(diǎn)具體要求本課導(dǎo)讀上機(jī)練習(xí)本課要點(diǎn)點(diǎn)插入Flash媒體元元素插入其他他媒體元元素具體要求求插入Flash動(dòng)畫插入Flash按鈕插入Flash文本插入FlashPaper插入Flash視頻插入Shockwave影片片插入背景景音樂本課導(dǎo)讀讀網(wǎng)頁(yè)中只只有圖像像和文本本，表現(xiàn)現(xiàn)力畢竟竟有限，如果在在網(wǎng)頁(yè)中中加入一一些動(dòng)感感十足的的Flash動(dòng)畫，可可以吸引引更多瀏瀏覽者的的注意。如果再再加上背背景音樂樂，那就就能創(chuàng)建建圖像、文本、動(dòng)畫和和音樂四四位一體體的多媒媒體效果果了。6.1插入Flash媒體元素素在網(wǎng)頁(yè)中中添加動(dòng)動(dòng)態(tài)元素素可使網(wǎng)網(wǎng)頁(yè)看起起來更吸吸引人。Flash

2、動(dòng)畫是網(wǎng)網(wǎng)頁(yè)中最最常見的的動(dòng)態(tài)元元素。Flash動(dòng)畫是一一種矢量量動(dòng)畫，它具有有生成的的動(dòng)畫文文件較小小、效果果好、并并能夠?qū)崒?shí)現(xiàn)交互互等優(yōu)點(diǎn)點(diǎn)。要制制作Flash動(dòng)畫，可可以使用用Macromedia公司出品品的Flash軟件。6.1插入Flash媒體元素素6.1.1知識(shí)講解解6.1.2典型案例例為網(wǎng)頁(yè)添添加Flash元素6.1.1知識(shí)講解解在Dreamweaver8中可以直直接插入入發(fā)布后后的Flash動(dòng)畫（.swf文件），可插入入的Flash動(dòng)畫包括括Flash動(dòng)畫文件件、Flash按鈕和Flash文本等。6.1.1知識(shí)講解解1.了解Flash文件格式式2.插入Flash動(dòng)畫3.插入Fl

3、ash按鈕4.插入Flash文本5.插入FlashPaper6.插入Flash視頻7.設(shè)置Flash背景透明明1.了解Flash文件格式式Flash文件主要要有以下下三種文文件類型型。.swf：該類文文件是Flash電影文件件，是運(yùn)運(yùn)用于網(wǎng)網(wǎng)絡(luò)中的的最佳格格式文件件，是一一種壓縮縮格式的Flash文件。fla：該類文文件是Flash的源文件件，在Flash應(yīng)用程序序中創(chuàng)建建并且只只能在Flash應(yīng)用程序序中打開開。.swt：該類文文件是Flash庫(kù)文件，這種類類型的文文件允許許修改Flash動(dòng)畫文件件中的信信息，這這類文件件常用于于Flash按鈕對(duì)象象中。2.插入Flash動(dòng)畫具體操作作如下：

4、（1）將光標(biāo)標(biāo)插入點(diǎn)點(diǎn)定位到到需插入入Flash動(dòng)畫文件件的位置置。（2）選擇【插入】【媒體】【Flash】命令，打打開【選擇文件件】對(duì)話框。（3）在該對(duì)對(duì)話框的的【查找范圍圍】下拉列表表框中選選擇文件件所在的的位置，然后在在文件列列表框中中選中要要插入的的Flash文件。（4）單擊【確定】按鈕，完完成Flash動(dòng)畫文件件的插入入。3.插入Flash按鈕在Dreamweaver8中集成了了許多精精美的Flash按鈕，這這為增加加網(wǎng)頁(yè)動(dòng)動(dòng)態(tài)效果果提供了了方便。在制作作網(wǎng)頁(yè)時(shí)時(shí)可以將將自己制制作的Flash按鈕插入入到網(wǎng)頁(yè)頁(yè)中，也也可插入入Dreamweaver8集成的按按鈕。具體操作作步驟請(qǐng)請(qǐng)教

5、師參參照書中中步驟進(jìn)進(jìn)行講解解。4.插入Flash文本在網(wǎng)頁(yè)中中還可以以插入Flash文本，F(xiàn)lash文本是Dreamweaver8中集成的的文本動(dòng)動(dòng)畫，通通過【插入Flash文本】對(duì)話框創(chuàng)創(chuàng)建。具體操作作步驟請(qǐng)請(qǐng)教師參參照書中中步驟進(jìn)進(jìn)行講解解。5.插入FlashPaperFlashPaper是一種特特殊的Flash動(dòng)畫文件件，可以以通過FlashPaper軟件制作作。制作作網(wǎng)頁(yè)時(shí)時(shí)，可以以利用插插入FlashPaper功能在網(wǎng)網(wǎng)頁(yè)中插插入Macromedia FlashPaper文檔。這這樣在瀏瀏覽器中中打開包包含F(xiàn)lashPaper文檔的網(wǎng)網(wǎng)頁(yè)時(shí)，用戶就就可瀏覽覽FlashPaper文檔

6、中的的所有頁(yè)頁(yè)面，而而無須加加載新的的網(wǎng)頁(yè)。用戶也也可以搜搜索、打打印和縮縮放該文文檔。具體操作作步驟請(qǐng)請(qǐng)教師參參照書中中步驟進(jìn)進(jìn)行講解解。6.插入Flash視頻插入Flash視頻也是是目前網(wǎng)網(wǎng)頁(yè)制作作中常用用的方法法。用Dreamweaver8可以輕松松地在網(wǎng)網(wǎng)頁(yè)中插插入Flash視頻內(nèi)容容，這是是Dreamweaver8新增的功功能。具體操作作步驟請(qǐng)請(qǐng)教師參參照書中中步驟進(jìn)進(jìn)行講解解。7.設(shè)置Flash背景透明明有時(shí)為了了提高網(wǎng)網(wǎng)頁(yè)視覺覺效果，可在表表格的單單元格中中插入背背景圖像像，然后后再在該該單元格格中插入入Flash影片，這這時(shí)需要要將Flash影片設(shè)置置為背景景透明，否則就就看不

7、見見下面的的背景圖圖像。具體操作作步驟請(qǐng)請(qǐng)教師參參照書中中步驟進(jìn)進(jìn)行講解解。6.1.2典型案例例為網(wǎng)頁(yè)添添加Flash元素案例目標(biāo)標(biāo)本案例將將在“天天府美食食”網(wǎng)頁(yè)頁(yè)中插入入一些Flash動(dòng)畫，主主要練習(xí)習(xí)插入Flash動(dòng)畫、Flash按鈕和Flash文本的操操作，最最終效果果如圖6.17所示。素材位置置：【第6課素材6.1.2】效果圖位位置：【第6課源文件6.1.2index1.html】6.1.2典型案例例為網(wǎng)頁(yè)添添加Flash元素操作思路路（1）插入Flash文本。（2）插入4個(gè)Flash按鈕用來來制作導(dǎo)導(dǎo)航條。（3）插入一一個(gè)Flash動(dòng)畫文件件。6.1.2典型案例例為網(wǎng)頁(yè)添添加Fla

8、sh元素操作步驟驟具體操作作步驟請(qǐng)請(qǐng)教師參參照軟件件和書中中內(nèi)容進(jìn)進(jìn)行講解解。6.1.2典型案例例為網(wǎng)頁(yè)添添加Flash元素案例小結(jié)結(jié)本案例是是在一個(gè)個(gè)已有的的框架網(wǎng)網(wǎng)頁(yè)中插插入Flash媒體文件件，在制制作時(shí)主主要是為為這個(gè)網(wǎng)網(wǎng)頁(yè)添加加Flash文本、Flash按鈕和Flash動(dòng)畫文件件，使整整個(gè)頁(yè)面面看起更更加生動(dòng)動(dòng)、協(xié)調(diào)調(diào)。6.2插入其他他媒體元元素在Dreamweaver8中除了可可以插入入Flash媒體元素素外還可可添加其其他媒體體元素，如Shockwave影片、Java Applet及背景音音樂等。6.2插入其他他媒體元元素6.2.1知識(shí)講解解6.2.2典型案例例在“天府府美食”網(wǎng)

9、頁(yè)插插入插件件6.2.1知識(shí)講解解下面講解解在Dreamweaver8中插入Shockwave影片、Java Applet以及背景景音樂的的方法。6.2.1知識(shí)講解解1.插入Shockwave影片2.插入Java Applet3.插入背景景音樂4.插入插件件1.插入入Shockwave影片Shockwave影片具有有文件小小、下載載速度快快、被目目前主流流的瀏覽覽器所支支持等優(yōu)優(yōu)點(diǎn)，所所以被廣廣泛應(yīng)用用于網(wǎng)頁(yè)頁(yè)制作中中，它是是使用Macromedia Director制作的多多媒體影影片文件件。具體體操作請(qǐng)請(qǐng)教師參參照軟件件和書中中內(nèi)容進(jìn)進(jìn)行講解解 。2.插入入JavaAppletJava A

10、pplet是Java的應(yīng)用程程序，是是一種動(dòng)動(dòng)態(tài)、安安全、跨跨平臺(tái)的的網(wǎng)絡(luò)應(yīng)應(yīng)用程序序。它能能在網(wǎng)頁(yè)頁(yè)中實(shí)現(xiàn)現(xiàn)一些特特殊效果果，如下下雪、水水紋、下下雨等。Java Applet常被嵌入入到HTML語(yǔ)言中，可以實(shí)實(shí)現(xiàn)較為為復(fù)雜的的控制和和各種動(dòng)動(dòng)態(tài)效果果。具體體操作請(qǐng)請(qǐng)教師參參照軟件件和書中中內(nèi)容進(jìn)進(jìn)行講解解 。3.插入入背景音音樂在Dreamweaver8中，可以以為網(wǎng)頁(yè)頁(yè)添加背背景音樂樂，背景景音樂是是在網(wǎng)頁(yè)頁(yè)后臺(tái)播播放的音音樂，在在制作時(shí)時(shí)可以采采用在源源代碼中中添加代代碼的方方法來添添加背景景音樂。具體體操作請(qǐng)請(qǐng)教師參參照軟件件和書中中內(nèi)容進(jìn)進(jìn)行講解解 。4.插入入插件如果想在在瀏覽器

11、器中訪問問更多類類型的媒媒體對(duì)象象，就必必須借助助插件。利用插插件功能能可以在在網(wǎng)頁(yè)中中插入各各種類型型的媒體體元素，插件包包括的范范圍很廣廣，如視視頻文件件、音樂樂文件、動(dòng)畫文文件等。前面介介紹的Shockwave影片就是是插件中中的一員員。具具體操作作請(qǐng)教師師參照軟軟件和書書中內(nèi)容容進(jìn)行講講解。6.2.2典型案例例在“天府府美食”網(wǎng)頁(yè)插插入插件件案例目標(biāo)標(biāo)本案例將將在“天天府美食食”網(wǎng)頁(yè)頁(yè)插入一一個(gè)插件件，使網(wǎng)網(wǎng)頁(yè)內(nèi)容容更加豐豐富，主主要練習(xí)習(xí)插入插插件的操操作，其其效果如如圖6.28所示的右右下角部部分內(nèi)容容。素材位置置：【第6課素材6.1.2】效果圖位位置：【第6課源文件6.1.2in

12、dex2.html】6.2.2典型案例例在“天府府美食”網(wǎng)頁(yè)插插入插件件操作思路路（1）插入插插件。（2）設(shè)置插插件屬性性。6.2.2典型案例例在“天府府美食”網(wǎng)頁(yè)插插入插件件操作步驟驟具體操作作步驟請(qǐng)請(qǐng)教參照照軟件和和書中內(nèi)內(nèi)容進(jìn)行行講解。6.2.2典型案例例在“天府府美食”網(wǎng)頁(yè)插插入插件件案例小結(jié)結(jié)本案例在在“天府府美食”網(wǎng)頁(yè)中中插入一一個(gè)插件件，使網(wǎng)網(wǎng)頁(yè)的內(nèi)內(nèi)容更具具觀賞性性，在制制作過程程中主要要練習(xí)了了插入插插件以及及設(shè)置插插件的屬屬性等操操作。制制作本案案例主要要是為了了讓讀者者靈活掌掌握插入入插件的的方法，從而鞏鞏固在網(wǎng)網(wǎng)頁(yè)制作作過程中中插入其其他媒體體元素的的方法。6.3上上機(jī)機(jī)練習(xí)6.3.1網(wǎng)上購(gòu)物物頁(yè)面的的制作6.3.2在網(wǎng)頁(yè)中中插入Shockwave影片6.3.1網(wǎng)上購(gòu)物物頁(yè)面的的制作本次練習(xí)習(xí)將制作作一個(gè)網(wǎng)網(wǎng)上購(gòu)物物的網(wǎng)頁(yè)頁(yè)，主要要練習(xí)插插入Flash動(dòng)畫和Flash按鈕。制制作出的的效果如如圖6.31所示。素材位置置：【第6課素材6.3.1】效果圖位位置：【第6課源文件6.3.1shipinwangye1.html】6.3.1網(wǎng)上購(gòu)物物頁(yè)面的的制作操作思路路在網(wǎng)頁(yè)的的頂部插插入“音音符.swf”。插入“音符.swf”插入Flash按鈕在左側(cè)插插入5個(gè)Flash按鈕。6.3.2在網(wǎng)頁(yè)中中插入Shockwave影片本次練習(xí)習(xí)