活動一插入圖像課程：網頁設計與制作課題:插入圖像教材分析與處理：本項目在前導創(chuàng)建規(guī)劃站點和設置網頁文本格式的基礎上，通過在網頁中添加圖像，美化網頁，更充分地想網頁瀏覽者傳達電子商務營銷理念。本次任務以案例教學學生跟練的方式，使學生理解在網頁中插入圖像的方法，為學生自己動手設計、制作網頁打下基礎。教學目標知識與技能目標：了解網頁常見圖像格式。掌握在網頁中插入圖像的方法過程與方法目標：通過案例展示，學生動手掌握在網頁中插入圖像的方法。情感態(tài)度與價值觀：培養(yǎng)學生善于發(fā)現、勤于動腦、樂于動手的學習習慣；激發(fā)學生學習網頁設計與制作的興趣；3、培養(yǎng)學生的歸納總結能力。課時：1課時教學重點：常用網頁圖像教學難點：在網頁中插入圖像教學過程：教學程序教學內容要點1、導入必備知識：常用網頁圖像常用圖像處理軟件2、新課講授一、在網頁中插入圖像的常用方法：二、插入圖像過程中要注意的幾個注意點：三、更改現有編輯器首選參數3、學做合一實踐任務實例網頁在【教學資源包】【配套資源】【4.1.1】文件夾中?！净顒訉嵤坑肈reamweaver打開網頁文件default2.html【思考】從案例中，我們學會了在網頁中插入圖像，那么當我們圖像插入錯誤時，應該如何清楚這張圖像呢？【練一練】請打開在【教學資源包】【配套資源】【4.1.1】文件夾中default1.html文件，按照目標樣稿，完成導航菜單圖像的插入。4、課堂小結教師回顧本節(jié)知識點總結操作中出現的問題教學反思：

任務二設置圖像屬性活動一設置圖像屬性課程：網頁設計與制作課題:設置圖像屬性教材分析與處理：本項目在前導創(chuàng)建規(guī)劃站點和設置網頁文本格式的基礎上，通過在網頁中添加圖像，美化網頁，更充分地想網頁瀏覽者傳達電子商務營銷理念。本次任務以案例教學學生跟練的方式，使學生理解在網頁中設置圖像屬性的方法，為學生自己動手設計、制作網頁打下基礎。教學目標知識與技能目標：了解圖像屬性面板。掌握修改圖像屬性的方法過程與方法目標：通過案例展示，學生動手掌握在網頁中設置圖像屬性的方法。情感態(tài)度與價值觀：培養(yǎng)學生善于發(fā)現、勤于動腦、樂于動手的學習習慣；激發(fā)學生學習網頁設計與制作的興趣；3、培養(yǎng)學生的歸納總結能力。課時：1課時教學重點：解圖像屬性面板教學難點：掌握修改圖像屬性的方法教學過程：教學程序教學內容要點1、導入知識鏈接一、圖像屬性2、新課講授必備知識一、以可視方式調整元素的大小二、將圖像回復到原始大小三、對已調整大小的圖像進行重新取樣3、學做合一實踐任務實例網頁在【教學資源包】【配套資源】【4.2.1】文件夾中。【活動實施】用Dreamweaver打開網頁index.html【思考】圖像大小的調整，如果不在Dreamweaver中調整，又可以用哪些工具調整圖像大小，怎么操作？【練一練】在以上制作完成的網頁基礎上繼續(xù)練級1、通過可視化調節(jié)的方式調整第一張圖大小為寬100高100。2、通過屬性面板設置第二張圖大小為寬200高200。3、設置第三張圖鏈接為“/”。4、課堂小結教師回顧本節(jié)知識點總結操作中出現的問題教學反思：活動二編輯圖像課程：網頁設計與制作課題:編輯圖像教材分析與處理：本項目在前導創(chuàng)建規(guī)劃站點和設置網頁文本格式的基礎上，通過在網頁中添加圖像，美化網頁，更充分地想網頁瀏覽者傳達電子商務營銷理念。本次任務以案例教學學生跟練的方式，使學生理解在網頁中編輯圖像的方法，為學生自己動手設計、制作網頁打下基礎。教學目標知識與技能目標：了解Dreamweaver中提供的基本圖像編輯功能。掌握在Dreamweaver中編輯圖像的方法。過程與方法目標：通過案例展示，學生動手掌握在網頁中編輯圖像的方法。情感態(tài)度與價值觀：培養(yǎng)學生善于發(fā)現、勤于動腦、樂于動手的學習習慣；激發(fā)學生學習網頁設計與制作的興趣；3、培養(yǎng)學生的歸納總結能力。課時：1課時教學重點：Dreamweaver中提供的基本圖像編輯功能教學難點：掌握在Dreamweaver中編輯圖像的方法教學過程：教學程序教學內容要點1、導入Dreamweaver中提供了基本的圖像編輯功能，使我們無需使用外部圖像編輯應用程序（例如Fireworks或Photoshop）即可修改圖像。選擇菜單【修改】|【圖像】。設置以下任一Dreamweaver圖像編輯功能，注意:Dreamweaver圖像編輯功能僅適用于JPEG、GIF和PNG圖像文件格式。其它位圖圖像文件格式不能使用這些圖像編輯功能進行編輯。2、新課講授必備知識1、重新取樣2、裁剪圖像3、優(yōu)化圖像4、銳化圖像5、調整圖像的亮度和對比度3、學做合一實踐任務實例網頁在【教學資源包】【配套資源】【4.2.2】文件夾中?！净顒訉嵤坑肈reamweaver打開網頁index3.html【思考】如何設置Dreamweaver，使單擊圖像屬性面板上的【編輯】按鈕時，自動調用photoshop來編輯圖像？【練一練】繼續(xù)采用上面完成裁剪效果后的網頁。1、調整第一張圖的【亮度和對比度】。2、【銳化】第二張圖，查看效果4、課堂小結教師回顧本節(jié)知識點總結操作中出現的問題教學反思：

任務三插入圖像對象活動一插入圖像占位符課程：網頁設計與制作課題:插入圖像占位符教材分析與處理：本項目在前導創(chuàng)建規(guī)劃站點和設置網頁文本格式的基礎上，通過在網頁中添加圖像，美化網頁，更充分地想網頁瀏覽者傳達電子商務營銷理念。本次任務以案例教學學生跟練的方式，使學生理解在網頁中插入圖像占位符的方法，為學生自己動手設計、制作網頁打下基礎。教學目標知識與技能目標：了解圖像占位符。掌握在Dreamweaver中插入圖像占位符的方法。過程與方法目標：通過案例展示，學生動手掌握在網頁中插入圖像占位符的方法。情感態(tài)度與價值觀：培養(yǎng)學生善于發(fā)現、勤于動腦、樂于動手的學習習慣；激發(fā)學生學習網頁設計與制作的興趣；3、培養(yǎng)學生的歸納總結能力。課時：1課時教學重點：了解圖像占位符教學難點：掌握在Dreamweaver中插入圖像占位符的方法教學過程：教學程序教學內容要點1、導入張精彩的網頁往往需要很多精致的圖像，但在圖像沒有設計完成前，能不能先進行網頁的布局設計呢？現在很多網頁中有精彩的用戶交互功能，Dreamweaver中有沒有呢？2、新課講授知識鏈接一、圖像占位符圖像占位符是在準備好將最終圖形添加到網頁之前使用的圖形。您可以設置占位符的大小和顏色，并為占位符提供文本標簽。圖像占位符不在瀏覽器中顯示圖像。在您發(fā)布站點之前，應該用適用于Web的圖像文件（例如GIF或JPEG）替換所有添加的圖像占位符。必備知識一、插入圖像占位符二、替換圖像占位符3、學做合一實踐任務實例網頁在【教學資源包】【配套資源】【4.3.1】文件夾中?！净顒訉嵤坑肈reamweaver打開網頁index1.html【思考】網頁設計中除了文字和圖像，還有很多其他元素，比如音樂，動畫，視頻等，在相關素材沒有設計完成情況情況下，如何在頁面上進行體現？【練一練】請打開【教學資源包】【配套資源】【4.3.1】文件夾中網頁index完成1.html，在“【7】”位置需要放入一個flash動畫，該動畫預計大小為寬451像素、高502像素，請在這個位置插入一個圖像占位符，以便直觀查看網頁效果。4、課堂小結教師回顧本節(jié)知識點總結操作中出現的問題教學反思：活動二插入鼠標經過圖像課程：網頁設計與制作課題:插入鼠標經過圖像教材分析與處理：本項目在前導創(chuàng)建規(guī)劃站點和設置網頁文本格式的基礎上，通過在網頁中添加圖像，美化網頁，更充分地想網頁瀏覽者傳達電子商務營銷理念。本次任務以案例教學學生跟練的方式，使學生理解在網頁中插入鼠標經過圖像的方法，為學生自己動手設計、制作網頁打下基礎。教學目標知識與技能目標：了解鼠標經過圖像。掌握在Dreamweaver中插入鼠標經過圖像的方法。過程與方法目標：通過案例展示，學生動手掌握在網頁中插入鼠標經過圖像的方法。情感態(tài)度與價值觀：培養(yǎng)學生善于發(fā)現、勤于動腦、樂于動手的學習習慣；激發(fā)學生學習網頁設計與制作的興趣；3、培養(yǎng)學生的歸納總結能力。課時：1課時教學重點：了解鼠標經過圖像教學難點：掌握在Dreamweaver中插入鼠標經過圖像的方法教學過程：教學程序教學內容要點1、導入張精彩的網頁往往需要很多精致的圖像，但在圖像沒有設計完成前，能不能先進行網頁的布局設計呢？現在很多網頁中有精彩的用戶交互功能，Dreamweaver中有沒有呢？2、新課講授知識鏈接一、鼠標經過圖像您可以在頁面中插入鼠標經過圖像。鼠標經過圖像

是一種在瀏覽器中查看并使用鼠標指針移過它時發(fā)生變化的圖像。必須用以下兩個圖像來創(chuàng)建鼠標經過圖像：主圖像（首次加載頁面時顯示的圖像）和次圖像（鼠標指針移過主圖像時顯示的圖像）。鼠標經過圖像中的這兩個圖像應大小相等；如果這兩個圖像大小不同，Dreamweaver將調整第二個圖像的大小以與第一個圖像的屬性匹配。鼠標經過圖像自動設置為響應

onMouseOver

事件。您可以將圖像設置為響應不同的事件（例如，鼠標單擊）或更改鼠標經過圖像。二、在Dreamweaver文檔中插入FireworksHTML代碼在Fireworks中，可以使用“導出”命令將優(yōu)化后的圖像和HTML文件導出并保存到Dreamweaver站點文件夾下的某個位置。然后，可以在Dreamweaver中插入該文件。Dreamweaver允許您將Fireworks生成的HTML代碼連同相關圖像、切片和JavaScript一起插入到文檔中。具體操作如下。必備知識一、創(chuàng)建鼠標經過圖像3、學做合一實踐任務實例網頁在【教學資源包】【配套資源】【4.3.2】文件夾中?！净顒訉嵤坑肈reamweaver打開網頁“index完成2.html”【思考】在插入鼠標經過圖像對話框中，如果原始圖像和圖標經過圖像大小不一樣大，會產生什么效果？【練一練】同樣方法設置上面實例文件中其他5個菜單效果，具體參數，“蔬果品種”：原始圖像“images\024.png”、鼠標經過圖像“images\025.png”、替換文本“蔬果品種”?！皟r格行情”：原始圖像“images\026.png”、鼠標經過圖像“images\027.png”、替換文本“價格行情”?！坝袡C蔬果”：