（中職）網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目四 編輯網(wǎng)頁(yè)圖像 任務(wù)三 插入圖像對(duì)象電子教案

1、（中職）網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目四 編輯網(wǎng)頁(yè)圖像 任務(wù)三 插入圖像對(duì)象電子教案（中職）網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目四 編輯網(wǎng)頁(yè)圖像 任務(wù)三 插入圖像對(duì)象電子教案（中職）網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目四 編輯網(wǎng)頁(yè)圖像 任務(wù)三 插入圖像對(duì)象電子教案任務(wù)三 插入圖像對(duì)象活動(dòng)一 插入圖像占位符課程：網(wǎng)頁(yè)設(shè)計(jì)與制作課題: 插入圖像占位符教材分析與處理：本項(xiàng)目在前導(dǎo)創(chuàng)建規(guī)劃站點(diǎn)和設(shè)置網(wǎng)頁(yè)文本格式的基礎(chǔ)上，通過(guò)在網(wǎng)頁(yè)中添加圖像，美化網(wǎng)頁(yè)，更充分地想網(wǎng)頁(yè)瀏覽者傳達(dá)電子商務(wù)營(yíng)銷理念。本次任務(wù)以案例教學(xué)學(xué)生跟練的方式，使學(xué)生理解在網(wǎng)頁(yè)中插入圖像占位符的方法，為學(xué)生自己動(dòng)手設(shè)計(jì)、制作網(wǎng)頁(yè)打下基礎(chǔ)。教學(xué)目標(biāo)知識(shí)與技能目標(biāo)：了解圖像占位符。掌握在

2、Dreamweaver中插入圖像占位符的方法。過(guò)程與方法目標(biāo)：通過(guò)案例展示，學(xué)生動(dòng)手掌握在網(wǎng)頁(yè)中插入圖像占位符的方法。情感態(tài)度與價(jià)值觀：培養(yǎng)學(xué)生善于發(fā)現(xiàn)、勤于動(dòng)腦、樂(lè)于動(dòng)手的學(xué)習(xí)習(xí)慣；激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)與制作的興趣；3、培養(yǎng)學(xué)生的歸納總結(jié)能力。課時(shí)：1課時(shí)教學(xué)重點(diǎn)：了解圖像占位符教學(xué)難點(diǎn)：掌握在Dreamweaver中插入圖像占位符的方法教學(xué)過(guò)程：教學(xué)程序教學(xué)內(nèi)容要點(diǎn)1、導(dǎo)入張精彩的網(wǎng)頁(yè)往往需要很多精致的圖像，但在圖像沒(méi)有設(shè)計(jì)完成前，能不能先進(jìn)行網(wǎng)頁(yè)的布局設(shè)計(jì)呢？現(xiàn)在很多網(wǎng)頁(yè)中有精彩的用戶交互功能，Dreamweaver中有沒(méi)有呢？2、新課講授知識(shí)鏈接一、圖像占位符圖像占位符是在準(zhǔn)備好將最終

3、圖形添加到網(wǎng)頁(yè)之前使用的圖形。您可以設(shè)置占位符的大小和顏色，并為占位符提供文本標(biāo)簽。圖像占位符不在瀏覽器中顯示圖像。在您發(fā)布站點(diǎn)之前，應(yīng)該用適用于 Web 的圖像文件（例如 GIF 或 JPEG）替換所有添加的圖像占位符。必備知識(shí)一、插入圖像占位符二、替換圖像占位符3、學(xué)做合一實(shí)踐任務(wù)實(shí)例網(wǎng)頁(yè)在【教學(xué)資源包】【配套資源】【4.3.1】文件夾中。【活動(dòng)實(shí)施】用Dreamweaver打開網(wǎng)頁(yè)index1.html【思考】網(wǎng)頁(yè)設(shè)計(jì)中除了文字和圖像，還有很多其他元素，比如音樂(lè)，動(dòng)畫，視頻等，在相關(guān)素材沒(méi)有設(shè)計(jì)完成情況情況下，如何在頁(yè)面上進(jìn)行體現(xiàn)？【練一練】請(qǐng)打開【教學(xué)資源包】【配套資源】【4.3.1】

4、文件夾中網(wǎng)頁(yè)index完成1.html，在“【7】”位置需要放入一個(gè)flash動(dòng)畫，該動(dòng)畫預(yù)計(jì)大小為寬451像素、高502像素，請(qǐng)?jiān)谶@個(gè)位置插入一個(gè)圖像占位符，以便直觀查看網(wǎng)頁(yè)效果。4、課堂小結(jié)教師回顧本節(jié)知識(shí)點(diǎn)總結(jié)操作中出現(xiàn)的問(wèn)題教學(xué)反思：活動(dòng)二 插入鼠標(biāo)經(jīng)過(guò)圖像課程：網(wǎng)頁(yè)設(shè)計(jì)與制作課題: 插入鼠標(biāo)經(jīng)過(guò)圖像教材分析與處理：本項(xiàng)目在前導(dǎo)創(chuàng)建規(guī)劃站點(diǎn)和設(shè)置網(wǎng)頁(yè)文本格式的基礎(chǔ)上，通過(guò)在網(wǎng)頁(yè)中添加圖像，美化網(wǎng)頁(yè)，更充分地想網(wǎng)頁(yè)瀏覽者傳達(dá)電子商務(wù)營(yíng)銷理念。本次任務(wù)以案例教學(xué)學(xué)生跟練的方式，使學(xué)生理解在網(wǎng)頁(yè)中插入鼠標(biāo)經(jīng)過(guò)圖像的方法，為學(xué)生自己動(dòng)手設(shè)計(jì)、制作網(wǎng)頁(yè)打下基礎(chǔ)。教學(xué)目標(biāo)知識(shí)與技能目標(biāo)：了解鼠標(biāo)經(jīng)

5、過(guò)圖像。掌握在Dreamweaver中插入鼠標(biāo)經(jīng)過(guò)圖像的方法。過(guò)程與方法目標(biāo)：通過(guò)案例展示，學(xué)生動(dòng)手掌握在網(wǎng)頁(yè)中插入鼠標(biāo)經(jīng)過(guò)圖像的方法。情感態(tài)度與價(jià)值觀：培養(yǎng)學(xué)生善于發(fā)現(xiàn)、勤于動(dòng)腦、樂(lè)于動(dòng)手的學(xué)習(xí)習(xí)慣；激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)與制作的興趣；3、培養(yǎng)學(xué)生的歸納總結(jié)能力。課時(shí)：1課時(shí)教學(xué)重點(diǎn)：了解鼠標(biāo)經(jīng)過(guò)圖像教學(xué)難點(diǎn)：掌握在Dreamweaver中插入鼠標(biāo)經(jīng)過(guò)圖像的方法教學(xué)過(guò)程：教學(xué)程序教學(xué)內(nèi)容要點(diǎn)1、導(dǎo)入張精彩的網(wǎng)頁(yè)往往需要很多精致的圖像，但在圖像沒(méi)有設(shè)計(jì)完成前，能不能先進(jìn)行網(wǎng)頁(yè)的布局設(shè)計(jì)呢？現(xiàn)在很多網(wǎng)頁(yè)中有精彩的用戶交互功能，Dreamweaver中有沒(méi)有呢？2、新課講授知識(shí)鏈接一、鼠標(biāo)經(jīng)過(guò)圖像您

6、可以在頁(yè)面中插入鼠標(biāo)經(jīng)過(guò)圖像。鼠標(biāo)經(jīng)過(guò)圖像是一種在瀏覽器中查看并使用鼠標(biāo)指針移過(guò)它時(shí)發(fā)生變化的圖像。必須用以下兩個(gè)圖像來(lái)創(chuàng)建鼠標(biāo)經(jīng)過(guò)圖像：主圖像（首次加載頁(yè)面時(shí)顯示的圖像）和次圖像（鼠標(biāo)指針移過(guò)主圖像時(shí)顯示的圖像）。鼠標(biāo)經(jīng)過(guò)圖像中的這兩個(gè)圖像應(yīng)大小相等；如果這兩個(gè)圖像大小不同，Dreamweaver 將調(diào)整第二個(gè)圖像的大小以與第一個(gè)圖像的屬性匹配。鼠標(biāo)經(jīng)過(guò)圖像自動(dòng)設(shè)置為響應(yīng)onMouseOver事件。您可以將圖像設(shè)置為響應(yīng)不同的事件（例如，鼠標(biāo)單擊）或更改鼠標(biāo)經(jīng)過(guò)圖像。二、在 Dreamweaver 文檔中插入 Fireworks HTML 代碼在 Fireworks 中，可以使用“導(dǎo)出”命令

7、將優(yōu)化后的圖像和 HTML 文件導(dǎo)出并保存到 Dreamweaver 站點(diǎn)文件夾下的某個(gè)位置。然后，可以在 Dreamweaver 中插入該文件。Dreamweaver 允許您將 Fireworks 生成的 HTML 代碼連同相關(guān)圖像、切片和 JavaScript 一起插入到文檔中。具體操作如下。必備知識(shí)一、創(chuàng)建鼠標(biāo)經(jīng)過(guò)圖像3、學(xué)做合一實(shí)踐任務(wù)實(shí)例網(wǎng)頁(yè)在【教學(xué)資源包】【配套資源】【4.3.2】文件夾中?！净顒?dòng)實(shí)施】用Dreamweaver打開網(wǎng)頁(yè)“index完成2.html”【思考】在插入鼠標(biāo)經(jīng)過(guò)圖像對(duì)話框中，如果原始圖像和圖標(biāo)經(jīng)過(guò)圖像大小不一樣大，會(huì)產(chǎn)生什么效果？【練一練】同樣方法設(shè)置上面實(shí)例文件中其他5個(gè)菜單效果，具體參數(shù)，“蔬果品種”：原始圖像“images024.png”、鼠標(biāo)經(jīng)過(guò)圖像“images025.png”、替換文本“蔬果品種”。 “價(jià)格行情”：原始圖像“images026.png”、鼠標(biāo)經(jīng)過(guò)圖像“images027.png”、替換文本“價(jià)格行情”。 “有機(jī)蔬果”：原始圖像“images028.png”、鼠標(biāo)經(jīng)過(guò)圖像“images029.png”、替換文本“有機(jī)蔬果”。 “禮盒套餐”：原始圖像“images030.png”、鼠標(biāo)經(jīng)過(guò)圖像“images031.png”、替換文本“禮盒套餐”。 “行情資訊”：原