職業(yè)教育“十三五”數(shù)字媒體應(yīng)用人才培養(yǎng)系列教材Dreamweaver網(wǎng)頁設(shè)計與應(yīng)用60個專業(yè)案例362個案例素材及源文件92個微課視頻DreamweaverCC2019微課版教師專項服務(wù)項目3圖像和多媒體項目引入：圖像和多媒體是網(wǎng)頁中的重要元

素，在網(wǎng)頁中的應(yīng)用非常廣泛。本項

目主要講解圖像和多媒體在網(wǎng)頁中的

應(yīng)用方法和技巧，通過對這些內(nèi)容的

學(xué)習(xí)，學(xué)生可以設(shè)計、制作出更加美觀、生動、豐富且具有動感和吸引力

的網(wǎng)頁

。

掌握在網(wǎng)頁中插入和編輯圖像的方法◆

掌握多媒體在網(wǎng)頁中的應(yīng)用方法和技巧項目目標(biāo)

掌握“環(huán)球旅游網(wǎng)頁”的關(guān)鍵制作步驟

掌握“物流運(yùn)輸網(wǎng)頁”的關(guān)鍵制作步驟技能目標(biāo)◆

培養(yǎng)解決實際問題的能力培養(yǎng)團(tuán)隊協(xié)作意識和技能，提升與他人合作的能力素養(yǎng)目標(biāo)◆

網(wǎng)頁中的圖像格式◆在網(wǎng)頁中插入圖像◆

設(shè)置圖像屬性◆

給圖像添加文字說明

跟蹤圖像◆

任務(wù)實踐—環(huán)球旅游網(wǎng)頁任務(wù)3.1

圖像的基本操作網(wǎng)頁中常用的圖像格式有JPEG、GIF、PNG

這3種，但大多數(shù)瀏覽器只支持JPEG和GIF兩種圖像格式。為了保證網(wǎng)頁的加載速度，網(wǎng)站

設(shè)計者常使用JPEG和GIF這兩種壓縮格式的圖像。3.1.1

網(wǎng)頁中的圖像格式要在DreamweaverCC2019文檔中插入的圖像必須位于當(dāng)前站點文件夾內(nèi)或遠(yuǎn)程站點文件夾內(nèi)，否則圖像不能正確顯示。所以在建立站點

時，網(wǎng)站設(shè)計者通常會創(chuàng)建一個名為“images”的文件夾，并將需要的圖

像復(fù)制到其中。3.1.2

在網(wǎng)頁中插入圖像網(wǎng)絡(luò)相對于：文檔文件名(N):imgjpg站點根目錄“選擇圖像源文件”對話框圖像文件(-gif*jpg:*jpeg:".p∨確定

取消imgjpg屬性三正像，135K

ID地圖(M)?口

t

oSrc

image/img.jpg鏈接(L)目標(biāo)(R)原始日臼無編輯品

女寬(W)

500高(H)

333pxpx替換(T)標(biāo)題(E)②插入圖像后，“屬性”面板中會顯示該圖像的屬性。3.1.3

設(shè)置圖像屬性插入圖像后的“屬性”面板當(dāng)圖像不能在瀏覽器中正常顯示時，網(wǎng)頁中圖像的位置就變成空白區(qū)域。為了讓瀏覽者在圖像不能正常顯示時也能了解圖像的信息，常為網(wǎng)

頁的圖像設(shè)置“替換”屬性，將圖像的說明文字輸入“替換”文本框中。寬

(

W

)142高

(

H

)95px∨

Px6、替換(T)寵物狗血統(tǒng)介紹3.1.4

給圖像添加文字說明“屬性”面板

效果圖在工程設(shè)計過程中，一般先在圖像處理軟件中勾畫出工程藍(lán)圖，然后在此基礎(chǔ)上反復(fù)修改，最終得到一幅完美的設(shè)計圖。制作網(wǎng)頁時也應(yīng)

采用工程設(shè)計的方法，先在圖像處理軟件中繪制網(wǎng)頁的藍(lán)圖，將其添加

到網(wǎng)頁的背景中，按設(shè)計方案對號入座，等網(wǎng)頁制作完畢后，再將藍(lán)圖

刪除。DreamweaverCC2019利用“跟蹤圖像”功能來實現(xiàn)上述網(wǎng)頁設(shè)計方

式。picD1jpg②50%(RGB/8)垂直導(dǎo)航條區(qū)域

用戶登錄區(qū)域搜索+推薦欄廣告條區(qū)域廣告切換圖51

5w

0產(chǎn)品分類介紹2

550%文檔：2.25M/2.09M3.1.5

跟蹤圖像LOGO世界那大帶你去看看30.

40

.509因為有夢

·

所以勇敢出發(fā)

·使用“Image

”按鈕插入圖像，使用“CSS設(shè)計器”面板控制圖像的水平邊距。任務(wù)實踐—環(huán)球旅游網(wǎng)頁效果圖插

入Flash動

畫◆

插入FLV文件◆插入Animate作品◆

插

入HTML5

Video◆

插入音頻

插入插件◆

任務(wù)實踐—物流運(yùn)輸網(wǎng)頁任務(wù)3.2

多媒體在網(wǎng)頁中的應(yīng)用Dreamweaver

CC

2019

提供了在文檔中插入Flash動畫的功能，雖然Flash中使用的文件類型有Flash源文件(擴(kuò)展名為“.fla”)、FlashSWF文

件(擴(kuò)展名為“.swf”

)、Flash模板文件(擴(kuò)展名為“.swt”

),

但

DreamweaverCC2019只支持FlashSWF文件(擴(kuò)展名為“.swf”),

因為它是

Flash

源文件(擴(kuò)展名為“.fla”)

的壓縮版本，已進(jìn)行了優(yōu)化，便于在網(wǎng)

絡(luò)上查看。3.2.1

插

入Flash動

畫FLV

全稱FlashVideo。在網(wǎng)頁中可以輕松添加FLV文件，而無須使用Flash創(chuàng)作工具。但在操作之前必須有一個經(jīng)過編碼的FLV文件。使用

Dreamweaver插入一個顯示FLV文件的SWF(ShockWave

Flash)

組件，當(dāng)在

瀏覽器中查看時，此組件會顯示所選的FLV文件以及一組播放控件。3.2.2

插入FLV文件Animate是Adobe公司出品的用于制作HTML5動畫的可視化工具。使用該軟件可以在網(wǎng)頁中輕而易舉地插入動畫效果，而不需要編寫煩瑣

復(fù)雜的代碼。3.2.3插入Animate作品使用DreamweaverCC2019

可以在網(wǎng)頁中插入HTML5Video。HTML5

Video元素提供了一種將視頻嵌入網(wǎng)頁中的標(biāo)準(zhǔn)方式。屬性

視頻ID[Class

nonewH像素像素源PosterFJ.mp4產(chǎn)我

□Title回退文本Controls□

Loop□AutoPlayPreload□

MutednoneAIt源1

AlIt源2十

□

出Flash回退十

□index.html*X日body

video搜索"Ch03°

pFJ.mp4C.ogg:"mp4:"m4v:"webr確定取消3.2.4

插

入HTML5

Video選擇視頻個

基礎(chǔ)素材

Ch03組

織

新建文件夾★快速訪間OneDrive口此電腦Elements

(F)網(wǎng)

絡(luò)寵物狗網(wǎng)店站點模目錄image相對于：文檔“屬性”面板文件名(N):FJ.mp41.插入背景音樂HTML提供了背景音樂標(biāo)簽<bgsound></

bgsound>

,

使用該標(biāo)簽可以為網(wǎng)頁添加背景音樂。2.

插入音樂插入音樂和插入背景音樂的效果不同，插入音樂后可以在頁面中看到播放器的外觀，如播放、暫停、定位和音量等按鈕。3.

嵌入音樂上面介紹了背景音樂及音樂的插入，下面來講解如何嵌入音樂。嵌入音樂和插入音樂相同，只不過嵌入音樂播放器要比插入音樂播放器多

幾個按鈕。3.2.5

插入音頻利用“插件”按鈕，可以在網(wǎng)頁中插入AIV、MPG、MOV、MP4

等格式的視頻文件，也可以插入音頻文件。在網(wǎng)頁中插入插件的方與嵌入音樂的方法一樣，具體操作步驟如下。(1)在文檔窗口的“設(shè)計”視圖中，將光標(biāo)置于想要插入插件的位

置。(2)通過以下幾種方法啟用“插件”命令。①在“插入”面板“HTML”選項卡中單擊“插件”按鈕。②選擇“插入>

HTML>

插件”命令。3.2.6

插入插件使

用“Flash

SWF”按鈕在網(wǎng)頁中插入Flash動畫效果，使用“屬性”面板設(shè)置動畫背景透明。任務(wù)實踐一物流運(yùn)輸網(wǎng)頁效果圖使

用“Image”按鈕插入圖像。0