案例驅動的《Web技術及應用》教學改革探索

戴濤 蔚繼承 梁春泉

摘 要：Web技術是互聯網技術的基礎技術之一，而對Web技術良好的掌握，可使學生具備較強的就業競爭力。本文從《Web技術及應用》現有的課程內容和培養模式出發，探討了Web課程在教學過程中的突出問題，探索了案例驅動式的《Web技術及應用》教學模式，并從案例選擇、教學組織和考試環節三個方面提出了教學改革措施，加強了案例和項目在教學過程中的作用，提升了學生的思維能力和動手能力，從而為學生在互聯網方向的后續發展打下良好的基礎。

關鍵詞：Web技術 案例驅動 教學改革

中圖分類號：G642 文獻標識碼：A 文章編號：1673-9795（2014）03（b）-0139-02

互聯網的創新應用，是當前各行業進一步發展的關鍵問題。在眾多的互聯網技術中，Web技術是最重要的基礎技術之一。學生通過Web相關技術的學習，能夠打下互聯網技術的學習基礎，從而具備互聯網相關行業從業的基本能力。

《Web技術及應用》課程的授課內容涉及Web的前端開發技術和后端開發技術，主要知識點包括：HTML、CSS、JavaScript、PHP（或JSP和ASP等后端開發技術）和網站開發工具的使用等等。目前，該課程的教學主要存在以下問題：首先，與其他的單一編程語言課程相比（如C語言、Java和C++等），本課程具有知識點零碎、內容龐雜和前后關聯性較少等特點；其次，隨著各大互聯網企業不斷推出新的技術，Web技術中的新技術和新名詞也不斷更新，如Server-side JavaScript、HTML5 drag & drop和CSS animations等等，現有課程體系無法有效加入這些內容，而能夠學習并掌握這些新知識卻是這些企業選擇人才的重要標準；最后，學生在校期間經常會參與各種項目或競賽，而對于信息科學的學生來講，這類活動通常需要建立一個網站，如何能夠充分掌握Web技術并快速地建立有效的站點是學生學習本門課程的迫切需求。綜上所述，探討和研究《Web技術及應用》課程的案例式教學改革是十分必要的。

1 案例驅動的《Web技術及應用》教學改革

針對《Web技術及應用》的內容零散、新內容組織和快速應用等特點，本文從案例選擇、教學組織和考試環節三個方面提出了教學改革建議。

1.1 案例選擇

由于本課程每一章的內容關聯性不強，本門課程的案例選擇應當遵循以下幾點：首先，選擇的案例應讓學生充分理解不同技術的優劣。比如本門課程中CSS的布局與定位是重點。所以CSS布局與定位的案例應當先選取一個結構較為規整的頁面，緊接著應當選取一個結構不是很規整的頁面布局，同時使用HTML Table和CSS來布局，使得學生充分理解CSS布局技術的巧妙。其次，案例的選擇中應當通過剖析舊有技術的缺陷而引入新的技術。比如較新的HTML5，

應當引入使用舊HTML標簽一個網頁網頁案例，再使用新的HTML5標簽制作該網頁，說明新標簽的優勢。最后，應當在每一個主要技術學習之后提供一個較為完整的案例，這個案例不要求很復雜，但應當盡量包含該技術的主要內容。

1.2 教學組織

當選擇好相應的案例之后，就要針對如何講好案例進行相應的教學組織。

首先，應重視Web技術的角色劃分。網站的制作一般都需要經過需求分析、內容設計、美工設計和頁面制作等多個步驟，步驟與步驟之間具有較強的聯系，且一般由多人合作完成。以往的教學強調頁面制作，而忽略其他步驟，往往導致學生在面對制作整個網站時沒有頭緒。因此在案例中應按照網站的制作流程設計案例，在案例的展開中引入角色劃分教學法。學生扮演在網站制作過程中的不同角色，每個人從自身的視點和需求出發，體驗制作網站的完整從無到有的過程，理清概念和技術自身所處的位置。

其次，本門課程的目的不僅僅是教會學生做網頁，而應當更進一步教會學生做網頁時的思維方式。通過課后對學生的調查，筆者發現很多學生在學習本門課程時由這樣的現象，即課堂上看老師做的時候明白，但自己動手去做卻無從下手。其主要原因是老師僅僅教會了做網頁的步驟和方法，卻沒有交給學生遇到不同場景、不同風格和不同格局時需要考慮問題的思維方式。比如在選擇使用何種HTML標簽來表達所需內容時，有時可以使用超鏈接來表達，也可以用段落和列表等其他標簽來表達，這時教師最好將多種標簽的使用各自展開講述，使得學生明白做網頁并不是只有一種方法，其制作過程也并不是一蹴而就。

再次，在教學的過程應當采用引導教學法。比如針對HTTP協議部分的授課，部分教師僅僅給出了協議的內容，而沒有告訴學生協議各部分的作用。此時可以利用火狐提供的firebugs或IE提供的HTTP Watch或等工具抓取瀏覽器發送的HTTP協議數據包，通過對包頭的解析形象地說明HTTP協議核心數據的作用。再比如限于授課內容和課時，后臺編程部分一般只能提一下，無法深入下去，導致學生對技術的理解出現偏差。這時可引入一節技術路線專題課，闡明任何技術的出現和使用都有其特殊的背景，引導學生進入技術的應用場景，真正理解技術的精髓。其組織方式可結合實際，采用對騰訊、淘寶和百度等互聯網公司的主要產品進行分析，說明他們的業務需求和設計理念，進而引導學生探討在產品發展各個不同階段遇到的問題，并讓學生自行選擇技術和發展路線解決這些問題，最后對其效果進行評價，從而加深對不同后端開發技術的理解。

最后，信息科學的學生在學習中一般保持著較強的邏輯連貫性，并且課堂的參與性較高，這就要求改變傳統的以教師為中心、學生被動接收的教學過程。還要注意的是，在《Web技術及應用》課程開設的同時，一般會并行開設信息科學的一些基礎課程，如C語言、數據結構和計算機體系結構等等，因此還應結合這些課程豐富實踐環節，使學生能夠充分理解Web技術的優點，及其相比其他技術的缺點。從而將學生已學的知識融入Web課程中，增加授課效果。

1.3 考試環節

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

2 結語

通過對案例選擇、教學組織和考核環節三個方面的改革措施，使得學生對《Web技術及應用》的知識理解更加深入和透徹，提升項目和競賽能力，從而為為培養知識與技能雙優秀的互聯網高端人才奠定良好的基礎。

參考文獻

[1] 王媛媛，李翔.基于項目驅動的“WEB開發技術”課程教學研究[J].長沙大學學報，2012（5）：124-125.

[2] 劉宇超.探究網絡電子技術教學模式[J].知識經濟，2013.

[3] 李長鵬，孫麗麗，程濤.“任務驅動”在“網頁設計與制作”教學中的探索實踐[J].科技信息，2010（22）：604.