基于課型的信息化教學在《HTML+CSS網頁布局》課程中的應用

摘要：本文歸納了在中職計算機課程常見的四種課型中，師生與信息化資源或技術開展教學互動，在《HTML+CSS網頁布局》課程中加以應用，對信息化教學模式基于課型進行個性化應用，并通過教學效果驗證這套信息化教學模式的推行價值。

關鍵詞：信息化教學；課型

中職計算機課程信息化教學設計預期通過信息化教學實現的教學效果包括：學生體驗企業任務、企業專家參與課堂；學生通過信息化學習配合教師授課，高效掌握重難點技術；學生課內外學習參與度、積極性、信息化學習能力有所提高；教師通過信息技術運用提高授課效率、完善實訓課堂紀律、實現作品當堂直觀評價、獲取學生作業完成度、課堂參與度等各項數據。本文嘗試以計算機專業課程的傳統教學設計中的課前預習、新手入門、實踐探究、能力提高、作品設計、評價小結、課后反思七個階段為基礎，結合前期分類歸納出的各類信息化資源與技術，根據其不同的功能性去適配不同教學階段，并實現其中的師生、校企與信息化資源或技術間的五種互動教學，以達成各教學階段的教學目標。

在課前預習階段，需要完成的目標是讓學生進行知識點的預習和企業任務的嘗試，反饋遇到的難題；教師掌握學生的預習情況，收集學生反饋的難題，調整教學策略。在新手入門階段，需要完成的目標是幫助學生掌握PPT模板的概念、優勢，了解課前作品存在的問題；教師了解學生理論知識的掌握情況，完成錯題答疑。在實踐探究階段，需要完成的目標是幫助學生掌握重點操作步驟，完成課堂基礎任務，鍛煉學生的自主探究與合作學習能力。在能力提高階段，需要完成的目標是通過師生、企業專家互動，提高學生學習的專注度和積極性，讓學生更清晰地了解企業需求，同時初步理解該次課程的難點。在作品設計階段，需要完成的目標是通過小組合作討論，以教師、企業參與的形式，協助學生自主完成作品設計，攻破該次課程的難點。在評價小結階段，需要完成的目標是通過學生、教師、企業共同評價評選出最符合企業標準的作品，幫助學生進一步明確企業需求，提高鑒賞能力。此外，還需要歸納該次課程中的易錯操作，完善學生的掌握情況。在課后反思階段，需要完成的目標是讓學生能夠自主探究與企業需求接軌的拓展練習，教師能夠監測、評價學生練習，對學生學習全過程進行數據化分析，從而反思該次課程的教學效果。

《HTML+CSS程序設計》是“1+X”Web前端開發初級考證的重要內容，也是計算機應用專業的一門重要的專業技能方向課程，而“HTML+CSS網頁布局”是《HTML+CSS程序設計》課程中最核心的綜合項目，在該課程的教學中具有重要地位。本文基于課型分析，對信息化教學模式在該項目中的應用進行了實踐探索。

一、項目設計

（一）項目分析，任務設計

以HTML與CSS程序設計典型工作任務為線索，根據學校計算機應用方向的人才培養方案、課程標準和“1+X”Web前端開發初級考證技能標準，通過職業工作分析，對國家“十二五”規劃教材《HTML與CSS程序設計項目化教程》進行分析重構，確定了13個學習項目。其中，本作品為項目九，共8個學習任務，共計16學時。

（二）多維分析，確定目標

以職業工作分析為依據，結合《HTML與CSS程序設計》課程標準和具體學情，確定項目教學目標和各學習任務分級目標。

（三）課型分析，建構模式

通過對不同任務預判的難點進行分析，將課程總結歸納成代碼問題、結構問題、綜合問題、設計問題四種課型，并探索出能高效解決四種問題的信息技術及信息化手段，構建起對應四種課型的教學模式。

（四）過程分析，全面評價

教師應用信息化評價技術，從專業知識、專業能力、專業素養三個維度，以自評、互評和師評方式，對課前、課中每個環節，課后各階段的學習活動開展全程性多元化評價，以獲得實時反饋信息，從而改進教師教學，促進學生自主學習。教學團隊根據預判分析出HTML+CSS課程中最常見的四類問題：代碼記憶問題、結構理解問題、綜合操作問題和創新設計問題，并總結出能有針對性地輔助解決這四類問題的信息技術或信息化手段，歸納出代碼、結構、綜合、設計四種課型。教學實施前，教學團隊首先需要明確不同的任務所屬的課型，針對不同課型需解決的特色問題，在之前總結出的中職計算機信息化教學模式的基礎上，結合最適用的信息化資源或技術，對該任務教學課堂中的各教學環節進行個性化設計及實施應用。

二、課型分析及信息化應用

（一）代碼課型——游戲導向教學模式

針對該課型中需要掌握的新代碼多、代碼含義及拼寫記憶難度大的問題，教學團隊自己創編了單詞連連看小游戲，增加學生學習代碼的趣味性。以此為基礎，教學團隊明確了游戲導向教學模式，并設計了詳細的代碼課型教學流程：環節一：新手入門，游戲學詞（自編游戲學單詞）；環節二：落實重點，線上助學（合作探究落實重點）；環節三：理解難點，智能答疑（智能答疑解難點）；環節四：攻破難點，在線討論（綜合練習破難點）；環節五：評價小結，直播回放（錯誤回放固定要點）。

（二）結構課型——教具助學教學模式

針對該課型中出現的網頁布局相關抽象結構難以理解的問題，教學團隊自制了動畫教具和實物教具，幫助學生動態直觀地理解抽象結構。以此為基礎，教學團隊明確了教具助學教學模式，并設計了詳細的結構課型教學流程：環節一：新手入門，即學即考（在線測試學理論）；環節二：落實重點，教具助學（教具演示落實重點）；環節三：理解難點，在線討論（小組合作解難點）；環節四：攻破難點，智能答疑（綜合練習破難點）；環節五：評價小結，直播回放（錯誤回放固定要點）。

（三）綜合課型——多樣互動教學模式

該課型中同時存在代碼和結構相關問題，以綜合實例練習為主線，教學團隊在靈活選用自編游戲和自制教具解決代碼和結構問題的基礎上，通過在線合作學習小組的線上互動和圖靈機器人智能答疑功能的人機互動，輔助學生高效開展綜合實例任務的合作探究。教學團隊明確了多樣互動教學模式，并設計了詳細的綜合課型教學流程：環節一：新手入門，游戲學詞（自編游戲學單詞）；環節二：落實重點，教具助學（教具演示落實重點）；環節三：理解難點，智能答疑（智能答疑解難點）；環節四：攻破難點，在線討論（綜合練習破難點）；環節五：評價小結，直播回放（錯誤回放固定要點）。

（四）設計課型——多元評價教學模式

該課型以作品設計為主線，旨在讓學生了解網頁布局的行業標準，讓教學與企業對接，同時提高學生的網頁設計能力。教學團隊借助合適的信息化手段對學生的作品設計開展了多元評價，通過請專家進課堂、教師評價、學生自評、小組互評、線上投票等形式讓學生作品得到全面立體的評價。以此為基礎，教學團隊明確了多元評價教學模式，并設計了詳細的設計課型教學流程：環節一：任務分析，標準解讀（標準解讀知任務）；環節二：新知教授，游戲學詞（自編游戲學單詞）；環節三：攻破難點，智能答疑（智能答疑破難點）；環節四：作品設計，在線討論（設計討論落實重點）；環節五：立體評價，直播回放（立體評價固定要點）。

三、實施路徑

（一）項目驅動，激發學習興趣

以一個完整項目“制作一個‘抗疫宣傳’網站”為驅動，分解成八個任務后，每個任務都以完成該網站的其中一部分為驅動。學生在明確了整個項目和每個任務的目標后再開始新課學習會更有學習動力，每完成一個學習任務也更有成就感。

（二）智慧課堂，攻破重點難點

本項目在對各教學環節的設計中，將重難點的攻破明確設計為落實重點、理解難點、攻破難點三個環節。而代碼、結構、綜合、設計四種課型的重點難點歸類各具代表性，教學團隊以四種課型的教學模式為依據，有針對性地運用信息技術循序漸進地幫助學生落實重點、理解難點、攻破難點。比如：用自制動畫教具輔助落實結構課型的重點——理解抽象布局結構，用圖靈機器人智能答疑輔助攻破綜合課型的難點——長代碼糾錯等。

（三）任務探究，提高綜合能力

本項目在每一次課的設計中都以任務探究為主線，在任務探究的設計中，根據實際任務需求合理選擇小組合作任務、自主探究任務、案例作品設計任務。此外，考慮學生在開展不同的任務探究過程中會遇到的實際問題，為學生提供相應的信息技術支持，如：用在線學習小組讓學生的合作互動更高效，用在線投票讓學生的互評自評更便捷，以此提高學生的信息化能力、協作交流能力、綜合評價能力、創新能力等。

（四）專家引領，提升職業素養

本項目在課型的設計中邀請信息中心的專家提供網頁設計相關行業標準，并請專家加入學生的在線學習小組，全程參與學生的作品設計，提出專業意見，讓學生的作品設計與行業實際需求更加相符，在作品評價時，通過請專家連線點評作品的形式幫助學生直觀了解自己作品需改進的方向，提升職業素養。

四、研究成效

經過16課時的教學實施后，教學團隊從計算機應用專業崗位核心素養知識、能力、素養三個維度出發，對照教學實施前的學情分析數據表，對學生的知識掌握情況、能力提高情況、素養提升情況進行了全面分析。

（一）教學效果

①知識維度。結合項目知識目標和“1+X”Web前端開發HTML +CSS模塊初級考綱，對學生在教學實施過程中的理論知識在線測試成績、單詞連連看完成度、操作練習完成度等進行數據統計，對比教學實施前的各項知識掌握情況，發現在各種課型有針對性的信息技術輔助下，學生對理論、單詞、結構和操作的掌握程度均有了顯著提高。

②能力維度。對學生在教學實施過程中的信息化學習參與度、自評互評參與度、合作任務完成情況、作品設計創新度等進行數據統計，對比教學實施前的各項能力數據，發現經過16課時的鍛煉，學生的信息化能力、綜合評價能力、協作交流能力、創新能力均有了不同程度的提高。

③素養維度。教學團隊在16課時教學實施前后，均以問卷調查的形式測評學生的政治素養和職業素養。通過數據對比分析，發現經過該項目每個任務中對課程思政的滲透，學生在設計“故事思政網站”過程中，對中國紅色故事、改革故事、追夢故事有了更深的了解，政治素養有了一定提升。而專家進課堂指導學生設計作品的形式讓學生的職業素養也有了全面提升。

④綜合能力。通過對學生在教學實施后知識、能力、素養三個維度各項能力的提升情況進行數據匯總，對比教學實施前的學生綜合能力素養數據，發現學生經過16課時的學習，知識素養、職業素養、政治素養信息化能力、創新能力、綜合評價能力、協作交流能力均有所提升。

（二）特色與創新

①課型分類，教學設計科學化。通過將八個任務預判會出現的難點分類成代碼、結構、綜合、設計四種課型，明確能高效解決四種課型對應難點的信息技術及信息化手段，構建起對應的游戲導向、教具助學、多樣互動、多元評價四種教學模式。并以此為依據對四種課型進行詳細的教學環節設計，讓課堂教學更科學，且對HTML+CSS課程的其他項目教學設計具有一定的參考價值。

②教具助學，抽象結構形象化。通過自制的動畫教具或實物教具動態演示網頁布局中的各類抽象結構，讓教師對抽象結構的講解不再僅憑口頭描述，讓學生對抽象結構的理解不再憑借想象。教具的展示既可循環多次，也可由學生動手體驗，讓學生對結構的理解更直觀方便。

③游戲學詞，代碼記憶趣味化。通過自己創編的單詞連連看小游戲，在詞庫中錄入HTML+CSS課程中需要掌握的大量含義及拼寫記憶難度大的新代碼，以游戲學詞的方式增加學生學習代碼的趣味性，大大緩解了中職學生對代碼學習積極性普遍不高的問題，也方便學生課外對新代碼進行復習。

④多維互動，任務探究高效化。通過在線學習小組線上互動，讓小組合作任務探究轉為線上開展，更加高效地保證了課堂紀律。通過圖靈機器人智能答疑輔助教師答疑，讓學生在自主探究任務過程中普遍存在的答疑需求得到及時滿足，大大提高了課堂答疑效率。

⑤全程反饋，教學評價精準化。通過合適的信息技術或信息化手段，如：在線測試、在線投票、“搖一搖”隨機抽查等，對課堂每個教學環節學生的知識掌握情況或任務完成情況進行精準評價，在保證學生前一環節新知掌握度的前提下繼續開展新環節的教學，落實基于評價的教學。

在擴大信息化教學覆蓋面的浪潮中，中職教師要準確定位本專業特點，找準適合本專業教學的信息化發展方向，常思常學，不忘創新，讓信息化真正為職業教育發展提供有力支撐。中職教師要準確把握推進職業教育信息化發展的重要機遇，順應時代的要求進行教學改革，對新型教學模式進行應用研究。

作者單位：徐逸嘉 紹興技師學院 紹興市職教中心

參 "考 "文 "獻

[1]杜宏.“互聯網+”背景下高職院校信息化教學模式改革——以《圖形圖像處理》課程為例[J].智庫時代，2019（18）：252，254.

[2]龐書華.技工院校信息化教學如何充分發揮微課的引領作用[J].職業，2019（13）：112-113.

[3]龔潤華.網絡平臺視野下信息化教學與動漫課程教學的有效結合[J].知識經濟，2019（9）：108，110.

[4]李曉丹.中職計算機課程信息化教學模式有效性探究[J].考試周刊，2019（38）：145.

[5]崔鵬艷，楊宮印.淺談信息化教學對課堂教學效果的影響[J].決策探索，2019（8）：61.

[6]唐英.基于超星學習通的翻轉課堂實踐研究[J].常州信息職業技術學院學報，2018，17（4）：33-36.

[7]徐偉，崔柳，曹晶.基于超星平臺大學《計算機應用基礎》課程的設計與實踐[J].計算機產品與流通，2018（6）：167-168.

[8]趙書紅.基于超星泛雅平臺的混合式教學實踐與研究[J].高教專區.2018，12（6）：101-104.