基于超星學習通平臺混合式教學模式的課程設計與應用

朱鳳麗

摘要：移動終端智能化快速發展和學生個性化的學習需求促使傳統課堂教學模式向混合式教學模式轉變，超星學習通平臺為混合式教學模式的實現提供支持，通過學習通平臺的線上教學活動與線下課堂教學的有效整合，進而形成新的混合式教學模式，以《網頁設計與制作》課程為例探討基于超星學習通平臺混合式教學模式在高職課堂中的應用，在激發學生自主學習及探究能力、提高課堂效率、提升教學效果、促進專業知識和技能提升、培養創新能力等方面的重要作用。

關鍵詞：超星學習通平臺;混合式教學模式;網頁設計與制作

中圖分類號：G642? ? ? ? 文獻標識碼：A

文章編號：1009-3044（2021）33-0259-04

開放科學（資源服務）標識碼（OSID）：

傳統計算機類課堂教學模式的不足是：教師講解時間長，留給學生操作的時間少，學生的作品僅僅停留在完全模仿而缺乏創新。傳統的課堂教學模式已不能滿足于移動終端智能化迅猛發展的現實情況，隨著移動終端智能化的快速發展，移動終端不僅僅改變了我們的生活方式，也在改變著我們的學習方式。其中混合式教學模式便在此背景下誕生，它是將依托于教學平臺的線上教學活動與線下傳統課堂教學結合起來的教學模式，通過學習平臺提供豐富的學習資源給學生，學生根據自身的學習需求進行深度學習，從而使得傳統課堂教學模式向混合式教學模式轉變，進而提升課堂教學效果、提升學生專業知識和技能水平。本文將探討依托超星學習通平臺混合式教學模式在《網頁設計與制作》課程中的應用。

1 超星學習通平臺簡介

超星學習通是一款面向智能手機、平板電腦等終端的移動學習專業平臺。教師可用其建設課程、上傳資源、組織教學、在線答疑、批改作業、管理信息、發布通知等輔助課程教學;學生可用其自主學習、資源共享、在線互動、完成作業等輔助學習。超星學習通平臺為混合式教學模式的開展提供了強大的硬件支撐，通過整合所需課程資源，建立了線下教學與線上課堂的橋梁，打破了空間和時間的限制，滿足學生個性化的學習需求，激發學生學習的主動性，也為學生帶來多樣化的學習體驗。同時，超星學習通平臺也給教師提供了海量的教學資源，教師將遴選出的優質教學資源有計劃地分享給學生，不但豐富了教學資源的內容和形式、拓寬了學生的知識面，也促進了師生間的交流、促進學生探索性學習，有助于提高課堂效率和提升教學質量，從而有助于進一步提高學生的技能水平和培養創新能力。

2 混合式教學模式的具體定義

混合式教學模式是依托教學平臺將在線學習和傳統教學的優勢結合起來的一種“線上”+“線下”的教學模式。即課前，學生登錄在線學習平臺自主學習課程知識點、反饋交流知識難點、完成老師布置的任務;課中，教師結合平臺收集到的課前學生學習情況開展線下教學活動;課后，學生登錄在線學習平臺完成課后拓展、測試、評價、與老師同學交流互動。混合式教學模式整個教學過程讓學生“學的明白”，課前學生通過在線觀看視頻、文檔、動畫、在線調查問卷等學習活動清楚知道學習目標;教師“教的有數”，教師可以通過課前學生在平臺上的活動數據，了解學生學習情況從而調整教學活動，也將學生的學習循序漸進地由淺入深地引向深度學習，最終能實現學習效果和教學效果的提升。混合教學模式下，將傳統教學的時間和空間都進行了擴展，讓教師的“教”和學生的“學”更靈活、更便捷、更高效，教師也可通過平臺技術手段對教學過程進行評價和反思，從而優化教學方案。

3 《網頁設計與制作》課程教學現狀分析

《網頁設計與制作》是我校高職計算機應用專業二年級第二學期開設的一門專業平臺課，根據《網頁設計與制作》課程標準制定了具體課程目標：學生通過課程學習能夠了解網頁設計與制作發展歷史及其未來發展趨勢;學會開發各類企業、門戶、電商類網站，掌握網頁設計流程、常見的網頁布局技能;具備運行、管理及維護網站的能力，具備程序代碼閱讀、理解、編寫等基礎能力。本課程也是“1+X 證書制度” Web 前端的初級課程，通過本課程學習，能夠為學習后續的前端知識夯實基礎。

但在傳統教學模式中想要實現以上課程目標確實存在以下幾個困境：第一，學生被動學習，缺乏主動探究和創新的意識和路徑。大多數計算機類課程面臨同樣的困境，教師在課堂上給學生灌輸理論知識、操作演示案例，學生被動地聽、機械地模仿操作，若案例稍加變換學生就會不知所措，這個過程表現出學生太過于依賴教師。第二，課時量不能滿足學生的學習需求。學校一般安排本課程是每周4課時，共計68課時完成本課程，但對于操作類課程來說課時緊張，教師只能快速完成知識點講授的教學任務，但留給學生練習的時間就比較有限了，學生在課堂上只能勉強完成老師布置的任務，想要通過多做多看來提升操作技能將無法在課堂上實現。第三，學生的作品市場競爭力低。隨著技術不斷迭變，市場對網頁設計人才的要求也越來越高，僅僅滿足于書本上的案例教學，學生無法開闊視野、提升技能水平，最終無法參與市場的有力競爭。基于上述幾點困境，將傳統教學模式變革為混合式教學模式是十分必要的。

混合式教學模式通過線上學習平臺優質資源共享來拓寬學生的視野，學生根據自身的需求選擇內容并完善自己的知識結構;借助線上學習平臺也能夠做到課前預習課后拓展，消化課內知識，從而解決由于課時有限操作技能無法提升的困境;通過線上學習平臺的課前導學，激發學生自主學習、自主探究、交流探討激發學生思維拓展，從而促進學生創新能力的培養，提高實踐水平;通過線上學習平臺的數據監測，教師能夠快速獲取學生學習情況的數據，從而做到因材施教，優化教學過程，促進實現教學質量的提升。

4 基于超星學習通平臺的《網頁設計與制作》課程混合式教學應用分析

本文教學設計將以《初識CSS3》為例，依托超星學習通手機端和電腦端，設計教學活動全過程，采用線上教學與線下教學兩種教學形式結合起來的混合式教學模式。

4.1 教學分析

4.1.1 教材分析

本課選自人民郵電出版社的《HTML5+CSS3網頁設計與制作》第三章《初識CSS3》，設計課時為1個課時。本章在整個課程體系里中起著承上啟下的作用，它既是對前面Dreamweaver工具的使用、HTML圖文標簽再深化，又為后續盒子模型、列表和超鏈接、表格和表單、DIV+CSS布局網頁制作核心內容奠定基礎。學生通過理解CSS樣式概念、分類，新建、編輯、應用CSS樣式，根據實際需求應用CSS樣式設計美化網頁，提升學生的審美能力和設計水平，培養學生的創新精神和職業素養。

4.1.2 學情分析

所授課的對象為計算機應用專業二年級學生，他們具備一般應用軟件操作技能，能夠熟練地運用超星學習通平臺上傳下載資源，并開展學習與討論;熟悉 Dreamweaver 工具的基本操作，認識 HTML5語言結構，接觸過簡單的嵌入式CSS樣式的代碼基礎。學生對理論知識學習存在畏難情緒，喜歡實踐，動手能力強，但綜合應用能力有所欠缺，僅習慣于模仿案例進行技能訓練，未樹立崗位需求意識，缺乏一定的設計審美意識。

4.1.3 教學目標

知識與技能：理解CSS樣式含義;理解CSS的屬性的分類及含義;掌握利用樣式面板創建及編輯CSS樣式的方法;掌握CSS選擇器的分類以及應用范圍、方法;能根據實際需求創建及應用CSS樣式控制頁面。

過程與方法：依托超星學習平臺為載體，使用三維動畫、微課視頻、問卷調查、在線投票等，通過小組合作探究、自主學習等多種途徑，讓學生掌握添加CSS樣式使用的過程和修改屬性值的方法。

情感、態度與價值觀：在模擬招聘的過程中，通過學生小組合作，形成團隊意識;通過美化網頁外觀提升審美修養，鋪就職業之路;通過課前導學探究和課后在線自評表的填寫，激發學生自主探究意識、提高學生溝通交流能力。

4.1.4 教學重難點

重點：新建CSS樣式、編輯CSS樣式、應用CSS樣式;能區分方框和邊框屬性各個參數的作用及表現效果 。

難點：根據頁面美觀需求靈活應用選擇器的類型編輯CSS樣式。

4.2 教學策略

4.2.1 教學流程圖

依托教學平臺，充分運用信息化教學的優勢，實現混合式教學模式以期達到最好的教學效果。

4.2.2 教學設計理念

本課教學設計是以行動導向為主導，以培養學生的綜合職業能力為目標，以職業實踐活動為導向，引導學生主動學習，練習解決實際問題學習，借助超星學習通學習平臺，充分體現混合式教學模式，設計了課前、課中、課后三個教學環節，以期幫助學生形成初步崗位技能，最終促進學生全面、和諧、持續發展。

4.3 教學過程

4.3.1 課前探究

課前學習是整個教學的基礎環節，為充分調動學生學習的自主性和拓展學習時間與空間，課前一周教師準備好相關知識點微課、PPT、動畫、導學案、任務素材、考核評價表等教學資源，上傳至學習平臺。教學資源準備好后，在上課的前兩天，通過學習平臺推送學習資料和預習通知，學生接收到通知后登錄學習平臺，自主學習《初識CSS3》并嘗試操作，完成導學案和個人簡歷的美化并提交。在此過程中學生可以根據個人情況反復觀看微課，了解知識點并嘗試操作，若遇到問題可直接彈幕提問或在平臺上留言，所有同學都可參與交流討論。課前線上探究主要是利用學習平臺，幫助學生充分利用課余時間，預習本節課的知識點，也便于教師了解每一位學生的課前準備情況，根據學生課前學習情況調整教學重難點，如本節課在平臺上發布了一份問卷調查，就本節課的難點做出選擇，選擇CSS選擇器的類型的同學占到78%，這為課堂教學提供了準確有效信息，課前探究信息的反饋也為課堂分組提供了依據，學生的學習效率也能事半功倍。

4.3.2 課上提升

課前兩分鐘，通過學習平臺簽到功能，了解學生到課情況。課中以“視頻導入，呈現任務→問題引領，分析任務→探究合作，實施任務→成果展示，評價任務→歸納總結，拓展升華”五個環節開展教學活動。

第一個環節，視頻導入，呈現任務。教師播放學生課前搜索到的優秀網頁，對比自己設計的網頁作品，找出差距，引出課題。學生通過觀看自己參與收集的素材做成的視頻與自己的作品對比，讓學生明白若想要成為網頁美工人員自己應該具備的核心技能，由此激發學生的被動學習到主動求知的觀念。接著通過“看、析、理”分析學生課前平臺上的作品，運用三維動畫效果講清楚CSS樣式美化網頁的優勢和CSS樣式的概念，并呈現本節課的任務：建立一個模擬求職場景，將全班同學分成4個設計小組（課前已通過學生預習情況，在平臺上分好小組），應聘公司的網頁美工團隊，在規定時間內美化“英才招聘網”網頁，最終通過教師和學生們的投票方式選出最優秀的設計部，票數最高的設計部將會被錄用。建立虛擬求職場景，以職業技能崗位對職業技能需求為目標，設置競賽環節，增強學生團隊協作能力并讓學生進入求職的緊迫感，激發學習熱情，端正學習態度。

第二個環節，問題引領，分析任務。教師引導學生觀察、分析、討論要實現樣張效果需將任務分解成四子任務。前三個任務是必做題，也是本節課探究的知識點，任務四體現分層，一是考慮個體差異，二是難度合理，既有提升的空間，又能“跳一跳可以摘到桃子”。每個設計部通過討論電子任務書上的問題，并做出決策，學生自主選擇主色調，激發學生主動挑戰的意識。

第三個環節，探究合作，實施任務。任務一：定義頁面CSS樣式，任務實施的過程中并沒有固定參數，而是通過小組的討論，確定具體屬性參數值，不同于以前教師告知參數學生機械模仿，這樣做學生不僅在討論中激發創作出個性作品也可通過頭腦風暴式的討論理清知識點，突出重點、突破難點。任務二：定義單元格CSS 樣式，并思考CSS選擇器分類（標簽與類的區別），教師鼓勵學生通過動手實踐，完成基礎任務，掌握本課重點內容，培養學生自主學習的能力，學生在實踐的過程中發現解決不了的問題，由老師借助信息化手段結合案例講解，目的是突破難點。任務三：定義圖片CSS樣式，教師引導學生嘗試操作雙邊框效果，學生在做方框與邊框時經常將兩者混淆，通過教師提供的視頻動畫的講解，讓學生更直觀看到邊框和方框的區別，再次嘗試操作，嘗試出來的學生通過錄屏軟件將關鍵操作步驟錄制好后上傳到平臺與同學共享，做到相互學習。任務四：定義導航超鏈接CSS樣式（選做），教師鼓勵學有余力的學生繼續探究，在此過程中教師提供Animate動畫，引導學生學習四種狀態的CSS樣式的設置，學生可在平臺上與同學交流、互助，以期提升技能水平。教師還在學習通平臺上為本節課提供了兩個輔學支持，CSS屬性單詞速查幫助學生迅速查找到單詞的意思，從而幫助學生解決設置屬性因英文單詞不熟悉而不斷嘗試的過程;Matching Color軟件幫助學生快速掌握網頁配色方案、色彩搭配協調。

第四個環節，成果展示，評價任務。每設計部推薦一位學生展示自己的作品，從技術的實現、網頁色彩的搭配等方面評價，做到公平、公正、客觀，借助學習平臺投票系統評選出比較好的設計團隊，通過分小組評價作品一方面是加強學生交流、培養學生審美情操，另一方面請學生說出作品中待改進的地方或在實踐過程中遇到了什么困難，是對知識點的再鞏固。學生也可將自己的心得體會在學習平臺上以筆記的形式記錄下來。教師在平臺上給獲勝團隊加平時分以獎勵機制給予學生榮譽感和學習成就感，鼓勵學生不斷進步。

第五個環節，歸納總結，拓展升華。教師通過思維導圖引導學生歸納總結，幫助學生將散落在各任務中的知識點，回歸主線，有利于學生知識點體系的建構，將思維導圖傳至平臺上，學生可以課后再鞏固。通過布置作業鞏固知識點，為下次課做準備也是提升學生技能水平，學以致用。

4.3.3 課后拓展

課后學生登錄學習平臺，填寫自我評價表。自我評價表主要由課前準備、學習態度、學習通平臺使用、小組合作、項目要點、實訓創新和作品評價這七部分構成，各部分賦予合理的分值。學生通過填寫自我評價表，對學習的過程進行梳理并做出中肯的評價，找出自己的不足并在以后的學習過程中加以完善。教師通過監測評價表的數據，可以動態掌握學生學習情況，為后續課程的學習做出針對性的安排。課后學生通過運用CSS樣式美化前面做過的《預防校園暴力，共建和諧校園》的網頁，完成拓展任務，以進一步提升技能水平。

4.4 教學效果

本課教學設計以完成“英才人才網”的美化作品為主線，緊緊圍繞CSS樣式的使用為技能目標，借助教學平臺實現線上、線下混合式教學模式的應用。

1）學習通平臺全方位助力線上課堂教學。快速推送學習資料，實時記錄學生在課堂中遇到的問題并及時反饋，幫助教師適時調整上課節奏，將課前、課中、課后緊密連接，形成了一套完整的“理論指導實踐、實踐鞏固理論”的教與學過程。

2）運用信息化技術解決教學重難點。微課視頻、電子任務書貫穿整個教學過程，實現了復雜問題簡單化，抽象問題形象化，幫助學生掌握教學重點;結合傳統教學方法，通過任務引導學生探究，合作交流，多角度循序漸進幫助學生突破教學難點。

3）三維動畫化提升課堂活力。三維動畫讓枯燥的理論變得生動有趣，學生掌握理論知識再也不是難題。

4）輔助學習工具快速引導學生學習。提供給學生《CSS屬性單詞速查》《Matching Color》兩款學習輔助工具，減少學生不斷失敗嘗試的過程，提供明確快速的指導。

5）錄屏軟件形成個人特色學習資料。錄屏軟件記錄學生關鍵操作步驟，并輸出上傳至平臺，實現資源共享、互助互學，打造個性化的學習資料。

5 結束語

基于超星學習通平臺混合式教學模式在課程《網頁設計與制作》教學上的應用，極大改變傳統教學模式的不足之處，學生學習的主動性和自主性明顯改變、學生課堂參與度高善于表達自己的觀點;學生作品設計質量明顯提升且更有新意，同時也深刻改變了教師的教學活動;在激發學生自主學習及探究能力、提高課堂效率、提升教學效果、促進專業知識和技能提升、培養創新能力等方面發揮著的重要作用。

參考文獻：

[1] 汪榮.高職“網頁設計”課程混合式教學方法研究[J].河南科技，2015（23）：296.

[2] 管敬如.基于泛雅平臺的計算機應用基礎混合式教學研究[J]. 年輕人，2020（12）：64.

[3]蔣麗平，王菲菲.計算機應用基礎課混合式教學改革——基于在線教學平臺[J].現代交際，2021（49）：49-51.

[4] 張婷.基于超星平臺的中職“電氣控制線路”混合式教學設計與應用研究[J].職業教育，2021（23）：211-212.

【通聯編輯：王力】