福建省三明職業(yè)中專學(xué)校 余明珍

放眼當(dāng)前傳統(tǒng)的“Web 前端開發(fā)”教學(xué)，其不太注重學(xué)生對(duì)于實(shí)際項(xiàng)目的設(shè)計(jì)，課本上的知識(shí)點(diǎn)都是分散的，教材中設(shè)計(jì)的案例知識(shí)點(diǎn)單一，并且很多知識(shí)點(diǎn)理論性強(qiáng)。在傳統(tǒng)的教學(xué)過(guò)程中，教師更多重視理論知識(shí)的灌輸和制作技巧的傳授，學(xué)生很少接觸項(xiàng)目，所以學(xué)習(xí)到的理論、技巧很容易脫離實(shí)際工作中項(xiàng)目本身的設(shè)計(jì)。相反，項(xiàng)目教學(xué)法能讓學(xué)生在項(xiàng)目中進(jìn)行實(shí)踐，將掌握的知識(shí)運(yùn)用到項(xiàng)目制作上，讓學(xué)生在實(shí)踐的過(guò)程中掌握與理解知識(shí)點(diǎn)，并且可以充分將企業(yè)對(duì)人才的要求與知識(shí)傳授相結(jié)合。由此可見，項(xiàng)目教學(xué)法在“Web 前端開發(fā)”教學(xué)中的運(yùn)用具有不可替代的作用。

一、“Web 前端開發(fā)”的課程特點(diǎn)

隨著社會(huì)的進(jìn)步、科技的飛速發(fā)展、新技術(shù)的層出不窮，現(xiàn)在的用戶對(duì)網(wǎng)站頁(yè)面效果要求越來(lái)越高?！癢eb 前端開發(fā)”是一門綜合性實(shí)踐類課程，其中不僅涉及HTML 基礎(chǔ)、CSS3運(yùn)用、JavaScript 基本語(yǔ)法與編程等計(jì)算機(jī)操作，還對(duì)版面設(shè)計(jì)、色彩搭配等有一定的要求。這門課程不同于Flash、PS 等軟件操作類課程，單純點(diǎn)擊操作按鈕就能完成相應(yīng)的操作，它涉及的內(nèi)容相對(duì)復(fù)雜、使用的知識(shí)面廣，而且需要學(xué)生耐心地在軟件中編輯代碼。這門課程不僅要求學(xué)生有一定的審美能力，對(duì)學(xué)生的邏輯思維能力的要求更高。它要求學(xué)生擁有良好的編寫代碼習(xí)慣，具有運(yùn)用色彩搭配、頁(yè)面布局來(lái)設(shè)計(jì)有較好用戶體驗(yàn)的網(wǎng)站頁(yè)面的能力。

二、中等職業(yè)學(xué)校學(xué)生的特點(diǎn)

中等職業(yè)學(xué)校的學(xué)生是特殊群體，他們大部分在中學(xué)時(shí)期的學(xué)習(xí)并不是很理想，在學(xué)習(xí)上缺乏積極的學(xué)習(xí)動(dòng)機(jī)，學(xué)習(xí)目標(biāo)不明確，學(xué)習(xí)惰性強(qiáng)，對(duì)枯燥的知識(shí)點(diǎn)不感興趣。雖然他們知識(shí)基礎(chǔ)比較薄弱，但是智力素質(zhì)卻不差，他們對(duì)自己的職業(yè)和社會(huì)期望較高。因此，在中等職業(yè)教育過(guò)程中要“因材施教”，注重開發(fā)學(xué)生的職業(yè)潛力，強(qiáng)化教學(xué)實(shí)踐環(huán)節(jié)，培養(yǎng)學(xué)生操作能力，將教學(xué)與職業(yè)掛鉤，極大程度提升學(xué)生的學(xué)習(xí)積極性及未來(lái)工作應(yīng)用能力。

三、傳統(tǒng)教學(xué)方法在“Web 前端開發(fā)”教學(xué)中的不足

傳統(tǒng)的教學(xué)方法以教師的知識(shí)講授為主，教師在課堂上講授知識(shí)點(diǎn)，學(xué)生在接受知識(shí)的基礎(chǔ)上進(jìn)行練習(xí)鞏固。傳統(tǒng)教學(xué)法的初衷是教師在課堂上的教學(xué)能讓學(xué)生牢牢掌握知識(shí)，而“Web 前端開發(fā)”這門課涉及很多標(biāo)記的使用、CSS的引用、函數(shù)的調(diào)用等，這些知識(shí)點(diǎn)并不需要學(xué)生的死記硬背。在實(shí)際Web 前端開發(fā)過(guò)程中，程序員是可以上網(wǎng)查詢各種資料的，這門課不僅需要學(xué)生記住知識(shí)點(diǎn)，更重要的是要讓學(xué)生掌握實(shí)際運(yùn)用的方法。傳統(tǒng)教學(xué)方法所體現(xiàn)出來(lái)的問(wèn)題便是教師只顧完成讓學(xué)生掌握知識(shí)點(diǎn)的教學(xué)任務(wù)，并不太關(guān)注學(xué)生在實(shí)際項(xiàng)目操作的時(shí)候是否懂得如何將知識(shí)點(diǎn)與實(shí)際操作相結(jié)合。很多學(xué)生是帶著一臉茫然上機(jī)實(shí)操的，對(duì)于該如何將所學(xué)知識(shí)運(yùn)用到實(shí)際案例中這個(gè)問(wèn)題充滿疑惑。由于Web 前端開發(fā)涉及復(fù)雜的代碼和復(fù)雜的制作流程，教師在表述的過(guò)程中如果單純講解軟件如何運(yùn)用、每個(gè)步驟如何操作，那么，整個(gè)教學(xué)過(guò)程在學(xué)生腦海中只是留下沒(méi)有實(shí)際意義的空白操作，甚至有些學(xué)生只讓知識(shí)點(diǎn)在腦中一掠而過(guò)。以Dreamweaver 軟件的教學(xué)而言，教師主要是遠(yuǎn)程操控學(xué)生的電腦，讓學(xué)生觀看操作步驟，在操作的過(guò)程中教師的速度比較快，即使學(xué)生開始學(xué)習(xí)的時(shí)候充滿興趣，久而久之也會(huì)覺(jué)得枯燥無(wú)聊。學(xué)生只能觀看視頻、跟著步驟操作，學(xué)到知識(shí)卻不懂如何進(jìn)行整合和運(yùn)用，與實(shí)際聯(lián)系很少，這便拉遠(yuǎn)了學(xué)生與Web 前端開發(fā)的距離。同時(shí)傳統(tǒng)的教學(xué)模式不夠注重知識(shí)與企業(yè)需求的對(duì)接，容易造成知識(shí)與技能的脫軌，存在教師傳授的知識(shí)在企業(yè)中并不適用的問(wèn)題。

四、項(xiàng)目教學(xué)法在“Web 前端開發(fā)”教學(xué)中運(yùn)用的優(yōu)勢(shì)

項(xiàng)目教學(xué)法在“Web 前端開發(fā)”中運(yùn)用的最大優(yōu)勢(shì)就是利用實(shí)際企業(yè)中的項(xiàng)目，將企業(yè)需求與知識(shí)傳授相結(jié)合，教師不再簡(jiǎn)單依賴教材中的案例，而是結(jié)合上課的知識(shí)點(diǎn)將項(xiàng)目分解，提取出本次課的項(xiàng)目運(yùn)用案例，將教學(xué)任務(wù)分解得更為透徹。案例更加貼合實(shí)際運(yùn)用，讓學(xué)生學(xué)習(xí)起來(lái)更直觀清晰和有目的性，讓他們對(duì)于知識(shí)的掌握也更具實(shí)際意義。比如在“Web 前端開發(fā)”實(shí)踐課時(shí)，教師發(fā)布一個(gè)大項(xiàng)目，并且分解為很多子項(xiàng)目，每個(gè)項(xiàng)目涉及的知識(shí)點(diǎn)不一樣，教師根據(jù)分解的項(xiàng)目進(jìn)行知識(shí)講解，有針對(duì)性地進(jìn)行知識(shí)傳授，再讓學(xué)生以小組為單位進(jìn)行組內(nèi)的分工與協(xié)作，讓學(xué)生在項(xiàng)目中實(shí)踐。在以完成項(xiàng)目為目標(biāo)的引導(dǎo)下，課堂上教師不僅完成了對(duì)知識(shí)的傳授，還讓學(xué)生對(duì)知識(shí)進(jìn)行了整合運(yùn)用，培養(yǎng)了學(xué)生運(yùn)用知識(shí)解決實(shí)際問(wèn)題的能力。可以看出，項(xiàng)目教學(xué)法不僅有助于高效教學(xué)課堂的實(shí)現(xiàn)，更有助于學(xué)生吃透知識(shí)，快速掌握Web 前端開發(fā)的項(xiàng)目運(yùn)用，讓每個(gè)學(xué)生都積極參與進(jìn)來(lái)并且完成好自己的任務(wù)，在掌握知識(shí)的同時(shí)又培養(yǎng)了合作與溝通能力。

五、項(xiàng)目教學(xué)法在“Web 前端開發(fā)”教學(xué)中的探索

（一）課堂項(xiàng)目導(dǎo)入

在“Web 前端開發(fā)”課程正式展開時(shí)，教師可以通過(guò)欣賞優(yōu)秀的Web 前端開發(fā)作品的方式進(jìn)行課堂導(dǎo)入，以此充分調(diào)動(dòng)課堂氣氛。優(yōu)秀的網(wǎng)頁(yè)作品本身就具有很大的感染力，當(dāng)學(xué)生欣賞到這些優(yōu)秀網(wǎng)頁(yè)時(shí)，會(huì)激起自身也成為Web 前端開發(fā)“大神”的欲望。這種案例展示，能夠讓學(xué)生展望到好好學(xué)習(xí)的成果，從而能利用學(xué)生的敬仰之心調(diào)動(dòng)起他們的學(xué)習(xí)積極性。

教師在授課過(guò)程中，要將企業(yè)實(shí)際需求項(xiàng)目案例帶入課堂，使企業(yè)對(duì)人才的要求與授課知識(shí)點(diǎn)相結(jié)合，充分將職業(yè)教育與企業(yè)需求相結(jié)合，摒棄傳統(tǒng)課堂中的“閉門造車”，讓學(xué)生不只是簡(jiǎn)單地記住知識(shí)點(diǎn)，更是要將知識(shí)點(diǎn)運(yùn)用到實(shí)際的項(xiàng)目中去，讓學(xué)生在“項(xiàng)目”中學(xué)習(xí)，在“項(xiàng)目”中掌握知識(shí)點(diǎn)。教學(xué)核心在于讓學(xué)生掌握的不僅是知識(shí)，更是一項(xiàng)技能。

（二）合作小組的建立

Web 前端開發(fā)項(xiàng)目的完成不可能只憑借一人之力，除了要求學(xué)生具有代碼編寫能力，還要求學(xué)生有色彩搭配基礎(chǔ)、審美能力、設(shè)計(jì)能力等，這需要分工合作，因此自然要對(duì)學(xué)生進(jìn)行分工。教師在課前可以根據(jù)學(xué)生的不同特點(diǎn)和知識(shí)掌握情況等，將學(xué)生分成幾個(gè)合作小組。有針對(duì)性地進(jìn)行分組，可以避免組內(nèi)的成員因知識(shí)掌握較為薄弱而不能完成實(shí)踐項(xiàng)目，同時(shí)也能擴(kuò)大學(xué)生的人際交往范圍，培養(yǎng)學(xué)生的協(xié)作能力。課上，教師根據(jù)授課內(nèi)容發(fā)布相關(guān)項(xiàng)目任務(wù)，各小組定好組長(zhǎng)之后對(duì)任務(wù)進(jìn)行合理分配，保障小組成員都能夠發(fā)揮自己的長(zhǎng)項(xiàng)，充分利用學(xué)生的團(tuán)結(jié)協(xié)作來(lái)完成項(xiàng)目的制作。

（三）課堂項(xiàng)目教學(xué)實(shí)施

課堂項(xiàng)目教學(xué)的實(shí)施過(guò)程與傳統(tǒng)課堂有別，不再以教師講授知識(shí)點(diǎn)為主，而是以項(xiàng)目的實(shí)現(xiàn)來(lái)貫穿整個(gè)教學(xué)過(guò)程。以學(xué)生項(xiàng)目實(shí)踐為主，以教師分析項(xiàng)目、講解重難點(diǎn)為輔，課本上的知識(shí)點(diǎn)多是以微課的形式讓學(xué)生利用課前時(shí)間進(jìn)行預(yù)習(xí)而不占用太多的課內(nèi)時(shí)間。

課中教師要首先將項(xiàng)目?jī)?nèi)容進(jìn)行分解，提取出本次課涉及的項(xiàng)目?jī)?nèi)容，對(duì)內(nèi)容進(jìn)行分析和示范。例如項(xiàng)目可以分為框架搭建模塊、CSS 美化模塊、JavaScript 模塊等，當(dāng)涉及其中的知識(shí)點(diǎn)時(shí)，教師提取其中的項(xiàng)目分塊為案例進(jìn)行分析講解，以一個(gè)項(xiàng)目的制作來(lái)貫穿整個(gè)教學(xué)，讓學(xué)生的知識(shí)掌握更具有連續(xù)性。然后，學(xué)生根據(jù)教師布置的要求共同完成項(xiàng)目。在教學(xué)過(guò)程中，注重學(xué)生的知識(shí)與技能的轉(zhuǎn)換，將職業(yè)教育與企業(yè)需求相結(jié)合，意在培養(yǎng)學(xué)生將知識(shí)運(yùn)用到實(shí)際案例中去的能力。在整個(gè)教學(xué)過(guò)程中要給學(xué)生傳輸一種理念：“Web 前端開發(fā)”項(xiàng)目進(jìn)行的過(guò)程中不免會(huì)遇到問(wèn)題，我們應(yīng)該有團(tuán)結(jié)協(xié)作的精神，無(wú)論是項(xiàng)目設(shè)計(jì)還是突破環(huán)節(jié)，都需要組內(nèi)人員相互配合，只有組內(nèi)人員都積極轉(zhuǎn)動(dòng)自己的大腦才能將項(xiàng)目順利進(jìn)行下去。

（四）項(xiàng)目評(píng)價(jià)

“Web 前端開發(fā)”教學(xué)過(guò)程中的評(píng)價(jià)，不能僅僅局限于教師一人，應(yīng)該將評(píng)價(jià)責(zé)任落到每位學(xué)生身上，甚至是企業(yè)身上。學(xué)生除了能夠?qū)λ诉M(jìn)行客觀評(píng)價(jià)之外，還要能對(duì)自己進(jìn)行真實(shí)評(píng)價(jià)。比如，教師在項(xiàng)目回收的時(shí)候可以讓學(xué)生在課堂上對(duì)作品進(jìn)行分享、互評(píng)和投票，進(jìn)行小組間的項(xiàng)目評(píng)價(jià)。之后便要對(duì)小組內(nèi)部的每個(gè)成員進(jìn)行貢獻(xiàn)和能力的評(píng)價(jià)，評(píng)價(jià)之后還要進(jìn)行有效的獎(jiǎng)勵(lì)措施。這樣一來(lái)，學(xué)生便能夠找到學(xué)習(xí)的動(dòng)力，從而激勵(lì)學(xué)生在小組內(nèi)多多出力，同時(shí)防止不動(dòng)腦“混”成績(jī)的情況出現(xiàn)。除此之外，學(xué)生對(duì)自己的評(píng)價(jià)也是很重要的，定位準(zhǔn)確可以讓學(xué)生找到最客觀的自己，從而查缺補(bǔ)漏。當(dāng)然，學(xué)生學(xué)到的知識(shí)最后要運(yùn)用到工作中去的，讓企業(yè)介入評(píng)價(jià)不僅有助于學(xué)生對(duì)這門課程的學(xué)習(xí)，還有利于學(xué)生日后對(duì)工作崗位的了解。

網(wǎng)絡(luò)化的發(fā)展將“Web 前端開發(fā)”這門課程逐漸推向了熱點(diǎn)，其實(shí)，Web 前端開發(fā)很大程度上融合了時(shí)代的元素，科技的發(fā)展和進(jìn)步都能夠在Web 前端開發(fā)的水平上體現(xiàn)出來(lái)。Web 前端開發(fā)面向的群體很廣，網(wǎng)頁(yè)幾乎與人們的日常生活密不可分。針對(duì)目前“Web 前端開發(fā)”教學(xué)效果不佳的狀況和學(xué)生不愛學(xué)的現(xiàn)象，教師應(yīng)該先從改變自身教學(xué)方法入手，項(xiàng)目教學(xué)法便是一種實(shí)用、有效的，將知識(shí)轉(zhuǎn)換為技能并且讓課堂不再枯燥的教學(xué)方法，它能讓學(xué)生將知識(shí)應(yīng)用到項(xiàng)目中去，在實(shí)踐中出真知。