“產、賽、學”融合下Web前端技術課程建設改革探索

摘" 要：針對當前本科院校Web前端開發技術課程教學中存在的教學目標不明確、專業實踐能力培養不足、教學過程設計與考評機制不完善等問題，該文基于產學合作協同育人項目指南，探索融合“產、賽、學”為一體的Web前端開發技術課程建設改革重點、策略及有效教學措施，以期為其他院校相關課程建設或教學改革提供借鑒。

關鍵詞：產、賽、學；Web前端技術；網頁設計；網站規劃；課程建設改革

中圖分類號：G642" " " 文獻標志碼：A" " " " " 文章編號：2096-000X（2023）13-0006-04

Abstract： In the current teaching of Web Front-end Development Technology course in undergraduate colleges， there exists the problems such as unclear teaching objectives， insufficient cultivation of professional practical ability， imperfect teaching process design and evaluation mechanism. Based on the guidance of industry university cooperation collaborative education project， this paper explores the key points of reform， strategies and effective teaching measures of Web Front-end Development Technology course construction integrating \"production， competition and learning\"， in order to solve the above problems and provide reference for relevant curriculum construction or teaching reform in other colleges and universities.

Keywords： production， competition and learning; Web Front-end Development Technology; Web design; Website programming; course construction reform

隨著我國移動計算、物聯網等新興網絡產業與技術的高速發展，互聯網產業規模的不斷擴大，網絡服務質量的持續提升，用戶體驗至上的時代已經來臨。當前，計算機技術向外領域不斷拓展，媒體產品人性化的意識逐漸增強，能熟練使用HTML、CSS和JavaScript等Web前端開發技術的專業人員在人才市場上供不應求[1]。除了移動互聯網企業，金融、交通、零售等相關行業也開始注重用戶界面設計或交互設計等方面的投入，亟需相關人才。

Web前端開發技術是培養網頁設計師的入門課程，也是河南中醫藥大學（以下簡稱“我校”）信息技術學院和管理學院的一門專業必修課，同時藥學院和基礎醫學院部分專業也將其列為公共選修課程。該課程實踐性較強，目前在我校已開設10多年。然而，由于高校對學分有嚴格的管控，因此，這類課程大多為總36學時的實踐課或總54學時的理論與實踐課，總體上學時分配較少。在現有教材知識點大而全的情況下，教師們很難將知識點較為系統地、完整地傳授給學生，而且，在實際的教學過程中，該課程的理論講解和實踐操作分離較為嚴重，二者的銜接關系不容易處理[2]。除此之外，針對與Web前端開發技術密切相關的網頁設計或網站規劃人才培養，多數高校在相關課程授課過程中，其授課內容及效果與社會市場需求明顯不一致，學生在學完該課程后，沒有真正的實踐經驗，缺乏就業競爭力；而各用人單位又急需網頁設計與網站規劃人才，最終導致當前社會需求與人才供給嚴重脫節[3]。

因此，為了順應時代和市場需求，提高學生的專業技能及社會創造力，各高校或相關行業非常有必要先對該課程教學工作現狀進行調研、分析、探討及研究，并為該課程體系的構建提供有效的改革措施。

一" 當前課程教學存在的主要問題

通過對該課程在我校以及其他同類院校的教學現狀進行調研與分析，發現主要存在如下問題。

（一）" 教學目標不明確

Web前端開發技術層出不窮，更新換代較為頻繁。比如，網頁標記語言HTML已發展到HTML5，標記類型達100多種；用于網頁樣式設置的CSS也發展到了CSS3，擁有上千種的可用屬性及其不同取值用于增加網頁交互性的腳本語言JavaScript更是經歷了技術與工具集的巨變，比如，原有的XML數據交換格式幾乎已被新的JSON完全取代。而且，目前該課程相關的大量知識內容，部分是商業常用的，部分幾乎被廢棄。另外，不同層次學生之間的知識結構體系存在一定的差異，為學生們所設置的學習內容也應存在一定的區別。因此，針對該課程中的大量標記語言、CSS屬性使用及JavaScript函數，如何進行知識分層以適應不同層次的求學者，是該課程以及當前大多數課程實施前未經過認真論證的。

尤其是，當前教學過程中的實驗教學定位不準確，缺乏商業化需求的目標，沒有形成明確的知識結構主線，知識體系松散且龐大，導致學生學無目的，難以將所學知識融入社會商業需求之中。另外，該課程通常在大學一年級下學期或二年級上學期開設，此時，學生學習興趣雖濃厚，但由于依然采用高中時期緊盯課本的學習方法，且在實驗教學上缺乏商業領域流行技術知識，不具備自我學習和查找資料的能力，所以極易形成消極的學習態度。因此，必須合理化該課程的教學內容，對其有明確的定位和培養目標，務必使學生學有所用。

（二）" 忽視了專業實踐能力培養的重要性

本課程多數相關教材注重于理論知識的講解與傳授，其優勢在于可以讓學生具備堅實的理論基礎。但因該課程知識量大，內容多且零碎，教師教授困難，學生也難以消化，從而很難獲得良好的教學及學習效果。其次，實踐教學是該課程授課方式的重中之重，實驗項目本身過多關注語言本身的練習，缺乏對學生實際開發經驗與能力的培養，目前不夠完善和系統。比如，在該課程結束后，學生除了應具備實現文字段落、表單、表格等的操作能力，還應掌握如何對網頁進行整體布局的能力。但在進行中大型規模的實際項目設計中，多數學生無從下手，不知道怎樣才能將所學的知識整合到一個綜合項目中。顯然，這是目前多數院校在該課程教學中過于強調對語言本身要素的學習，以小知識點為目標，忽視了對知識綜合運用和實踐能力的培養所造成的。

（三）" 教學過程設計與考評機制不夠完善

在如Web前端開發技術等多數理工科專業課程的教學過程中，教師通常采用先講后練、教練分離的模式進行。事實上，經過大量調研發現，這種模式存在很多弊端：第一，不利于依據生源實情進行分層教學。因生源不同，各學生對計算機基礎知識和常規操作的掌握程度不同，導致部分以前從未接觸過計算機的學生（比如偏遠地區生活條件較為落后的學生）學習吃力，跟不上教學進度，從而學習積極性降低；第二，實踐環節學習效率低下。在實踐教學過程中，學生因尋找素材、規劃任務等耗費大量時間，最終導致有難度或困惑的地方未在實驗課堂中得到解決，教師的輔導作用也流于形式；第三，學習效果評估方式單一，缺乏有效的評價機制，難以真正掌握學生對知識吸收的程度。目前，多數院校仍然僅采用試卷和驗證性實驗的形式對學生進行課程考核，缺乏對學生實際動手操作能力的有效評價[4]。

二" 課程體系建設改革重點及有效措施

（一）" 產學協作下的課程建設改革重點及策略

自2016年以來，每年教育部都會給出兩大批次的產學合作協同育人項目申請指南，全國多數知名企業如阿里巴巴、百度和騰訊等均有參與，且開設有金課建設、創新創業教育改革項目等多種類別的項目申請。因此，為了進一步提升本科人才培養質量，深化產教融合、校企合作，針對當前Web前端開發技術課程相關資源繁多且質量差異大、難易程度不清晰等問題，本文認為該課程體系的構建及改革策略應緊密圍繞以下幾個方面進行研究。

1" 課程目標需定位清晰

教學對象定位明確，課程目標清晰合理。該課程開課時間：大學一年級下學期或二年級上學期；學生定位：零基礎，或僅對程序語言有初步的認識，或學習過計算機應用基礎等操作性前導課程的學生。課程目標包括知識目標、能力目標、就業目標和素質目標。其中，知識目標：通過36或54學時的學習，學生能夠掌握網頁設計基本操作技術和應用技巧，獨立完成站點布局和開發任務；能力目標：能運用所學知識開發一些相關項目；就業目標：初級或中級網頁及網站設計師；素質目標：提高學習能力，不斷積累，將知識轉化為技能，并學會交流溝通和團隊協作。

2" 教學內容需精簡實用

教學內容精簡實用，重難點突出。Web前端開發技術課程的學習實際上是如何完成網頁元素的添加、位置布局及動作設定的一個過程，通常涉及HTML、CSS和JavaScript 3種基本網頁制作技術的學習及應用，所含知識點極為瑣碎。因此，該課程的教學內容應以網頁設計與網站規劃中最實用的基本知識為重點進行詳細介紹，采用由淺入深、循序漸進的方式完成對網頁的構思、規劃、制作以及網站構建全過程的系統性介紹，使學生短時間內高效率地快速掌握網頁設計與網站規劃相關語言及常用設計工具的使用，培養學生掌握網頁與網站規劃和制作的能力，為未來進行動態Web網站的建設打下堅實的理論與實踐基礎。比如，CSS選擇器是實現網頁有效布局的一個重點學習內容，CSS3標準中選擇器的種類已達50種以上，但在有限的學時內，課堂教學內容只需保留較為常用的ID選擇器、類選擇器和標簽選擇器等作為主講知識點，其他的作為課下自主學習內容。

3" 教學案例需真實貼切

選擇適用于教學且較為系統完整的真實案例。該課程知識點繁多，對應的教學案例也比較充足，但以往教學中的案例組織較為隨性，案例之間缺乏一定關聯性，導致所學知識點之間的融合性較差，降低了學生對該課程的全局認知性和學習效率。因此，該課程教學中可以以淘寶、京東和亞馬遜等知名商業網站案例作為基礎，融入相關教學知識點并對其進行提取改造，形成知識點難易程度適合且更接近真實商業活動的教學案例。通過一個完整的商業網站案例先對分散的知識點進行講解，再融會貫通，使學生對網頁設計的局部設計和整體布局有連貫性認知。

4" 教學設計需完整有效

構建“案例設計+多樣化教學+學情分析”三位一體的完整教學體系設計。課程教學效果的評價結果大比例取決于教學設計是否完整有效。事實上，教學設計首先必須考慮生源的實際學習情況，其次，教學過程中是否將知識點融入已熟知的現實案例，最后需要考慮采取的教學手段是否適用、全面。因此，該課程可以采用“案例設計+多樣化教學+學情分析”三位一體的完整有效教學模式。在案例設計中，案例類型可以按照“驗證-設計-綜合-創新”分層遞進的模式進行實驗體系設計；教學手段以實際課堂教學為主，借助于慕課、課堂派和雨課堂等線上學習方式[5]，通過課前預習和相關網絡資源的學習、課中關鍵點的講解、實例演示及課后的進階練習，實現多樣化教學的設計規劃；基于課后復習反饋及實驗完成情況，對學情進行及時分析與總結，適當調整教學內容、進度或方法等。

5" 考核方式需靈活全面

課程成績評估方式更加注重形成性考核（過程性考核）。形成性考核可采用“4+2”的模式，其結果可根據相應班級實際情況采取多種方式按不同比例組合給定，比如：課程考核成績=形成性考核成績=考勤（10%）+小組討論（15%）+小組匯報（10%）+階段性測試（25%）+學習筆記（20%）+設計任務（20%）。其中，考勤、小組討論、小組匯報、階段性測試是4個必選的考核項目。考勤按照學生的實際出勤情況進行統計計分；小組討論效果主要從學生參與話題或題目討論的積極性、發言的準確度及完整性、與其他同學的互動性等方面進行評價；小組匯報結果則是根據匯報人對題目內容是否有正確而具體的認識，以及匯報內容的完成度和質量等評定；階段性測試成績主要依據每個學生在完成給定測試題目的過程中應用所學知識點的熟練程度、正確性，以及功能實現的完整性、項目最終的展示效果等指標進行評分。設計任務和學習筆記是從10多個備選考核項目中篩選出的，設計任務結果評定主要根據學生完成相應綜合性任務設計的質量情況，學習筆記考核的是學生學習過程中對課程主要知識點的記錄質量，這2個考核項目也可根據課程性質、學生學習情況甚至任課教師個人習慣等因素進行替換，比如，可將學習筆記替換為實驗報告。總之，為了更大程度地激發學生學習的興趣和積極性，可以采用多種方式靈活組合的課程評價體系。

6" 課程資源需配套齊全

為了便于“教”與“學”工作的順利開展及效率的提高，一門課程體系的構建應提供的教學資源通常包括授課教案、教學課件、教學設計、教學進度表、教學大綱、實驗大綱、實驗素材庫、案例源碼及相關資源平臺等數10種。因此，作為計算機專業的一門必修課和實踐性較強的入門課，Web前端開發技術課程資源的建設尤為重要，至少應包含上述各種資源，此外，最好也提供設計詳細的教學實施方案，包含每節課的課前知識回顧、教學目標、教學重難點、教學方式選擇與設計、教學環境及資源準備、教學過程、教學評價設計、教學反思，全面保障教學工作的順利進行。

（二）" “產、賽、學”融合的課程教學改革主要措施

1" “以賽促學，以賽促教，以賽促創”的課賽融通教學模式

多數技能競賽項目是由相關負責組委會通過全面調研及詳細分析，聽取各行業相關專家的建議或意見，基于職業崗位實際需求而制定的[6-7]。學生參加技能大賽不僅能在反復訓練中熟練掌握網頁設計與網站制作的核心Web技能，開闊眼界，提高自身應變能力和心理素質，還可以通過已取得的比賽成績提高相關企業對參賽者的認可度。因此，各高校要多鼓勵學生參加知名企業、社團或政府部門等舉辦的相關比賽，比如“挑戰杯”各省賽及國賽、國際“金方杯”創意設計大獎賽、“星海獎”大學生海洋文化創意設計大賽、OPPO全球青年創享計劃Renovators和中國“園集獎”花園設計大獎賽等多項賽事。同時，各高校也可以依據更高級別大賽的標準自行舉辦網頁設計類的比賽，方便學生自我檢驗及拓展課程知識技能。此外，通過帶領學生參加比賽也可以有效促進教師在教學過程中能夠緊跟時代或行業需求的步伐，不斷對教學內容進行優化；再者，比賽通常都具有一個激烈競爭的過程，要想取得較好的比賽成績，毫無新意的作品肯定是不可取的，這需要學生發揮其創新能力，提供優秀的創新性成果。顯而易見，以競賽為手段的課賽融通教學模式可以有效達到以賽促學、以賽促教、以賽促創的目的。

2" “以崗為標，以證代考，科研反哺”的課程實踐教學多樣化協作模式

除了各種比賽的獲獎證書外，計算機類的相應職業資格等級證書等在企業中也存在著較高的認可度。因此，對照產業需求，依照知名企業的崗位標準，以企業實際生產案例為依托，融入各項賽事重點考核內容，對學校原有實訓課程體系建設進行進一步調整與優化，開展“以崗位標準為目標，以實訓任務練技能，以專業證書代常考”的實踐能力訓練模式，以應對學校實踐教學目標與企業崗位需求嚴重脫節的問題；同時，鼓勵學生（尤其是本科就業目標較為明確的學生）考取業界認可度較高的職業資格等級證書，既可以提高本科生就業率，也能達到為國家培養更多高級技能應用型人才的目的。此外，科研以實踐為基礎，實踐以科研為導向，將科研創新項目應用于實踐教學，讓學生也參與項目的研發工作，通過研發活動反哺教學，有著十分重要的意義。比如，對于當前與日常課程教學工作密切相關的兩項在研教育部產學合作協同育人項目的研發，可以選取已學過該課程、對知識點掌握較好且正在學習后續相關課程的部分同學參與項目材料的準備和撰寫，不僅能夠培養學生的科研意識及團隊協作能力，還能夠使學生對教學工作有進一步的認知，提升其換位思考的素養。同時，也可以將已完成的科研創新項目應用于實踐教學，引導學生進行探究式學習，激發其對業界主流技術學習的興趣和動力，提高其創新及綜合實踐能力。

3" “以學促產，以產帶學”的產學合作協同育人模式

“以學促產，以產帶學”的產學合作協同育人模式主要是高校教師基于企業提供的實驗平臺和資金，將企業技術融入到高校課程的實踐教學工作中，其目的一方面在于促進高校教師根據企業需求對課程體系建設、實踐教學方案等進行改進優化的積極性，同時讓學生以“職業人”的身份主動參加社會定崗工作，以達到全面提高自身素質的目的；另一方面在于減輕企業改革創新的成本，有效提高從業人員素質，從而增加企業發展的資本和潛力。在產學合作過程中，各高校及相關科研機構等要加強與企業合作的密度，不斷提高校企平臺建設的質量和利用率。比如，可以合作建設“眾創空間”，可以實時發布各企業對相關人才的具體技術需求，可以為學生提供在線學習資源或對應能力的崗位實習機會，也可以邀請企業及校外專家進行相關項目開發經驗的交流等等。另外，各高校也可充分利用自身已有的硬件資源，如校級或院級實驗室、工作室等，聘請企業專家兼職授課，為學生提供更多接觸實際生產實踐的機會。多種形式的校企產學合作能夠促使學生積極參與交流學習，為其創新創業能力的培養提供更多的資金及經驗支持。

“產、賽、學”任何一方的發展都會為其他兩方的突破帶來新的機遇，反之，任何一方的停滯不前也會使其他兩方的發展受到一定的約束或限制。顯然，這三者之間存在著相互存進、相互制約的密切關系。因此，在“產、賽、學”相互融通的過程中，學校可以定期對課程體系內容調整后的學生學習效果進行測評，企業也可以對學生參與生產實踐的業績進行度量，以便檢驗產學融合的成效，進一步使“產、賽、學”融合下的Web前端技術課程建設的再論證再優化模式形成良性循環，促進學校與企業共同發展。

三" 結束語

將“產、賽、學”融入Web前端開發技術課程教學的主要優點在于能夠使課程體系建設的重點更明確、更突出，產學合作的方式和內容更深入。不僅打破了傳統僅以教師為中心的課堂教學模式，以學生為中心，充分調動了學生學習的積極性、主動性和創新能力，也有效促進了產業技術向高校課堂的快速過渡和轉化，大大提升了課堂教學質量，校企雙方均受益。

參考文獻：

[1] 丁曉梅，汪靜，趙麗紅.新時期“網頁設計與制作”課程教學改革探析[J].北京印刷學院學報，2020，28（12）：124-126.

[2] 劉仲馳.混合式教學在計算機網頁設計與制作課程中的應用[J].電腦知識與技術，2021，17（18）：141-142，152.

[3] 張軍.信息管理與信息系統專業課程建設探討——以網頁設計課程為例[J].教育教學論壇，2020（46）：22-24.

[4] 鄭婭峰，李艷燕，黃志南，等.基于微課程的高校翻轉課堂實踐研究[J].現代教育技術，2016，26（1）：60-66.

[5] 劉美然.基于翻轉課堂的中職《網頁設計與制作》課教學設計與實踐研究[D].桂林：廣西師范大學，2021.

[6] 李浩泉.論“產教融合、以賽促學”的職業院校技能大賽[J].教育與職業，2019（18）：104-108.

[7] 趙小剛，王峰，汪鼎文，等.以學科競賽為抓手的產學協同育人模式研究[J].計算機教育，2021（4）：46-50.

基金項目：教育部產學合作協同育人項目“《網頁設計與網站規劃》教學改革與課程體系建設”（202102024033）、“面向大數據人才培養的創新創業教育課程體系研究——以數據庫原理為例”（202102015059）；2020年度河南省新農科研究與實踐改革項目“‘互聯網+雙創’背景下中藥和農林院校信息類公共課程體系的創新研究及實踐”（2020JGLX126）

第一作者簡介：李繼蕊（1979-），女，漢族，河南新鄉人，博士，副教授，碩士研究生導師。研究方向為計算機教育、物聯網、可信與分布式服務計算。

*通信作者：鄭婭峰（1979-），女，漢族，河南洛陽人，博士，教授，碩士研究生導師。研究方向為教育技術、計算機教育。