《HTML網(wǎng)頁(yè)》課程改革及實(shí)踐研究

肖英

摘 ?要：本文探索《HTML網(wǎng)頁(yè)》課程教學(xué)改革及實(shí)踐。首先分析了課程特點(diǎn)及學(xué)生學(xué)情;然后進(jìn)行了教學(xué)方式及方法改革探討，并積極引入微課等多種信息化技術(shù)來(lái)提高教學(xué)質(zhì)量;最后，為完善整個(gè)教學(xué)環(huán)節(jié)，在世界大學(xué)城平臺(tái)制作了大量課程資料，方便學(xué)生課前、課堂及課后更好的學(xué)習(xí)。實(shí)踐證明，通過(guò)一系列教學(xué)改革后，學(xué)生反映課程內(nèi)容比之前更易接受，學(xué)習(xí)主動(dòng)性大大增強(qiáng)，學(xué)習(xí)質(zhì)量顯著提升。

關(guān)鍵詞：HTML網(wǎng)頁(yè);課程改革;微課

一、《HTML網(wǎng)頁(yè)》課程特點(diǎn)及學(xué)情分析

《HTML網(wǎng)頁(yè)》課程通過(guò)對(duì)網(wǎng)頁(yè)界面設(shè)計(jì)中的文字、音樂(lè)、視頻等信息應(yīng)用的相關(guān)專(zhuān)業(yè)知識(shí)講授，讓學(xué)生把網(wǎng)站中要傳達(dá)的信息通過(guò)相關(guān)方法展現(xiàn)出來(lái);另一方面通過(guò)對(duì)相關(guān)設(shè)計(jì)軟件的使用進(jìn)行課堂講解與練習(xí)，使學(xué)生能夠掌握軟件操作方法，并能夠靈活應(yīng)用課堂知識(shí)處理一些在實(shí)際網(wǎng)站項(xiàng)目中遇到的技術(shù)困難。？因此整個(gè)《HTML網(wǎng)頁(yè)》教學(xué)中涉及到代碼學(xué)習(xí)、軟件操作學(xué)習(xí)以及整個(gè)網(wǎng)站和網(wǎng)頁(yè)設(shè)計(jì)規(guī)劃能力培養(yǎng)，這些對(duì)于高職學(xué)生而言都是很大的挑戰(zhàn)。高職學(xué)生對(duì)于專(zhuān)業(yè)課程學(xué)習(xí)的特點(diǎn)是喜歡純操作性的課程，對(duì)于涉及到代碼及多個(gè)軟件的綜合操作應(yīng)用時(shí)往往表現(xiàn)為力不從心，這與他們較低的文化素養(yǎng)、較差的專(zhuān)注力及耐力有關(guān)，而這些都不是一朝一夕可以改變的。同時(shí)筆者根據(jù)教學(xué)經(jīng)驗(yàn)發(fā)現(xiàn)大部分學(xué)生在課程學(xué)完后沒(méi)有花很多時(shí)間去總結(jié)復(fù)習(xí)，而本門(mén)課程如果不及時(shí)總結(jié)和復(fù)習(xí)將大大降低學(xué)生對(duì)知識(shí)的掌握。因此，針對(duì)本門(mén)課程的教學(xué)研究及實(shí)踐改革非常有必要。

二、《HTML網(wǎng)頁(yè)》教學(xué)改革及實(shí)踐研究

（一）研究教材內(nèi)容，編寫(xiě)適合學(xué)生學(xué)情的教材。目前《HTML網(wǎng)頁(yè)》課程采用的是清華大學(xué)出版社的《HTML+CSS+

JAVASCRIPT網(wǎng)頁(yè)設(shè)計(jì)與布局實(shí)用教程》。該教材的特點(diǎn)是理論詳盡，各個(gè)小知識(shí)點(diǎn)也輔以了小實(shí)例，但是整個(gè)章節(jié)知識(shí)點(diǎn)串聯(lián)不是很好，且每章節(jié)后的習(xí)題安排不是很合理，不能把整章的知識(shí)進(jìn)行系統(tǒng)的整合到一個(gè)實(shí)例中。同時(shí)參考其他學(xué)校選用的教材發(fā)現(xiàn)和本課程有關(guān)的書(shū)籍呈現(xiàn)為兩個(gè)方面的特點(diǎn)：1） 理論知識(shí)方面?zhèn)戎靥?，HTML、CSS、JavaScript雖然涉及到的知識(shí)很多，但根據(jù)高職學(xué)生特點(diǎn)，他們不喜歡讀太多理論性的教材，喜歡案例式的引入式教材。2） 另外一部分教材則把

HTML、CSS、JavaScript理論方面做了淡化，更多的將重心放在編寫(xiě)Dreamweaver的編寫(xiě)上，Dreamweaver是一款既可視又可編寫(xiě)代碼的制作網(wǎng)頁(yè)實(shí)用軟件，但在Dreamweaver中用純可視方式制作網(wǎng)頁(yè)，將產(chǎn)生大量的垃圾代碼，因此《HTML網(wǎng)頁(yè)》不能選用單純的Dreamweaver方面教材。

基于以上的分析及學(xué)生特點(diǎn)，適合我院學(xué)生教材應(yīng)采用案例式的編寫(xiě)方式，將知識(shí)點(diǎn)融入到案例中，引導(dǎo)學(xué)生一步步完成各個(gè)案例，最后組成一個(gè)大的項(xiàng)目。通過(guò)這些案例和項(xiàng)目制作來(lái)使學(xué)生掌握所有的知識(shí)。例如圖2.1展示的是在學(xué)習(xí)制作表格網(wǎng)頁(yè)時(shí)，筆者將各個(gè)知識(shí)點(diǎn)進(jìn)行細(xì)化，然后讓學(xué)生一個(gè)個(gè)去實(shí)現(xiàn)，最后總結(jié)復(fù)習(xí)制作一個(gè)大的表格網(wǎng)頁(yè)，通過(guò)各個(gè)案例實(shí)現(xiàn)及各案例制作達(dá)到徹底掌握知識(shí)的目的。因此，在選編教材時(shí)可選用類(lèi)似的案例式教材資源，同時(shí)筆者也積極進(jìn)行探索編寫(xiě)適合我院的《HTML網(wǎng)頁(yè)》教材。

? ? ? ? ? 圖2.1 ?案例設(shè)計(jì)

（二）研究教學(xué)方式和方法，采用項(xiàng)目式引導(dǎo)、任務(wù)驅(qū)動(dòng)及引用微課教學(xué)模式。（1）教學(xué)課堂改革，引用多種信息化教學(xué)技術(shù)，進(jìn)行微課開(kāi)發(fā)和應(yīng)用。 微課，是以闡釋某一知識(shí)點(diǎn)為目標(biāo)，以短小精悍的在線(xiàn)視頻為表現(xiàn)形式，以學(xué)習(xí)或教學(xué)應(yīng)用為目地的教學(xué)視頻。它對(duì)學(xué)生學(xué)習(xí)、教師教學(xué)實(shí)踐以及教師專(zhuān)業(yè)發(fā)展，都具有重要的現(xiàn)實(shí)意義，它的發(fā)展必引發(fā)新一輪的教育數(shù)字化教學(xué)改革。[1]目前，國(guó)內(nèi)微課還處于發(fā)展的初期，基本處于應(yīng)用探索期。[2]因此，筆者針對(duì)本課程并結(jié)合學(xué)院實(shí)情提出一些對(duì)課程開(kāi)發(fā)有益的微課開(kāi)發(fā)探索。

首先，教師必須熟悉相關(guān)課程內(nèi)容，然后精心遴選知識(shí)點(diǎn)進(jìn)行微課制作。在微課的制作中，教師不一定對(duì)教材中所有的內(nèi)容都進(jìn)行微課制作，制作一個(gè)有效果且精美的視頻是需要大量的時(shí)間及精力的。因此，在微視頻的制作過(guò)程中需要老師根據(jù)經(jīng)驗(yàn)選取有代表性的知識(shí)點(diǎn)。接下來(lái)淺談筆者對(duì)《HTML網(wǎng)頁(yè)》微課制作的一些設(shè)計(jì)思路。興趣是激發(fā)學(xué)生學(xué)習(xí)最好的老師，因此，制作微課的內(nèi)容應(yīng)生動(dòng)有趣，從一開(kāi)始就要緊緊抓住學(xué)生的眼球，并適時(shí)的拋出問(wèn)題，引導(dǎo)學(xué)生去思考。對(duì)于本門(mén)課而言，適宜的微課設(shè)計(jì)是先給出效果，由淺入深，學(xué)生從生動(dòng)的圖片或視頻中提出問(wèn)題，然后師生進(jìn)行分組共同探討問(wèn)題解決方法，最終達(dá)到良好的教學(xué)目的。圖2.2是筆者對(duì)本課程微課制作過(guò)程提出的設(shè)計(jì)思路，期望從這一典型的設(shè)計(jì)過(guò)程中激發(fā)學(xué)生的學(xué)習(xí)興趣，將知識(shí)點(diǎn)進(jìn)行探討和實(shí)踐等多種方式來(lái)進(jìn)行學(xué)習(xí)。

圖2.2 ?《HTML網(wǎng)頁(yè)》微課設(shè)計(jì)思路

（2） 綜合應(yīng)用項(xiàng)目式引導(dǎo)及任務(wù)驅(qū)動(dòng)的實(shí)踐教學(xué)模式，改革考核方式。我院《HTML網(wǎng)頁(yè)》課程以學(xué)生為中心，突出高職教育特點(diǎn)，以相關(guān)理論為指導(dǎo)，強(qiáng)調(diào)學(xué)生動(dòng)手能力培養(yǎng)和創(chuàng)意思維能力的提高。課程改革采用項(xiàng)目化任務(wù)驅(qū)動(dòng)式案例教學(xué)模式，將徹底打破傳統(tǒng)學(xué)科課程的設(shè)計(jì)思路。以項(xiàng)目為引領(lǐng)，根據(jù)教學(xué)內(nèi)容和教學(xué)要求，設(shè)計(jì)一個(gè)或多個(gè)精選案例，將所要學(xué)習(xí)的知識(shí)、操作、技能等融入案例中，通過(guò)對(duì)案例的分析、演示、講解、討論、學(xué)生練習(xí)以及總結(jié)評(píng)比等環(huán)節(jié)，以加強(qiáng)學(xué)生對(duì)基本概念、原理、方法的理解、大幅提高學(xué)生實(shí)際操作技能。同時(shí)本課程是一門(mén)操作性很強(qiáng)的課程，所涉及到的基本操作有嚴(yán)格的操作程序和規(guī)范要求，因此一開(kāi)始就應(yīng)對(duì)學(xué)生提出嚴(yán)格的要求并進(jìn)行嚴(yán)格的訓(xùn)練，在技能訓(xùn)練中采用啟發(fā)式教學(xué)、討論教學(xué)、指導(dǎo)自學(xué)、小組教學(xué)等多種教學(xué)方式形式相結(jié)合的方式進(jìn)行，力求做到既規(guī)范操作又靈活運(yùn)用。教學(xué)過(guò)程中，課程改革以企業(yè)真實(shí)的工作過(guò)程開(kāi)展教學(xué)設(shè)計(jì)。筆者對(duì)本課程教學(xué)改革以某房產(chǎn)公司網(wǎng)站建設(shè)項(xiàng)目為課程載體，以真實(shí)的網(wǎng)站建設(shè)過(guò)程開(kāi)展教學(xué)模塊和教學(xué)方案設(shè)計(jì)，充分運(yùn)用工學(xué)交替、任務(wù)驅(qū)動(dòng)、項(xiàng)目導(dǎo)向、校內(nèi)定崗實(shí)習(xí)等多種教學(xué)模式。最后，課程評(píng)價(jià)則以能力評(píng)價(jià)為中心，注重學(xué)生基礎(chǔ)知識(shí)的理解、基本技能的掌握及藝術(shù)修養(yǎng)的提高。具體做法是：在不同項(xiàng)目中，制訂不同層次的評(píng)價(jià)標(biāo)準(zhǔn)，采用師評(píng)、互評(píng)、自評(píng)相互結(jié)合的評(píng)價(jià)方式，力爭(zhēng)與未來(lái)職業(yè)崗位要求接軌，與市場(chǎng)需求一致。

通過(guò)一系列的改革，最終目的是讓學(xué)生感受到學(xué)習(xí)的樂(lè)趣，化被動(dòng)接收為主動(dòng)學(xué)習(xí)。通過(guò)一學(xué)期改革實(shí)踐，學(xué)生上課的積極性明顯增強(qiáng)，動(dòng)手操作的意愿更為強(qiáng)烈，基本上都能積極朝著將自己培養(yǎng)成與未來(lái)職業(yè)崗位要求接軌，與市場(chǎng)需求一致的高素質(zhì)人才努力。

（三）利用世界大學(xué)城的空間教學(xué)優(yōu)勢(shì)，重視課堂前后?！禜TML網(wǎng)頁(yè)》是一門(mén)實(shí)踐性強(qiáng)的課程，但同時(shí)也存在許多的代碼編寫(xiě)和軟件使用問(wèn)題，僅靠課堂短短幾節(jié)課的學(xué)習(xí)學(xué)生只能把內(nèi)容掌握，但不及時(shí)復(fù)習(xí)的話(huà)很容易對(duì)知識(shí)遺忘，因此課后的內(nèi)容鞏固就非常有必要了。目前，網(wǎng)絡(luò)學(xué)習(xí)空間環(huán)境建設(shè)是教育信息化核心理念與未來(lái)發(fā)展方向的體現(xiàn)，也是教育信息化發(fā)展的前沿?？臻g教學(xué)的興起，打破了以往傳統(tǒng)的教學(xué)模式，師生交流更加靈活和頻繁?！禜TML網(wǎng)頁(yè)》課程完全可以充分利用這一個(gè)打破時(shí)間、空間限制的有利工具，來(lái)提高學(xué)生的學(xué)習(xí)效率和質(zhì)量。圖2.3就是筆者在世界大學(xué)城空間針對(duì)《HTML網(wǎng)頁(yè)》課程制作的課程資源建設(shè)庫(kù)。

圖2.3 ?《HTML網(wǎng)頁(yè)》課程世界大學(xué)城空間建設(shè)

《HTML網(wǎng)頁(yè)》空間課程資源建設(shè)主要包含了課件、概念庫(kù)、案例庫(kù)、標(biāo)準(zhǔn)庫(kù)、理論訓(xùn)練庫(kù)、實(shí)踐訓(xùn)練庫(kù)、課后總結(jié)及視頻輔導(dǎo)。其中課件里是與教材相關(guān)的圖文并茂的PPT，學(xué)生可在課前在線(xiàn)或下載后查看，對(duì)所學(xué)知識(shí)進(jìn)行預(yù)先了解。概念庫(kù)則一般在課堂講解時(shí)總結(jié)相關(guān)的概念，課后老師整合到網(wǎng)上方便學(xué)生查看有關(guān)的概念，提高學(xué)習(xí)效率。案例庫(kù)則把和課堂有關(guān)的案例放到網(wǎng)上，一方面是方便學(xué)生在課堂查看老師布置的作業(yè)，另一方面則可以在課后進(jìn)行案例繼續(xù)再做，加深對(duì)知識(shí)的掌握。理論訓(xùn)練庫(kù)和實(shí)踐訓(xùn)練庫(kù)則都注重對(duì)知識(shí)的強(qiáng)化，通過(guò)理論過(guò)關(guān)和實(shí)踐操作讓學(xué)生能夠查漏補(bǔ)缺，鞏固復(fù)習(xí)。課后總結(jié)則是老師針對(duì)課堂教學(xué)的情況對(duì)每次課進(jìn)行課后總結(jié)復(fù)習(xí)，老師在以后的教學(xué)中也能隨時(shí)根據(jù)教學(xué)查看前面的課程教學(xué)反饋，并及時(shí)調(diào)整教學(xué)內(nèi)容和方法以提高教學(xué)質(zhì)量。視頻輔導(dǎo)重點(diǎn)針對(duì)一些重難點(diǎn)的操作，老師對(duì)知識(shí)進(jìn)行錄屏，錄制好后發(fā)布到空間，學(xué)生可針對(duì)重難點(diǎn)查看視頻，解決了老師不能隨時(shí)輔導(dǎo)的問(wèn)題。

因此，通過(guò)世界大學(xué)城這一優(yōu)良的網(wǎng)絡(luò)平臺(tái)，學(xué)生真正可以做到不受時(shí)間及地點(diǎn)學(xué)習(xí)，他們通過(guò)自主預(yù)習(xí)，主動(dòng)學(xué)習(xí)及課后復(fù)習(xí)這三個(gè)環(huán)環(huán)相扣的階段進(jìn)行自發(fā)學(xué)習(xí)，這大大的提高了學(xué)生的主動(dòng)性、自覺(jué)性及興趣，從而也大大提升學(xué)生的學(xué)習(xí)質(zhì)量。

小結(jié)：《HTML網(wǎng)頁(yè)》是計(jì)算機(jī)專(zhuān)業(yè)一門(mén)實(shí)踐性很強(qiáng)的專(zhuān)業(yè)基礎(chǔ)課。筆者分析了本門(mén)課程特點(diǎn)及我院學(xué)生學(xué)情，并重點(diǎn)針對(duì)課程改革提出了自己的思路和實(shí)踐方法。在進(jìn)行教學(xué)研究改革實(shí)踐后，學(xué)生反映課程內(nèi)容比之前更易接受，學(xué)習(xí)主動(dòng)性大大增強(qiáng)，并且課后能夠積極進(jìn)行項(xiàng)目實(shí)戰(zhàn)復(fù)習(xí)，這證明改革實(shí)踐有一定的成效，達(dá)到了我們預(yù)期的教學(xué)改革目的。

參考文獻(xiàn)：

[1] 茹志鵑.程序設(shè)計(jì)基礎(chǔ)微課程開(kāi)發(fā)[J].科技信息.2014.3

[2] 田貞.微課在計(jì)算機(jī)基礎(chǔ)實(shí)驗(yàn)教學(xué)中的應(yīng)用研究[J].教育探索.2013.24