魏巍

授課類型：新授課

課? ? 時(shí)：2課時(shí)

教學(xué)目標(biāo)：

知識目標(biāo)：1.了解什么是banner以及banner的構(gòu)成要素;

2. 掌握banner的設(shè)計(jì)原則和規(guī)范;

能力目標(biāo)：1. 能夠按照banner的設(shè)計(jì)原則和規(guī)范，設(shè)計(jì)banner;

2.通過糾錯(cuò)改錯(cuò)，提升自主學(xué)習(xí)能力。

3.能夠參照評價(jià)標(biāo)準(zhǔn)對作品進(jìn)行評價(jià)

素養(yǎng)目標(biāo)：1. banner設(shè)計(jì)制作上要運(yùn)用美學(xué)原理，給人以美的享受，提高banner的視覺效果和感染力。

2.banner的內(nèi)容與形式要健康，宣揚(yáng)愛英雄、敬英雄的愛國情懷。

教學(xué)重點(diǎn)：banner的整體構(gòu)思

教學(xué)難點(diǎn)：能夠按照整體構(gòu)思實(shí)現(xiàn)banner效果;宣揚(yáng)愛英雄、敬英雄的愛國情懷。

教學(xué)過程：課前

教學(xué)環(huán)節(jié)：布置學(xué)習(xí)任務(wù)

教學(xué)內(nèi)容：帶著問題查找資料：

1.什么是banner？

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

3.網(wǎng)頁中的banner有什么作用？

4.Banner中的滾屏效果如何實(shí)現(xiàn)？

5.搜集相關(guān)素材文件。

教師活動(dòng)：

發(fā)布任務(wù)：學(xué)習(xí)通中發(fā)布分組任務(wù)，明確任務(wù)內(nèi)容。

提供學(xué)習(xí)支架：上傳“banner”及“滾屏效果”學(xué)習(xí)資料;提供中國大學(xué)慕課、WEB前端開發(fā)學(xué)習(xí)平臺網(wǎng)址。

查看學(xué)生完成情況：查看任務(wù)單，根據(jù)學(xué)生提出的問題，補(bǔ)充相關(guān)學(xué)習(xí)資料，做好教學(xué)準(zhǔn)備。

學(xué)生活動(dòng)：

組長負(fù)責(zé)本組成員的分工，小組成員分工搜集、整理加工素材。

自主探究，線上學(xué)習(xí)。

設(shè)計(jì)意圖：通過完成課前任務(wù)初步了解banner，為完成本節(jié)任務(wù)做鋪

教學(xué)過程：課中

教學(xué)環(huán)節(jié)一：案例引入（10分鐘），布置任務(wù)

教學(xué)內(nèi)容：瀏覽網(wǎng)址：https：//www.inspur.com/? ? ? https：//www.oceanengine.com/

提問思考：1、為什么要設(shè)計(jì)banner？2、這些banner有什么特點(diǎn)？

布置任務(wù)：設(shè)計(jì)制作首頁banner

教師活動(dòng)：

提問，布置任務(wù)

學(xué)生活動(dòng)：觀察網(wǎng)站效果，結(jié)合課前預(yù)習(xí)內(nèi)容，回答問題，明確任務(wù)。

設(shè)計(jì)意圖：檢測預(yù)習(xí)效果，引入新課學(xué)習(xí)

教學(xué)環(huán)節(jié)二：學(xué)習(xí)banner的三個(gè)要素及使用注意事項(xiàng)（25分鐘）

教學(xué)內(nèi)容：一、知要素

1.banner構(gòu)成的三個(gè)要素

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

主視覺元素： 輔助表達(dá)主題

標(biāo)題文字：是banner的主題

教師活動(dòng)：

1.總結(jié)學(xué)生發(fā)言，展示banner構(gòu)成的三個(gè)要素

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

PPT展示，借助案例，帶領(lǐng)學(xué)生分析三要素的作用

學(xué)生活動(dòng)：發(fā)言、觀察案例、思考問題、小組交流

設(shè)計(jì)意圖：檢測預(yù)習(xí)效果、引入新課學(xué)習(xí)

教學(xué)內(nèi)容：

3.實(shí)際設(shè)計(jì)時(shí)的注意事項(xiàng)

教學(xué)環(huán)節(jié)三：了解banner設(shè)計(jì)的一般原則，學(xué)習(xí)動(dòng)畫屬性animation（10分鐘）

教學(xué)環(huán)節(jié)四：設(shè)計(jì)制作banner（15分鐘）

教學(xué)環(huán)節(jié)五：Banner設(shè)計(jì)，整體構(gòu)思，評價(jià)交流（10分）

教學(xué)環(huán)節(jié)六：修改完善，完成任務(wù)（10分鐘）

教學(xué)過程：課后

教學(xué)環(huán)節(jié)： 布置課后作業(yè)

教學(xué)內(nèi)容：

將作業(yè)上傳到學(xué)習(xí)通中，制作自己的個(gè)性化網(wǎng)站

登陸WEB前端開發(fā)學(xué)習(xí)平臺，完成對animation屬性的測試題

教師活動(dòng)：針對本組的問題提出修改建議

學(xué)生活動(dòng)：繼續(xù)修改完善

設(shè)計(jì)意圖：培養(yǎng)學(xué)生認(rèn)真做事、追求完美的態(tài)度。

教學(xué)反思：

1、教學(xué)效果：學(xué)生在設(shè)計(jì)制作首頁banner的過程中，能夠自主探究圖片輪播的實(shí)現(xiàn)方法，線上學(xué)習(xí)方式使學(xué)生能夠盡快的進(jìn)入學(xué)習(xí)狀態(tài)，夯實(shí)基礎(chǔ);課后自己制作個(gè)性化網(wǎng)站不僅滿足學(xué)生個(gè)性化需求，而且使知識技能掌握的更加牢固。游戲通關(guān)在增加趣味性的基礎(chǔ)上更是對知識點(diǎn)的再次提升。

2、不足及改進(jìn)措施：個(gè)別學(xué)生主動(dòng)學(xué)習(xí)能力有待提高，需要加強(qiáng)訓(xùn)練。

3、特色創(chuàng)新：

（1）讓學(xué)生在設(shè)計(jì)制作的過程中，通過自主調(diào)研滲透愛國教育。

（2）線上線下相結(jié)合的學(xué)習(xí)方式，提升了學(xué)生的學(xué)習(xí)興趣。

（3）項(xiàng)目中的實(shí)踐應(yīng)用，為學(xué)生將來適應(yīng)企業(yè)崗位需求打基礎(chǔ)。