“CSS3 animation動畫”實現圖片輪播 教學設計

魏巍

授課類型：新授課

課? ? 時：2課時

教學目標：

知識目標：1.了解什么是banner以及banner的構成要素;

2. 掌握banner的設計原則和規范;

能力目標：1. 能夠按照banner的設計原則和規范，設計banner;

2.通過糾錯改錯，提升自主學習能力。

3.能夠參照評價標準對作品進行評價

素養目標：1. banner設計制作上要運用美學原理，給人以美的享受，提高banner的視覺效果和感染力。

2.banner的內容與形式要健康，宣揚愛英雄、敬英雄的愛國情懷。

教學重點：banner的整體構思

教學難點：能夠按照整體構思實現banner效果;宣揚愛英雄、敬英雄的愛國情懷。

教學過程：課前

教學環節：布置學習任務

教學內容：帶著問題查找資料：

1.什么是banner？

2.Banner的分類及banner組成要素？

3.網頁中的banner有什么作用？

4.Banner中的滾屏效果如何實現？

5.搜集相關素材文件。

教師活動：

發布任務：學習通中發布分組任務，明確任務內容。

提供學習支架：上傳“banner”及“滾屏效果”學習資料;提供中國大學慕課、WEB前端開發學習平臺網址。

查看學生完成情況：查看任務單，根據學生提出的問題，補充相關學習資料，做好教學準備。

學生活動：

組長負責本組成員的分工，小組成員分工搜集、整理加工素材。

自主探究，線上學習。

設計意圖：通過完成課前任務初步了解banner，為完成本節任務做鋪

教學過程：課中

教學環節一：案例引入（10分鐘），布置任務

教學內容：瀏覽網址：https：//www.inspur.com/? ? ? https：//www.oceanengine.com/

提問思考：1、為什么要設計banner？2、這些banner有什么特點？

布置任務：設計制作首頁banner

教師活動：

提問，布置任務

學生活動：觀察網站效果，結合課前預習內容，回答問題，明確任務。

設計意圖：檢測預習效果，引入新課學習

教學環節二：學習banner的三個要素及使用注意事項（25分鐘）

教學內容：一、知要素

1.banner構成的三個要素

2.三要素的主要作用：背景：襯托主題、烘托氣氛

主視覺元素： 輔助表達主題

標題文字：是banner的主題

教師活動：

1.總結學生發言，展示banner構成的三個要素

2.提問：這三個要素在banner中有什么作用？

PPT展示，借助案例，帶領學生分析三要素的作用

學生活動：發言、觀察案例、思考問題、小組交流

設計意圖：檢測預習效果、引入新課學習

教學內容：

3.實際設計時的注意事項

教學環節三：了解banner設計的一般原則，學習動畫屬性animation（10分鐘）

教學環節四：設計制作banner（15分鐘）

教學環節五：Banner設計，整體構思，評價交流（10分）

教學環節六：修改完善，完成任務（10分鐘）

教學過程：課后

教學環節： 布置課后作業

教學內容：

將作業上傳到學習通中，制作自己的個性化網站

登陸WEB前端開發學習平臺，完成對animation屬性的測試題

教師活動：針對本組的問題提出修改建議

學生活動：繼續修改完善

設計意圖：培養學生認真做事、追求完美的態度。

教學反思：

1、教學效果：學生在設計制作首頁banner的過程中，能夠自主探究圖片輪播的實現方法，線上學習方式使學生能夠盡快的進入學習狀態，夯實基礎;課后自己制作個性化網站不僅滿足學生個性化需求，而且使知識技能掌握的更加牢固。游戲通關在增加趣味性的基礎上更是對知識點的再次提升。

2、不足及改進措施：個別學生主動學習能力有待提高，需要加強訓練。

3、特色創新：

（1）讓學生在設計制作的過程中，通過自主調研滲透愛國教育。

（2）線上線下相結合的學習方式，提升了學生的學習興趣。

（3）項目中的實踐應用，為學生將來適應企業崗位需求打基礎。