《WEB前端框架應用》課程單元教學設計課程名稱WEB前端框架應用授課單元Bootstrap柵格系統(tǒng)單元學時2授課教師職稱授課地點多媒體機房教學目標知識目標能力目標素質目標掌握Boostrap的布局概念，即流式布局；掌握柵格系統(tǒng)的工作原理。能夠運用Bootstrap柵格系統(tǒng)實現頁面基本布局；理解Bootstrap柵格系統(tǒng)原理，實現響應式、列組合。培養(yǎng)學生自主探究和解決問題的能力；培養(yǎng)學生嚴謹的邏輯思維能力；培養(yǎng)學生愛國主義精神，塑造積極進取的品質。教學重難點教學重點掌握Bootstrap柵格系統(tǒng)工作原理，實現頁面布局。教學難點Bootstrap柵格布局的定義方法，理解柵格對響應式的實現，列組合的方法。教學策略教學組織以任務為導向，將教學內容進行結構化和學習化處理，采用線上、線下混合式教學模式，整個教學過程分為課前、課中、課后拓展三個教學環(huán)節(jié)，職業(yè)核心素養(yǎng)和文化素養(yǎng)的培養(yǎng)貫穿始終。教學方法鑒于學生缺乏實戰(zhàn)，溝通技巧欠缺，教師采用PPT講解、案例教學，以任務為驅動，激發(fā)學生學習興趣，創(chuàng)設情境，營造實戰(zhàn)氛圍，讓學生多體驗、多積累。教學準備環(huán)境準備理實一體化機房HBuilderX編輯器chrome瀏覽器資料準備教材、課件、課程標準、課程實施方案、案例資源資源準備國家教學資源庫、職教云專業(yè)群、智慧職教mooc學院《Web前端框架應用（Bootstrap）》課程/indexBootStrap中文網：BootStrap官網：http://www.bootS教學實施過程教學環(huán)節(jié)教學內容教師活動學生活動設計意圖（含思政融入點）課前導學Bootstrap網格布局的工作原理是什么？2.如何運用Bootstrap框架實現頁面排版？備課：教學思路整理；在職教云平臺或QQ群發(fā)布課程內容和課程目標，并提出預習的測試問題。閱讀ppt、教材，觀看微知庫視頻，思考教師提出的問題，參與課前討論與測試活動。以問題導入方式引起學生注意，激發(fā)學生的學習主動性；讓學生了解課堂內容和學習目標，有針對性得閱讀教材，為課中學習打下基礎。課中研學回顧上學期所學頁面布局方法DIV+CSS；引入教學內容：Bootstrap柵格布局基礎。講解回顧DIV+CSS頁面布局的方法；提出問題：在Bootstrap框架中如何實現頁面布局？1.回顧上學期所學的相關知識；2.思考教師提出的問題。學生通過課前預習及討論，解決教師提出問題，加深對教學內容的理解。Bootstrap4中頁面布局的思路；Bootstrap4柵格系統(tǒng)工作原理；Bootstrap4柵格布局的基本定義；Bootstrap4列組合定義。講解Bootstrap4柵格系統(tǒng)工作原理；講解Bootstrap4柵格布局的基本定義；講解Bootstrap4柵格布局的列組合定義。認真聽取教師的講解；熟悉教師演示的代碼；遇到問題及時向老師提出。講練結合，加深學生對理論知識的理解和提升實踐應用能力，培養(yǎng)學生嚴謹的科學作風和踏實的工作態(tài)度。發(fā)布課堂任務：運用Bootstrap4網格系統(tǒng)，實現一個布局的頁面。學生動手實踐。講練結合，以任務為導向，演示編寫代碼；檢查學生完成情況，及時解決學生實踐中遇到的問題；根據教師的講解進行實踐，同步練習；遇到問題及時向老師提出。學生通過實操練習，進一步夯實理論基礎。課堂小結：總結Bootstrap柵格系統(tǒng)布局的工作原理和基本知識，運用Bootstrap4實現頁面布局?？偨Y本堂課程知識點，答疑。鞏固所學新知識；通過歸納總結加深理解。對本次課程內容總結歸納，加深對知識的理解與掌握。課后拓展發(fā)布拓展作業(yè)：運用Bootstrap柵格系統(tǒng)實現一個兩欄布局的頁面。挑選優(yōu)秀學生作品，在班級中進行分享；找出學生本次課學習中的共性問題，集中講解。通過課后項目實例練習鞏固所學知識；學生將課中遇到的新問題進行總結，并反饋給老師。強化課堂效果，豐富課堂教學，鞏固課程知識點。教學評價采用多元化教學評價體系對學生學習全過程進行真實、客觀、公平地評價，從知識、技能、素養(yǎng)、參與度等多方面展開。突出過程評價，包括課堂考勤、課堂活動參與情況、課堂實踐練習、作業(yè)完成情況等，根據完成情況進行評分，評分既針對任務的實現情況，也考查學生