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

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

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

2.西安市農(nóng)業(yè)培訓中心，陜西 西安 710000）

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

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

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

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

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

一、課程建設

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

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

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

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

二、能力培養(yǎng)與提升

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

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

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

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

三、結束語

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

參考文獻：

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

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

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