HTML5編程技術(shù)課程教學(xué)在高職院校中的改革探索

周錫玲

摘要：課程是職業(yè)院校人才培養(yǎng)工作的基礎(chǔ)，承擔(dān)著人才培養(yǎng)工作的核心功能，對保障人才培養(yǎng)質(zhì)量起關(guān)鍵作用。現(xiàn)如今，課程建設(shè)總體水平不高，課程教學(xué)效果不優(yōu)仍然是職業(yè)院校普遍性的短板和瓶頸，亟待加強和改進。結(jié)合本院校背景，本文深入分析了《HTML5編程技術(shù)》課程在實際教學(xué)過程中存在的不足，并提出了在教學(xué)過程中使用多種教學(xué)方式相結(jié)合的解決方案，從而激發(fā)學(xué)生的學(xué)習(xí)興趣，使教學(xué)效果更佳，并為新形勢下HTML5編程技術(shù)課程教學(xué)改革提供參考。

關(guān)鍵詞：教學(xué)效果;教學(xué)改革;HTML5編程技術(shù)

中圖分類號： TP311? ? ? 文獻標(biāo)識碼：A

文章編號：1009-3044（2021）03-0134-02

Abstract：Curriculum is the foundation of talent training in vocational colleges， which undertakes the core functions of talent training and plays a key role in ensuring the quality of talent training.Nowadays， the overall level of curriculum construction is not high and poor curriculum teaching effects are still common shortcomings and bottlenecks in vocational colleges， which urgently need to be strengthened and improved. Based on the background of our college， this paper deeply analyzes the shortcomings of the HTML5 Programming Technology course in the actual teaching process， and proposes a solution that combines multiple teaching methods in the teaching process to stimulate students' interest in learning and make The teaching effect is better， which can provide references for the teaching reform of HTML5 programming technology courses under the new situation.

Key words： teaching effect; teaching reform;HTML5 programming technology

1引言

隨著互聯(lián)網(wǎng)行業(yè)的持續(xù)發(fā)展，移動互聯(lián)網(wǎng)等新業(yè)務(wù)不斷發(fā)展壯大，海量的平臺開發(fā)工作形成了巨大的人才缺口，尤其是Web前端、移動端HTML5開發(fā)人才更為緊缺。隨著互聯(lián)網(wǎng)業(yè)內(nèi)競爭的不斷加劇，企業(yè)平臺開始在界面友好性和操作方便性方面投入更多的精力，只有平臺更加人性化，才能吸引更多的用戶[1]。從現(xiàn)有技術(shù)體系來看，HTML5是Web前端開發(fā)的關(guān)鍵技術(shù)[2]，它具有進化而非顛覆、化繁為簡、良好的用戶體驗等新特性，它的使用可以滿足各個平臺上技術(shù)的支持，也可以保障幾乎所有的主流瀏覽器都可以訪問。《HTML5編程技術(shù)》是我院計算機應(yīng)用技術(shù)專業(yè)中前端開發(fā)方向的核心課程之一，該課程主要講解HTML5的新特性、HTML5的基本語法、CSS3的新特性、CSS選擇器、文本類網(wǎng)頁設(shè)計、圖文展示網(wǎng)頁設(shè)計、表單、畫布、音頻與視頻、響應(yīng)式Web設(shè)計、Bootstrap等知識點，通過該門課程的教學(xué)，旨在培養(yǎng)學(xué)生使用HTML5+CSS3開發(fā)出絢麗的網(wǎng)站的能力。

2 課程教學(xué)現(xiàn)狀分析

《HTML5編程技術(shù)》課程是我院計算機應(yīng)用技術(shù)專業(yè)一直開設(shè)的課程，根據(jù)學(xué)生上課的平時表現(xiàn)以及對學(xué)生的考試結(jié)果進行分析，得出該課程存在以下幾個方面的不足：1）學(xué)生綜合運用所學(xué)知識解決實際問題的能力還欠缺，過于依賴教師講解，需要進一步培養(yǎng)其獨立思考的能力以及綜合運用知識的能力;2）教學(xué)方法和手段亟待創(chuàng)新。雖然采用了項目式教學(xué)法，但教學(xué)過程中的實踐內(nèi)容設(shè)計還不夠完善，學(xué)生動手能力有限，對教學(xué)質(zhì)量有一定影響;3）學(xué)生水平參差不齊，對于知識點的接受能力有所不同，少部分同學(xué)的學(xué)習(xí)積極性不高，學(xué)習(xí)氛圍不夠濃厚。

3 多種教學(xué)方法相結(jié)合在教學(xué)中的應(yīng)用

針對教學(xué)過程中存在的問題，本文提出采用任務(wù)驅(qū)動法+案例教學(xué)法+討論法相結(jié)合的教學(xué)方法。任務(wù)驅(qū)動教學(xué)法是學(xué)生在教師的指導(dǎo)下，以一個共同既定任務(wù)為中心，自主解決問題，利用已知的和可得到的資源，完成教師布置的任務(wù)[3]。案例教學(xué)法指將案例作為教學(xué)材料，結(jié)合教學(xué)主題，通過討論、問答等師生互動環(huán)節(jié)讓學(xué)習(xí)者了解與教學(xué)主題相關(guān)的概念或理論，并培養(yǎng)學(xué)生高層次能力的教學(xué)方法[4]。討論式教學(xué)方法是針對解決問題，而逐漸發(fā)展起來的一種教學(xué)技巧，這種方法是通過學(xué)生以分組討論，或者共同討論的形式，解決問題的一種方法[5]。

本文以《HTML5編程技術(shù)》課程中的“黑馬書城”網(wǎng)站設(shè)計為例說明任務(wù)驅(qū)動法+案例教學(xué)法+討論法相結(jié)合的教學(xué)方法在實際教學(xué)中的應(yīng)用。該教學(xué)方法主要分為以下幾個階段：利用信息化教學(xué)手段引導(dǎo)學(xué)生思考問題，引出主題、采用案例教學(xué)法講解知識點、分組討論完成項目分析、項目實現(xiàn)、總結(jié)與評價、課后布置任務(wù)，鞏固練習(xí)。

1）利用信息化教學(xué)手段引導(dǎo)學(xué)生思考問題，引出主題

在講解知識點之前，教師通過信息化教學(xué)手段，使用超星學(xué)習(xí)通等平臺發(fā)布與本堂課所講網(wǎng)頁設(shè)計知識點相關(guān)的討論，發(fā)布討論后，教師以一定的加分機制鼓勵學(xué)生積極參與討論，待學(xué)生提交答案后，抽取學(xué)生提交的答案進行點評，針對精彩的留言，教師給予額外的加分，該過程可以充分調(diào)動學(xué)生的學(xué)習(xí)積極性，激發(fā)學(xué)生的學(xué)習(xí)熱情。然后，教師根據(jù)項目描述來展示該項目要實現(xiàn)的效果，讓學(xué)生對需要完成的任務(wù)有一個直觀的感性認(rèn)識，接著引出完成該項目所需要的知識點。

2）采用案例教學(xué)法講解知識點

教師講解“黑馬書城”網(wǎng)站設(shè)計所涉及的知識點：常用圖像標(biāo)簽、CSS背景設(shè)置、CSS陰影和漸變，并通過小案例對每個知識點進行舉例，通過舉例讓學(xué)生直觀地了解到知識點的具體應(yīng)用場景以及所產(chǎn)生的效果，讓學(xué)生自己能從案例中總結(jié)出本質(zhì)規(guī)律、并歸納出解決問題的方法，以培養(yǎng)其解決實際問題的能力。

3）分組討論完成項目分析

將班級成員根據(jù)水平將不同層次的學(xué)生搭配組成小組，由學(xué)習(xí)成績較好的同學(xué)擔(dān)任小組的組長，每個小組完成相同的任務(wù)，該任務(wù)由各小組成員相互協(xié)作完成。打開黑馬書城網(wǎng)頁，安排每組學(xué)生在規(guī)定的時間內(nèi)對該網(wǎng)頁的頁面結(jié)構(gòu)、所使用的標(biāo)簽和CSS樣式進行分析，由小組組長記錄討論結(jié)果。討論結(jié)束后，由每個小組派出代表說明項目分析活動的結(jié)果，各小組之間進行互相點評，最終，由老師給出評價。小組討論使得每個學(xué)生都參與其中，組員之間互幫互助，共同進步，可以培養(yǎng)學(xué)生的溝通能力、表達能力、團隊合作精神，激發(fā)學(xué)生的學(xué)習(xí)興趣，提高學(xué)生解決問題的能力。此外，小組與小組之間由于存在競爭的關(guān)系，因此可以更好地提高學(xué)生的學(xué)習(xí)積極性。

4）項目實現(xiàn)

實踐是教學(xué)過程中最重要的一個環(huán)節(jié)，只有通過實踐才能檢驗學(xué)生對知識點的掌握情況。根據(jù)對“黑馬書城”網(wǎng)站的分析，要求學(xué)生在規(guī)定的時間內(nèi)獨自完成網(wǎng)站設(shè)計任務(wù)。在學(xué)生完成任務(wù)的過程中，教師走到學(xué)生中去為學(xué)生解答疑惑。在解決問題的過程中，教師應(yīng)該避免直接告訴學(xué)生解決問題的答案，而應(yīng)該引導(dǎo)學(xué)生思考出錯的原因以及解決問題的思路。通過獨立完成任務(wù)，培養(yǎng)學(xué)生解決問題和綜合運用知識的能力。

5）總結(jié)與評價

學(xué)生完成任務(wù)后，教師要及時地對學(xué)生完成任務(wù)的情況進行總結(jié)和評價。歸納和總結(jié)學(xué)生在完成任務(wù)過程中值得借鑒或需要改進的地方，引導(dǎo)學(xué)生進行反思。針對學(xué)生在編寫代碼完成網(wǎng)頁設(shè)計的過程中遇到的問題進行分組討論，分析問題出現(xiàn)的原因，避免學(xué)生在以后的實踐過程中犯同樣的錯誤。與此同時，教師對學(xué)生在完成網(wǎng)頁過程中的代碼編寫、網(wǎng)頁效果等方面進行綜合評價，讓學(xué)生對自己還需要改進的地方有所了解。任務(wù)中可以進一步完善的地方可以作為任務(wù)的拓展與提高，讓學(xué)生課后進一步尋求解決方法。

6）課后布置任務(wù)，鞏固練習(xí)

知識的學(xué)習(xí)不能只停留在課堂上，課后的鞏固也是至關(guān)重要的。《HTML5編程技術(shù)》課程是一門實踐性強的課程，只有通過不斷的練習(xí)，學(xué)生對知識點的運用才能熟能生巧，學(xué)生的動手能力才能得以提升。因此，針對能力水平層次不同的學(xué)生，教師應(yīng)該布置難易程度不同的課后作業(yè)，讓不同能力水平的學(xué)生在完成課后作業(yè)的過程中獲得成就感和滿足感。

4? 結(jié)束語

針對《HTML5編程技術(shù)》課程在實際教學(xué)過程中存在的問題，本文進行了改革探索，提出了任務(wù)驅(qū)動法+案例教學(xué)法+討論法相結(jié)合的教學(xué)方法。通過以“黑馬書城”網(wǎng)站設(shè)計的教學(xué)過程為例可以得知，任務(wù)驅(qū)動法、案例教學(xué)法、討論法貫穿整個教學(xué)的始終，體現(xiàn)了“做中學(xué)，學(xué)練結(jié)合，以練促學(xué)”的教改思路。通過該教學(xué)方法，可以突出學(xué)生的主體地位，培養(yǎng)學(xué)生主動參與的意識，激發(fā)學(xué)生的求知欲，培養(yǎng)學(xué)生的團隊合作意識;通過布置難易程度不同的課后作業(yè)，可以培養(yǎng)學(xué)生獨立思考問題和解決問題的能力，學(xué)生通過完成作業(yè)可以獲得成就感和滿足感，繼而更加激發(fā)他們的學(xué)習(xí)熱情。本文提出的多種教學(xué)方法相結(jié)合的教學(xué)方法相信可以給我院的HTML5課程改革提供一定的指導(dǎo)意義。

參考文獻：

[1] 黑馬程序員.響應(yīng)式web開發(fā)項目教程（HTML5+CSS3+Bootstrap）[M].北京：人民郵電出版社，2019.

[2] 焦新偉.HTML5在WEB前端開發(fā)中的應(yīng)用研究[J].網(wǎng)絡(luò)安全技術(shù)與應(yīng)用，2020（4）：73-75.

[3] 宋積滿.任務(wù)驅(qū)動教學(xué)法在計算機應(yīng)用基礎(chǔ)教學(xué)中的應(yīng)用[J].信息與電腦（理論版），2019，31（21）：250-251，254.

[4] 史小平.以案例教學(xué)法為核心的高職學(xué)生自主學(xué)習(xí)能力培養(yǎng)途徑探析[J].湖南工業(yè)職業(yè)技術(shù)學(xué)院學(xué)報，2017，17（4）：115-118.

[5] 趙宏池.討論式教學(xué)法在思想政治課程標(biāo)準(zhǔn)與教材分析中的運用[J].科學(xué)咨詢，2020（33）：123.

【通聯(lián)編輯：李雅琪】