案例驅(qū)動的《Web技術(shù)及應用》教學改革探索

戴濤 蔚繼承 梁春泉

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

關鍵詞：Web技術(shù) 案例驅(qū)動 教學改革

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

互聯(lián)網(wǎng)的創(chuàng)新應用，是當前各行業(yè)進一步發(fā)展的關鍵問題。在眾多的互聯(lián)網(wǎng)技術(shù)中，Web技術(shù)是最重要的基礎技術(shù)之一。學生通過Web相關技術(shù)的學習，能夠打下互聯(lián)網(wǎng)技術(shù)的學習基礎，從而具備互聯(lián)網(wǎng)相關行業(yè)從業(yè)的基本能力。

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

1 案例驅(qū)動的《Web技術(shù)及應用》教學改革

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

1.1 案例選擇

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

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

1.2 教學組織

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

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

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

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

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

1.3 考試環(huán)節(jié)

以往課程的考試形式是教師出卷，學生答卷，這種考試形式拘泥于書本知識，無法了解學生真正的能力。《Web技術(shù)及應用》作為理論與實踐相結(jié)合的課程，除了要求學生了解基本概念，還應當具備一定的知識運用、動手制作和協(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%，同時建議和鼓勵學生以這些項目為基礎參加學校和社會組織的各種競賽，對于獲獎項目給予額外加分。

2 結(jié)語

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

參考文獻

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

[2] 劉宇超.探究網(wǎng)絡電子技術(shù)教學模式[J].知識經(jīng)濟，2013.

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