面向能力培養的《Web技術及應用》課程教學改革

蔚繼承+燕飛+王美麗+陳勇

（1.西北農林科技大學 信息工程學院，陜西 楊凌 712100；

2.西安市農業培訓中心，陜西 西安 710000）

摘要：Web前端開發是一項很特殊的工作，涵蓋的知識面非常廣，既有具體的技術，又有抽象的概念。在教學中如何將HTML、CSS、JavaScript、DOM和BOM、AJAX等相關技術有機融合起來，以達到Web前端開發工程師的需求，深化課程教學改革就顯得十分重要。本文對計算機專業Web 技術的教學改革進行了初步探討。四年實踐證明本文提出的改革方式是行之有效的。

關鍵詞：Web技術；任務驅動；案例教學；團隊合作

中圖分類號：G642.0 文獻標志碼：A 文章編號：1674-9324（2016）49-0055-02

Web技術是互聯網應用技術最重要的基礎技術之一，其涉及的領域越來越廣，規模越來越大，需求也趨于多樣化與復雜化。互聯網行業需要大量從事網站設計、系統開發與運維的Web前端開發人才。Web1.0 時代網站的主要內容都是靜態的，用戶使用網站的行為也以瀏覽為主，因此，以Dreamweaver和FrontPage為主的可視化開發工具講授網頁設計與開發，這樣的課程存在側重于界面設計而輕視代碼編寫的問題，主要通過HTML和CSS等技術構建靜態網頁呈現給用戶。2005年以后，互聯網進入Web2.0時代，各種類似桌面軟件的Web應用大量出現，網站的前端發生了翻天覆地的變化，網頁不再只是承載單一的文字、圖片，人們需要動態的、交互式、多樣化的網頁，企業網站迫切需要快速進行網站重構以改善用戶體驗，如新浪、搜狐、網易、騰訊、淘寶等IT企業都亟需大量Web前端開發人才。

因此，本校在制定培養方案時提出將原有的《JSP程序設計》和《網站設計》課程中的與Web前端開發相關內容進行整合，開設了《Web技術及應用》課程。授課內容涉及Web的前端開發技術中的HTML、CSS、JavaScript和Ajax等。目標是使學生通過課程的學習，能夠打下Web前端開發基礎，具備從事互聯網相關行業的基本能力。本文從Web技術的課程建設與提升能力出發，對計算機專業Web技術的教學進行初步探討。

一、課程建設

1.教學內容。在教學內容安排上，按照Web前端開發所需知識為導向[1]，包含了以HTML、CSS和JavaScript為主的教學內容，增加了AJAX和PHP內容。同時隨著HTML技術的發展，適時增加HTML5方面的知識。在內容體系中抽出兩個重點內容：①將CSS+DIV技術貫穿全書的每一章節，重點強化CSS+DIV技術融合解決實際工程中的應用問題；②將JavaScript、DOM和BOM技術進行融合，重點培養學生設計動態交互式網頁的能力；③通過增加PHP服務器端編程，使學生初步了解Web后端開發，同時也進一步增加對Web前端的認識，并掌握Web前都沒與后端異步數據通信的方法。

2.教學方法。采用任務驅動與案例教學法相結合，提高學生學習興趣，同時注重學生自學能力培養。在教學方法方面，采用學生自學為主、老師從旁指導為輔的方式。首先將整個網站設計任務進行分解，并設計適合各個知識點的小案例，每個階段有明確的任務要求，老師對其中的關鍵知識點及案例首先進行講解，積極為學生提供免費的學習資源平臺如www.w3school.com.cn，并講授查閱資料方法，使學生掌握技術應用的關鍵點。然后讓學生自行完成每個階段任務，對于實踐中普遍出現的問題，老師再統一講解、更正。使學生達到先模仿制作的要求，然后再進一步加深考核要求。實現任務驅動與案例教學的結合，更大程度的激發學生的學習興趣，培養學生的自學能力。

3.考核方式。在考核方式上，改變以前以知識點考核為主的考核標準，改為以實踐動手能力為主[2]。以往課程的考試形式是教師出卷，學生答卷，這種考試形式拘泥于書本知識，無法了解學生真正的能力。《Web技術及應用》作為理論與實踐相結合的課程，除了要求學生了解基本概念，還應當具備一定的知識運用、動手制作和協調能力。因此除了一般的理論知識考察環節，還增加了項目開發的實踐考核環節。學生以3～5人為一個小組，經過教師推薦和學生自選，確定項目題目，項目的運行時間貫穿整個授課環節。學生通過對所學知識的掌握，完成規定的項目內容和相關文檔。主要內容應包含網站開發的主要的幾個步驟，包括：需求分析、網站規劃、美工設計和網站制作等環節。最后通過答辯、互評和自評等考評項目得分。項目成績比重應不少于的整體課程成績20%，同時建議和鼓勵學生以這些項目為基礎參加學校和社會組織的各種競賽，對于獲獎項目給予額外加分。

取消筆試考試，采取上機考試的方式，并將期末考核和過程考核相結合，從而調動學生上課以及完成實驗任務、項目的積極性。學生的最終成績由平時考核（30%）、項目考核（20%）和上機考核（50%）三部分組成。平時成績主要包括日常考勤、學習態度、實驗效果等。

二、能力培養與提升

Web前端開發是一項目易學難精的工作，涵蓋的知識面非常廣，既有具體的技術又有抽象的概念。通過指導學生編寫高質量代碼和鼓勵團隊協作方式來培養和提升學生能力。

1.編寫高質量代碼。代碼編寫是Web前端開發者的基本工作，代碼的質量體現的開發者的能力。例如：實現一個頁面或功能可能有多種方案，但有些方案的維護成本會比較高，有些方案會存在性能問題，而有些方案不僅易于維護，而且性能也較好。這里的關鍵就是代碼質量。前端開發的三種主要語言：HTML、CSS和JavaScript的特點各不相同，對代碼質量的要求也不同。針對三種代碼語言的特點，指導學生編寫高質量代碼的技巧與能力。

2.團隊合作。團隊合作在競爭日益激烈的現代社會中顯得尤為重要。對在校大學生加強團隊合作教育具有重要的現實意義。大學教育應該全方面培養大學生團隊合作的精神和能力，努力提高大學生的團隊合作意識，培養高素質綜合型人才[3]。

近幾年來，Web開發技術發展十分迅速，使得網頁的表現能力與交互能力越來越強，我們可以使用Web技術開發驚艷的網頁效果，但漂亮的頁面背后隱藏著的是越來越難以維護的代碼。這其中除了技術層面的原因外，團隊合作也是一個重要因素。通過將項目分解，學生協作完成來培養學生的團隊合作意識與能力。

三、結束語

四年來教學改革與實踐結果表明，教學改革總體思路正確、方向正確、措施得力、策略到位。學生普遍認為學習積極性和參與性有較大提升，學生編程能力有一定提高；綜合考核方法更能夠調動學生的學習熱情，更便于學生有效地開展網絡學習與自主探究活動。希望本文對同類高等院校的網頁設計課程教學起到拋磚引玉的作用。

參考文獻：

[1]劉強，張阿敏，朱文球，等.計算機公共基礎課程教學資源建設研究[J].計算機教育，2012，（17）：50-53.

[2]徐利謀，蔣建平.多元化考核方式在Java程序設計課程中的應用研究[J].中國職業技術教育，2014，（23）：8-10.

[3]劉念，李茵萊.論大學生團隊合作精神的培養[J].西南民族大學學報：人文社科版，2007，28（4）：224-227.