《Web前端技術》課程圖文混排單元教學設計

康英健 馬蕾

【摘要】本文體現職教以實際操作為中心的特色，以實際動手操作完成任務帶動理論課的學習。老師采用案例活動教學，學生采用研究性學習，利用任務驅動法，在任務的完成過程中，學生自主創新設計，并采用研究性學習來激發學生自主學習，突出鍛煉學生綜合知識與綜合能力的實際應用。

【關鍵詞】 任務驅動法 研究性學習 動手操作 自主學習 創新設計

一、案例教學活動課的教學理念及設想

《Web前端技術》是計算機專業學生的必修課程，本課程采用任務驅動法，在任務完成的過程中，采用研究性學習來激發學生創新的自主學習。前期鋪墊以夠用為原則的基礎知識，以實際動手操作完成任務帶動相關理論的學習，抓住大、中專學生以形象思維方式為主的特點，在教學中以實際操作作為切入點，逐漸激發帶動學生的各項智能的不同程度的提高。通過學生在完成任務時的自主設計，創新設計，引發學生的發現欲望和想象思維，在學生自主不斷的發現探究過程中，激發學生的潛能，達到開啟智能提高學生素質的目的。

二、案例教學活動課的教學設計思路與教學模式

整個教學體系分為基礎篇和操作篇兩部分?；A篇為以夠用為原則的基礎知識鋪墊。操作篇中Html，CSS，JavaScript部分的內容都圍繞著任務進行，任務以案例的形式出現，且彼此相關，自成一體。（表1）

學生在案例教學活動課中通過完成任務，使其進一步體會所學知識的使用要領；利用任務驅動法，對學生個體進行多元智能的開發和提升；在任務的完成過程中，學生自主創新設計，并采用研究性學習，使得學生積極主動地投入活動。在學生與他人合作共事的基礎上，進行自我管理和自我發展，并在安排自己的任務和解決問題的過程中使其綜合能力得以提高。在學生自己不斷的發現探究過程中，其創新思維得到了培養，歸納思維和演繹思維得到了鍛煉，程序代碼在學生的反復修改調試中得以反復應用，從而使所學理論知識不斷鞏固深化。

三、案例教學活動課的教學活動設計

1、學生組織

組織案例活動小組。案例活動小組采用學生自由組合，老師適當調整的方法來組成。

2、教學案例的活動設計

在《圖文混排》課中，整體教學思路設計圍繞一個環節兩個行動展開：教學環節、教師行為和學生活動。具體的教學環節分為6步：

任務1：項目演示。展示完成的案例“三種人不宜長時間使用手機”，用分析組成元素的方法來引導學生探究學習，明確學習任務，激發學習興趣。

任務2：搭建html基礎頁面。通過學生觀察網頁，討論分析網頁構成，編寫html代碼，完成基礎頁面的創建。

任務3：演示操作。把word中文本設置的知識點遷移到網頁設中，便于學生對知識點的理解與掌握，學生觀察老師的操作示范。

任務4：實際演練。每個學生根據自己的實際情況，從名片、賀卡、班刊封面三個難易程度不同的任務中挑選一個進行分析，并應用文本屬性的設置方法，實現最初設計效果。

任務5：組內評價。從效果實現以及代碼規范的角度對組內的成員進行相互評價。

任務6：歸納總結。梳理知識點，點評學生掌握完成情況，布置下課任務。

具體的教學實施如下：

（1）任務引入

√ 教師引導學生欣賞做好的網頁，讓學生體會美的效果，引起學生的學習需求。通過這個網頁，讓學生清楚認識到：文本和圖片是網頁的核心內容，是網頁主要傳達信息的方法。文字和圖片的設計直接影響網頁的整體效果。

√ 進一步進行網頁對比，讓學生觀察使用CSS設定樣式之后的效果與僅使用HTML定“結構”的頁面效果的異同。

√ 通過兩組不同的對比，讓學生明確：Html可以對文本和圖片進行簡單的樣式設置，但是不夠靈活，文件較大，瀏覽速度慢；使用CSS對文本圖片的樣式進行設置更靈活、精確，更加豐富多彩，文件容積小，瀏覽速度快。

（2）完善html基礎頁面

√ 老師拋出任務，演示做好的網頁，引導學生觀察，引出本次的任務：如何利用css設計文字與圖片的屬性，設計網頁的顯示效果，要求學生能夠具體指出對文本和圖片進行哪些設置，培養學生的觀察能力與語言表達能力，由于把word中圖文混排的知識點遷移過來，直接降低了學習的難度，幫助學生輕松接受任務。

√ 具體實現步驟：教師下發基礎的html頁面，引導學生根據根據前面的分析思考如何修改頁面；學生以小組為單位，觀察討論，統一思想，要實現演示效果，應該如何修改html頁面，才能進一步進行css設計。要求學生根據討論結果獨立的修改基礎頁面。這個環節中要求學生要鞏固掌握鞏固掌握CSS選擇器及其應用，嚴格遵守web標準與編碼規范。

（3）操作演示

√ 教師針對每個實際設計效果，講解相應屬性名稱、演示操作步驟，實現本節的知識目標。

√ 學生模仿操作完成整體設計，并在瀏覽器中正確顯示出來。

√ 達到目的：學生能利用css設置文字的字體、字號、顏色等各種屬性；能夠嚴格遵守編碼規范，應用html設計網頁結構，css設計網頁的顯示效果，不斷強化學生遵守開發web標準。

（4）實際演練

√ 老師布置訓練題目，將德育教育與專業教育想融合，巡視學生開發過程，為學生提供必要的幫助。

名片設計：難度：低，規劃自己的人生，為未來的自己設計名片，培養學生自信、自立的情感。

賀卡設計：難度：中 新年快到了，設計一份賀卡送給你的父母、老師，培養學生尊重長輩、熱愛師長的情感。

班刊封面設計：難度：高 班級要創辦一份班刊，請你進行封面的設計，激發學生對班級的熱愛。

√ 學生領取任務單，明確案例要求，根據自己的程度，合理選擇練習題目，要求學生：

能夠獨立進行 頁面分析與設計，合理的利用資源

能夠獨立編寫html代碼，實現基礎頁面

能夠合理設計文字與圖片屬性達到美化網頁的目的，在瀏覽器中顯示效果

（5）任務評價

（6）梳理總結

課后記：本次課程從演示案例入手，讓學生觀察發現要學習的知識點，幫助學生明確學習任務，獲取相關的知識和技能?？紤]到學生的層次參差不齊，改變了以往同一任務的做法，設計了名片、賀卡、雜志封面三個難易程度不同的任務，并引導他們把這三個任務分別和自己的人生，親人，學校等聯系起來，學生的興趣濃厚，為整個學習過程奠定了感情基礎。

在課堂教學中，采用案例教學，用分析組成元素的方法來引導學生探究學習方法，充分體現了學生的主體地位。在學生對各組成元素的制作方法有了大致了解后，讓學生自主選擇任務、協作學習。學生既能練習到相應的操作，又培養了學生的合作精神。由學生自己先做，發現問題時，教師引導學生解決問題，再由先解決問題的學生來介紹經驗，這樣學生更容易接受，知識點和技巧也得到了加強。最后學生對自己的學習情況進行了客觀的自評。整體課堂氣氛活躍，完成效果比較好。

四、結束語

在案例教學活動課的教學過程中，只要找到學習者的個體差異點，通過合理安排案例活動，讓每個人找到自己的長處，確定好自己的位置，就容易使學生體驗到成功的喜悅，進而轉變為內在動力，努力學習、做事，自信心穩步提升，即使以后遭遇到挫折，也容易克服，從而為學生的終身發展打下基礎。