（中職）網(wǎng)頁設計與制作項目四 編輯網(wǎng)頁圖像 任務三 插入圖像對象電子教案

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

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

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

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

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

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

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