企業(yè)項(xiàng)目運(yùn)作式教學(xué)法在html5+css3課程中的應(yīng)用

陳紅霞 黃永康

【摘 要】本文論述企業(yè)項(xiàng)目運(yùn)作式教學(xué)法在html5+css3課程中的應(yīng)用，總結(jié)高職網(wǎng)頁設(shè)計(jì)類課程的教學(xué)現(xiàn)狀，提出企業(yè)項(xiàng)目運(yùn)作式教學(xué)法包括教師參加培訓(xùn)與頂崗實(shí)習(xí)，獲取最新的教學(xué)材料，將企業(yè)式項(xiàng)目操作帶入課堂，企業(yè)項(xiàng)目分段檢查與考核，并結(jié)合html5+css3課程闡述應(yīng)用過程。

【關(guān)鍵詞】企業(yè)項(xiàng)目運(yùn)作式教學(xué)法;html5;css3;web前端;響應(yīng)式設(shè)計(jì)

【中圖分類號】G;【文獻(xiàn)標(biāo)識(shí)碼】A

【文章編號】0450-9889（2020）01C-0085-02

響應(yīng)式web前端設(shè)計(jì)（html5+css3）是高職軟件技術(shù)專業(yè)的核心課程。如何讓學(xué)生在有限的課時(shí)內(nèi)掌握更多的技能，如何從掌握簡單的靜態(tài)網(wǎng)頁設(shè)計(jì)，提升到能熟練地運(yùn)用css3、bootstrap框架等進(jìn)行響應(yīng)式web設(shè)計(jì)，以適應(yīng)企業(yè)對高職軟件類專業(yè)畢業(yè)生的高質(zhì)量崗位要求，是擺在高職軟件類專業(yè)教師面前的一個(gè)問題。

一、高職網(wǎng)頁設(shè)計(jì)類課程的教學(xué)現(xiàn)狀

（一）教學(xué)環(huán)境：網(wǎng)頁設(shè)計(jì)技術(shù)的更新?lián)Q代速度快?；趙eb前端的網(wǎng)頁設(shè)計(jì)類技術(shù)隨著“互聯(lián)網(wǎng)+”的廣泛運(yùn)用而飛速發(fā)展。css樣式的多樣化，以及Google Chrome瀏覽器增加的功能標(biāo)簽越來越多，設(shè)計(jì)框架也越來越成熟和多變。一方面日新月異的科技進(jìn)步使網(wǎng)頁設(shè)計(jì)越來越絢爛和豐富多彩，一個(gè)網(wǎng)頁上除了文檔圖片之外，還需要盡可能多地囊括視頻、Vlog等新興的事物。于是，前端設(shè)計(jì)對于教師與學(xué)生的要求越來越高，要求軟件專業(yè)類教師與時(shí)俱進(jìn)地不斷學(xué)習(xí)新技術(shù)，提高自己的專業(yè)技能，以適應(yīng)不斷變化的前端開發(fā)要求。

（二）教學(xué)資源：參差不齊又容易過時(shí)。教學(xué)資源的獲取往往來自教師所選擇課本里配套提供的源代碼或者其他資源，但編著者從撰寫課本到排版印刷，到最后正式出版并到達(dá)高職學(xué)生手中使用，存在著一定的時(shí)間差，導(dǎo)致有些教學(xué)資源甚至還沒出版就已經(jīng)過時(shí)。

（三）教學(xué)方式：難以適應(yīng)當(dāng)前的時(shí)代要求。網(wǎng)頁設(shè)計(jì)類課程的教學(xué)大多采用傳統(tǒng)的理實(shí)一體化教學(xué)，教師按照課本上所提供的源代碼和配套資源進(jìn)行講解和操作，高職生按照老師的示范復(fù)制完成此類操作。一開始高職生都能比較順利地完成課堂教學(xué)的要求，但隨著網(wǎng)頁設(shè)計(jì)需求的改變，高職生會(huì)不知所措。另外，高職生單純的模仿難以適應(yīng)不斷變化的前端網(wǎng)頁設(shè)計(jì)，技能在機(jī)械式重復(fù)中難以得到真正提高。

（四）輔助教學(xué)方式：偏向設(shè)計(jì)而減弱編程能力。高職的網(wǎng)頁設(shè)計(jì)類課程采用了較多教學(xué)輔助軟件，較常見的是Bracket和Dreamweaver（即DW）。特別是DW因其命令簡單又能自動(dòng)生成源代碼，被廣泛地運(yùn)用在網(wǎng)頁設(shè)計(jì)類教學(xué)中。DW偏向于設(shè)計(jì)，大多數(shù)高職生只需要簡單地完成文檔或圖片文字的拖動(dòng)，就可以自動(dòng)形成網(wǎng)頁和生成源代碼。但高職生卻無法通過DW獨(dú)立地編寫css樣式文件;一旦網(wǎng)頁樣式略微復(fù)雜和多樣化，高職生又無從下手，難以達(dá)到教學(xué)的要求。

（五）考核方式：檢驗(yàn)標(biāo)準(zhǔn)單一，分?jǐn)?shù)難以真正體現(xiàn)高職生的技能水平?，F(xiàn)階段高職網(wǎng)頁設(shè)計(jì)類課程的考核方式大多采用機(jī)試或者提交作品，基本上是教師給出同一個(gè)網(wǎng)頁設(shè)計(jì)題目，讓全體學(xué)生進(jìn)行設(shè)計(jì)。在這樣的考核形式下，部分學(xué)生的作品雷同，甚至有部分高職生只是利用DW軟件簡單修改圖片就完成了網(wǎng)頁設(shè)計(jì)。這樣單一的考核與評分標(biāo)準(zhǔn)難以真正體現(xiàn)高職生的專業(yè)技能水平，在評分上也難以做到真正的公正。

二、企業(yè)項(xiàng)目運(yùn)作式教學(xué)法

（一）教學(xué)資源獲取：教師參加培訓(xùn)與頂崗實(shí)習(xí)，獲取最新的教學(xué)材料。以筆者所在的廣西工業(yè)職業(yè)技術(shù)學(xué)院為例，首先，教學(xué)團(tuán)隊(duì)積極地前往北上廣等大城市進(jìn)行專業(yè)培訓(xùn)，以掌握最前沿的前端網(wǎng)頁設(shè)計(jì)專業(yè)技能，了解網(wǎng)頁設(shè)計(jì)的發(fā)展方向和發(fā)展趨勢，以適應(yīng)當(dāng)前的教學(xué)要求。其次，教學(xué)團(tuán)隊(duì)積極地前往校企合作企業(yè)進(jìn)行頂崗實(shí)踐。一方面了解企業(yè)對高職生網(wǎng)頁設(shè)計(jì)方面的崗位需求和要求;另一方面獲取企業(yè)已完成項(xiàng)目的最新配套資源，并充分運(yùn)用到課堂教學(xué)中來。同時(shí)，還可以獲得企業(yè)的相關(guān)培訓(xùn)資料，以企業(yè)培訓(xùn)的方式結(jié)合高職生的培養(yǎng)模式，將教與學(xué)的方式模擬成高職生在企業(yè)完成項(xiàng)目的形式。教師相當(dāng)于項(xiàng)目經(jīng)理，而高職生相當(dāng)于企業(yè)員工。以完成企業(yè)級別項(xiàng)目的方式，對高職生的網(wǎng)頁設(shè)計(jì)完成質(zhì)量提出了更高的要求。

（二）教學(xué)方式：企業(yè)式項(xiàng)目操作帶入課堂。網(wǎng)頁設(shè)計(jì)對象上的多樣性更能體現(xiàn)高職生的專業(yè)技能水平。在教學(xué)上，將企業(yè)完成項(xiàng)目的方式帶入課堂中來，教師更像項(xiàng)目經(jīng)理，高職生類似項(xiàng)目組成員。課堂上采取了“邊教邊學(xué)”的方式，將整個(gè)項(xiàng)目分割成各個(gè)子任務(wù)，配合教學(xué)進(jìn)度，高職生從做簡單的子模塊開始進(jìn)行網(wǎng)頁設(shè)計(jì)，而這樣的子模塊又是整個(gè)大網(wǎng)站的一個(gè)組成部分。

同時(shí)，盡可能地培養(yǎng)高職生的自學(xué)能力，高職生獲取的知識(shí)并不僅僅局限于課本;專業(yè)教師可以同時(shí)提供多種資源，讓高職生選擇和組合，也可以提供多種自學(xué)資源，讓高職生自主學(xué)習(xí)。為了防止高職生的作品雷同，筆者要求學(xué)生完成的網(wǎng)頁設(shè)計(jì)中強(qiáng)調(diào)更多的個(gè)人特質(zhì)。比如，網(wǎng)頁設(shè)計(jì)作品以“個(gè)人網(wǎng)站”作為標(biāo)準(zhǔn)，其中又包含了“個(gè)人電子雜志設(shè)計(jì)”“個(gè)人求職簡歷”等個(gè)性化的元素，強(qiáng)調(diào)高職生的自主編程能力，高職生相互之間難以模仿，這要求高職生去自我學(xué)習(xí)和自我提升。

（三）考核方式：企業(yè)項(xiàng)目分段檢查與考核。為了適應(yīng)以上的教學(xué)模式，考核模式也轉(zhuǎn)換為企業(yè)式的階段檢查與答辯方式。高職生每周就像在企業(yè)例會(huì)上一樣，將自己的階段性成果當(dāng)眾展示和講解，而其他同學(xué)對該同學(xué)的項(xiàng)目進(jìn)展?fàn)顩r進(jìn)行集體打分和討論，指出其在網(wǎng)頁設(shè)計(jì)上的不足和改進(jìn)的方式方法。這樣的實(shí)施效果，一是使得課堂互動(dòng)較生動(dòng)有趣;二是高職生參與到課堂和項(xiàng)目中去，提高了自身專業(yè)素養(yǎng)。

因?yàn)橛辛烁呗毶髌分g的相互對比，高職生的網(wǎng)頁設(shè)計(jì)成績評定就以“最好的作品”作為參考標(biāo)準(zhǔn)，結(jié)合界面、css3樣式設(shè)計(jì)、JavaScript設(shè)計(jì)，通過相互之間的比較扣分或加分，根據(jù)學(xué)生各自的作品和水平進(jìn)行評定。這種評分模式既促進(jìn)了高職生之間的良性競爭，又培養(yǎng)了學(xué)生之間協(xié)調(diào)合作、共同進(jìn)步的團(tuán)隊(duì)精神。

三、企業(yè)項(xiàng)目運(yùn)作式教學(xué)法在html5+css3課程中的應(yīng)用

以廣西工業(yè)職業(yè)技術(shù)學(xué)院為例，將企業(yè)項(xiàng)目運(yùn)作式教學(xué)法應(yīng)用到軟件技術(shù)專業(yè)17級的html5+css3課程設(shè)計(jì)項(xiàng)目“基于html5+css3的電子系成果展示網(wǎng)站”。

（一）項(xiàng)目任務(wù)的分派，組建項(xiàng)目小組。由教師下達(dá)課程設(shè)計(jì)任務(wù)書（即項(xiàng)目計(jì)劃書），計(jì)劃書中詳細(xì)地描述出電子系有關(guān)領(lǐng)導(dǎo)（相當(dāng)于客戶）對該成果展示網(wǎng)站的需求，包括功能性需求（網(wǎng)站需要達(dá)到怎樣一種展示效果）、性能性需求（網(wǎng)站的響應(yīng)速度等）。而最終的項(xiàng)目產(chǎn)出物需要同時(shí)提交展示網(wǎng)站的源代碼和配套的軟件文檔。

在參與課程設(shè)計(jì)的42名學(xué)生中，由授課教師指派6名學(xué)生作為項(xiàng)目小組組長（相當(dāng)于任命6個(gè)項(xiàng)目經(jīng)理），各項(xiàng)目經(jīng)理具備人事任免權(quán)，可以自由地從另外的36名同學(xué)中選出1～7名同學(xué)組建自己的項(xiàng)目團(tuán)隊(duì)，為了保證各項(xiàng)目組的成員能夠充分地行使表決權(quán)，每個(gè)項(xiàng)目小組的人數(shù)必須為單數(shù)。這種操作方式一方面培養(yǎng)了學(xué)生的團(tuán)結(jié)協(xié)作能力，另一方面又提高了學(xué)生的團(tuán)隊(duì)溝通能力。

（二）WBS項(xiàng)目分解和責(zé)權(quán)分工。各項(xiàng)目經(jīng)理通過Project 2013管理軟件，以工程結(jié)構(gòu)分解WBS的方式將項(xiàng)目分解成各個(gè)子任務(wù)（工序），每個(gè)子任務(wù)有相應(yīng)的開始時(shí)間和結(jié)束時(shí)間，并進(jìn)行各個(gè)子任務(wù)的優(yōu)先級排序，并標(biāo)注出各工序之間的銜接關(guān)系。這個(gè)過程當(dāng)中，各項(xiàng)目經(jīng)理需對教師提交進(jìn)度計(jì)劃表，由教師根據(jù)教學(xué)計(jì)劃，對各進(jìn)度計(jì)劃表進(jìn)行審核和做一些相應(yīng)的更改，經(jīng)過確認(rèn)之后再發(fā)還給各項(xiàng)目經(jīng)理，要求項(xiàng)目經(jīng)理按此進(jìn)度計(jì)劃表組織開發(fā)工作。

教師要求項(xiàng)目經(jīng)理在本項(xiàng)目團(tuán)隊(duì)中進(jìn)行責(zé)權(quán)分工，有詳細(xì)的任務(wù)分配表和任務(wù)書，以書面和口頭通知的方式將任務(wù)分派給個(gè)人。在這個(gè)過程中每個(gè)同學(xué)的任務(wù)量不能過多或過少，項(xiàng)目經(jīng)理有權(quán)對本小組各成員的表現(xiàn)進(jìn)行階段性評價(jià)。

在此過程中由項(xiàng)目經(jīng)理監(jiān)管本項(xiàng)目團(tuán)隊(duì)的工作進(jìn)展，每周一各項(xiàng)目小組需組織項(xiàng)目例會(huì)，并將項(xiàng)目進(jìn)展?fàn)顩r以交流的形式向教師匯報(bào)，并填寫相應(yīng)的開發(fā)日志。教師對照進(jìn)度計(jì)劃表，適時(shí)地對各項(xiàng)目組進(jìn)展?fàn)顩r進(jìn)行監(jiān)控和調(diào)整，并在課堂上對所有學(xué)生進(jìn)行授課和講解，并解答各項(xiàng)目小組遇到的技術(shù)問題。

（四）成果展示和成績評定。課程后期，各項(xiàng)目小組以PPT+成果網(wǎng)站展示的形式進(jìn)行答辯，要求項(xiàng)目小組成員分別講解自己所完成的模塊部分，教師將對該學(xué)生提出問題，并就該項(xiàng)目組成員具體完成的模塊部分做進(jìn)一步考核和評分。

而最終的成績評定，一方面通過各項(xiàng)目經(jīng)理的績效考評表進(jìn)行判斷，另一方面綜合該學(xué)生的考勤（30%）、答辯表現(xiàn)（10%）、模塊展示及完成效果（60%），給出最終的分?jǐn)?shù)作為該門課程的總評成績。

在web前端（html5+css3）網(wǎng)頁設(shè)計(jì)課程中，采用了企業(yè)項(xiàng)目運(yùn)作式教學(xué)方法，高職生的自主學(xué)習(xí)能力得到了極大提高。分段式檢查提升了學(xué)生學(xué)習(xí)和完成作品的積極性。而以企業(yè)項(xiàng)目式的完成標(biāo)準(zhǔn)來要求高職生完成網(wǎng)頁設(shè)計(jì)作品的質(zhì)量，促進(jìn)了學(xué)生專業(yè)技能的提升。

【參考文獻(xiàn)】

[1]李文.任務(wù)驅(qū)動(dòng)教學(xué)法在《HTML5與CSS3編程》教學(xué)中的應(yīng)用[J].計(jì)算機(jī)產(chǎn)品與流通，2019（4）

[2]張敏，陶建林.HTML5前端開發(fā)課程教學(xué)改革實(shí)踐[J].教育現(xiàn)代化，2018（52）

【基金項(xiàng)目】廣西教育廳2017年度教育教學(xué)研究項(xiàng)目一般項(xiàng)目B類“基于CDIO的《軟件工程》課程教學(xué)改革研究”（GXGZJG2017B101）;廣西工業(yè)職業(yè)技術(shù)學(xué)院2017年度科學(xué)研究項(xiàng)目“基于CDIO的《軟件工程》課程教學(xué)改革研究”（桂工業(yè)院科研Y2017JG012）

【作者簡介】陳紅霞（1974— ），女，廣西柳州人，廣西工業(yè)職業(yè)技術(shù)學(xué)院副教授，研究方向：軟件工程、高職教育教學(xué)。

（責(zé)編 丁 夢）