案例教學在《網頁設計與制作》課程中的應用研究

馬玲燕

摘 要： 《網頁設計與制作》課程是一門實踐性強、操作要求高的計算機專業課程。在網頁設計課程中應用案例教學法能夠很好地啟發學生思維，激發學生學習興趣，調動學生的積極性和主動性，并為學生下一步的實踐操作提供參考。本文介紹了案例教學法在網頁設計與制作課程中的應用，以學校網站的開發為實例進行案例教學的說明。教學設計包含教學內容分析、教學對象分析、教學目標、教學重點難點、教學策略及教學過程設計。

關鍵詞： 案例教學 網頁設計與制作課程教學 教學設計

一、案例教學概念

案例教學法就是教師列舉案例進行教學的方法。教師根據教學目標、教學內容的要求，組織學生對典型案例進行分析、討論、交流，學習掌握知識，加深對基本概念和基本原理的理解，同時提高學生分析問題和解決問題的能力。

二、案例教學設計實例

（一）教學內容分析

《網頁設計與制作》課程的教材有很多種。網頁開發軟件也有很多選擇，如Dreamweaver，FrontPage等。我校選擇的教材是《DreamweaverCS5中文版基礎與實例教程》。在講解過程中不能完全按照教材的章節內容進行教學，必須根據課程內容的邏輯關系進行合理教學設計。在教學設計過程中按照知識點的難易程度和各章的邏輯關系，將本書的知識點歸納為下圖：

（二）學習者分析

1.一般特征

《網頁設計與制作》課程是計算機網頁設計專業的一門專業必修課，是計算機專業的核心課程。授課對象是計算機網頁設計專業一年級學生。這些學生年齡基本在十七八歲，這一階段的學生直覺思維能力較強，思維活躍，喜歡學習技巧性的知識。如果在教學中能合理地對學生進行引導，能夠發揮出學生潛在的創新能力。該教學班的學生以男生為主，女生占很小比例。每個班45人，女生只有6-10人。在教學過程中要注意觀察學生的行為，及時提醒學生進行有意注意。職業學校的學生在個性差異方面和普通中小學生差別很大。職業學校的學生對于學習動機中的認知內驅力很弱。在長期的不良學習習慣影響下，他們不會主動學習自己想知道的知識。反過來只要是他感興趣的知識，他的學習動機就會很強。所以教師的主導作用很重要。他們不善于語言文字的表達，可是這些學生特別聰明，尤其在邏輯、身體運動、人際交往、自然觀察等方面表現突出 。所以進行在教學設計時讓學生多參與，多發言，注重技能練習是很有必要的。在學習風格方面，職業學校的學生喜歡聽覺、視覺、觸覺上的刺激，而不喜歡枯燥的文字說明。職業學校的學生不好管理的一個最重要的問題就是學生的情緒不穩定，容易沖動。所以在講課過程中教師要格外注意學生的情緒變動，變換不同教學組織方式吸引學生注意，維持他們的學習動機。

2.初始能力

中等職業學校的學生生源比較廣泛。學生分布不集中，由于地域限制，個體差異較大，學生的學習基礎也不同。有的學生經常接觸計算機，已經掌握了計算機的基礎應用，有的學生很少接觸計算機，連基本的計算機操作都不會。但是計算機專業不只有網頁設計專業，還有計算機應用、計算機網絡專業。學生既然選擇網頁設計專業，就應該對本專業進行過了解，對網頁設計有濃厚興趣。

3.信息素養

職業學校的學生普遍喜歡上網，對于計算機的基本使用方法已經初步掌握。有些學生家里也有計算機，所以他們的信息檢索能力很強。接受和使用電子新設備的能力也很好。能夠運用所學知識解決實際問題。

（三）學習目標

知識和技能：了解網站開發的流程，學會建立站點，能夠用自己的話對網站的總體規劃進行描述。

過程和方法：在教師的指導下分析確定主題下的目標用戶，掌握網站的總體規劃，清晰劃分網站模塊，版面設計合理，完成預期的網頁跳轉。

情感態度和價值觀：在網站設計過程中，學生依據網站評價標準，不斷對網頁的色彩搭配、整體風格進行完善，這樣才能鍛煉學生對色彩的審美能力、創新能力。

（四）教學重點和難點

教學重點：網站的整體規劃

教學難點：首頁版面布局的合理設計

（五）教學策略

本節課的內容是理論性知識，學生在學習時沒有學習興趣，如果仍然按照教師講解、學生接受的教學方式進行教學，則教學效果不理想。應選擇基于案例的探究型的集體學習模式進行學習，讓學生通過對案例的學習，反過來總結出知識。這樣學生才能夠更深刻地理解知識。

（六）教學流程

[情境導入]

師：大家是通過什么渠道知道這個學校的？生：朋友，同學，親戚介紹，學校招生（引起學生注意，激發學生學習興趣，并引導學生明確網站的用戶定位）。

師：看過學校的招生簡章后，大家對學校進行了了解，那么有沒有同學上過咱們學校的網站呢？學生回答：有（使學生對學校網站產生濃厚的興趣）。

現在我們一起來欣賞學校網站，并提問：同學們自己能夠設計出一個完整的網站嗎？怎樣設計？生：能（調動學生的積極性）。

[展示案例]

這是學校網站的首頁，這個網頁中包含哪些網頁元素？學生回答：文字，圖片，導航欄，超級鏈接，滾動文字，視頻，友情鏈接等（復習知識）（引導學生選擇適合的布局方法）。

這些內容是怎么組織起來的？學生回答：表格布局，層布局，框架，DIV+CSS。

[學生探究]

1.首頁版面設計

師：大家試著先將網站首頁的版面進行整體規劃。學生實踐操作。

2.確定網站整體風格

師：布局規劃好后確定一種色彩作為網站的主色調，包括文字，背景，導航，模塊的色彩。

學生討論， 并使用CSS定義文字、圖片的背景色。

3.收集素材

師：網站首頁中的元素是怎么獲取的？學生回答：上網收集。

4.網頁的設計制作

師：我將這些元素給大家發下去，大家將這些元素添加到設計好的布局中，并記錄下問題和困難。

學生分別討論網頁中圖片、文字、視頻的添加方法，并對元素進行添加，對遇到的問題進行記錄。

師：網站的首頁基本信息添加完成，但是網站并不是只有一頁，那么其他頁和首頁怎樣進行跳轉？學生討論導航欄的設置和各網頁的層次結構，并進行鏈接。

5.動態模塊添加

師：現在的網頁內容都是靜態的，我們學過哪些知識可以實現動態效果？學生回憶代碼設置文字，圖片滾動，SPRY構件添加選項卡效果。師：最后不要忘記學校的地址和聯系方式。學生設置下方模塊內容并輸入版權信息。

6.測試運行

師：大家的網站能夠正常運行嗎？學生進行運行調試。

[知識總結]

師：從大家設計網站首頁的實踐可知網站開發的流程是什么？學生回答：整體規劃，確定網站的整體風格，收集資源，設計制作網頁，添加動態網站代碼，運行測試（引導學生對實踐過程進行總結，歸納出新知）。

老師補充：設計網站的第一步是明確主題，分析用戶需求。之后進行草圖的設計。學生梳理知識。（教師的總結能夠使學生對新知識掌握得更加牢固深刻。）

[評價]

對各組學生作品進行評價，并對遇到的問題進行解答。學生評價，反思，領會（評價、反思、反饋能更好地促進學生對知識的建構）。

三、教學反思

案例教學法的成功運用需要教師依據教學目標、教學內容、教學重難點知識精心設計好案例，并在教學過程中運用適當的方法對學生進行提問，引導學生進行分析、討論、總結、評價，最后教師讓學生進行自主創作。學生充分運用所學知識與技能，進行創造性的實踐操作。上交作品后，師生共同對學生作品進行評價，進一步促進學生對知識的建構。

參考文獻：

[1]劉勇.案例教學法在網頁設計教學中的應用研究[J].南昌高專學報，2010（6）：107-109.

[2]李龍.教學設計[M].北京：高等教育出版社，2010：415.

[3]繆亮，王曉鵬.Dreamweavercs5中文版基礎與實例教程[M].北京電子工業出版社，2012：299.