陳紅霞 黃永康

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

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

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

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

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

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

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

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

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

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

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

二、企業(yè)項目運作式教學(xué)法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【參考文獻】

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

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

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

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

（責(zé)編 丁 夢）