《Web前端技術(shù)》課程圖文混排單元教學(xué)設(shè)計(jì)

康英健 馬蕾

【摘要】本文體現(xiàn)職教以實(shí)際操作為中心的特色，以實(shí)際動(dòng)手操作完成任務(wù)帶動(dòng)理論課的學(xué)習(xí)。老師采用案例活動(dòng)教學(xué)，學(xué)生采用研究性學(xué)習(xí)，利用任務(wù)驅(qū)動(dòng)法，在任務(wù)的完成過程中，學(xué)生自主創(chuàng)新設(shè)計(jì)，并采用研究性學(xué)習(xí)來激發(fā)學(xué)生自主學(xué)習(xí)，突出鍛煉學(xué)生綜合知識(shí)與綜合能力的實(shí)際應(yīng)用。

【關(guān)鍵詞】 任務(wù)驅(qū)動(dòng)法 研究性學(xué)習(xí) 動(dòng)手操作 自主學(xué)習(xí) 創(chuàng)新設(shè)計(jì)

一、案例教學(xué)活動(dòng)課的教學(xué)理念及設(shè)想

《Web前端技術(shù)》是計(jì)算機(jī)專業(yè)學(xué)生的必修課程，本課程采用任務(wù)驅(qū)動(dòng)法，在任務(wù)完成的過程中，采用研究性學(xué)習(xí)來激發(fā)學(xué)生創(chuàng)新的自主學(xué)習(xí)。前期鋪墊以夠用為原則的基礎(chǔ)知識(shí)，以實(shí)際動(dòng)手操作完成任務(wù)帶動(dòng)相關(guān)理論的學(xué)習(xí)，抓住大、中專學(xué)生以形象思維方式為主的特點(diǎn)，在教學(xué)中以實(shí)際操作作為切入點(diǎn)，逐漸激發(fā)帶動(dòng)學(xué)生的各項(xiàng)智能的不同程度的提高。通過學(xué)生在完成任務(wù)時(shí)的自主設(shè)計(jì)，創(chuàng)新設(shè)計(jì)，引發(fā)學(xué)生的發(fā)現(xiàn)欲望和想象思維，在學(xué)生自主不斷的發(fā)現(xiàn)探究過程中，激發(fā)學(xué)生的潛能，達(dá)到開啟智能提高學(xué)生素質(zhì)的目的。

二、案例教學(xué)活動(dòng)課的教學(xué)設(shè)計(jì)思路與教學(xué)模式

整個(gè)教學(xué)體系分為基礎(chǔ)篇和操作篇兩部分?；A(chǔ)篇為以夠用為原則的基礎(chǔ)知識(shí)鋪墊。操作篇中Html，CSS，JavaScript部分的內(nèi)容都圍繞著任務(wù)進(jìn)行，任務(wù)以案例的形式出現(xiàn)，且彼此相關(guān)，自成一體。（表1）

學(xué)生在案例教學(xué)活動(dòng)課中通過完成任務(wù)，使其進(jìn)一步體會(huì)所學(xué)知識(shí)的使用要領(lǐng)；利用任務(wù)驅(qū)動(dòng)法，對學(xué)生個(gè)體進(jìn)行多元智能的開發(fā)和提升；在任務(wù)的完成過程中，學(xué)生自主創(chuàng)新設(shè)計(jì)，并采用研究性學(xué)習(xí)，使得學(xué)生積極主動(dòng)地投入活動(dòng)。在學(xué)生與他人合作共事的基礎(chǔ)上，進(jìn)行自我管理和自我發(fā)展，并在安排自己的任務(wù)和解決問題的過程中使其綜合能力得以提高。在學(xué)生自己不斷的發(fā)現(xiàn)探究過程中，其創(chuàng)新思維得到了培養(yǎng)，歸納思維和演繹思維得到了鍛煉，程序代碼在學(xué)生的反復(fù)修改調(diào)試中得以反復(fù)應(yīng)用，從而使所學(xué)理論知識(shí)不斷鞏固深化。

三、案例教學(xué)活動(dòng)課的教學(xué)活動(dòng)設(shè)計(jì)

1、學(xué)生組織

組織案例活動(dòng)小組。案例活動(dòng)小組采用學(xué)生自由組合，老師適當(dāng)調(diào)整的方法來組成。

2、教學(xué)案例的活動(dòng)設(shè)計(jì)

在《圖文混排》課中，整體教學(xué)思路設(shè)計(jì)圍繞一個(gè)環(huán)節(jié)兩個(gè)行動(dòng)展開：教學(xué)環(huán)節(jié)、教師行為和學(xué)生活動(dòng)。具體的教學(xué)環(huán)節(jié)分為6步：

任務(wù)1：項(xiàng)目演示。展示完成的案例“三種人不宜長時(shí)間使用手機(jī)”，用分析組成元素的方法來引導(dǎo)學(xué)生探究學(xué)習(xí)，明確學(xué)習(xí)任務(wù)，激發(fā)學(xué)習(xí)興趣。

任務(wù)2：搭建html基礎(chǔ)頁面。通過學(xué)生觀察網(wǎng)頁，討論分析網(wǎng)頁構(gòu)成，編寫html代碼，完成基礎(chǔ)頁面的創(chuàng)建。

任務(wù)3：演示操作。把word中文本設(shè)置的知識(shí)點(diǎn)遷移到網(wǎng)頁設(shè)中，便于學(xué)生對知識(shí)點(diǎn)的理解與掌握，學(xué)生觀察老師的操作示范。

任務(wù)4：實(shí)際演練。每個(gè)學(xué)生根據(jù)自己的實(shí)際情況，從名片、賀卡、班刊封面三個(gè)難易程度不同的任務(wù)中挑選一個(gè)進(jìn)行分析，并應(yīng)用文本屬性的設(shè)置方法，實(shí)現(xiàn)最初設(shè)計(jì)效果。

任務(wù)5：組內(nèi)評價(jià)。從效果實(shí)現(xiàn)以及代碼規(guī)范的角度對組內(nèi)的成員進(jìn)行相互評價(jià)。

任務(wù)6：歸納總結(jié)。梳理知識(shí)點(diǎn)，點(diǎn)評學(xué)生掌握完成情況，布置下課任務(wù)。

具體的教學(xué)實(shí)施如下：

（1）任務(wù)引入

√ 教師引導(dǎo)學(xué)生欣賞做好的網(wǎng)頁，讓學(xué)生體會(huì)美的效果，引起學(xué)生的學(xué)習(xí)需求。通過這個(gè)網(wǎng)頁，讓學(xué)生清楚認(rèn)識(shí)到：文本和圖片是網(wǎng)頁的核心內(nèi)容，是網(wǎng)頁主要傳達(dá)信息的方法。文字和圖片的設(shè)計(jì)直接影響網(wǎng)頁的整體效果。

√ 進(jìn)一步進(jìn)行網(wǎng)頁對比，讓學(xué)生觀察使用CSS設(shè)定樣式之后的效果與僅使用HTML定“結(jié)構(gòu)”的頁面效果的異同。

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

（2）完善html基礎(chǔ)頁面

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

√ 具體實(shí)現(xiàn)步驟：教師下發(fā)基礎(chǔ)的html頁面，引導(dǎo)學(xué)生根據(jù)根據(jù)前面的分析思考如何修改頁面；學(xué)生以小組為單位，觀察討論，統(tǒng)一思想，要實(shí)現(xiàn)演示效果，應(yīng)該如何修改html頁面，才能進(jìn)一步進(jìn)行css設(shè)計(jì)。要求學(xué)生根據(jù)討論結(jié)果獨(dú)立的修改基礎(chǔ)頁面。這個(gè)環(huán)節(jié)中要求學(xué)生要鞏固掌握鞏固掌握CSS選擇器及其應(yīng)用，嚴(yán)格遵守web標(biāo)準(zhǔn)與編碼規(guī)范。

（3）操作演示

√ 教師針對每個(gè)實(shí)際設(shè)計(jì)效果，講解相應(yīng)屬性名稱、演示操作步驟，實(shí)現(xiàn)本節(jié)的知識(shí)目標(biāo)。

√ 學(xué)生模仿操作完成整體設(shè)計(jì)，并在瀏覽器中正確顯示出來。

√ 達(dá)到目的：學(xué)生能利用css設(shè)置文字的字體、字號(hào)、顏色等各種屬性；能夠嚴(yán)格遵守編碼規(guī)范，應(yīng)用html設(shè)計(jì)網(wǎng)頁結(jié)構(gòu)，css設(shè)計(jì)網(wǎng)頁的顯示效果，不斷強(qiáng)化學(xué)生遵守開發(fā)web標(biāo)準(zhǔn)。

（4）實(shí)際演練

√ 老師布置訓(xùn)練題目，將德育教育與專業(yè)教育想融合，巡視學(xué)生開發(fā)過程，為學(xué)生提供必要的幫助。

名片設(shè)計(jì)：難度：低，規(guī)劃自己的人生，為未來的自己設(shè)計(jì)名片，培養(yǎng)學(xué)生自信、自立的情感。

賀卡設(shè)計(jì)：難度：中 新年快到了，設(shè)計(jì)一份賀卡送給你的父母、老師，培養(yǎng)學(xué)生尊重長輩、熱愛師長的情感。

班刊封面設(shè)計(jì)：難度：高 班級(jí)要?jiǎng)?chuàng)辦一份班刊，請你進(jìn)行封面的設(shè)計(jì)，激發(fā)學(xué)生對班級(jí)的熱愛。

√ 學(xué)生領(lǐng)取任務(wù)單，明確案例要求，根據(jù)自己的程度，合理選擇練習(xí)題目，要求學(xué)生：

能夠獨(dú)立進(jìn)行 頁面分析與設(shè)計(jì)，合理的利用資源

能夠獨(dú)立編寫html代碼，實(shí)現(xiàn)基礎(chǔ)頁面

能夠合理設(shè)計(jì)文字與圖片屬性達(dá)到美化網(wǎng)頁的目的，在瀏覽器中顯示效果

（5）任務(wù)評價(jià)

（6）梳理總結(jié)

課后記：本次課程從演示案例入手，讓學(xué)生觀察發(fā)現(xiàn)要學(xué)習(xí)的知識(shí)點(diǎn)，幫助學(xué)生明確學(xué)習(xí)任務(wù)，獲取相關(guān)的知識(shí)和技能。考慮到學(xué)生的層次參差不齊，改變了以往同一任務(wù)的做法，設(shè)計(jì)了名片、賀卡、雜志封面三個(gè)難易程度不同的任務(wù)，并引導(dǎo)他們把這三個(gè)任務(wù)分別和自己的人生，親人，學(xué)校等聯(lián)系起來，學(xué)生的興趣濃厚，為整個(gè)學(xué)習(xí)過程奠定了感情基礎(chǔ)。

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

四、結(jié)束語

在案例教學(xué)活動(dòng)課的教學(xué)過程中，只要找到學(xué)習(xí)者的個(gè)體差異點(diǎn)，通過合理安排案例活動(dòng)，讓每個(gè)人找到自己的長處，確定好自己的位置，就容易使學(xué)生體驗(yàn)到成功的喜悅，進(jìn)而轉(zhuǎn)變?yōu)閮?nèi)在動(dòng)力，努力學(xué)習(xí)、做事，自信心穩(wěn)步提升，即使以后遭遇到挫折，也容易克服，從而為學(xué)生的終身發(fā)展打下基礎(chǔ)。