“網(wǎng)頁設(shè)計與制作”之“課程案例”教學(xué)初探

王淑云

摘要：根據(jù)多年對“網(wǎng)頁設(shè)計與制作”課程的教學(xué)探索，提出“課程案例”這一新概念，并設(shè)計開發(fā)出一個學(xué)生既熟悉、又感興趣的“課程案例”——班級網(wǎng)站，讓學(xué)生在模仿再開發(fā)該案例網(wǎng)站的過程中學(xué)習(xí)課程知識，從而掌握本課程的知識和運用技能，達到教與學(xué)的良好效果。

關(guān)鍵詞：網(wǎng)頁設(shè)計與制作；課程案例；班級網(wǎng)站

中圖分類號：G712 文獻標(biāo)識碼：A 文章編號：1672-5727（2014）11-0093-03

中職生的共性就是對缺乏學(xué)習(xí)興趣。筆者通過多年的課堂教學(xué)體會到：如果有一套行之有效的既適合中職生實際水準(zhǔn)、又貼近他們學(xué)習(xí)生活、能激發(fā)他們學(xué)習(xí)興趣的案例貫穿于整個課程教學(xué)，就有可能解決這個問題?；诖耍P者提出了“課程案例”這一新概念，設(shè)計并開發(fā)出一套“課程案例”應(yīng)用于“網(wǎng)頁設(shè)計與制作”課程教學(xué)中，學(xué)生通過案例的模仿再開發(fā)，全面掌握“網(wǎng)頁設(shè)計與制作”課程知識與技能的基本要領(lǐng)，從而實現(xiàn)課程的教學(xué)目標(biāo)，培養(yǎng)學(xué)生的網(wǎng)站開發(fā)和設(shè)計能力。下面詳述這一“課程案例”教學(xué)的設(shè)計及所進行的課堂教學(xué)。

“課程案例”的提出和設(shè)計

（一）“課程案例”這一新概念的提出

市面上相關(guān)教材比比皆是，但從其所提供的案例方面看，沒有比較適合中職學(xué)生的：要么網(wǎng)頁主題讓學(xué)生很陌生，要么網(wǎng)頁頁面設(shè)計太復(fù)雜，中職生很難掌握，而且其中的案例多是針對某一知識點或某一章節(jié)設(shè)計的，屬于“知識點案例”或“章節(jié)案例”，是零碎知識，不能貫穿整個課程知識教學(xué)。所以，教科書只適合作為本課程理論知識點的參考資料?！熬W(wǎng)頁設(shè)計與制作”是一門技能型課程，重要的是要教會學(xué)生如何去構(gòu)建和設(shè)計一個完整的網(wǎng)站，而不是空泛地談一些理論知識。“課程案例”區(qū)別于“知識點案例”或“章節(jié)案例”之處在于：該案例貫穿于整個課程教學(xué)，覆蓋課程包含的所有知識，課程知識的學(xué)習(xí)以“課程案例”為線索進行，學(xué)生模仿再開發(fā)設(shè)計完該案例，課程的所有知識學(xué)習(xí)也已結(jié)束。筆者思考并設(shè)計這樣的“課程案例”，并對教材進行如下處理：提煉教材所提到的知識點，將其重新排列組合，按由淺入深的學(xué)習(xí)順序，將課程知識點結(jié)合到自主設(shè)計的“課程案例”中，分模塊漸進教學(xué)，整個教學(xué)過程注重學(xué)生自身思維的開發(fā)，將個體集美術(shù)設(shè)計、課程知識學(xué)習(xí)和課程實踐三者緊密結(jié)合，將學(xué)生各方的能力逐漸激發(fā)展示出來。

（二）圍繞學(xué)生的興趣進行“課程案例”的設(shè)計

學(xué)生對一門應(yīng)用型技術(shù)課的學(xué)習(xí)如沒有興趣，可能是沒有一個令他們感興趣的實例吸引他們漸次深入學(xué)習(xí)，從而引導(dǎo)他們學(xué)習(xí)掌握課程知識。班級是校園學(xué)習(xí)生活的一個集體，班級網(wǎng)站中所記錄的人物、活動都是學(xué)生身邊的人和事，網(wǎng)站的主題反映的正是他們的校園生活。如果把班級網(wǎng)站作為教學(xué)案例，讓學(xué)生以自己的學(xué)習(xí)生活為主題組建成網(wǎng)站，一方面能引起他們極大的學(xué)習(xí)興趣，另一方面，作為同一個班級的學(xué)生，在設(shè)計本班級的網(wǎng)站過程中，能夠創(chuàng)造很多互相交流的機會，培養(yǎng)互相學(xué)習(xí)的精神，也能加深同學(xué)間的友情。所以，“班級網(wǎng)站的設(shè)計與創(chuàng)作”是一個理想的課程案例。筆者應(yīng)用模塊教學(xué)法，將理論知識與該課程案例完美結(jié)合起來，在近似實踐的學(xué)習(xí)過程中培養(yǎng)學(xué)生的學(xué)習(xí)興趣，讓他們在興趣中學(xué)、在學(xué)習(xí)中增添興趣，從而在良性循環(huán)中完成課程學(xué)習(xí)。

再考慮學(xué)生的能力方面，他們已經(jīng)有了對文字、圖片和表格的基本處理能力，還學(xué)過或同步學(xué)習(xí)Photoshop、Flash、計算機網(wǎng)絡(luò)基礎(chǔ)等相關(guān)課程，所以，只要對網(wǎng)頁素材的處理提出具體的要求，或?qū)λ麄兟约又笇?dǎo)即能自行設(shè)計處理完成。對于該課程，雖然大部分學(xué)生瀏覽過很多網(wǎng)站內(nèi)容，但并沒有真正了解網(wǎng)站是怎么回事；對互聯(lián)網(wǎng)世界充滿興趣和好奇，卻還沒有網(wǎng)頁設(shè)計與制作的理論知識和實踐技能，對網(wǎng)站常識還比較陌生。因此，在課程學(xué)習(xí)中，重點是要力求深入淺出、盡可能直觀全面地剖析一個好的網(wǎng)站案例，運用視、聽的方法，幫助學(xué)生建立有關(guān)網(wǎng)頁設(shè)計與制作的基本概念和基本知識，掌握建設(shè)網(wǎng)站的基本技能。

鑒于此，教師如何將Dreamweaver、HTML和CSS三部分內(nèi)容有機結(jié)合，讓學(xué)生通過課程學(xué)習(xí)，模仿再開發(fā)出一個比較完整的“班級網(wǎng)站”，著力培養(yǎng)學(xué)生的實際建站能力、設(shè)計開發(fā)能力，從而提高他們自主學(xué)習(xí)與創(chuàng)新能力、信息收集與處理能力、提出問題并分析問題和解決問題的能力，成為課程教學(xué)的重要目標(biāo)。

“課程案例”教學(xué)方法的設(shè)計

教學(xué)手段以“多媒體機房、網(wǎng)絡(luò)、項目開發(fā)”三項結(jié)合。多媒體機房為學(xué)生設(shè)計網(wǎng)站提供基本條件，網(wǎng)絡(luò)是學(xué)生尋找素材資源和借鑒別人經(jīng)驗的空間，項目開發(fā)是他們學(xué)習(xí)的任務(wù)。

教學(xué)方法上，采用示范講解、任務(wù)驅(qū)動的教學(xué)模式，從以下三個方面展開：

采用案例講解的教學(xué)模式 教學(xué)過程根據(jù)編排好的知識點內(nèi)容和事先創(chuàng)建好的“班級網(wǎng)站”實例，逐步講解該“課程案例”，便于學(xué)生理解和進行模仿設(shè)計開發(fā)。

實施模塊化教學(xué)方法 遵循學(xué)生“由淺入深，循序漸進，由感性到理性”的認(rèn)識規(guī)律，把知識點組合后分模塊漸進教學(xué)。教學(xué)過程講練結(jié)合，以學(xué)生實踐為主，完成“班級網(wǎng)站”這一“課程案例”中包含的每個模塊的再設(shè)計與再創(chuàng)作；以教師引導(dǎo)為輔，講解設(shè)計與創(chuàng)作過程中遇到的新知識，組織學(xué)生完成能力拓展訓(xùn)練。

走四步教學(xué)流程，融“教、學(xué)、練”于一體 第一步，教師展示課程案例，演示創(chuàng)作過程，講解涉及的知識點內(nèi)容；第二步，下達任務(wù)，提出完成任務(wù)的具體要求和完成時間；第三步，學(xué)生模仿再設(shè)計再創(chuàng)作，完成任務(wù)；第四步，任務(wù)驗收，學(xué)生自我評價，教師綜合講評。

“課程案例”的課堂教學(xué)

基于學(xué)生的現(xiàn)有知識技能，教師課程教學(xué)中重點講授如何設(shè)計開發(fā)網(wǎng)站，在其他環(huán)節(jié)只扮演一個組織者和啟迪者的角色，一步步引導(dǎo)學(xué)生完成本課程的目標(biāo)，充分培養(yǎng)和發(fā)揮學(xué)生的自主設(shè)計能力、繪畫能力和創(chuàng)新能力。

整個課程的課堂教學(xué)以“課程案例”為主線，設(shè)定以下幾個教學(xué)模塊。

模塊一：學(xué)習(xí)有關(guān)網(wǎng)頁的基本知識，介紹建設(shè)網(wǎng)站的工具等。

模塊二：草擬“網(wǎng)站地圖”，設(shè)計網(wǎng)站“模板頁”。展示課程案例網(wǎng)站，分析班級網(wǎng)站的風(fēng)格、頁面的布局和包含的元素，先給學(xué)生一個真實的空間印象，之后讓學(xué)生模仿如何設(shè)計這樣的網(wǎng)站。首先設(shè)計出紙質(zhì)的網(wǎng)站空間布局和內(nèi)容：包括考慮整個網(wǎng)站的風(fēng)格、主色調(diào)、頁面布局、頁面的大概內(nèi)容等，每一個頁面設(shè)計草擬在一張紙上，其實這就是網(wǎng)站地圖了。做足了這個功課，日后的整個班級網(wǎng)站的設(shè)計就有了頭緒。為避免各頁面出現(xiàn)相同內(nèi)容的重復(fù)設(shè)計，提出設(shè)計制作“模板頁”來生成其他頁面。例如：把風(fēng)格和內(nèi)容相一致的部分（如班級廣告圖、班級徽標(biāo)、導(dǎo)航條、版權(quán)信息等）設(shè)計出來，作成模板頁保存下來，以備后面制作網(wǎng)站各頁面時利用模板頁生成，并在此基礎(chǔ)上進行相應(yīng)頁面內(nèi)容的設(shè)計創(chuàng)作。草擬“網(wǎng)站地圖”和設(shè)計制作網(wǎng)站“模板頁”是同時進行的，要結(jié)合著做。這個階段都還是“紙上練兵”。

模塊三：收集和創(chuàng)作素材。班級網(wǎng)站的素材主要來源于學(xué)生自己的學(xué)習(xí)生活，可以是活動的照片、活動記錄，也可以是為自己班級創(chuàng)作的班級廣告圖、班級徽標(biāo)等Flash或Photoshop作品，將這些素材分門別類放入建好的站點目錄樹中。

模塊四：學(xué)習(xí)Dreamweaver，首先建立班級網(wǎng)站站點。

模塊五：設(shè)計創(chuàng)建“模板頁”。根據(jù)前期草擬的網(wǎng)站地圖，利用布局表格設(shè)計模板框架?？蚣艽詈煤缶褪菫槟０屙撎砑铀夭?。模板上需要的素材并不太多，關(guān)鍵是要“精”，用精心選擇和創(chuàng)作的素材。提醒學(xué)生，模板上大塊的空間要留出來給各頁面添加相應(yīng)的內(nèi)容，這點至關(guān)重要。

模塊六：利用模板生成網(wǎng)站各頁面。模板設(shè)計成熟并制作出來后，就要根據(jù)模板上的導(dǎo)航設(shè)計生成相應(yīng)的頁面，并將各頁面互相鏈接起來。

模塊七：完善各頁面內(nèi)容。每一兩次課完善一個頁面的內(nèi)容，直到網(wǎng)站中各頁面內(nèi)容全部添加完成。當(dāng)然，課后要為如何合理安排這些頁面內(nèi)容花很多時間去構(gòu)思、去創(chuàng)作或收集相應(yīng)的素材。所以，收集素材這項工作是一直貫穿于整個網(wǎng)頁設(shè)計過程中的。

模塊八：應(yīng)用一些網(wǎng)頁特效的代碼，如添加背景音樂、QQ互動、圖片文字的滾動、表單等，讓頁面動起來，增加網(wǎng)頁的吸引力和活力。

模塊九：本地站點測試。

教學(xué)評價設(shè)計

評價方案 （1）學(xué)生自我評價：即每個學(xué)生對自己的評價。教師事先給出評價標(biāo)準(zhǔn)和具體要求，學(xué)生對照自己的學(xué)習(xí)態(tài)度、創(chuàng)作的作品，對自己給出合理評價。（2）模塊作品評價：教師對每個學(xué)生的評價。教師通過對學(xué)生課堂反映、每個模塊上交的作品、討論活躍程度等方面，對每個學(xué)生進行評價。（3）期末考核：教師通過對學(xué)生一整學(xué)期模仿再設(shè)計創(chuàng)作的“班級網(wǎng)站”進行評分，考核學(xué)生的實踐與動手的綜合能力，對學(xué)生進行合理的評價。

成績評定 按出勤率、模塊作品成績、成熟作品成績加權(quán)考核。

結(jié)語

在“網(wǎng)頁設(shè)計與制作”課程案例的課堂教學(xué)中，筆者采用的是興趣教學(xué)和讓學(xué)生貼近實戰(zhàn)的方法，以保持學(xué)生對知識探索的興趣并提高學(xué)生的動手能力。這種教學(xué)的重要前提是要設(shè)計一個好的案例，“好”的標(biāo)準(zhǔn)是內(nèi)容貼近學(xué)生的學(xué)習(xí)生活、設(shè)計難度又適合他們的實際水平，“班級網(wǎng)站”這一課程案例便是好案例之一。此外，在教學(xué)過程中，筆者為學(xué)生提供了十分豐富的信息資源，教會他們信息資源該如何收集、從哪里獲取、以及如何有效利用等知識。

參考文獻：

[1]劉瑞新.網(wǎng)頁設(shè)計與制作教程[M].北京：機械工業(yè)出版社，2010.

[2]唐乾林.網(wǎng)站界面設(shè)計案例教程[M].北京：機械工業(yè)出版社，2011.

[3]尚俊杰.網(wǎng)絡(luò)程序設(shè)計——ASP[M].北京：清華大學(xué)出版社，北方交通大學(xué)出版社，2009.

[4]趙豐年.網(wǎng)頁制作三劍客操作互動[M].北京：人民郵電出版社，2011.

[5]趙豐年.網(wǎng)頁制作技術(shù)——Dreamweaver Flash Fireworks[M].北京：人民郵電出版社，2003.

[6]馬月.網(wǎng)站界面設(shè)計[M].北京：北京理工大學(xué)出版社，2006.

[7]周予濱，張博強.網(wǎng)頁制作上機培訓(xùn)教程[M].北京：清華大學(xué)出版社，2002.

（責(zé)任編輯：王璐）