“Web前端開發技術”課程微課設計研究

孟瑤 葛玉潔 王康 馬雨琪

摘 要： 作為一種新型的教學模式和學習方法，微課已經成為了國內外信息技術教學改革的熱點。微課彌補了傳統課堂教學的缺陷，為其提供了一定的支撐和輔助。文章介紹了微課教學的概念和特點，以計算機專業的“Web前端開發技術”課程為例，分析了該課程的性質、教學內容和教學難點，并闡述了圍繞該課程中表格這一知識點所設計和制作的視頻及其應用，為提高該類課程的教學質量和效果提供了參考。

關鍵詞： 微課； Web前端開發技術； 高等教育； 教學改革

中圖分類號：TP393 文獻標志碼：A 文章編號：1006-8228（2019）03-82-03

Study on micro-lecture design for the "Web Front-End Developing Technology" course

Meng Yao， Ge Yujie， Wang Kang， Ma Yuqi

（School of Information Engineering， Eastern Liaoning University， Dandong， Liaoning 118000， China）

Abstract： As a new teaching mode and learning method， micro-lectures have become a popular educational reform field of information technology at home and abroad. Micro-lecture makes up for the defect of traditional classroom teaching and provides support and assistance in the conduction of traditional classroom instruction. This paper introduces the concept and characteristics of micro-lecture， analyzes the nature， content and teaching difficulties of "Web Front-End Developing Technology"， and explains the design， production and application of micro-lecture around the knowledge point of table in this course， which provides a reference for improving the teaching quality and effect in such courses.

Key words： micro-lecture； Web front-end developing technology； higher education； educational reform

0 引言

隨著信息技術的發展，學習方式的改變，創新成為教育的常態，而微課（Micro-Lecture）正是該趨勢的產物之一[1]。本文介紹了微課的概念與特點，分析了高等教育中計算機專業的“Web前端開發技術”課程的特點、內容以及傳統教學存在的問題，并以該課程中的表格知識點為例，探討微課的設計、制作和應用過程。

1 微課教學

2008年美國新墨西哥州圣胡安學院的高級教學設計師David Penrose提出了現今流行的微課程概念，他把微課稱為“知識脈沖”，認為微型的“知識脈沖”只要在相應的作業與討論的支持下，就能夠與傳統的長時間授課一樣取得相同的效果[2]。微課一般是以視頻為載體，記錄在教學過程中的某個學科知識點（如難點、重點、疑點等），或圍繞某個環節開展教學互動（如學習活動、主題、實驗、任務等）[3]。微課具有時間短、內容精、資源多等特點，支持移動學習、碎片學習、泛在學習等多種學習方式，特別適合解決現代生活節奏快、干擾多、信息而帶來的影響學習持久性的缺陷。這種新的學習體驗大大提高了學習者學習的興趣和積極性[4]。

2 微課在Web前端開發技術課程教學中的應用

本節介紹了Web前端開發技術課程的教學內容與特點，以及微課在該課程中的設計、實施與應用。

2.1 課程性質

本文討論的Web前端開發技術課程是信息管理與信息系統專業的一門專業主干課程，是一門實用性較強的實踐類課程，是為滿足企業對前端開發工程師知識技能的需求而設置的。該課程圍繞HTML、CSS、JavaScript語言以及前端框架展開教學，市場需求量大，就業前景樂觀。課程內容包括：前端開發技術的發展歷程及關鍵技術；主流前端開發工具的功能和使用，頁面的運行和調試方法；前端頁面內容與樣式制作的基本方法和技巧；前端腳本語言的原理和應用；主流的前端開源框架的使用；前端頁面的綜合設計。

該課程以實際案例為中心，旨在使學生掌握Web網頁的前端制作技術及相關軟件的使用，掌握網頁前端制作的基本方法和技巧，培養網頁前端頁面設計與實現的基本能力，具備根據實際需求開發一定規模的靜態網站的能力。該門課程的教學為后續動態網站開發類課程的學習提供了必要的基礎，同時也為學生畢業后從事前端開發工程師等相關工作奠定扎實的理論及實踐基礎。

2.2 設計與實施

Web前端開發技術課程的內容繁多復雜，涵蓋HTML5、CSS3、JavaScript這三個核心，以及圍繞這三個核心而開發出來的大量技術框架和解決方案。此外，學生還需要了解主流瀏覽器的兼容性，構建/管理工具來管理依賴的大量框架，以及代碼編寫必須符合的規范，以保證程序的可讀性。因此課程組針對該門課程的重點和難點開發了一系列的微課，作為對傳統課堂教學的有益補充。下面以課程組教師指導學生開發的“Web前端設計表格”視頻為例，介紹該視頻的設計和實現過程。該視頻使用了萬彩動畫大師制作動畫視頻，Camtasia 9軟件錄制視頻，前端頁面開發使用HBuilder開發工具編寫代碼。

該視頻對前端頁面中的表格知識點進行講解。通過對此知識點的講授和練習，使學生了解表格的應用形式，理解表格的基本結構，以及掌握制作表格的方法和技巧。視頻設計中采用了多種教學方法，使用案例法和圖像法來提出問題和明確主題，使用案例法、分解法和動畫法來解決問題，講解知識點，通過課后練習題來實際應用所學知識點。教學內容設計包括以下四個部分。

⑴ 提出問題

聯系實際情況，舉例介紹實際網站中常見的可以應用表格的場景，引出Web前端開發技術課程中表格這一知識點，從而提出本次視頻的問題：如何在網頁中實現表格，具體視頻實現如圖1所示。

⑵ 點明主題

以生動有趣的動畫形式，來立體形象地介紹網頁表格的基本結構，點明該視頻的主題。具體視頻實現如圖2所示。

⑶ 解析原理

結合實際案例，分步驟地講解制作表格內容和制訂表格樣式的過程，使用豐富的動畫講解基本原理，內嵌了程序編寫的小視頻來實時展示操作過程，幫助學生理論聯系實際，加深對抽象程序代碼的理解。視頻中亦演示了代碼在瀏覽器中解釋后的頁面效果，使學生能更直觀地了解程序運行結果。具體視頻實現如圖3所示。

⑷ 總結和實踐

視頻的末尾總結了所學的知識點，幫助學生回顧視頻內容。具體視頻實現如圖4所示。

視頻的最后給出了相關的實踐練習題目，幫助學生應用和實踐所介紹的知識點。輔助材料中亦給出了例題和練習題的參考代碼，以方便學生比對。具體視頻實現如圖5所示。

2.3 應用與效果

在Web前端開發技術課程的教學過程中，于每次課堂教學之后，通過網絡教學平臺發布相關視頻和輔助資料，供學生課后觀看和學習[5]。文中介紹的微課“Web前端設計表格”獲得了2018年遼寧省普通高等學校本科大學生計算機設計競賽一等獎和2018年（第11屆）中國大學生計算機設計大賽（微課與教學輔助類）三等獎。

3 結論

本文介紹了Web前端開發技術課程的內容和特點，以網頁制作中的表格知識點為例，闡述了視頻的設計、制作和應用。在該課程的教學過程中，每次課堂教學之后，通過網絡教學平臺發布相關視頻和輔助資料，供學生課后使用。下一步任務是豐富該課程的視頻庫，結合網絡教學平臺，串聯和整合零碎的視頻，幫助學生在課堂之外更好的自主學習和復習。

參考文獻（References）：

[1] 崔曉猛.微課教學設計模式研究[D].陜西師范大學碩士學位

論文，2016.

[2] 李享梅，韓斌.《網絡服務配置與管理》課程微課設計研究[J].

高教學刊，2015.20：70-71

[3] 王康.Linux服務配置與管理課程“微課”資源設計與開發[J].

中國管理信息化，2015.14：225-226

[4] 周密，蒲華秀，席凌.基于HTML5的微課Web前端設計[J].電

腦知識與技術，2016.12（17）：208-209

[5] 孟瑤.師生互動平臺在高等教育領域的應用研究[J].電腦與

信息技術，2018.26（1）：74-75