前言：尋找寫作靈感？中文期刊網用心挑選的HTML5+CSS3網站設計混合式教學模式探索，希望能為您的閱讀和創作帶來靈感，歡迎大家閱讀并分享。
摘要：互聯網+時代，移動設備、指間知識、碎片化學習、視頻學習成為一種趨勢。該文旨在通過對html5+css3網站設計課程的現狀和存在的問題進行分析,利用“互聯網+”的特征，結合Web前端崗位需求，在混合式教學模式的理念下將移動學習、網絡學習、在線學習與傳統現場教學相結合,形成了一套適合中職教育的線上線下混合式教學的思路和方法。
關鍵詞：互聯網+；混合式教學；網站設計
隨著網絡技術、通信技術的蓬勃發展,各行各業都因為互聯網融合而發生著改變。在教育領域中，互聯網與教育的結合，正顛覆傳統教育的運作模式?；ヂ摼W+時代，移動設備、指間知識、碎片化學習、視頻學習成為一種趨勢。在疫情時期“停課不停學”的推動下，線上線下融合育人環境日趨成熟，混合式學習將成為后疫情時代教育的“新常態”。如何有效地利用這種趨勢和常態讓學生更好地進行學習，筆者在擔任HTML5+CSS3網站設計課程的教學過程中，探索出以微課為媒介，將移動學習、網絡學習、在線學習與傳統現場教學相結合,該教學模式在HTML5+CSS3網站設計課程中提升學生的學習興趣,促使學生主動學習,提升教學質量。
1HTML5+CSS3網站設計課程的現狀分析
《HTML5+CSS3網站設計》課程是我校計算機等相關專業的核心課程。隨著互聯網+時代的到來，網站設計的技術一直在更新，HTML5+CSS將是前端開發核心技術，為使教學內容符合行業發展需求，保證教學內容的先進性，該課程的教學內容及其教學資源急需更新。另外，由于網站的存儲和顯示形式有別于其他普通文檔，大眾化的教學平臺無法組織顯示學生的網站，這給教師組織教學帶來諸多不便，以往學生提交網站只能孤立存儲于教師的便攜移動存儲設備或上傳至僅有教師有訪問權限的服務器，這不利于學生之間的互相學習、評價、再完善和課后學習。傳統的教學方式和現有的教學資源不能較好地滿足學生的需求。再者學生在進行HTML5+CSS3網站設計開發自主能力不足，創新、融會貫通能力較弱。為了這種適應現階段人才模式培養的需求，筆者采用以微課為主的混合式教學模式在HTML5+CSS3網站設計課程進行了探索，結合崗位需求，讓學生能運用HTML5+CSS3的知識，完成網站頁面設計和制作，能熟悉前端開發的工作規范。本次探究正是貼合實際需求的一次創新實踐。
2混合式教學模式研究可行性分析
以微課為主的混合式教學模式是當前的主流?；旌鲜浇虒W模式是結合網絡學習與傳統課堂教學的混合式學習的學習方式提出的，是當前信息化教學的主流教學方式，也較能被學生廣泛接受。微課憑借其“短小精悍”的特點迅速成為教學改革和資源建設的寵兒，制作精良的微課在輔助課堂教學和促進學習者自主學習方面的出色表現得到了眾多學者和廣大教師的認可。課程將知識碎片化,課堂切片化，區別于傳統課堂模式的系統化教學,是新時代下適應中職學生新需求的“微學習”。
3混合式教學模式的探究與實踐
為保證微課程內容呈現的科學性、形式展現的趣味性、技術實現的可行性，在本次探究的過程中我們與做互聯網網站設計和教育產品有充足經驗的企業合作，設計符合本校實際的開發模式設計，共同開發微課程。另外，本次不僅僅局限于微課程的開發，還充分發揮“互聯網+”的優勢，在我們已經使用比較成熟的基于移動端的學生技能鑒定學習模擬教學平臺和超星教學平臺上采用混合式教學模式在實際教學中開展微課程的應用研究。此外校企還共建適合《HTML5+CSS3網站設計》課程教學的網絡教學平臺。筆者采用微課為主的混合式教學模式在HTML5+CSS3網站設計課程中進行了為期一個學期的探索實踐。1）確認微內容，設計章節清單。作為一門技術的課程，最重要也是最難的就是要將一些非常復雜、難以理解的思想和問題簡單化，讓學生輕松理解并掌握。HTML5+CSS3網站設計課程可分為HTML語法，HTML5頁面元素及屬性、CSS3入門、CSS3選擇器、CSS3盒子模型、浮動與定位等。通過內容的劃分，幫學生進行知識的梳理，教學目標明確，知識點集中，有一定的針對性。確認好內容再對每項微內容的評價考核分解成相應的章節，每個章節不僅有微課視頻，還包括了學習清單——教學課件，知識點小測，學生提問和教師評價等。2）制作微視頻，提供在線學習資源。微課程開發最重要的依據是能根據本校的實際，以任務為導向，結合崗位需求?！禜TML5+CSS3網站設計》課程目前以HT⁃ML5+CSS3應用開發為核心，知識點多且關聯性較強，這很符合微課在選擇知識點時的獨立性要求?！禜TML5+CSS3網站設計》實踐性強，很多知識點都需要教師進行演示，為使教學內容學生更容易接受，同時讓學生在線上先對課程進行預習,做好課前準備。因此將教學內容制作成10分鐘左右的微視頻。學生在學習過程中可以重復播放、自行調整課程進度，對較難理解的問題反復聽和看，直到學會為止,這也是線上微課的優點?；氐骄€下課堂中，教師通過問題導向的方式幫助學生梳理知識點。3）網絡教學平臺，追蹤學習成長軌跡。使用共建的網絡教學平臺搭建了《HTML5+CSS3網站設計》課程。該平臺包括了教學大綱，本課程ppt，相關圖文素材，微課資源，課后拓展練習，優秀作品賞析等一系列豐富資源。系統能夠自動追蹤學生成長軌跡，通過學生的成績、行為記錄、知識結構、學習偏好等數據，自動生成學生未來職業潛質多維模型。線上的學習，交流，作業提交反饋都在該平臺上實現。4）教學過程實施。在本次探究的過程中，以該課程《CSS3過渡屬性》章節為例，本課的教學設計主要包含以下幾個階段：（1）課前準備，組織預習完成任務點。學生課前在線上教學資源的輔助下完成部分簡單內容的學習，可使學生對新知識處于有準備的心理狀態，課堂上有目的地聽預習時所不能理解的地方，不僅降低學習難度，也是培養自身自學能力的有效途徑。因此筆者在本次課前除了CSS3過渡屬性微課視頻讓學生進行觀看學習外，還了預習任務，設計小組研究問題。問題圍繞將要學習的重難點展開。教師通過查看學生預習作業，可發現學生較集中的問題，以便在接下來的課堂教學中有針對性的施教。（2）課堂教學，多種教學方式相結合。采用以“學生為主體，以問題為中心”的問題導向式教學模式，以“問題”為教學活動的起點，使學生在合作學習中學會探究問題、互助合作，形成學習共同體。因此在本次課的課堂教學中首先利用分析中軟國際UI設計培訓宣傳界面中使用到過渡動畫的元素案例導入本次課程主題：CSS3的過渡屬性。然后就拋出本課待研究的7個問題。利用網絡教學平臺與學生一起分析預習情況，采用提問法選擇正確的學生，讓其說出選擇理由。在分析中解決第1個問題。還利用了研究型教學和小組合作學習的方式布置小組研究任務，借助微課課程以及網絡教學平臺上關于CSS3過渡的內容，讓學生以小組為單位研究解決剩余問題。在難點的突破上，由于網絡上較少有與之相關的詳細闡述，教材上僅僅展示公式及靜態圖片，學生在理解上存在困難，由教師利用講授法結合信息化手段---貝塞爾曲線網站上的模擬器。幫助學生更好地理解屬性的含義，并可創造出更有創意的過渡方案。該模擬器避開復雜的函數和公式，以圖形化的界面，動畫的形式直觀展示函數應用后的效果，輕松突破了難點。通過多種教學方式相結合，較好地激發學生的學習熱情，提高了他們的自信心。（3）課后擴展，小組合作提升技能。在實際教學中，要使學生能及時掌握本節課的知識點，需要通過案例幫助學生強化知識點。因此在課后拓展環節，教師通過在平臺上拓展任務：以完成最美逆行者感人瞬間圖片切換顯示照片背后的故事為目標效果，讓學生小組討論分析效果并設計實現，每個組員按要求完成效果并上傳到學習平臺，并參與評價。小組每個成員都需要完成該任務并上傳作為學習成果評價之一，防止部分學生吃大鍋飯。小組合作完成任務的過程就是知識應用過程，把實現方法講出來，進一步將記憶轉化為深度理解，既消化了所學知識，提升了解決問題的能力，又鍛煉了語言表達能力。（4）建立雙師協同點評并以能力考核為重點的課程評價。任務完成后，傳統的教學過程是教師對平臺提交的作品進行批改點評，在這次探究實踐中特邀請企業導師通過騰訊會議在線點評大家的作品。采用基于信息化技術支撐的"雙師協同教學"方式，通過具有豐富前端開發工作經驗的前端工程師的專業點評，使學生得到啟迪、指導和借鑒。5）多元評價，激發學習積極性。本課程對學生的評價采用自我評價、小組互評、雙師評價相結合的方式，對學生進行全方位的多元評價。在本次探究實踐中，多元評價主要評價以下五個方面：線上學習完成情況、課堂表現、知識測試、課堂作業、小組合作活動情況。通過多元評價加強對學生學習過程的管理，激發學生學習的積極性，提高了教學效率。
4探索反思
基于互聯網+環境下的混合式教學模式增強了教學的靈活性，有效地節省教學時間，提高了教學效率。學期末通過查看網絡教學平臺的數據，驚喜地發現大部分同學每個學習的任務點的完成率都在92%以上。有些同學反饋這樣的混合式教學模式提升了他們的學習興趣，有些同學還能在網絡學習平臺上提出了自己的見解和建議。這樣教學改革是有效的，但仍存在一些問題：（1）課前通過線上微課的方式引入課程，讓學生由被動學習向主動學習轉變，但對于一些學習自制力差的同學，任務完成率的真實性和有效性還有待研究。（2）小組活動包括合作學習、成果匯報等形式。雖然盡可能地優化小組學習中個人的監管，但吃大鍋飯的現象還是會存在。因此今后在評價中應考慮更多因素。通過一學期的探索與實踐，基于互聯網+環境下的混合式教學模式能極大提高學生的學習興趣和自主學習能力。學生可以根據自己的實際學習情況，利用網絡平臺上豐富的學習資料，查缺補漏，和老師互動交流，完成測試檢驗自己的學習情況。教師通過不斷的研究學習信息化手段，教學能力得以提升。總之，基于互聯網+環境下的混合式教學模式利用微課程能有效調動同學們的學習積極性，教學效果得到了顯著提高。
作者:駱韻婷 單位:廈門信息學校