《web前端技術(shù)》課程圖文混排單元教學設(shè)計

1、<p>　　《Web前端技術(shù)》課程圖文混排單元教學設(shè)計</p><p>　　【摘要】本文體現(xiàn)職教以實際操作為中心的特色，以實際動手操作完成任務(wù)帶動理論課的學習。老師采用案例活動教學，學生采用研究性學習，利用任務(wù)驅(qū)動法，在任務(wù)的完成過程中，學生自主創(chuàng)新設(shè)計，并采用研究性學習來激發(fā)學生自主學習，突出鍛煉學生綜合知識與綜合能力的實際應(yīng)用。 </p><p>　　【關(guān)鍵詞】 任務(wù)驅(qū)動法

2、研究性學習 動手操作 自主學習 創(chuàng)新設(shè)計 </p><p>　　一、案例教學活動課的教學理念及設(shè)想 </p><p>　　《Web前端技術(shù)》是計算機專業(yè)學生的必修課程，本課程采用任務(wù)驅(qū)動法，在任務(wù)完成的過程中，采用研究性學習來激發(fā)學生創(chuàng)新的自主學習。前期鋪墊以夠用為原則的基礎(chǔ)知識，以實際動手操作完成任務(wù)帶動相關(guān)理論的學習，抓住大、中專學生以形象思維方式為主的特點，在教學中以實際操作作為切入

3、點，逐漸激發(fā)帶動學生的各項智能的不同程度的提高。通過學生在完成任務(wù)時的自主設(shè)計，創(chuàng)新設(shè)計，引發(fā)學生的發(fā)現(xiàn)欲望和想象思維，在學生自主不斷的發(fā)現(xiàn)探究過程中，激發(fā)學生的潛能，達到開啟智能提高學生素質(zhì)的目的。 </p><p>　　二、案例教學活動課的教學設(shè)計思路與教學模式 </p><p>　　整個教學體系分為基礎(chǔ)篇和操作篇兩部分?；A(chǔ)篇為以夠用為原則的基礎(chǔ)知識鋪墊。操作篇中Html，CSS，J

4、avaScript部分的內(nèi)容都圍繞著任務(wù)進行，任務(wù)以案例的形式出現(xiàn)，且彼此相關(guān)，自成一體。（表1） </p><p>　　學生在案例教學活動課中通過完成任務(wù)，使其進一步體會所學知識的使用要領(lǐng)；利用任務(wù)驅(qū)動法，對學生個體進行多元智能的開發(fā)和提升；在任務(wù)的完成過程中，學生自主創(chuàng)新設(shè)計，并采用研究性學習，使得學生積極主動地投入活動。在學生與他人合作共事的基礎(chǔ)上，進行自我管理和自我發(fā)展，并在安排自己的任務(wù)和解決問題的過程

5、中使其綜合能力得以提高。在學生自己不斷的發(fā)現(xiàn)探究過程中，其創(chuàng)新思維得到了培養(yǎng)，歸納思維和演繹思維得到了鍛煉，程序代碼在學生的反復(fù)修改調(diào)試中得以反復(fù)應(yīng)用，從而使所學理論知識不斷鞏固深化。 </p><p>　　三、案例教學活動課的教學活動設(shè)計 </p><p><b>　　1、學生組織 </b></p><p>　　組織案例活動小組。案例活動小組

6、采用學生自由組合，老師適當調(diào)整的方法來組成。 </p><p>　　2、教學案例的活動設(shè)計 </p><p>　　在《圖文混排》課中，整體教學思路設(shè)計圍繞一個環(huán)節(jié)兩個行動展開：教學環(huán)節(jié)、教師行為和學生活動。具體的教學環(huán)節(jié)分為6步： </p><p>　　任務(wù)1：項目演示。展示完成的案例“三種人不宜長時間使用手機”，用分析組成元素的方法來引導(dǎo)學生探究學習，明確學習任務(wù)

7、，激發(fā)學習興趣。 </p><p>　　任務(wù)2：搭建html基礎(chǔ)頁面。通過學生觀察網(wǎng)頁，討論分析網(wǎng)頁構(gòu)成，編寫html代碼，完成基礎(chǔ)頁面的創(chuàng)建。 </p><p>　　任務(wù)3：演示操作。把word中文本設(shè)置的知識點遷移到網(wǎng)頁設(shè)中，便于學生對知識點的理解與掌握，學生觀察老師的操作示范。 </p><p>　　任務(wù)4：實際演練。每個學生根據(jù)自己的實際情況，從名片、賀卡、

8、班刊封面三個難易程度不同的任務(wù)中挑選一個進行分析，并應(yīng)用文本屬性的設(shè)置方法，實現(xiàn)最初設(shè)計效果。 </p><p>　　任務(wù)5：組內(nèi)評價。從效果實現(xiàn)以及代碼規(guī)范的角度對組內(nèi)的成員進行相互評價。 </p><p>　　任務(wù)6：歸納總結(jié)。梳理知識點，點評學生掌握完成情況，布置下課任務(wù)。 </p><p>　　具體的教學實施如下： </p><p>

9、<b>　?。?）任務(wù)引入 </b></p><p>　　√ 教師引導(dǎo)學生欣賞做好的網(wǎng)頁，讓學生體會美的效果，引起學生的學習需求。通過這個網(wǎng)頁，讓學生清楚認識到：文本和圖片是網(wǎng)頁的核心內(nèi)容，是網(wǎng)頁主要傳達信息的方法。文字和圖片的設(shè)計直接影響網(wǎng)頁的整體效果。 </p><p>　　√ 進一步進行網(wǎng)頁對比，讓學生觀察使用CSS設(shè)定樣式之后的效果與僅使用HTML定“結(jié)構(gòu)”的

10、頁面效果的異同。 </p><p>　　√ 通過兩組不同的對比，讓學生明確：Html可以對文本和圖片進行簡單的樣式設(shè)置，但是不夠靈活，文件較大，瀏覽速度慢；使用CSS對文本圖片的樣式進行設(shè)置更靈活、精確，更加豐富多彩，文件容積小，瀏覽速度快。 </p><p>　?。?）完善html基礎(chǔ)頁面 </p><p>　　√ 老師拋出任務(wù)，演示做好的網(wǎng)頁，引導(dǎo)學生觀察，引出

11、本次的任務(wù)：如何利用css設(shè)計文字與圖片的屬性，設(shè)計網(wǎng)頁的顯示效果，要求學生能夠具體指出對文本和圖片進行哪些設(shè)置，培養(yǎng)學生的觀察能力與語言表達能力，由于把word中圖文混排的知識點遷移過來，直接降低了學習的難度，幫助學生輕松接受任務(wù)。 </p><p>　　√ 具體實現(xiàn)步驟：教師下發(fā)基礎(chǔ)的html頁面，引導(dǎo)學生根據(jù)根據(jù)前面的分析思考如何修改頁面；學生以小組為單位，觀察討論，統(tǒng)一思想，要實現(xiàn)演示效果，應(yīng)該如何修改h

12、tml頁面，才能進一步進行css設(shè)計。要求學生根據(jù)討論結(jié)果獨立的修改基礎(chǔ)頁面。這個環(huán)節(jié)中要求學生要鞏固掌握鞏固掌握CSS選擇器及其應(yīng)用，嚴格遵守web標準與編碼規(guī)范。 </p><p><b>　?。?）操作演示 </b></p><p>　　√ 教師針對每個實際設(shè)計效果，講解相應(yīng)屬性名稱、演示操作步驟，實現(xiàn)本節(jié)的知識目標。 </p><p>

13、　　√ 學生模仿操作完成整體設(shè)計，并在瀏覽器中正確顯示出來。 </p><p>　　√ 達到目的：學生能利用css設(shè)置文字的字體、字號、顏色等各種屬性；能夠嚴格遵守編碼規(guī)范，應(yīng)用html設(shè)計網(wǎng)頁結(jié)構(gòu)，css設(shè)計網(wǎng)頁的顯示效果，不斷強化學生遵守開發(fā)web標準。 </p><p><b>　?。?）實際演練 </b></p><p>　　√ 老師布

14、置訓練題目，將德育教育與專業(yè)教育想融合，巡視學生開發(fā)過程，為學生提供必要的幫助。 </p><p>　　名片設(shè)計：難度：低，規(guī)劃自己的人生，為未來的自己設(shè)計名片，培養(yǎng)學生自信、自立的情感。 </p><p>　　賀卡設(shè)計：難度：中 新年快到了，設(shè)計一份賀卡送給你的父母、老師，培養(yǎng)學生尊重長輩、熱愛師長的情感。 </p><p>　　班刊封面設(shè)計：難度：高 班級要創(chuàng)辦

15、一份班刊，請你進行封面的設(shè)計，激發(fā)學生對班級的熱愛。 </p><p>　　√ 學生領(lǐng)取任務(wù)單，明確案例要求，根據(jù)自己的程度，合理選擇練習題目，要求學生： </p><p>　　能夠獨立進行 頁面分析與設(shè)計，合理的利用資源 </p><p>　　能夠獨立編寫html代碼，實現(xiàn)基礎(chǔ)頁面 </p><p>　　能夠合理設(shè)計文字與圖片屬性達到美化網(wǎng)

16、頁的目的，在瀏覽器中顯示效果 </p><p><b>　?。?）任務(wù)評價 </b></p><p><b>　?。?）梳理總結(jié) </b></p><p>　　課后記：本次課程從演示案例入手，讓學生觀察發(fā)現(xiàn)要學習的知識點，幫助學生明確學習任務(wù)，獲取相關(guān)的知識和技能?？紤]到學生的層次參差不齊，改變了以往同一任務(wù)的做法，設(shè)計了

17、名片、賀卡、雜志封面三個難易程度不同的任務(wù)，并引導(dǎo)他們把這三個任務(wù)分別和自己的人生，親人，學校等聯(lián)系起來，學生的興趣濃厚，為整個學習過程奠定了感情基礎(chǔ)。 </p><p>　　在課堂教學中，采用案例教學，用分析組成元素的方法來引導(dǎo)學生探究學習方法，充分體現(xiàn)了學生的主體地位。在學生對各組成元素的制作方法有了大致了解后，讓學生自主選擇任務(wù)、協(xié)作學習。學生既能練習到相應(yīng)的操作，又培養(yǎng)了學生的合作精神。由學生自己先做，發(fā)

18、現(xiàn)問題時，教師引導(dǎo)學生解決問題，再由先解決問題的學生來介紹經(jīng)驗，這樣學生更容易接受，知識點和技巧也得到了加強。最后學生對自己的學習情況進行了客觀的自評。整體課堂氣氛活躍，完成效果比較好。 </p><p><b>　　四、結(jié)束語 </b></p><p>　　在案例教學活動課的教學過程中，只要找到學習者的個體差異點，通過合理安排案例活動，讓每個人找到自己的長處，確定好