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

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

2、成的動(dòng)畫文件較小、效果好、并可以實(shí)現(xiàn)交互等優(yōu)點(diǎn)。要制造Flash動(dòng)畫，可以運(yùn)用Macromedia公司出品的Flash軟件。 6.1 插入Flash媒體元素 6.1.1 知識(shí)講解6.1.2 典型案例為網(wǎng)頁(yè)添加Flash元素 6.1.1 知識(shí)講解在Dreamweaver 8中可以直接插入發(fā)布后的Flash動(dòng)畫.swf文件，可插入的Flash動(dòng)畫包括Flash動(dòng)畫文件、Flash按鈕和Flash文本等。 6.1.1 知識(shí)講解1.了解Flash文件格式 2.插入Flash動(dòng)畫3.插入Flash按鈕 4.插入Flash文本 5.插入FlashPaper 6.插入Flash視頻 7.設(shè)置Flash背景透

3、明 1.了解Flash文件格式 Flash文件主要有以下三種文件類型。.swf：該類文件是Flash電影文件，是運(yùn)用于網(wǎng)絡(luò)中的最正確格式文件，是一種緊縮格式的Flash文件。fla：該類文件是Flash的源文件，在Flash運(yùn)用程序中創(chuàng)建并且只能在Flash運(yùn)用程序中翻開。.swt：該類文件是Flash庫(kù)文件，這種類型的文件允許修正Flash動(dòng)畫文件中的信息，這類文件常用于Flash按鈕對(duì)象中。 2.插入Flash動(dòng)畫詳細(xì)操作如下：1將光標(biāo)插入點(diǎn)定位到需插入Flash動(dòng)畫文件的位置。2選擇【插入】【媒體】【Flash】命令，翻開【選擇文件】對(duì)話框。3在該對(duì)話框的【查找范圍】下拉列表框中選擇文件

4、所在的位置，然后在文件列表框中選中要插入的Flash文件。4單擊【確定】按鈕，完成Flash動(dòng)畫文件的插入。 3.插入Flash按鈕 在Dreamweaver 8中集成了許多精巧的Flash按鈕，這為添加網(wǎng)頁(yè)動(dòng)態(tài)效果提供了方便。在制造網(wǎng)頁(yè)時(shí)可以將本人制造的Flash按鈕插入到網(wǎng)頁(yè)中，也可插入Dreamweaver 8集成的按鈕。詳細(xì)操作步驟請(qǐng)教師參照書中步驟進(jìn)展講解。 4.插入Flash文本 在網(wǎng)頁(yè)中還可以插入Flash文本，F(xiàn)lash文本是Dreamweaver 8中集成的文本動(dòng)畫，經(jīng)過(guò)【插入Flash文本】對(duì)話框創(chuàng)建。詳細(xì)操作步驟請(qǐng)教師參照書中步驟進(jìn)展講解。 5.插入FlashPaper

5、FlashPaper是一種特殊的Flash動(dòng)畫文件，可以經(jīng)過(guò)FlashPaper軟件制造。制造網(wǎng)頁(yè)時(shí)，可以利用插入FlashPaper功能在網(wǎng)頁(yè)中插入Macromedia FlashPaper文檔。這樣在閱讀器中翻開包含F(xiàn)lashPaper文檔的網(wǎng)頁(yè)時(shí)，用戶就可閱讀FlashPaper文檔中的一切頁(yè)面，而無(wú)須加載新的網(wǎng)頁(yè)。用戶也可以搜索、打印和縮放該文檔。 詳細(xì)操作步驟請(qǐng)教師參照書中步驟進(jìn)展講解。 6.插入Flash視頻 插入Flash視頻也是目前網(wǎng)頁(yè)制造中常用的方法。用Dreamweaver 8可以輕松地在網(wǎng)頁(yè)中插入Flash視頻內(nèi)容，這是Dreamweaver 8新增的功能。 詳細(xì)操作步驟

6、請(qǐng)教師參照書中步驟進(jìn)展講解。 7.設(shè)置Flash背景透明 有時(shí)為了提高網(wǎng)頁(yè)視覺效果，可在表格的單元格中插入背景圖像，然后再在該單元格中插入Flash影片，這時(shí)需求將Flash影片設(shè)置為背景透明，否那么就看不見下面的背景圖像。 詳細(xì)操作步驟請(qǐng)教師參照書中步驟進(jìn)展講解。 6.1.2 典型案例為網(wǎng)頁(yè)添加 Flash元素 案例目的本案例將在“天府美食網(wǎng)頁(yè)中插入一些Flash動(dòng)畫，主要練習(xí)插入Flash動(dòng)畫、Flash按鈕和Flash文本的操作，最終效果如圖6.17所示。素材位置：【第6課素材6.1.2】效果圖位置：【第6課源文件6.1.2index1.html】 6.1.2 典型案例為網(wǎng)頁(yè)添加 Fla

7、sh元素 操作思緒1插入Flash文本。2插入4個(gè)Flash按鈕用來(lái)制造導(dǎo)航條。3插入一個(gè)Flash動(dòng)畫文件。 6.1.2 典型案例為網(wǎng)頁(yè)添加 Flash元素 操作步驟詳細(xì)操作步驟請(qǐng)教師參照軟件和書中內(nèi)容進(jìn)展講解。 6.1.2 典型案例為網(wǎng)頁(yè)添加 Flash元素 案例小結(jié)本案例是在一個(gè)已有的框架網(wǎng)頁(yè)中插入Flash媒體文件，在制造時(shí)主要是為這個(gè)網(wǎng)頁(yè)添加Flash文本、Flash按鈕和Flash動(dòng)畫文件，使整個(gè)頁(yè)面看起更加生動(dòng)、協(xié)調(diào)。6.2 插入其他媒體元素 在Dreamweaver 8中除了可以插入Flash媒體元素外還可添加其他媒體元素，如Shockwave影片、Java Applet及背景

8、音樂(lè)等。 6.2 插入其他媒體元素 6.2.1 知識(shí)講解6.2.2 典型案例在“天府美食網(wǎng)頁(yè)插入插件 6.2.1 知識(shí)講解下面講解在Dreamweaver 8中插入Shockwave影片、Java Applet以及背景音樂(lè)的方法。 6.2.1 知識(shí)講解1.插入Shockwave影片 2.插入Java Applet 3.插入背景音樂(lè)4.插入插件 1.插入Shockwave影片 Shockwave影片具有文件小、下載速度快、被目前主流的閱讀器所支持等優(yōu)點(diǎn)，所以被廣泛運(yùn)用于網(wǎng)頁(yè)制造中，它是運(yùn)用Macromedia Director制造的多媒體影片文件。詳細(xì)操作請(qǐng)教師參照軟件和書中內(nèi)容進(jìn)展講解 。2.

9、插入Java Applet Java Applet是Java的運(yùn)用程序，是一種動(dòng)態(tài)、平安、跨平臺(tái)的網(wǎng)絡(luò)運(yùn)用程序。它能在網(wǎng)頁(yè)中實(shí)現(xiàn)一些特殊效果，如下雪、水紋、下雨等。Java Applet常被嵌入到HTML言語(yǔ)中，可以實(shí)現(xiàn)較為復(fù)雜的控制和各種動(dòng)態(tài)效果。詳細(xì)操作請(qǐng)教師參照軟件和書中內(nèi)容進(jìn)展講解 。3.插入背景音樂(lè)在Dreamweaver 8中，可以為網(wǎng)頁(yè)添加背景音樂(lè)，背景音樂(lè)是在網(wǎng)頁(yè)后臺(tái)播放的音樂(lè)，在制造時(shí)可以采用在源代碼中添加代碼的方法來(lái)添加背景音樂(lè) 。詳細(xì)操作請(qǐng)教師參照軟件和書中內(nèi)容進(jìn)展講解 。4.插入插件 假設(shè)想在閱讀器中訪問(wèn)更多類型的媒體對(duì)象，就必需借助插件。利用插件功能可以在網(wǎng)頁(yè)中插入各

10、種類型的媒體元素，插件包括的范圍很廣，如視頻文件、音樂(lè)文件、動(dòng)畫文件等。前面引見的Shockwave影片就是插件中的一員。 詳細(xì)操作請(qǐng)教師參照軟件和書中內(nèi)容進(jìn)展講解 。 6.2.2 典型案例在“天府美食網(wǎng)頁(yè)插入插件 案例目的本案例將在“天府美食網(wǎng)頁(yè)插入一個(gè)插件，使網(wǎng)頁(yè)內(nèi)容更加豐富，主要練習(xí)插入插件的操作，其效果如圖6.28所示的右下角部分內(nèi)容。素材位置：【第6課素材6.1.2】效果圖位置：【第6課源文件6.1.2index2.html】 6.2.2 典型案例在“天府美食網(wǎng)頁(yè)插入插件 操作思緒1插入插件。2設(shè)置插件屬性。 6.2.2 典型案例在“天府美食網(wǎng)頁(yè)插入插件 操作步驟 詳細(xì)操作步驟討教參

11、照軟件和書中內(nèi)容進(jìn)展講解。 6.2.2 典型案例在“天府美食網(wǎng)頁(yè)插入插件 案例小結(jié) 本案例在“天府美食網(wǎng)頁(yè)中插入一個(gè)插件，使網(wǎng)頁(yè)的內(nèi)容更具欣賞性，在制造過(guò)程中主要練習(xí)了插入插件以及設(shè)置插件的屬性等操作。制造本案例主要是為了讓讀者靈敏掌握插入插件的方法，從而穩(wěn)定在網(wǎng)頁(yè)制造過(guò)程中插入其他媒體元素的方法。 6.3 上機(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í)將制造一個(gè)網(wǎng)上購(gòu)物的網(wǎng)頁(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í)將在網(wǎng)