“網頁設計與制作”之“課程案例”教學初探

王淑云

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

關鍵詞：網頁設計與制作；課程案例；班級網站

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

中職生的共性就是對缺乏學習興趣。筆者通過多年的課堂教學體會到：如果有一套行之有效的既適合中職生實際水準、又貼近他們學習生活、能激發他們學習興趣的案例貫穿于整個課程教學，就有可能解決這個問題。基于此，筆者提出了“課程案例”這一新概念，設計并開發出一套“課程案例”應用于“網頁設計與制作”課程教學中，學生通過案例的模仿再開發，全面掌握“網頁設計與制作”課程知識與技能的基本要領，從而實現課程的教學目標，培養學生的網站開發和設計能力。下面詳述這一“課程案例”教學的設計及所進行的課堂教學。

“課程案例”的提出和設計

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

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

（二）圍繞學生的興趣進行“課程案例”的設計

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

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

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

“課程案例”教學方法的設計

教學手段以“多媒體機房、網絡、項目開發”三項結合。多媒體機房為學生設計網站提供基本條件，網絡是學生尋找素材資源和借鑒別人經驗的空間，項目開發是他們學習的任務。

教學方法上，采用示范講解、任務驅動的教學模式，從以下三個方面展開：

采用案例講解的教學模式 教學過程根據編排好的知識點內容和事先創建好的“班級網站”實例，逐步講解該“課程案例”，便于學生理解和進行模仿設計開發。

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

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

“課程案例”的課堂教學

基于學生的現有知識技能，教師課程教學中重點講授如何設計開發網站，在其他環節只扮演一個組織者和啟迪者的角色，一步步引導學生完成本課程的目標，充分培養和發揮學生的自主設計能力、繪畫能力和創新能力。

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

模塊一：學習有關網頁的基本知識，介紹建設網站的工具等。

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

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

模塊四：學習Dreamweaver，首先建立班級網站站點。

模塊五：設計創建“模板頁”。根據前期草擬的網站地圖，利用布局表格設計模板框架。框架搭好后就是為模板頁添加素材。模板上需要的素材并不太多，關鍵是要“精”，用精心選擇和創作的素材。提醒學生，模板上大塊的空間要留出來給各頁面添加相應的內容，這點至關重要。

模塊六：利用模板生成網站各頁面。模板設計成熟并制作出來后，就要根據模板上的導航設計生成相應的頁面，并將各頁面互相鏈接起來。

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

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

模塊九：本地站點測試。

教學評價設計

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

成績評定 按出勤率、模塊作品成績、成熟作品成績加權考核。

結語

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

參考文獻：

[1]劉瑞新.網頁設計與制作教程[M].北京：機械工業出版社，2010.

[2]唐乾林.網站界面設計案例教程[M].北京：機械工業出版社，2011.

[3]尚俊杰.網絡程序設計——ASP[M].北京：清華大學出版社，北方交通大學出版社，2009.

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

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

[6]馬月.網站界面設計[M].北京：北京理工大學出版社，2006.

[7]周予濱，張博強.網頁制作上機培訓教程[M].北京：清華大學出版社，2002.

（責任編輯：王璐）