網頁設計與開發(HTML5+CSS3) -教案全套 項目1-9 利用HTML5制作圖文混排頁面 -制作信息技術網站首頁_第1頁
網頁設計與開發(HTML5+CSS3) -教案全套 項目1-9 利用HTML5制作圖文混排頁面 -制作信息技術網站首頁_第2頁
網頁設計與開發(HTML5+CSS3) -教案全套 項目1-9 利用HTML5制作圖文混排頁面 -制作信息技術網站首頁_第3頁
網頁設計與開發(HTML5+CSS3) -教案全套 項目1-9 利用HTML5制作圖文混排頁面 -制作信息技術網站首頁_第4頁
網頁設計與開發(HTML5+CSS3) -教案全套 項目1-9 利用HTML5制作圖文混排頁面 -制作信息技術網站首頁_第5頁
已閱讀5頁,還剩48頁未讀 繼續免費閱讀

下載本文檔

版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領

文檔簡介

工學一體化課程教學課頁NO1課程學習任務項目一:利用HTML5制作圖文混排頁面使用學材任課教師XXX班級所屬專業XXX實施地點實施日期總課時120周課時學材處理采用一體化教學模式,以學生為主體,圍繞課程標準、以典型工作任務展開,知識點夠用、適用為原則,并配合相關教輔學習資料,同時根據學生特點自行設計的課后補充任務進行強化實踐用。在輔助知識和技能點學習時加入一些思政元素(安全、心理健康教育等內容在網頁內容中)。任務分析本任務要求要首頁,有鏈接的具體明細子網頁,新生要根據現有教輔資料學習、實踐、討論、分析后完成這個綜合任務。利用HTML5的基本結構和語法、文本控制標記、圖像標記以及超鏈接標記知識等綜合應用熟悉后就可完成“冬奧會”圖文混排頁面效果。教學目標(包含知識與技能、過程與方法、情感態度與價值觀等三個目標)知識與技能:掌握HTML基本結構標簽用法,能夠利用HTML標簽制作第一個頁面;掌握圖片標簽用法及相關屬性設置方法,能夠做出圖文混排的頁面,并完成頁面超鏈接效果,鍛煉學生網頁制作的能力;3.熟悉并掌握網頁制作流程,能夠熟練使用編程軟件編寫相關頁面代碼。過程與方法:1.通過自主探究、小組討論、與老師溝通等制作網頁相關模塊,培養學生協作解決問題的能力和主動性以及與人交流合作的能力;2.通過教師對“冬奧會”網頁作品的點評與反饋,理解網頁設計要點,培養學生總結歸納能力。情感態度與價值觀:1.通過制作的網頁內容,引導學生關注社會熱點,培養積極正能量的良好品質。2.在制作網頁的過程中,培養學生探索、創新、實踐、協作的職業素養。3.通過學習編寫代碼,培養學生的信息素養和邏輯思維能力。4.通過繼續完善“冬奧會”網頁作品,培養學生精益求精的職業素養。教學重點教學難點重點及突出策略:教學重點:HTML5語法、HTML5標記及其屬性、文本控制標記。措施:通過教師引導、學生上機操作加強學習和補充案例進行鞏固。難點及解決方法:教學難點:HTML5標記及屬性、圖像標記、超鏈接標記。措施:通過教師臺上演示與講解、學生上機操作加強學習和補充案例進行鞏固。教學方法項目教學,小組討論,一體化教學教學條件準備計算機、VSCode軟件、教學PPT、工作頁教學組織(簡述并備注每一流程所需課時)一、明確任務教師給定任務,引導學生思考,明確任務要求(0.5課時)二、制定工作計劃(2課時)分析任務后確定以下工作計劃教師引導學習,學生完成項目所需知識點和技能點的學習;按任務要求,制定工作計劃三、計劃實施(4課時)能正確使用所需HTML5標記,并按各模塊效果圖進行代碼編寫,并實現效果。四、檢查驗收(0.5課時)檢查任務完成情況,正確填寫檢查報告五、總結反思與評價(1課時)撰寫項目總結,隨機抽取一個小組,向全班展示作品,并進行分析總結,能就本次任務中出現的問題提出改進措施;小組互評,組內互評,教師點評總結。教學反思教學實施(次頁)教學環節教學內容學生活動教師活動評價點資源用時一明確工作任務工作任務的閱讀與分析;明確工時、工作內容和人員分組;接收任務并進行閱讀分析;根據任務要求進行人員分工;3、與小組成員討論網頁中所需效果等要求;1、發放任務并說明要求;2、指導各小組進行任務分工;3、察看、記錄學生小組討論情況及所存問題;4、引導學生討論所存實際問題(分工明確性)5.檢查學生填寫工作頁的正確性1、是否明確任務、工時;2、小組任務分工是否合理;3、對任務理解、表達是否到位;4、工作頁完成是否到位;5、小組積極性。工作任務0.5課時二制定工作計劃HTML5基本語法、文本控制標記、圖像標記的應用方法制作圖文混排的方法、步驟及注意事項認識并選擇合適的軟件及標簽工作計劃的制定查閱教輔學習HTML5基本語法、文本控制標記、圖像標記的應用案例分析效果圖,劃分模塊結構學習跟效果圖各模塊有關設計制作方法討論編寫代碼步驟制定設計計劃1.巡查、記錄學生查閱教輔自主學習情況,并給以必要的引導;組織學生討論,解決遇到的問題、確定編寫代碼的步驟3.指導學生制定工作計劃1.描述文本控制標記、圖像標記的應用方法是否準確2.能否準確描述圖文混排的關鍵技術點3.選用標記是否合理4.回答問題是否準確。5.語言表達是否規范。工作頁、計劃表、實施進度表、教輔2課時教學環節教學內容學生活動教師活動評價點資源課時三實施工作計劃制作“冬奧會”首頁頭部模塊;制作“冬奧會”首頁圖文混排模塊;制作“國風雅韻”子網頁制作“錢塘潮涌”子網頁制作“攜手同行”子網頁制作首頁和子網頁的超鏈接效果根據學習到的HTML5用法搭建各模塊框架遇到問題時小組成員互相討論網頁整體調試運行巡查、記錄學生在編寫代碼過程中遇到的問題及是否運用到位;與學生交流,討論解決實施中遇到的小組無法解決的問題;檢查學生編寫制作的各模塊是否符合效果圖標準,并給予適當引導與提示。各模塊框架是否合理;HTML5標記應用是否規范;調試解決問題的能力;小組協作解決問題的積極性。工作頁、教輔、圖片素材4課時四檢查驗收根據效果圖檢查網頁的完成效果是否存在不合理HTML5標記使用。按模塊效果逐一驗證以小組為單位先檢查與原效果對比,查找問題小組組長互查各小組制作情況,填寫驗收報告巡查、記錄1.驗收單的填寫是否正確2.驗收內容是否全面3.存在的問題工作頁(含驗收報告)0.5課時教學環節教學內容學生活動教師活動評價點資源課時五總結反思與評價個人、小組評價教師評價工作過程回顧及總結評價與分析以小組為單位,用演示文稿向全班展示、匯報制作成果。在展示的過程中,以小組為單位進行評價規范撰寫總結。1)工作的步驟、方法,2)遇到的問題,處理的辦法3)收獲及獲得的途徑。3.完成自我評價、小組評價,填寫學習任務綜合評價表引導學生進行展示匯報,并引導各小組進行點評;針對各組任務工作過程及匯報情況分別作評價;引導學生撰寫項目總結;對學生作品完成教師評價,填寫學習任務綜合評價表1.作品展示匯報是否流暢,順利;2.自評、互評評價是否客觀、公正3.完成任務的態度與時間觀念工作頁、學習任務綜合評價表1課時工學一體化課程教學課頁NO2課程網站設計與開發學習任務項目二:利用HTML5搭建網頁結構使用學材《HTML5+CSS3網站設計基礎教程》、輔助學習資料任課教師XXX班級XXX所屬專業XXX實施地點實施日期總課時周課時學材處理采用一體化教學模式,以學生為主體,圍繞課程標準、以典型工作任務展開,知識點夠用、適用為原則,并配合相關教輔學習資料,同時根據學生特點自行設計的課后補充任務進行強化實踐用。在輔助知識和技能點學習時加入一些思政元素(安全、心理健康教育等內容在網頁內容中)。任務分析明確任務要求后,查閱相關輔助學習資料,如HTML5框架新增的結構元素、分組元素、頁面交互元素、文本層次語義元素以及常用的標準屬性等內容的相關用法,確定該網頁框架所需元素,在規定時間內制作一個“青少年健康教育頁面”。HTML5中引入了很多新的標記元素和屬性,這些新增元素使文檔結構更加清晰明確,屬性則使標記的功能更加強大,掌握這些元素和屬性是正確使用HTML5構建網頁的基礎。本項目將HTML5中的新增元素:結構元素、分組元素、頁面交互元素的綜合應用,搭建出結構清晰地網頁框架。教學目標(包含知識與技能、過程與方法、情感態度與價值觀等三個目標)知識與技能:掌握列表元素的用法,能夠用列表元素制相關列表頁面內容;掌握結構元素的使用,能夠利用結構元素搭建網頁框架。理解分組元素的使用,能夠建立簡單的標題組。掌握頁面交互元素的使用,能夠實現簡單的交互效果。理解文本層次語義元素,能夠在頁面中突出所標記的文本內容。掌握全局屬性的應用,能夠使頁面元素實現相應的操作。過程與方法:1.學生通過自主探究、小組合作,培養學生協作解決問題的能力和主動性。2.通過小組之間的溝通、作品展示匯報等,鍛煉學生與人交流合作的的能力;3.通過教師引導學習,鍛煉學生自主學習能力;4.通過最后的總結點評分析,鍛煉學生分析、總結的能力。情感態度與價值觀;讓學生感受HTML5與CSS3的神奇之處;在學習制作網頁過程中,培養學生探索、創新、實踐、協作的職業素養;讓學生從網頁內容中汲取一些安全、心理健康教育的知識,達到協同育人的目的;讓學生通過項目網頁內容的無形滲透,培養學生熱愛生活的態度。教學重點教學難點重點及突出策略:教學重點:列表元素、結構元素、分組元素、頁面交互元素的綜合使用。措施:通過教師引導、學生上機操作加強學習和補充案例進行鞏固。難點及解決方法:教學難點:結構元素與頁面交互元素。措施:通過教師臺上演示、學生上機操作加強學習和補充案例進行鞏固。教學方法項目教學,小組討論,一體化教學教學條件準備計算機、VSCode軟件、教學PPT教學組織(簡述并備注每一流程所需課時)一、明確任務教師給定任務,引導學生思考,明確任務要求(0.5課時)二、制定工作計劃(3課時)分析任務后確定以下工作計劃教師引導學習,學生完成所需知識點學習;按任務要求,制定工作計劃三、計劃實施(5課時)能正確使用所需HTML5新增元素,并按各模塊效果圖進行代碼編寫,并實現效果。四、檢查驗收(0.5課時)檢查任務完成情況,正確填寫檢查報告五、總結反思與評價(1課時)以小組為單位,用演示文稿向全班展示、匯報制作成果;教師針對各組任務工作過程及匯報情況分別作評價;工作過程回顧及總結。教學反思教學實施(次頁)教學環節教學內容學生活動教師活動評價點資源用時一明確工作任務工作任務的閱讀與分析;明確工時、工作內容和人員分組;接收任務并進行閱讀分析;根據任務要求進行人員分工;3、與小組成員討論網頁中所需效果等要求;1、發放任務并說明要求;2、指導各小組進行任務分工;3、察看、記錄學生小組討論情況及所存問題;4、引導學生討論所存實際問題(分工明確性)5.檢查學生填寫工作頁的正確性1、是否明確任務、工時;2、小組任務分工是否合理;3、對任務理解、表達是否到位;4、工作頁完成是否到位;5、小組積極性。工作任務0.5課時二制定工作計劃HTML5中的新增元素:結構元素、分組元素、頁面交互元素和文本層次語義元素的應用方法學習與實踐制作頁面效互效果的方法、步驟及注意事項認識并選擇HTML5元素工作計劃的制定查閱教輔學習HTML5中的新增元素:結構元素、分組元素、頁面交互元素和文本層次語義元素的應用案例分析效果圖,劃分模塊結構學習跟效果圖各模塊有關設計制作方法討論編寫代碼步驟制定設計計劃1.巡查、記錄學生查閱教輔自主學習情況,并給以必要的引導;組織學生討論,解決遇到的問題、確定編寫代碼的步驟3.指導學生制定工作計劃1.描述文本控制標記、圖像標記的應用方法是否準確2.能否準確描述圖文混排的關鍵技術點3.選用標記是否合理4.回答問題是否準確。5.語言表達是否規范。工作頁、計劃表、實施進度表、教輔3課時教學環節教學內容學生活動教師活動評價點資源課時三實施工作計劃制作頭部模塊制作導航模塊制作頁面主要內容交互區域制作學校心理健康教育模塊制作家庭心理健康模塊根據學習到的HTML5用法搭建各模塊框架遇到問題時小組成員互相討論網頁整體調試運行巡查、記錄學生在編寫代碼過程中遇到的問題及是否運用到位;與學生交流,討論解決實施中遇到的小組無法解決的問題;檢查學生編寫制作的各模塊是否符合效果圖標準,并給予適當引導與提示。各模塊框架是否合理;HTML5標記應用是否規范;調試解決問題的能力;小組協作解決問題的積極性。工作頁、教輔、圖片素材5課時四檢查驗收根據效果圖檢查網頁的完成效果是否存在不合理HTML5標記使用。按模塊效果逐一驗證以小組為單位先檢查與原效果對比,查找問題小組組長互查各小組制作情況,填寫驗收報告巡查、記錄1.驗收單的填寫是否正確2.驗收內容是否全面3.存在的問題工作頁(含驗收報告)0.5課時教學環節教學內容學生活動教師活動評價點資源課時五總結反思與評價個人、小組評價教師評價工作過程回顧及總結評價與分析以小組為單位,用演示文稿向全班展示、匯報制作成果。在展示的過程中,以小組為單位進行評價規范撰寫總結。1)工作的步驟、方法,2)遇到的問題,處理的辦法3)收獲及獲得的途徑。3.完成自我評價、小組評價,填寫學習任務綜合評價表引導學生進行展示匯報,并引導各小組進行點評;針對各組任務工作過程及匯報情況分別作評價;引導學生撰寫項目總結;對學生作品完成教師評價,填寫學習任務綜合評價表1.作品展示匯報是否流暢,順利;2.自評、互評評價是否客觀、公正3.完成任務的態度與時間觀念工作頁、學習任務綜合評價表1課時工學一體化課程教學課頁NO3課程學習任務項目三利用CSS3美化網頁文本使用學材任課教師班級所屬專業實施地點實施日期總課時周課時學材處理采用一體化教學模式,以學生為主體,圍繞課程標準、以典型工作任務展開,知識點夠用、適用為原則,并配合相關教輔學習資料,同時根據學生特點自行設計的課后補充任務進行強化實踐用。在輔助知識和技能點學習時加入一些思政元素(安全、心理健康教育等內容在網頁內容中)。任務分析本項目主要利用HTML搭建網頁基本框架,利用CSS樣式相關字體屬性美化網頁文字內容,完成一個具有圖文混排效果的“反詐小課堂”頁面。先根據教輔資料學習CSS相關知識和技能點的應用,根據項目效果圖搭建框架,然后根據效果圖編寫頁面內容,選擇合適的CSS相關樣式代碼,本項目重點是要熟練并綜合運用CSS選擇器、CSS樣式等。教學目標(包含知識與技能、過程與方法、情感態度與價值觀等三個目標)知識與技能:掌握CSS基礎選擇器,能夠運用CSS選擇器定義標記樣式。;熟悉CSS文本樣式屬性,能夠運用相應的屬性定義文本樣式,鍛煉學生熟練應用CSS的能力;理解CSS優先級,能夠區分復合選擇器權重的大小;熟悉并掌握網頁中CSS定義的流程,能夠熟練使用編程軟件編寫相關頁面CSS代碼。過程與方法:1.通過自主探究、小組討論、與老師溝通等制作網頁相關模塊,培養學生協作解決問題的能力和主動性以及與人交流合作的能力;2.通過教師對作品的點評與反饋,理解CSS定義要點,培養學生總結歸納能力。情感態度與價值觀:1.學習資料中融入思政內容,注重加強對學生的世界觀、人生觀和價值觀的教育。2.在制作網頁的過程中,培養學生探索、創新、實踐、協作的職業素養。3.通過學習編寫代碼,培養學生的信息素養和邏輯思維能力。4.通過整個項目的完成,讓學生感受HTML5與CSS3的神奇魅力,培養學生積極的學習態度。教學重點教學難點重點及突出策略:教學重點:CSS核心基礎、文本樣式屬性、CSS層疊性與繼承性、CSS優先級措施:通過教師引導、學生上機操作加強學習和補充案例進行鞏固。難點及解決方法:教學難點:CSS層疊性與繼承性、CSS優先級。措施:通過教師臺上演示與講解、學生上機操作加強學習和補充案例進行鞏固。教學方法項目教學,小組討論,一體化教學教學條件準備計算機、VSCode軟件、教學PPT教學組織(簡述并備注每一流程所需課時)一、明確任務教師給定任務,引導學生思考,明確任務要求(0.5課時)二、制定工作計劃(2課時)分析任務后確定以下工作計劃教師引導學習,學生所需知識點學習;按任務要求,制定工作計劃三、計劃實施(4課時)能正確使用所需的知識:CSS樣式、CSS選擇器等,并按各模塊效果圖進行代碼編寫,并實現效果。四、檢查驗收(0.5課時)檢查任務完成情況,正確填寫檢查報告五、總結反思與評價(1課時)以小組為單位,用演示文稿向全班展示、匯報制作成果;教師針對各組任務工作過程及匯報情況分別作評價;工作過程回顧及總結。教學反思教學實施(次頁)教學環節教學內容學生活動教師活動評價點資源用時一明確工作任務根據效果圖進行任務分析;明確用時、任務內容和人員分組;1、接收任務并進行閱讀分析;2、根據任務要求進行人員分工;3、與小組成員討論網頁中所需效果等要求;1、發放任務并說明要求;2、指導各小組進行任務分工;3、察看、記錄學生小組討論情況及所存問題;4、引導學生討論所存實際問題(分工明確性)5.檢查學生填寫工作頁的正確性1、是否明確任務、工時;2、小組任務分工是否合理;3、對任務理解、表達是否到位;4、工作頁完成是否到位;5、小組積極性。工作任務0.5課時二制定工作計劃CSS基礎選擇器、CSS文本樣式屬性及CSS優先級的應用方法設置頁面CSS樣式的方法、步驟及注意事項認識并選擇合適的CSS選擇器及CSS樣式屬性工作計劃的制定查閱教輔學習CSS基礎選擇器、CSS文本樣式屬性及CSS優先級的應用案例分析效果圖,劃分模塊結構學習跟效果圖各模塊有關設計制作方法討論編寫代碼步驟制定設計計劃1.巡查、記錄學生查閱教輔自主學習情況,并給以必要的引導;組織學生討論,解決遇到的問題、確定編寫代碼的步驟3.指導學生制定工作計劃1.描述CSS基礎選擇器、CSS文本樣式屬性及CSS優先級的應用方法是否準確2.能否準確描述圖文混排的關鍵技術點3.選用標記是否合理4.回答問題是否準確。5.語言表達是否規范。工作頁、計劃表、實施進度表、教輔2課時教學環節教學內容學生活動教師活動評價點資源課時三實施工作計劃制作頭部模塊HTML結構分析樣式分析搭建結構定義樣式制作banner模塊步驟同上制作內容模塊步驟同上4.制作版權信息模塊步驟同上根據學習到的HTML5用法搭建各模塊框架根據所學CSS知識設置相應模塊樣式效果遇到問題時小組成員互相討論網頁整體調試運行巡查、記錄學生在編寫代碼過程中遇到的問題及是否運用到位;與學生交流,討論解決實施中遇到的小組無法解決的問題;檢查學生編寫制作的各模塊是否符合效果圖標準,并給予適當引導與提示。各模塊框架是否合理;HTML5標記應用、CSS樣式設置是否規范;調試解決問題的能力;小組協作解決問題的積極性。工作頁、教輔、圖片素材4課時四檢查驗收根據效果圖檢查網頁的完成效果是否存在不合理HTML5標記使用。按模塊效果逐一驗證以小組為單位先檢查與原效果對比,查找問題小組組長互查各小組制作情況,填寫驗收報告巡查、記錄1.驗收單的填寫是否正確2.驗收內容是否全面3.存在的問題工作頁(含驗收報告)0.5課時教學環節教學內容學生活動教師活動評價點資源課時五總結反思與評價個人、小組評價教師評價工作過程回顧及總結評價與分析以小組為單位,用演示文稿向全班展示、匯報制作成果。在展示的過程中,以小組為單位進行評價規范撰寫總結。1)工作的步驟、方法,2)遇到的問題,處理的辦法3)收獲及獲得的途徑。3.完成自我評價、小組評價,填寫學習任務綜合評價表引導學生進行展示匯報,并引導各小組進行點評;針對各組任務工作過程及匯報情況分別作評價;引導學生撰寫項目總結;對學生作品完成教師評價,填寫學習任務綜合評價表1.作品展示匯報是否流暢,順利;2.自評、互評評價是否客觀、公正3.完成任務的態度與時間觀念工作頁、學習任務綜合評價表1課時工學一體化課程教學課頁NO4課程學習任務項目四利用CSS3新增的選擇器制作網頁使用學材任課教師班級所屬專業實施地點實施日期總課時周課時學材處理采用一體化教學模式,以學生為主體,圍繞課程標準、以典型工作任務展開,知識點夠用、適用為原則,并配合相關教輔學習資料,同時根據學生特點自行設計的課后補充任務進行強化實踐用。在輔助知識和技能點學習時加入一些思政元素(安全、心理健康教育等內容在網頁內容中)。任務分析本項目主要利用CSS3新增的選擇器,以及前面所學的知識和技能,制作一個“安全教育”網頁。根據教輔資料先學習新增選擇器相關知識和技能點,根據項目分析要用到的相關知識點,根據工作頁引導完成相關任務。教學目標(包含知識與技能、過程與方法、情感態度與價值觀等三個目標)知識與技能:1.掌握CSS3中新增加的屬性選擇器,能夠運用屬性選擇器為頁面中的元素添加樣式。2.理解關系選擇器的用法,能夠準確判斷元素與元素間的關系。3.掌握常用的結構化偽類選擇器,能夠為相同名稱的元素定義不同樣式。4.掌握偽元素選擇器的使用,能夠在頁面中插入所需要的文字或圖片內容。5.掌握CSS偽類,會使用CSS偽類實現超鏈接特效。過程與方法:1.通過自主探究、小組討論、與老師溝通等制作網頁相關模塊,培養學生協作解決問題的能力和主動性以及與人交流合作的能力;2.通過教師對作品的點評與反饋,理解CSS定義要點,培養學生總結歸納能力。情感態度與價值觀:1.學習資料中融入思政內容,注重加強對學生的世界觀、人生觀和價值觀的教育。2.在制作網頁的過程中,培養學生探索、創新、實踐、協作的職業素養。3.通過學習編寫代碼,培養學生的信息素養和邏輯思維能力。4.通過整個項目的完成,讓學生感受HTML5與CSS3的神奇魅力,培養學生積極的學習態度。教學重點教學難點重點及突出策略:教學重點:結構化偽類選擇器、偽元素選擇器、鏈接偽類的實踐應用。措施:通過教師引導、上機操作加強學習和補充案例進行鞏固。難點及解決方法:教學難點:結構化偽類選擇器的選擇與應用。措施:通過教師臺上演示與講解、學生上機操作加強學習和補充案例進行鞏固。教學方法項目教學,小組討論,一體化教學教學條件準備計算機、Dreamweaver網頁制作軟件或VSCode軟件、教學PPT教學組織(簡述并備注每一流程所需課時)一、明確任務教師給定任務,引導學生思考,明確任務要求(0.5課時)二、制定工作計劃(4課時)分析任務后確定以下工作計劃教師引導學習,學生所需知識點學習;按任務要求,制定工作計劃三、計劃實施(6課時)能正確使用所需的CSS3中新增加的選擇器相關知識等,并按各模塊效果圖進行代碼編寫,并實現效果。四、檢查驗收(0.5課時)檢查任務完成情況,正確填寫檢查報告五、總結反思與評價(1課時)以小組為單位,用演示文稿向全班展示、匯報制作成果;教師針對各組任務工作過程及匯報情況分別作評價;工作過程回顧及總結。教學反思教學實施(次頁)教學環節教學內容學生活動教師活動評價點資源用時一明確工作任務工作任務的閱讀與分析;明確工時、工作內容和人員分組;1、接收任務并進行閱讀分析;2、根據任務要求進行人員分工;3、與小組成員討論網頁中所需效果等要求;1、發放任務并說明要求;2、指導各小組進行任務分工;3、察看、記錄學生小組討論情況及所存問題;4、引導學生討論所存實際問題(分工明確性)5.檢查學生填寫工作頁的正確性1、是否明確任務、工時;2、小組任務分工是否合理;3、對任務理解、表達是否到位;4、工作頁完成是否到位;5、小組積極性。工作任務0.5課時二制定工作計劃1.CSS3中新增加的幾種選擇器的應用方法學習2.設置頁面選擇器CSS樣式的方法、步驟及注意事項學習3.認識并選擇合適的CSS選擇器及CSS樣式屬性4.工作計劃的制定1.查閱教輔學習CSS3中新增加的幾種選擇器的應用案例2.分析效果圖,劃分模塊結構3.學習跟效果圖各模塊有關設計制作方法4.討論編寫代碼步驟5.制定設計計劃1.巡查、記錄學生查閱教輔自主學習情況,并給以必要的引導;組織學生討論,解決遇到的問題、確定編寫代碼的步驟3.指導學生制定工作計劃1.描述CSS3中新增加的幾種選擇器的應用方法是否準確2.能否準確描述圖文混排的關鍵技術點3.選用標記是否合理4.回答問題是否準確。5.語言表達是否規范。工作頁、計劃表、實施進度表、教輔4課時教學環節教學內容學生活動教師活動評價點資源課時三實施工作計劃HTML結構分析根據效果圖進行結構分析樣式分析根據效果圖進行CSS樣式分析搭建結構編寫HTML結構代碼定義樣式利用新增的CSS選擇器定義不同模塊樣式5.調試網頁效果根據學習到的HTML5用法搭建各模塊框架根據所學CSS知識設置相應模塊樣式效果遇到問題時小組成員互相討論網頁整體調試運行巡查、記錄學生在編寫代碼過程中遇到的問題及是否運用到位;與學生交流,討論解決實施中遇到的小組無法解決的問題;檢查學生編寫制作的各模塊是否符合效果圖標準,并給予適當引導與提示。各模塊框架是否合理;HTML5標記應用、CSS樣式設置是否規范;調試解決問題的能力;小組協作解決問題的積極性。工作頁、教輔、圖片素材6課時四檢查驗收根據效果圖檢查網頁的完成效果是否存在不合理HTML5標記使用。按模塊效果逐一驗證以小組為單位先檢查與原效果對比,查找問題小組組長互查各小組制作情況,填寫驗收報告巡查、記錄1.驗收單的填寫是否正確2.驗收內容是否全面3.存在的問題工作頁(含驗收報告)0.5課時教學環節教學內容學生活動教師活動評價點資源課時五總結反思與評價個人、小組評價教師評價工作過程回顧及總結評價與分析以小組為單位,用演示文稿向全班展示、匯報制作成果。在展示的過程中,以小組為單位進行評價規范撰寫總結。1)工作的步驟、方法,2)遇到的問題,處理的辦法3)收獲及獲得的途徑。3.完成自我評價、小組評價,填寫學習任務綜合評價表引導學生進行展示匯報,并引導各小組進行點評;針對各組任務工作過程及匯報情況分別作評價;引導學生撰寫項目總結;對學生作品完成教師評價,填寫學習任務綜合評價表1.作品展示匯報是否流暢,順利;2.自評、互評評價是否客觀、公正3.完成任務的態度與時間觀念工作頁、學習任務綜合評價表1課時工學一體化課程教學課頁NO5課程學習任務項目五:利用盒子模型布局網頁使用學材任課教師班級所屬專業實施地點實施日期總課時周課時學材處理采用一體化教學模式,以學生為主體,圍繞課程標準、以典型工作任務展開,知識點夠用、適用為原則,并配合相關教輔學習資料,同時根據學生特點自行設計的課后補充任務進行強化實踐用。在輔助知識和技能點學習時加入一些思政元素(安全、心理健康教育等內容在網頁內容中)。任務分析明確任務要求,查閱相關教輔學習資料,學習并掌握盒子相關知識和技能點,確定任務完成流程及技術規范;在規定時間內完成網頁框架搭建,利用盒子模型進行CSS網頁布局,盒子模型和元素的浮動與定位等;完成后進行相關調試檢查,完成“西式甜品網”首頁面的制作。盒子模型是CSS網頁布局的基礎,只有掌握了盒子模型的各種規律和特征,才可以更好地控制網頁中各個元素所呈現的效果。教學目標(包含知識與技能、過程與方法、情感態度與價值觀等三個目標)知識與技能:1.掌握盒子的相關屬性,能夠制作常見的盒子模型效果。2.掌握背景屬性的設置方法,能夠設置背景顏色和圖像。3.熟悉CSS控制列表樣式的方式,能夠運用背景圖像定義列表項目符號。過程與方法:1.通過自主探究、小組討論、與老師溝通等制作網頁相關模塊,培養學生協作解決問題的能力和主動性以及與人交流合作的能力;2.通過教師對作品的點評與反饋,理解CSS定義要點,培養學生總結歸納能力。情感態度與價值觀:1.學習資料中融入思政內容,注重加強對學生的世界觀、人生觀和價值觀的教育。2.在制作網頁的過程中,培養學生探索、創新、實踐、協作的職業素養。3.通過學習編寫代碼,培養學生的信息素養和邏輯思維能力。4.通過整個項目的完成,讓學生感受HTML5與CSS3的神奇魅力,培養學生積極的學習態度。教學重點教學難點重點及突出策略:教學重點:認識盒子模型、<div>標記、盒子模型相關屬性、背景屬性、CSS3漸變屬性。措施:通過教師引導、學生上機操作加強學習和補充案例進行鞏固。難點及解決方法:教學難點:盒子模型相關屬性、背景屬性、CSS3漸變屬性。措施:通過教師臺上演示與講解、學生上機操作加強學習和補充案例進行鞏固。教學方法項目教學,小組討論,一體化教學教學條件準備計算機、Dreamweaver網頁制作軟件或VSCode軟件、教學PPT教學組織(簡述并備注每一流程所需課時)一、明確任務教師給定任務,引導學生思考,明確任務要求(0.5課時)二、制定工作計劃(4課時)分析任務后確定以下工作計劃教師引導學習,學生所需知識點學習;按任務要求,制定工作計劃三、計劃實施(6課時)能正確使用所需的知識:盒子模型相關屬性、元素浮動與定位等,并按各模塊效果圖進行代碼編寫,并實現效果。四、檢查驗收(0.5課時)檢查任務完成情況,正確填寫檢查報告五、總結反思與評價(1課時)以小組為單位,用演示文稿向全班展示、匯報制作成果;教師針對各組任務工作過程及匯報情況分別作評價;工作過程回顧及總結。教學反思教學實施(次頁)教學環節教學內容學生活動教師活動評價點資源用時一明確工作任務工作任務的閱讀與分析;明確工時、工作內容和人員分組;1、接收任務并進行閱讀分析;2、根據任務要求進行人員分工;3、與小組成員討論網頁中所需效果等要求;1、發放任務并說明要求;2、指導各小組進行任務分工;3、察看、記錄學生小組討論情況及所存問題;4、引導學生討論所存實際問題(分工明確性)5.檢查學生填寫工作頁的正確性1、是否明確任務、工時;2、小組任務分工是否合理;3、對任務理解、表達是否到位;4、工作頁完成是否到位;5、小組積極性。工作任務0.5課時二制定工作計劃盒子模型相關屬性、元素浮動與定位的應用方法設置頁面CSS樣式的方法、步驟及注意事項選擇合適的CSS選擇器及CSS樣式屬性工作計劃的制定查閱教輔學習盒子模型相關屬性、元素浮動與定位的應用案例分析效果圖,劃分模塊結構學習跟效果圖各模塊有關設計制作方法討論編寫代碼步驟制定設計計劃1.巡查、記錄學生查閱教輔自主學習情況,并給以必要的引導;2.組織學生討論,解決遇到的問題、確定編寫代碼的步驟3.指導學生制定工作計劃1.描述盒子模型相關屬性、元素浮動與定位的應用方法是否準確2.能否準確描述圖文混排的關鍵技術點3.選用標記是否合理4.回答問題是否準確。5.語言表達是否規范。工作頁、計劃表、實施進度表、教輔4課時教學環節教學內容學生活動教師活動評價點資源課時三實施工作計劃HTML結構分析根據效果圖進行結構分析樣式分析根據效果圖進行CSS樣式分析搭建結構編寫HTML結構代碼定義樣式利用CSS選擇器,結合盒子模型相關屬性定義不同模塊樣式5.調試網頁效果根據學習到的HTML5用法搭建各模塊框架根據所學CSS知識設置相應模塊樣式效果遇到問題時小組成員互相討論網頁整體調試運行巡查、記錄學生在編寫代碼過程中遇到的問題及是否運用到位;與學生交流,討論解決實施中遇到的小組無法解決的問題;檢查學生編寫制作的各模塊是否符合效果圖標準,并給予適當引導與提示。各模塊框架是否合理;HTML5標記應用、CSS樣式設置是否規范;調試解決問題的能力;小組協作解決問題的積極性。工作頁、教輔、圖片素材6課時四檢查驗收根據效果圖檢查網頁的完成效果是否存在不合理HTML5標記使用。按模塊效果逐一驗證以小組為單位先檢查與原效果對比,查找問題小組組長互查各小組制作情況,填寫驗收報告巡查、記錄1.驗收單的填寫是否正確2.驗收內容是否全面3.存在的問題工作頁(含驗收報告)0.5課時教學環節教學內容學生活動教師活動評價點資源課時五總結反思與評價個人、小組評價教師評價工作過程回顧及總結評價與分析以小組為單位,用演示文稿向全班展示、匯報制作成果。在展示的過程中,以小組為單位進行評價規范撰寫總結。1)工作的步驟、方法,2)遇到的問題,處理的辦法3)收獲及獲得的途徑。3.完成自我評價、小組評價,填寫學習任務綜合評價表引導學生進行展示匯報,并引導各小組進行點評;針對各組任務工作過程及匯報情況分別作評價;引導學生撰寫項目總結;對學生作品完成教師評價,填寫學習任務綜合評價表1.作品展示匯報是否流暢,順利;2.自評、互評評價是否客觀、公正3.完成任務的態度與時間觀念工作頁、學習任務綜合評價表1課時工學一體化課程教學課頁NO6課程學習任務項目六:利用CSS3美化列表樣式使用學材任課教師班級所屬專業實施地點實施日期總課時周課時學材處理采用一體化教學模式,以學生為主體,圍繞課程標準、以典型工作任務展開,知識點夠用、適用為原則,并配合相關教輔學習資料,同時根據學生特點自行設計的課后補充任務進行強化實踐用。在輔助知識和技能點學習時加入一些思政元素(安全、心理健康教育等內容在網頁內容中)。任務分析本項目將在網頁項目中經常用到的列表和盒子元素等相關知識綜合在一起,結合CSS相關內容,完成由盒子布局、列表制作導航的一個綜合項目——“青年教育宣傳”頁面。先明確任務要求,查閱相關資料進行知識儲備,確定任務完成流程及技術規范;利用無序列表與超鏈接等相關知識點,以及盒子模型相關知識制作“青年教育宣傳”頁面。教學目標(包含知識與技能、過程與方法、情感態度與價值觀等三個目標)知識與技能:掌握無序列表與盒子綜合應用知識,能夠制作頁面導航及完成網頁相關模塊布局。掌握定義列表與CSS結合常用的場域,能夠制作網頁中的信息介結版塊。熟悉導航中超鏈接的代碼編寫,能夠熟練完成導航菜單與子頁面的超鏈接效果。過程與方法:1.通過自主探究、小組討論、與老師溝通等制作網頁相關模塊,培養學生協作解決問題的能力和主動性以及與人交流合作的能力;2.通過教師對作品的點評與反饋,理解CSS定義要點,培養學生總結歸納能力。情感態度與價值觀:1.學習資料中融入思政內容,注重加強對學生的世界觀、人生觀和價值觀的教育。2.在制作網頁的過程中,培養學生探索、創新、實踐、協作的職業素養。3.通過學習編寫代碼,培養學生的信息素養和邏輯思維能力。4.通過整個項目的完成,讓學生感受HTML5與CSS3的神奇魅力,培養學生積極的學習態度。教學重點教學難點重點及突出策略:教學重點:無序列表、超鏈接。措施:通過上機操作加強學習和補充案例進行鞏固。難點及解決方法:教學難點:無序列表、超鏈接與浮動定位綜合應用。措施:通過上機操作加強學習和補充案例進行鞏固。教學方法項目教學,小組討論,一體化教學教學條件準備計算機、Dreamweavercs6網頁制作軟件、教學PPT教學組織(簡述并備注每一流程所需課時)一、明確任務教師給定任務,引導學生思考,明確任務要求(0.5課時)二、制定工作計劃(3課時)分析任務后確定以下工作計劃教師引導學習,學生所需知識點學習;按任務要求,制定工作計劃三、計劃實施(3.5課時)能正確使用所需的知識:無序列表、超鏈接與浮動定位等,并按各模塊效果圖進行代碼編寫,并實現效果。四、檢查驗收(0.5課時)檢查任務完成情況,正確填寫檢查報告五、總結反思與評價(0.5課時)以小組為單位,用演示文稿向全班展示、匯報制作成果;教師針對各組任務工作過程及匯報情況分別作評價;工作過程回顧及總結。教學反思教學實施(次頁)教學環節教學內容學生活動教師活動評價點資源用時一明確工作任務工作任務的閱讀與分析;明確工時、工作內容和人員分組;1、接收任務并進行閱讀分析;2、根據任務要求進行人員分工;3、與小組成員討論網頁中所需效果等要求;1、發放任務并說明要求;2、指導各小組進行任務分工;3、察看、記錄學生小組討論情況及所存問題;4、引導學生討論所存實際問題(分工明確性)5.檢查學生填寫工作頁的正確性1、是否明確任務、工時;2、小組任務分工是否合理;3、對任務理解、表達是否到位;4、工作頁完成是否到位;5、小組積極性。工作任務0.5課時二制定工作計劃無序列表、超鏈接與浮動定位的應用方法設置頁面無序列表、超鏈接CSS樣式的方法、步驟及注意事項選擇合適的CSS選擇器及CSS樣式屬性工作計劃的制定查閱教輔學習無序列表、超鏈接與浮動定位的應用案例分析效果圖,劃分模塊結構學習跟效果圖各模塊有關設計制作方法討論編寫代碼步驟制定設計計劃1.巡查、記錄學生查閱教輔自主學習情況,并給以必要的引導;2.組織學生討論,解決遇到的問題、確定編寫代碼的步驟3.指導學生制定工作計劃1.描述無序列表、超鏈接的應用方法是否準確2.能否準確描述無序列表、超鏈接的關鍵技術點3.選用標記是否合理4.回答問題是否準確。5.語言表達是否規范。工作頁、計劃表、實施進度表、教輔3課時教學環節教學內容學生活動教師活動評價點資源課時三實施工作計劃HTML結構分析根據效果圖進行結構分析樣式分析根據效果圖進行CSS樣式分析搭建結構編寫HTML結構代碼定義樣式利用CSS選擇器,結合盒子模型相關屬性定義不同模塊樣式5.調試網頁效果根據學習到的HTML5用法搭建各模塊框架根據所學CSS知識設置相應模塊樣式效果遇到問題時小組成員互相討論網頁整體調試運行巡查、記錄學生在編寫代碼過程中遇到的問題及是否運用到位;與學生交流,討論解決實施中遇到的小組無法解決的問題;檢查學生編寫制作的各模塊是否符合效果圖標準,并給予適當引導與提示。各模塊框架是否合理;HTML5標記應用、CSS樣式設置是否規范;調試解決問題的能力;小組協作解決問題的積極性。工作頁、教輔、圖片素材3.5課時四檢查驗收根據效果圖檢查網頁的完成效果是否存在不合理HTML5標記使用。按模塊效果逐一驗證以小組為單位先檢查與原效果對比,查找問題小組組長互查各小組制作情況,填寫驗收報告巡查、記錄1.驗收單的填寫是否正確2.驗收內容是否全面3.存在的問題工作頁(含驗收報告)0.5課時教學環節教學內容學生活動教師活動評價點資源課時五總結反思與評價個人、小組評價教師評價工作過程回顧及總結評價與分析以小組為單位,用演示文稿向全班展示、匯報制作成果。在展示的過程中,以小組為單位進行評價規范撰寫總結。1)工作的步驟、方法,2)遇到的問題,處理的辦法3)收獲及獲得的途徑。3.完成自我評價、小組評價,填寫學習任務綜合評價表引導學生進行展示匯報,并引導各小組進行點評;針對各組任務工作過程及匯報情況分別作評價;引導學生撰寫項目總結;對學生作品完成教師評價,填寫學習任務綜合評價表1.作品展示匯報是否流暢,順利;2.自評、互評評價是否客觀、公正3.完成任務的態度與時間觀念工作頁、學習任務綜合評價表0.5課時工學一體化課程教學課頁NO7課程學習任務項目七:利用CSS3美化表格和表單樣式使用學材任課教師班級所屬專業實施地點實施日期總課時周課時學材處理采用一體化教學模式,以學生為主體,圍繞課程標準、以典型工作任務展開,知識點夠用、適用為原則,并配合相關教輔學習資料,同時根據學生特點自行設計的課后補充任務進行強化實踐用。在輔助知識和技能點學習時加入一些思政元素(安全、心理健康教育等內容在網頁內容中)。任務分析本項目綜合利用前面所學的HTML和CSS相關知識,并結合表格和表單相關知識,制作一個旅游論壇中的“景點排行榜”網頁。先明確任務要求,確定任務完成流程及技術規范。根據本項目效果可以看出,網頁由一張表格構成,對表格的每行內容按單元格分別進行布局,并在表頭結合表單的內容進行設計與布局。網頁的樣式設計包含整張表格的整體樣式設計以及表格中不同單元格的樣式設計,對于樣式類似的行,可利用并集選擇器一次性設計相關樣式代碼。這些內容基本上集合了盒子模型的相關屬性設置以及一些字體樣式的設置,是對CSS樣式的一次綜合利用。教學目標(包含知識與技能、過程與方法、情感態度與價值觀等三個目標)知識與技能:1.掌握表格標簽及常用屬性的用法和意義,能利用表格相關標簽制作表格。2.理解表格相關屬性不同值的用法和意義,能利用表格相關屬性及不同屬性值設計表格相關樣式。3.了解表單的構成及其不同的控件類型,能利用表單不同控件及其相關屬性設計制作不同需求的表單。4.能利用CSS控制表單樣式,做出更精美的表單。過程與方法:1.通過自主探究、小組討論、與老師溝通等制作網頁相關模塊,培養學生協作解決問題的能力和主動性以及與人交流合作的能力;2.通過教師對作品的點評與反饋,理解CSS定義要點,培養學生總結歸納能力。情感態度與價值觀:1.學習資料中融入思政內容,注重加強對學生的世界觀、人生觀和價值觀的教育。2.在制作網頁的過程中,培養學生探索、創新、實踐、協作的職業素養。3.通過學習編寫代碼,培養學生的信息素養和邏輯思維能力。4.通過整個項目的完成,讓學生感受HTML5與CSS3的神奇魅力,培養學生積極的學習態度。教學重點教學難點重點及突出策略:教學重點:認識表單、表單元素、input元素及屬性、其他表單元素、CSS控制表單樣式。措施:通過上機操作加強學習和補充案例進行鞏固。難點及解決方法:教學難點:input元素及屬性、keygen元素、select控件、CSS控制表單樣式。措施:通過教師上機操作、學生上機操作、教師引導和補充案例進行鞏固。教學方法項目教學,小組討論,一體化教學教學條件準備計算機、Dreamweavercs6網頁制作軟件、教學PPT教學組織(簡述并備注每一流程所需課時)一、明確任務教師給定任務,引導學生思考,明確任務要求(0.5課時)二、制定工作計劃(4課時)分析任務后確定以下工作計劃教師引導學習,學生所需知識點學習;按任務要求,制定工作計劃三、計劃實施(6課時)能正確使用所需的知識:HTML表單元素、CSS樣式=等,并按各模塊效果圖進行代碼編寫,并實現效果。四、檢查驗收(0.5課時)檢查任務完成情況,正確填寫檢查報告五、總結反思與評價(1課時)以小組為單位,用演示文稿向全班展示、匯報制作成果;教師針對各組任務工作過程及匯報情況分別作評價;工作過程回顧及總結。教學反思教學實施(次頁)教學環節教學內容學生活動教師活動評價點資源用時一明確工作任務工作任務的閱讀與分析;明確工時、工作內容和人員分組;1、接收任務并進行閱讀分析;2、根據任務要求進行人員分工;3、與小組成員討論網頁中所需效果等要求;1、發放任務并說明要求;2、指導各小組進行任務分工;3、察看、記錄學生小組討論情況及所存問題;4、引導學生討論所存實際問題(分工明確性)5.檢查學生填寫工作頁的正確性1、是否明確任務、工時;2、小組任務分工是否合理;3、對任務理解、表達是否到位;4、工作頁完成是否到位;5、小組積極性。工作任務0.5課時二制定工作計劃表格及表單相關標簽及屬笥的應用方法設置各表格和表單元素CSS樣式的方法、步驟及注意事項選擇合適的CSS選擇器及CSS樣式屬性工作計劃的制定查閱教輔學習各表單元素及其屬性、設置表單CSS樣式的應用案例分析效果圖,劃分模塊結構學習跟效果圖各模塊有關設計制作方法討論編寫代碼步驟制定設計計劃1.巡查、記錄學生查閱教輔自主學習情況,并給以必要的引導;2.組織學生討論,解決遇到的問題、確定編寫代碼的步驟3.指導學生制定工作計劃1.描述各表單元素及其屬性的應用方法是否準確2.能否準確描述各表單元素及其屬性、設置表單樣式的關鍵技術點3.選用標記是否合理4.回答問題是否準確。5.語言表達是否規范。工作頁、計劃表、實施進度表、教輔4課時教學環節教學內容學生活動教師活動評價點資源課時三實施工作計劃HTML結構分析根據效果圖進行結構分析樣式分析根據效果圖進行CSS樣式分析搭建結構編寫HTML結構代碼定義樣式利用CSS選擇器,結合盒子模型相關屬性定義不同模塊樣式5.調試網頁效果根據學習到的HTML5用法搭建各模塊框架根據所學CSS知識設置相應模塊樣式效果遇到問題時小組成員互相討論網頁整體調試運行巡查、記錄學生在編寫代碼過程中遇到的問題及是否運用到位;與學生交流,討論解決實施中遇到的小組無法解決的問題;檢查學生編寫制作的各模塊是否符合效果圖標準,并給予適當引導與提示。各模塊框架是否合理;HTML5標記應用、CSS樣式設置是否規范;調試解決問題的能力;小組協作解決問題的積極性。工作頁、教輔、圖片素材6課時四檢查驗收根據效果圖檢查網頁的完成效果是否存在不合理HTML5標記使用。按模塊效果逐一驗證以小組為單位先檢查與原效果對比,查找問題小組組長互查各小組制作情況,填寫驗收報告巡查、記錄1.驗收單的填寫是否正確2.驗收內容是否全面3.存在的問題工作頁(含驗收報告)0.5課時教學環節教學內容學生活動教師活動評價點資源課時五總結反思與評價個人、小組評價教師評價工作過程回顧及總結評價與分析以小組為單位,用演示文稿向全班展示、匯報制作成果。在展示的過程中,以小組為單位進行評價規范撰寫總結。1)工作的步驟、方法,2)遇到的問題,處理的辦法3)收獲及獲得的途徑。3.完成自我評價、小組評價,填寫學習任務綜合評價表引導學生進行展示匯報,并引導各小組進行點評;針對各組任務工作過程及匯報情況分別作評價;引導學生撰寫項目總結;對學生作品完成教師評價,填寫學習任務綜合評價表1.作品展示匯報是否流暢,順利;2.自評、互評評價是否客觀、公正3.完成任務的態度與時間觀念工作頁、學習任務綜合評價表1課時工學一體化課程教學課頁NO8課程學習任務項目八:利用CSS3制作網頁特效使用學材任課教師班級所屬專業實施地點實施日期總課時周課時學材處理采用一體化教學模式,以學生為主體,圍繞課程標準、以典型工作任務展開,知識點夠用、適用為原則,并配合相關教輔學習資料,同時根據學生特點自行設計的課后補充任務進行強化實踐用。在輔助知識和技能點學習時加入一些思政元素(安全、心理健康教育等內容在網頁內容中)。任務分析本項目利用CSS3的變形、過渡、動畫等功能,結合盒子模型相關知識制作一個“旋轉的3D相冊”頁面。根據本項目效果可以看出,網頁由一個大盒子構成,其中包含了一個承載相冊圖片的容器,結構很簡單。通過本項目的動態效果(讀者可自行運行代碼進行查看)可以看出,該3D旋轉相冊在旋轉過程中可以看到前、后、左、右、上的圖片,所以在定義樣式時,首先要定義盒子(box)本身以及承載相冊的容器(container)的樣式,然后定義容器(container)及鼠標懸停時的旋轉動畫效果,③接著對各個可看到圖片的方向面定義公共樣式(.side),并采用絕對定位,④最后分別對各個可看到圖片的方向面定義變形及旋轉效果。值得注意的是,所有關于動畫的樣式定義必須考慮瀏覽器的兼容情況。教學目標(包含知識與技能、過程與方法、情感態度與價值觀等三個目標)知識與技能:理解過渡屬性,能夠控制過渡時間、動畫快慢等常見過渡效果。掌握CSS3中的變形屬性,能夠制作2D轉換、3D轉換效果。掌握CSS3中的動畫,能夠熟練制作網頁中常見的動畫效果。過程與方法:1.通過自主探究、小組討論、與老師溝通等制作網頁相關模塊,培養學生協作解決問題的能力和主動性以及與人交流合作的能力;2.通過教師對作品的點評與反饋,理解CSS定義要點,培養學生總結歸納能力。情感態度與價值觀:1.學習資料中融入思政內容,注重加強對學生的世界觀、人生觀和價值觀的教育。2.在制作網頁的過程中,培養學生探索、創新、實踐、協作的職業素養。3.通過學習編寫代碼,培養學生的信息素養和邏輯思維能力。4.通過整個項目的完成,讓學生感受HTML5與CSS3的神奇魅力,培養學生積極的學習態度。教學重點教學難點重點及突出策略:教學重點:過渡、2D轉換、3D轉換、動畫。措施:通過上機操作加強學習和補充案例進行鞏固。難點及解決方法:教學難點:過渡、3D轉換、動畫。措施:通過上機操作加強學習和補充案例進行鞏固。教學方法項目教學,小組討論,一體化教學教學條件準備計算機、Dreamweavercs6網頁制作軟件、教學PPT教學組織(簡述并備注每一流程所需課時)一、明確任務教師給定任務,引導學生思考,明確任務要求(0.5課時)二、制定工作計劃(4課時)分析任務后確定以下工作計劃教師引導學習,學生所需知識點學習;按任務要求,制定工作計劃三、計劃實施(6課時)能正確使用所需的知識:CSS3中的變形屬性、CSS動畫等,并按各模塊效果圖進行代碼編寫,并實現效果。四、檢查驗收(0.5課時)檢查任務完成情況,正確填寫檢查報告五、總結反思與評價(1課時)以小組為單位,用演示文稿向全班展示、匯報制作成果;教師針對各組任務工作過程及匯報情況分別作評價;工作過程回顧及總結。教學反思教學實施(次頁)教學環節教學內容學生活動教師活動評價點資源用時一明確工作任務工作任務的閱讀與分析;明確工時、工作內容和人員分組;1、接收任務并進行閱讀分析;2、根據任務要求進行人員分工;3、與小組成員討論網頁中所需效果等要求;1、發放任務并說明要求;2、指導各小組進行任務分工;3、察看、記錄學生小組討論情況及所存問題;4、引導學生討論所存實際問題(分工明確性)5.檢查學生填寫工作頁的正確性1、是否明確任務、工時;2、小組任務分工是否合理;3、對任務理解、表達是否到位;4、工作頁完成是否到位;5、小組積極性。工作任務0.5課時二制定工作計劃CSS3中的變形和移動屬性、CSS動畫的應用方法學習設置各表單元素CSS樣式的方法、步驟及注意事項學習選擇合適的CSS選擇器及CSS樣式屬性工作計劃的制定查閱教輔學習CSS3中的變形和移動屬性、CSS動畫的應用案例分析效果圖,劃分模塊結構學習跟效果圖各模塊有關設計制作方法討論編寫代碼步驟制定設計計劃1.巡查、記錄學生查閱教輔自主學習情況,并給以必要的引導;2.組織學生討論,解決遇到的問題、確定編寫代碼的步驟3.指導學生制定工作計劃1.描述CSS3中的變形和移動屬性、CSS動畫的應用方法是否準確2.能否準確描述CSS3中的變形和移動屬性、CSS動畫的關鍵技術點3.選用標記是否合理4.回答問題是否準確。5.語言表達是否規范。工作頁、計劃表、實施進度表、教輔4課時教學環節教學內容學生活動教師活動評價點資源課時三實施工作計劃HTML結構分析根據效果圖進行結構分析樣式分析根據效果圖進行CSS樣式分析搭建結構編寫HTML結構代碼定義樣式利用CSS選擇器,結合盒子模型相關屬性定義不同模塊樣式5.調試網頁效果根據學習到的HTML5用法搭建各模塊框架根據所學CSS知識設置相應模塊樣式效果遇到問題時小組成員互相討論網頁整體調試運行巡查、記錄學生在編寫代碼過程中遇到的問題及是否運用到位;與學生交流,討論解決實施中遇到的小組無法解決的問題;檢查學生編寫制作的各模塊是否符合效果圖標準,并給予適當引導與提示。各模塊框架是否合理;HTML5標記應用、CSS樣式設置是否規范;調試解決問題的能力;小組協作解決問題的積極性。工作頁、教輔、圖片素材6課時四檢查驗收根據效果圖檢查網頁的完成效果是否存在不合理HTML5標記使用。按模塊效果逐一驗證以小組為單位先檢查與原效果對比,查找問題小組組長互查各小組制作情況,填寫驗收報告巡查、記錄1.驗收單的填寫是否正確2.驗收內容是否全面3.存在的問題工作頁(含驗收報告)0.5課時教學環節教學內容學生活動教師活動評價點資源課時五總結反思與評價個人、小組評價教師評價工作過程回顧及總結評價與分析以小組為單位,用演示文稿向全班展示、匯報制作成果。在展示的過程中,以小組為單位進行評價規范撰寫總結。1)工作的步驟、方法,2)遇到的問題,處理的辦法3)收獲及獲得的途徑。3.完成自我評價、小組評價,填寫學習任務綜合評價表引導學生進行展示匯報,并引導各小組進行點評;針對各組任務工作過程及匯報情況分別作評價;引導學生撰寫項目總結;對學生作品完成教師評價,填寫學習任務綜合評價表1.作品展示匯報是否流暢,順利;2.自評、互評評價是否客

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容,請與我們聯系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論