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

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

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

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

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

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

Web技術(shù)是互聯(lián)網(wǎng)應用技術(shù)最重要的基礎(chǔ)技術(shù)之一，其涉及的領(lǐng)域越來越廣，規(guī)模越來越大，需求也趨于多樣化與復雜化?；ヂ?lián)網(wǎng)行業(yè)需要大量從事網(wǎng)站設(shè)計、系統(tǒng)開發(fā)與運維的Web前端開發(fā)人才。Web1.0 時代網(wǎng)站的主要內(nèi)容都是靜態(tài)的，用戶使用網(wǎng)站的行為也以瀏覽為主，因此，以Dreamweaver和FrontPage為主的可視化開發(fā)工具講授網(wǎng)頁設(shè)計與開發(fā)，這樣的課程存在側(cè)重于界面設(shè)計而輕視代碼編寫的問題，主要通過HTML和CSS等技術(shù)構(gòu)建靜態(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)站重構(gòu)以改善用戶體驗，如新浪、搜狐、網(wǎng)易、騰訊、淘寶等IT企業(yè)都亟需大量Web前端開發(fā)人才。

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

一、課程建設(shè)

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

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

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

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

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

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

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

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

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

三、結(jié)束語

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

參考文獻：

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

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

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