項目三 插入圖像和多媒體對象

Dreamweaver網(wǎng)頁設(shè)計立體化教程（微課版）（DreamweaverCC2020）項目三插入圖像和多媒體對象目錄Contents制作“佳美馨裝飾——成功案例”欄目網(wǎng)頁任務(wù)二制作“佳美馨裝飾——中式田園風(fēng)格”內(nèi)容網(wǎng)頁實訓(xùn)一制作“中國皮影——皮影鑒賞”網(wǎng)頁實訓(xùn)二制作“中國皮影——皮影的表演”網(wǎng)頁欄目頁是網(wǎng)站中某個欄目的入口頁面，通常會分隔為多個區(qū)域以顯示各個子欄目中的內(nèi)容。本任務(wù)將制作“佳美馨裝飾——成功案例”欄目頁面，該欄目頁主要用于展示案例，會插入大量的圖片，另外還會使用圖像輪播進行圖像的展示以及使用鼠標經(jīng)過圖像制作按鈕。一、任務(wù)描述（一）任務(wù)背景（1）掌握網(wǎng)頁圖像基礎(chǔ)知識。（2）掌握插入圖像以及設(shè)置圖像格式的方法。。（3）掌握創(chuàng)建鼠標經(jīng)過圖像的方法。（4）掌握創(chuàng)建圖像輪播的方法。（二）任務(wù)目標二、相關(guān)知識（一）網(wǎng)頁圖像基礎(chǔ)知識網(wǎng)頁中常用的圖像格式有GIF、JPEG和PNG。GIF為圖像交換格式，它主要采用LZW無損壓縮算法，最多只能顯示256種顏色。GIF格式主要用在菜單或圖標等簡單的圖像中。GIFPNGJPEGJPEG為聯(lián)合圖像專家組格式。該圖像格式采用有損壓縮算法，在壓縮圖像時，可能會引起圖像失真。PNG為可移植網(wǎng)絡(luò)圖像格式。該格式的圖像壓縮后不會失真，并且支持透明效果。二、相關(guān)知識（二）插入圖像在Dreamweaver中插入圖像的方法主要有以下3種。選擇圖像直接插入通過“文件”面板插入圖像通過“資源”面板插入圖像二、相關(guān)知識（三）設(shè)置圖像屬性選擇圖像后的“屬性”面板如圖所示，在其中可以對圖像的屬性進行設(shè)置。1．使用“屬性”面板設(shè)置圖像的“屬性”面板二、相關(guān)知識（三）設(shè)置圖像屬性在HTML代碼中，<img>標簽是用于插入圖像的，可以直接在“代碼”視圖中修改<img>標簽的內(nèi)容來修改圖像的屬性。2．使用<img>標簽設(shè)置二、相關(guān)知識（三）設(shè)置圖像屬性3．使用快速“屬性”檢查器設(shè)置使用快速“屬性”檢查器設(shè)置圖像屬性為圖像添加Class或ID類二、相關(guān)知識（四）創(chuàng)建鼠標經(jīng)過圖像在創(chuàng)建鼠標經(jīng)過圖像時，需要準備兩張圖像，一張主圖像用于首次加載頁面時顯示，另一張圖像是鼠標指針經(jīng)過時顯示的圖像。需注意，這兩張圖像的大小最好相同，如果大小不同，第二張圖像會自動與第一張圖像的大小相匹配，有可能會產(chǎn)生較為嚴重的變形。選擇圖像并設(shè)置參數(shù)二、相關(guān)知識（五）創(chuàng)建圖像輪播通過圖像輪播可以在同一個位置顯示多張圖像，每隔一定的時間自動切換至下一張圖像，用戶也可以手動切換至上一張或下一張圖像，單擊圖像下方的橫線也可以切換到指定的圖像，如圖所示。圖像輪播三、任務(wù)實施下面在“佳美馨裝飾——成功案例”欄目網(wǎng)頁中插入案例圖像，具體操作如下。（一）插入案例圖像定位光標插入點插入圖像并設(shè)置圖像大小插入其他案例圖像三、任務(wù)實施下面在“佳美馨裝飾——成功案例”欄目網(wǎng)頁中使用鼠標經(jīng)過圖像制作按鈕，具體操作如下。（二）使用鼠標經(jīng)過圖像制作按鈕選擇<div>標簽單擊“嵌套”按鈕三、任務(wù)實施（二）使用鼠標經(jīng)過圖像制作按鈕“插入鼠標經(jīng)過圖像”對話框設(shè)置圖像寬度和高度單擊“之后”按鈕“插入鼠標經(jīng)過圖像”對話框三、任務(wù)實施（二）使用鼠標經(jīng)過圖像制作按鈕設(shè)置圖像寬度和高度插入其他鼠標經(jīng)過圖像三、任務(wù)實施下面在“佳美馨裝飾——成功案例”網(wǎng)頁中插入案例輪播圖，具體操作如下。（三）插入案例輪播圖單擊“嵌套”按鈕修改代碼目錄Contents制作“佳美馨裝飾——成功案例”欄目網(wǎng)頁任務(wù)二制作“佳美馨裝飾——中式田園風(fēng)格”內(nèi)容網(wǎng)頁實訓(xùn)一制作“中國皮影——皮影鑒賞”網(wǎng)頁實訓(xùn)二制作“中國皮影——皮影的表演”網(wǎng)頁本任務(wù)將制作“佳美馨裝飾——中式田園風(fēng)格”頁面，該頁面用于展示中式田園風(fēng)格的裝修效果，在網(wǎng)頁中可加入視頻、音頻和動畫等多媒體元素，使網(wǎng)頁更具有動感，網(wǎng)頁效果也更加出彩。一、任務(wù)描述（一）任務(wù)背景（1）掌握在網(wǎng)頁中插入視頻的方法。（2）掌握在網(wǎng)頁中插入音頻的方法。（3）掌握在網(wǎng)頁中插入動畫的方法。（二）任務(wù)目標二、相關(guān)知識（一）插入表格將光標插入點定位到需要插入<video>標簽的位置，選擇【插入】/【HTML】/【HTML5Video】菜單命令或在“插入”面板中單擊“HTML5Video”按鈕插入<video>標簽，并生成一個標簽占位符，然后在“屬性”面板中設(shè)置視頻的路徑和其他屬性.插入<video>標簽<video>標簽“屬性”面板二、相關(guān)知識（二）插入音頻將光標插入點定位到需要插入<audio>標簽的位置，選擇【插入】/【HTML】/【HTML5Audio】菜單命令或在“插入”面板中單擊“HTML5Audio”按鈕插入<audio>標簽，并生成一個標簽占位符，然后在屬性面板中設(shè)置音頻的路徑和其他屬性。插入<audio>標簽<audio>標簽“屬性”面板二、相關(guān)知識（三）插入動畫在“插入”面板中單擊“動畫合成”按鈕，在打開的“選擇動畫合成”對話框中選擇需要插入的動畫合成文件，單擊“確定”按鈕即可插入動畫文件，在網(wǎng)頁中插入動畫合成后，會在“屬性”面板中顯示動畫合成的屬性，在其中可設(shè)置動畫合成的ID、CSS樣式、寬度和高度。插入動畫合成“動畫合成”屬性面板三、任務(wù)實施下面為“佳美馨裝飾——中式田園風(fēng)格”內(nèi)容網(wǎng)頁設(shè)置背景音樂，具體操作如下。（一）設(shè)置背景音樂插入<audio>標簽設(shè)置<audio>標簽屬性三、任務(wù)實施下面為“佳美馨裝飾——中式田園風(fēng)格”網(wǎng)頁插入并設(shè)置視頻文件，具體操作如下。（二）插入并設(shè)置視頻文件插入<video>標簽設(shè)置<video>標簽屬性三、任務(wù)實施下面為“佳美馨裝飾——中式田園風(fēng)格”網(wǎng)頁插入并設(shè)置動畫，具體操作如下。（三）插入并設(shè)置動畫“選擇動畫合成”對話框設(shè)置動畫合成屬性目錄Contents制作“佳美馨裝飾——成功案例”欄目網(wǎng)頁任務(wù)二制作“佳美馨裝飾——中式田園風(fēng)格”內(nèi)容網(wǎng)頁實訓(xùn)一制作“中國皮影——皮影鑒賞”網(wǎng)頁實訓(xùn)二制作“中國皮影——皮影的表演”網(wǎng)頁本實訓(xùn)的要求是制作“中國皮影——皮影鑒賞”網(wǎng)頁，其主體為3個按鈕，當鼠標移動到按鈕上時，會產(chǎn)生顏色變化，完成后的效果如圖所示。實訓(xùn)要求實訓(xùn)一?制作“中國皮影——皮影鑒賞”網(wǎng)頁本網(wǎng)頁的主體部分分為3個由鼠標經(jīng)過圖像制作的書簽形式的按鈕，前兩個按鈕都由一張顏色較淺的png圖像和一張顏色較深的png圖像構(gòu)成；第3個按鈕由一張顏色較淺的png圖像和一張動態(tài)gif圖像構(gòu)成。實訓(xùn)思路“中國皮影——皮影鑒賞”網(wǎng)頁效果實訓(xùn)一?制作“中國皮影——皮影鑒賞”網(wǎng)頁步驟提示要完成本實訓(xùn)，首先應(yīng)插入一個1行4列、邊框粗細為0、寬度為100%的表格，然后在第1個單元格中插入標題圖像，最后在其他3個單元格中插入鼠標經(jīng)過圖像。其步驟如圖所示。①?插入表格?②?插入圖標圖像③?插入鼠標經(jīng)過圖像目錄Contents制作“佳美馨裝飾——成功案例”欄目網(wǎng)頁任務(wù)二制作“佳美馨裝飾——中式田園風(fēng)格”內(nèi)容網(wǎng)頁實訓(xùn)一制作“中國皮影——皮影鑒賞”網(wǎng)頁實訓(xùn)二制作“中國皮影——皮影的表演”網(wǎng)頁本實訓(xùn)的要求是制作“中國皮影——皮影的表演”網(wǎng)頁，在其中將展示皮影表演的音頻和視頻，完成后的效果如圖所示。實訓(xùn)要求實訓(xùn)二?制作“中國皮影——皮影的表演”網(wǎng)頁在本網(wǎng)頁的主體部分中須插入一個HTML5音頻和一個HTML5視頻，