企業項目運作式教學法在html5+css3課程中的應用

陳紅霞 黃永康

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

【關鍵詞】企業項目運作式教學法;html5;css3;web前端;響應式設計

【中圖分類號】G;【文獻標識碼】A

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

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

一、高職網頁設計類課程的教學現狀

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

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

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

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

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

二、企業項目運作式教學法

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

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

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

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

因為有了高職生作品之間的相互對比，高職生的網頁設計成績評定就以“最好的作品”作為參考標準，結合界面、css3樣式設計、JavaScript設計，通過相互之間的比較扣分或加分，根據學生各自的作品和水平進行評定。這種評分模式既促進了高職生之間的良性競爭，又培養了學生之間協調合作、共同進步的團隊精神。

三、企業項目運作式教學法在html5+css3課程中的應用

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

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

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

（二）WBS項目分解和責權分工。各項目經理通過Project 2013管理軟件，以工程結構分解WBS的方式將項目分解成各個子任務（工序），每個子任務有相應的開始時間和結束時間，并進行各個子任務的優先級排序，并標注出各工序之間的銜接關系。這個過程當中，各項目經理需對教師提交進度計劃表，由教師根據教學計劃，對各進度計劃表進行審核和做一些相應的更改，經過確認之后再發還給各項目經理，要求項目經理按此進度計劃表組織開發工作。

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

在此過程中由項目經理監管本項目團隊的工作進展，每周一各項目小組需組織項目例會，并將項目進展狀況以交流的形式向教師匯報，并填寫相應的開發日志。教師對照進度計劃表，適時地對各項目組進展狀況進行監控和調整，并在課堂上對所有學生進行授課和講解，并解答各項目小組遇到的技術問題。

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

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

在web前端（html5+css3）網頁設計課程中，采用了企業項目運作式教學方法，高職生的自主學習能力得到了極大提高。分段式檢查提升了學生學習和完成作品的積極性。而以企業項目式的完成標準來要求高職生完成網頁設計作品的質量，促進了學生專業技能的提升。

【參考文獻】

[1]李文.任務驅動教學法在《HTML5與CSS3編程》教學中的應用[J].計算機產品與流通，2019（4）

[2]張敏，陶建林.HTML5前端開發課程教學改革實踐[J].教育現代化，2018（52）

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

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

（責編 丁 夢）