馬玲燕

摘 要： 《網(wǎng)頁設(shè)計(jì)與制作》課程是一門實(shí)踐性強(qiáng)、操作要求高的計(jì)算機(jī)專業(yè)課程。在網(wǎng)頁設(shè)計(jì)課程中應(yīng)用案例教學(xué)法能夠很好地啟發(fā)學(xué)生思維，激發(fā)學(xué)生學(xué)習(xí)興趣，調(diào)動(dòng)學(xué)生的積極性和主動(dòng)性，并為學(xué)生下一步的實(shí)踐操作提供參考。本文介紹了案例教學(xué)法在網(wǎng)頁設(shè)計(jì)與制作課程中的應(yīng)用，以學(xué)校網(wǎng)站的開發(fā)為實(shí)例進(jìn)行案例教學(xué)的說明。教學(xué)設(shè)計(jì)包含教學(xué)內(nèi)容分析、教學(xué)對(duì)象分析、教學(xué)目標(biāo)、教學(xué)重點(diǎn)難點(diǎn)、教學(xué)策略及教學(xué)過程設(shè)計(jì)。

關(guān)鍵詞： 案例教學(xué) 網(wǎng)頁設(shè)計(jì)與制作課程教學(xué) 教學(xué)設(shè)計(jì)

一、案例教學(xué)概念

案例教學(xué)法就是教師列舉案例進(jìn)行教學(xué)的方法。教師根據(jù)教學(xué)目標(biāo)、教學(xué)內(nèi)容的要求，組織學(xué)生對(duì)典型案例進(jìn)行分析、討論、交流，學(xué)習(xí)掌握知識(shí)，加深對(duì)基本概念和基本原理的理解，同時(shí)提高學(xué)生分析問題和解決問題的能力。

二、案例教學(xué)設(shè)計(jì)實(shí)例

（一）教學(xué)內(nèi)容分析

《網(wǎng)頁設(shè)計(jì)與制作》課程的教材有很多種。網(wǎng)頁開發(fā)軟件也有很多選擇，如Dreamweaver，F(xiàn)rontPage等。我校選擇的教材是《DreamweaverCS5中文版基礎(chǔ)與實(shí)例教程》。在講解過程中不能完全按照教材的章節(jié)內(nèi)容進(jìn)行教學(xué)，必須根據(jù)課程內(nèi)容的邏輯關(guān)系進(jìn)行合理教學(xué)設(shè)計(jì)。在教學(xué)設(shè)計(jì)過程中按照知識(shí)點(diǎn)的難易程度和各章的邏輯關(guān)系，將本書的知識(shí)點(diǎn)歸納為下圖：

（二）學(xué)習(xí)者分析

1.一般特征

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

2.初始能力

中等職業(yè)學(xué)校的學(xué)生生源比較廣泛。學(xué)生分布不集中，由于地域限制，個(gè)體差異較大，學(xué)生的學(xué)習(xí)基礎(chǔ)也不同。有的學(xué)生經(jīng)常接觸計(jì)算機(jī)，已經(jīng)掌握了計(jì)算機(jī)的基礎(chǔ)應(yīng)用，有的學(xué)生很少接觸計(jì)算機(jī)，連基本的計(jì)算機(jī)操作都不會(huì)。但是計(jì)算機(jī)專業(yè)不只有網(wǎng)頁設(shè)計(jì)專業(yè)，還有計(jì)算機(jī)應(yīng)用、計(jì)算機(jī)網(wǎng)絡(luò)專業(yè)。學(xué)生既然選擇網(wǎng)頁設(shè)計(jì)專業(yè)，就應(yīng)該對(duì)本專業(yè)進(jìn)行過了解，對(duì)網(wǎng)頁設(shè)計(jì)有濃厚興趣。

3.信息素養(yǎng)

職業(yè)學(xué)校的學(xué)生普遍喜歡上網(wǎng)，對(duì)于計(jì)算機(jī)的基本使用方法已經(jīng)初步掌握。有些學(xué)生家里也有計(jì)算機(jī)，所以他們的信息檢索能力很強(qiáng)。接受和使用電子新設(shè)備的能力也很好。能夠運(yùn)用所學(xué)知識(shí)解決實(shí)際問題。

（三）學(xué)習(xí)目標(biāo)

知識(shí)和技能：了解網(wǎng)站開發(fā)的流程，學(xué)會(huì)建立站點(diǎn)，能夠用自己的話對(duì)網(wǎng)站的總體規(guī)劃進(jìn)行描述。

過程和方法：在教師的指導(dǎo)下分析確定主題下的目標(biāo)用戶，掌握網(wǎng)站的總體規(guī)劃，清晰劃分網(wǎng)站模塊，版面設(shè)計(jì)合理，完成預(yù)期的網(wǎng)頁跳轉(zhuǎn)。

情感態(tài)度和價(jià)值觀：在網(wǎng)站設(shè)計(jì)過程中，學(xué)生依據(jù)網(wǎng)站評(píng)價(jià)標(biāo)準(zhǔn)，不斷對(duì)網(wǎng)頁的色彩搭配、整體風(fēng)格進(jìn)行完善，這樣才能鍛煉學(xué)生對(duì)色彩的審美能力、創(chuàng)新能力。

（四）教學(xué)重點(diǎn)和難點(diǎn)

教學(xué)重點(diǎn)：網(wǎng)站的整體規(guī)劃

教學(xué)難點(diǎn)：首頁版面布局的合理設(shè)計(jì)

（五）教學(xué)策略

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

（六）教學(xué)流程

[情境導(dǎo)入]

師：大家是通過什么渠道知道這個(gè)學(xué)校的？生：朋友，同學(xué)，親戚介紹，學(xué)校招生（引起學(xué)生注意，激發(fā)學(xué)生學(xué)習(xí)興趣，并引導(dǎo)學(xué)生明確網(wǎng)站的用戶定位）。

師：看過學(xué)校的招生簡(jiǎn)章后，大家對(duì)學(xué)校進(jìn)行了了解，那么有沒有同學(xué)上過咱們學(xué)校的網(wǎng)站呢？學(xué)生回答：有（使學(xué)生對(duì)學(xué)校網(wǎng)站產(chǎn)生濃厚的興趣）。

現(xiàn)在我們一起來欣賞學(xué)校網(wǎng)站，并提問：同學(xué)們自己能夠設(shè)計(jì)出一個(gè)完整的網(wǎng)站嗎？怎樣設(shè)計(jì)？生：能（調(diào)動(dòng)學(xué)生的積極性）。

[展示案例]

這是學(xué)校網(wǎng)站的首頁，這個(gè)網(wǎng)頁中包含哪些網(wǎng)頁元素？學(xué)生回答：文字，圖片，導(dǎo)航欄，超級(jí)鏈接，滾動(dòng)文字，視頻，友情鏈接等（復(fù)習(xí)知識(shí)）（引導(dǎo)學(xué)生選擇適合的布局方法）。

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

[學(xué)生探究]

1.首頁版面設(shè)計(jì)

師：大家試著先將網(wǎng)站首頁的版面進(jìn)行整體規(guī)劃。學(xué)生實(shí)踐操作。

2.確定網(wǎng)站整體風(fēng)格

師：布局規(guī)劃好后確定一種色彩作為網(wǎng)站的主色調(diào)，包括文字，背景，導(dǎo)航，模塊的色彩。

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

3.收集素材

師：網(wǎng)站首頁中的元素是怎么獲取的？學(xué)生回答：上網(wǎng)收集。

4.網(wǎng)頁的設(shè)計(jì)制作

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

學(xué)生分別討論網(wǎng)頁中圖片、文字、視頻的添加方法，并對(duì)元素進(jìn)行添加，對(duì)遇到的問題進(jìn)行記錄。

師：網(wǎng)站的首頁基本信息添加完成，但是網(wǎng)站并不是只有一頁，那么其他頁和首頁怎樣進(jìn)行跳轉(zhuǎn)？學(xué)生討論導(dǎo)航欄的設(shè)置和各網(wǎng)頁的層次結(jié)構(gòu)，并進(jìn)行鏈接。

5.動(dòng)態(tài)模塊添加

師：現(xiàn)在的網(wǎng)頁內(nèi)容都是靜態(tài)的，我們學(xué)過哪些知識(shí)可以實(shí)現(xiàn)動(dòng)態(tài)效果？學(xué)生回憶代碼設(shè)置文字，圖片滾動(dòng)，SPRY構(gòu)件添加選項(xiàng)卡效果。師：最后不要忘記學(xué)校的地址和聯(lián)系方式。學(xué)生設(shè)置下方模塊內(nèi)容并輸入版權(quán)信息。

6.測(cè)試運(yùn)行

師：大家的網(wǎng)站能夠正常運(yùn)行嗎？學(xué)生進(jìn)行運(yùn)行調(diào)試。

[知識(shí)總結(jié)]

師：從大家設(shè)計(jì)網(wǎng)站首頁的實(shí)踐可知網(wǎng)站開發(fā)的流程是什么？學(xué)生回答：整體規(guī)劃，確定網(wǎng)站的整體風(fēng)格，收集資源，設(shè)計(jì)制作網(wǎng)頁，添加動(dòng)態(tài)網(wǎng)站代碼，運(yùn)行測(cè)試（引導(dǎo)學(xué)生對(duì)實(shí)踐過程進(jìn)行總結(jié)，歸納出新知）。

老師補(bǔ)充：設(shè)計(jì)網(wǎng)站的第一步是明確主題，分析用戶需求。之后進(jìn)行草圖的設(shè)計(jì)。學(xué)生梳理知識(shí)。（教師的總結(jié)能夠使學(xué)生對(duì)新知識(shí)掌握得更加牢固深刻。）

[評(píng)價(jià)]

對(duì)各組學(xué)生作品進(jìn)行評(píng)價(jià)，并對(duì)遇到的問題進(jìn)行解答。學(xué)生評(píng)價(jià)，反思，領(lǐng)會(huì)（評(píng)價(jià)、反思、反饋能更好地促進(jìn)學(xué)生對(duì)知識(shí)的建構(gòu)）。

三、教學(xué)反思

案例教學(xué)法的成功運(yùn)用需要教師依據(jù)教學(xué)目標(biāo)、教學(xué)內(nèi)容、教學(xué)重難點(diǎn)知識(shí)精心設(shè)計(jì)好案例，并在教學(xué)過程中運(yùn)用適當(dāng)?shù)姆椒▽?duì)學(xué)生進(jìn)行提問，引導(dǎo)學(xué)生進(jìn)行分析、討論、總結(jié)、評(píng)價(jià)，最后教師讓學(xué)生進(jìn)行自主創(chuàng)作。學(xué)生充分運(yùn)用所學(xué)知識(shí)與技能，進(jìn)行創(chuàng)造性的實(shí)踐操作。上交作品后，師生共同對(duì)學(xué)生作品進(jìn)行評(píng)價(jià)，進(jìn)一步促進(jìn)學(xué)生對(duì)知識(shí)的建構(gòu)。

參考文獻(xiàn)：

[1]劉勇.案例教學(xué)法在網(wǎng)頁設(shè)計(jì)教學(xué)中的應(yīng)用研究[J].南昌高專學(xué)報(bào)，2010（6）：107-109.

[2]李龍.教學(xué)設(shè)計(jì)[M].北京：高等教育出版社，2010：415.

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