項(xiàng)目三 插入圖像和多媒體對象

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