2020-2021年度，以云南工商學(xué)院多年的實(shí)踐為基礎(chǔ)，面向集團(tuán)各院校全體授課教師，精彩課堂活動(dòng)的開(kāi)展實(shí)現(xiàn)了全覆蓋。在提升課堂教學(xué)質(zhì)量，增進(jìn)教師教學(xué)能力，促進(jìn)學(xué)生學(xué)習(xí)獲知，以及推動(dòng)課程教學(xué)模式改革與創(chuàng)新等方面產(chǎn)生了良好的成效。
精彩課堂的出發(fā)點(diǎn)是以學(xué)生為中心，使課堂更具有吸引力，促進(jìn)學(xué)生專(zhuān)業(yè)精進(jìn)，幫助學(xué)生更好的成長(zhǎng)。為了更好的支持和服務(wù)教師課程建設(shè)和課堂教學(xué)改革成果的沉淀及持續(xù)改進(jìn)，教學(xué)部將分期組織2020-2021年度精彩課堂講師團(tuán)教師的優(yōu)秀案例進(jìn)行分享與交流，共同學(xué)習(xí)，共同成長(zhǎng)。
本期分享的內(nèi)容來(lái)自鄭州城市職業(yè)學(xué)院2020-2021年度精彩課堂校級(jí)競(jìng)賽一等獎(jiǎng)獲得者張雨老師的《網(wǎng)頁(yè)設(shè)計(jì)與制作》。
人物介紹
張雨，女，漢族，碩士研究生，畢業(yè)于昆明理工大學(xué)藝術(shù)傳媒學(xué)院設(shè)計(jì)藝術(shù)學(xué)專(zhuān)業(yè)。曾經(jīng)在企業(yè)擔(dān)任網(wǎng)頁(yè)設(shè)計(jì)師多年，后進(jìn)入企業(yè)培訓(xùn)機(jī)構(gòu)從事專(zhuān)業(yè)教育培訓(xùn)工作。具有豐富的從業(yè)經(jīng)驗(yàn)和教育教學(xué)經(jīng)驗(yàn)?，F(xiàn)就職鄭州城市職業(yè)學(xué)院電子信息工程系教師，主要擔(dān)任《網(wǎng)頁(yè)設(shè)計(jì)》，《web前端高級(jí)開(kāi)發(fā)》，《平面廣告創(chuàng)意與設(shè)計(jì)》，《設(shè)計(jì)心理學(xué)》等數(shù)字媒體技術(shù)專(zhuān)業(yè)方向和數(shù)字媒體技術(shù)專(zhuān)業(yè)（多媒體設(shè)計(jì)與制作）方向?qū)I(yè)基礎(chǔ)課程及專(zhuān)業(yè)核心課程。
獲獎(jiǎng)情況：
2019年榮獲院級(jí)平面創(chuàng)意設(shè)計(jì)比賽優(yōu)秀指導(dǎo)教師獎(jiǎng)；
2020年榮獲校級(jí)“優(yōu)秀教師”榮譽(yù)稱(chēng)號(hào)；
2021年榮獲校級(jí)青年教師課堂教學(xué)創(chuàng)新大賽一等獎(jiǎng)。
《網(wǎng)頁(yè)設(shè)計(jì)與制作》
課程教學(xué)模式創(chuàng)新與實(shí)踐
一、課程簡(jiǎn)介
1.課程名稱(chēng)：網(wǎng)頁(yè)設(shè)計(jì)與制作
2.課程簡(jiǎn)介：
《網(wǎng)頁(yè)設(shè)計(jì)與制作》是計(jì)算機(jī)應(yīng)用技術(shù)、數(shù)字媒體技術(shù)專(zhuān)業(yè)基礎(chǔ)課程，總課時(shí)為56學(xué)時(shí)，《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程標(biāo)準(zhǔn)是以網(wǎng)頁(yè)設(shè)計(jì)師就業(yè)崗位技能需求為導(dǎo)向，課程核心知識(shí)點(diǎn)HTML5+CSS3同樣是web前端開(kāi)發(fā)工程師的基礎(chǔ)技能。課程除了傳授學(xué)生所必備的相關(guān)技能知識(shí)點(diǎn)，更要培養(yǎng)學(xué)生具備Web前端開(kāi)發(fā)工作崗位的能力和素質(zhì)，逐步養(yǎng)成工作行為習(xí)慣，具有團(tuán)隊(duì)合作意識(shí)，強(qiáng)化學(xué)生自學(xué)能力等。加強(qiáng)學(xué)生互聯(lián)網(wǎng)基本法制意識(shí)，形成良好的職業(yè)道德素養(yǎng)。
3.授課面向?qū)I(yè)：
數(shù)字媒體技術(shù)專(zhuān)業(yè)、計(jì)算機(jī)應(yīng)用技術(shù)專(zhuān)業(yè)
4.課程性質(zhì)：專(zhuān)業(yè)基礎(chǔ)課
二、課程教學(xué)與創(chuàng)新
1.項(xiàng)目階梯推進(jìn)
課程為項(xiàng)目導(dǎo)入，以社會(huì)工作崗位需求為導(dǎo)向，內(nèi)容選擇要凸顯出崗位技能的基本要求。項(xiàng)目?jī)?nèi)容依據(jù)高職學(xué)生年齡特點(diǎn)，學(xué)習(xí)方法和基本素養(yǎng)進(jìn)行設(shè)定，實(shí)現(xiàn)技能和設(shè)計(jì)的綜合要求。
項(xiàng)目分為三個(gè)階梯：
一是基礎(chǔ)類(lèi)項(xiàng)目，此類(lèi)別為基礎(chǔ)知識(shí)強(qiáng)化部分，學(xué)習(xí)html5，css3核心技能；
二是綜合類(lèi)項(xiàng)目，將碎片化的知識(shí)細(xì)節(jié)整合，完成網(wǎng)頁(yè)布局的基本技能要求；
三是設(shè)計(jì)類(lèi)項(xiàng)目，將網(wǎng)頁(yè)美工和網(wǎng)頁(yè)技術(shù)搭建綜合，技術(shù)與設(shè)計(jì)相互結(jié)合。
2.案例“拼圖”促合作
基礎(chǔ)類(lèi)項(xiàng)目的案例形成不同“技術(shù)塊”，綜合類(lèi)項(xiàng)目將這些“技術(shù)塊”進(jìn)行拼接。類(lèi)似于“”拼圖”操作，在有限的課堂時(shí)間里，學(xué)生分組分工制作完成“技術(shù)塊”，最后完成拼接工作。有意識(shí)增加案例趣味性，讓學(xué)生看到自己案例1+1>2的效果，體會(huì)團(tuán)隊(duì)合作的力量。
3.“重復(fù)”操作化難點(diǎn)
將技術(shù)難題導(dǎo)入“技能塊”中，通過(guò)基礎(chǔ)類(lèi)項(xiàng)目學(xué)習(xí)，提煉學(xué)生難點(diǎn)，編排進(jìn)入綜合類(lèi)項(xiàng)目的“技能塊”中，讓學(xué)生分工時(shí)不斷重復(fù)操作難點(diǎn)，通過(guò)團(tuán)隊(duì)合作案例，提高責(zé)任心的同時(shí)，對(duì)難題解決的認(rèn)真態(tài)度也得到了全面的提高。
4.目標(biāo)分層能共進(jìn)
此設(shè)計(jì)主要針對(duì)學(xué)習(xí)進(jìn)度的參差不齊的學(xué)生群體，本著OBE教育理念中“以學(xué)生為本”的宗旨，每一個(gè)學(xué)生在學(xué)習(xí)中都要獲得不同程度的提高。將課程目標(biāo)分為基礎(chǔ)目標(biāo)和拓展目標(biāo)。課堂基礎(chǔ)目標(biāo)是學(xué)生必須掌握的核心知識(shí)技能。拓展目標(biāo)是掌握核心知識(shí)后的技能提升強(qiáng)化型訓(xùn)練。如下圖實(shí)踐創(chuàng)新部分：
圖1 課程實(shí)踐創(chuàng)新環(huán)節(jié)
三、課程目標(biāo)
? 知識(shí)目標(biāo)
1.了解網(wǎng)站工作原理，掌握前端開(kāi)發(fā)環(huán)境，了解客戶(hù)端用戶(hù)交互習(xí)慣，創(chuàng)造良好用戶(hù)體驗(yàn)的網(wǎng)頁(yè)布局。
2.熟練掌握HTML 5+CSS 3基礎(chǔ)知識(shí)點(diǎn)，重點(diǎn)學(xué)習(xí)HTML 5+CSS 3新增功能和最新前端技術(shù)，完成頁(yè)面的多平臺(tái)搭建工作。
? 能力目標(biāo)
1.掌握多平臺(tái)布局的搭建中出現(xiàn)的各種瀏覽器的兼容問(wèn)題的常規(guī)方法，熟悉高效優(yōu)化和維護(hù)網(wǎng)頁(yè)代碼的常用方式，培養(yǎng)工作中分析問(wèn)題和解決問(wèn)題的能力。
2.HTML 5+CSS 3技術(shù)延伸，了解HTML 5與后臺(tái)線(xiàn)程處理改進(jìn)，與多媒體的有效融合等，了解CSS 3 視覺(jué)呈現(xiàn)及代碼簡(jiǎn)化優(yōu)勢(shì)，了解靜態(tài)頁(yè)面中動(dòng)態(tài)特效展示技術(shù)語(yǔ)言JavaScript的呈現(xiàn)。在學(xué)習(xí)中具備多技術(shù)融合的意識(shí)，提升自學(xué)能力。
? 素質(zhì)目標(biāo)
1.對(duì)Web前端行業(yè)的工作內(nèi)容和發(fā)展前景及職業(yè)規(guī)劃有一定的判斷和認(rèn)識(shí)，了解Web前端行業(yè)多種語(yǔ)言編碼技術(shù)的綜合性交叉，認(rèn)識(shí)團(tuán)隊(duì)合作的重要性。
2.形成Web前端工作行為習(xí)慣，具備互聯(lián)網(wǎng)基本法制意識(shí)，形成良好的道德素養(yǎng)，法律素養(yǎng)，人文素養(yǎng)和藝術(shù)素養(yǎng)。
四、課程教學(xué)設(shè)計(jì)
課程設(shè)計(jì)以項(xiàng)目導(dǎo)入法為主，項(xiàng)目案例按照崗位特點(diǎn)，將任務(wù)拆分為不同的技能區(qū)塊，課程設(shè)計(jì)突出任務(wù)所需核心技能，整合細(xì)碎代碼知識(shí)點(diǎn)，將課程難點(diǎn)進(jìn)行重復(fù)性操作設(shè)計(jì)。本課程已實(shí)現(xiàn)學(xué)生的學(xué)習(xí)成果為導(dǎo)向，通過(guò)重構(gòu)教學(xué)大綱、調(diào)整教學(xué)設(shè)計(jì)、創(chuàng)新教學(xué)方法，將線(xiàn)上云班課與線(xiàn)下課堂教學(xué)相融合 ，課堂案例與拓展案例相呼應(yīng)，課堂案例、拓展案例與綜合項(xiàng)目相結(jié)合與“拼接”。提升學(xué)生學(xué)習(xí)興趣，聚焦重難點(diǎn)。
1.教學(xué)過(guò)程設(shè)計(jì)
線(xiàn)上線(xiàn)下相融合
線(xiàn)上通過(guò)云班課的資料庫(kù)上傳，完成對(duì)學(xué)生課前預(yù)習(xí)設(shè)定；線(xiàn)上云班課輕討論完成課堂提問(wèn)互動(dòng)討論環(huán)節(jié)；線(xiàn)上作業(yè)任務(wù)發(fā)布完成學(xué)生提交拓展作業(yè)及老師作業(yè)批改的工作。課堂授課過(guò)程中學(xué)生對(duì)學(xué)生掌握代碼情況能夠及時(shí)觀測(cè)和反饋。
線(xiàn)上線(xiàn)下教學(xué)方法的融合，能夠讓學(xué)生在學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)核心知識(shí)的同時(shí)，培養(yǎng)自學(xué)能力，合理利用碎片化時(shí)間，和老師多交流互動(dòng)，老師能夠在課后隨時(shí)完成答疑解惑，提高課上授課效率。
案例的延伸
課堂案例設(shè)計(jì)以核心知識(shí)學(xué)習(xí)為目的，案例盡量以代碼簡(jiǎn)短，極具代表性為主；拓展案例重在重復(fù)核心技能的同時(shí)拓展效果表現(xiàn)。技能練習(xí)由課堂延伸到課后。
引導(dǎo)學(xué)生代碼編程習(xí)慣的形成
編程學(xué)習(xí)特點(diǎn)在于:
（1）編程思維模式的形成。這需要在案例設(shè)計(jì)中，知識(shí)技能學(xué)習(xí)中有意識(shí)的重復(fù)練習(xí)。
（2）學(xué)習(xí)習(xí)慣的培養(yǎng)。代碼編程是多技術(shù)的融合，學(xué)生必須具備自學(xué)能力。通過(guò)課程教學(xué)的線(xiàn)下線(xiàn)上配合，讓學(xué)生能夠突破課堂教學(xué)，整合碎片時(shí)間和老師進(jìn)行更多的交流學(xué)習(xí)。
（3）學(xué)習(xí)筆記。讓學(xué)生養(yǎng)成記錄筆記的習(xí)慣，教會(huì)學(xué)生如何進(jìn)行有效筆記記錄，輔助自學(xué)。
圖3 編程習(xí)慣的養(yǎng)成
2. 教學(xué)案例 :以導(dǎo)航條制作為例
以工作內(nèi)容為導(dǎo)向，從網(wǎng)站效果中提取出具有代表性的四種導(dǎo)航樣式：橫向?qū)Ш?、豎向?qū)Ш健D片導(dǎo)航、響應(yīng)式導(dǎo)航；響應(yīng)式導(dǎo)航作為重點(diǎn)內(nèi)容，編寫(xiě)出響應(yīng)式導(dǎo)航組合版，作為本章節(jié)拓展作業(yè)（內(nèi)容組合提升）。
線(xiàn)上線(xiàn)下教學(xué)過(guò)程
課前：線(xiàn)上資料發(fā)布導(dǎo)航條效果圖，讓學(xué)生提前自己編寫(xiě)html代碼結(jié)構(gòu)和css樣式做好整理。
課中：輕討論，部分同學(xué)討論區(qū)粘貼自己設(shè)想的代碼結(jié)構(gòu)，互動(dòng)討論、截選。老師知識(shí)點(diǎn)導(dǎo)入，闡述不同方案的解決辦法，提出技術(shù)重點(diǎn)。課上學(xué)生方案修改更正。線(xiàn)上發(fā)布作業(yè)內(nèi)容、要求等及知識(shí)點(diǎn)拓展鏈接；
課后：通過(guò)拓展作業(yè)提交線(xiàn)上點(diǎn)評(píng)。
通過(guò)線(xiàn)上線(xiàn)下互動(dòng)教學(xué)，培養(yǎng)學(xué)生獨(dú)立思考，解決問(wèn)題的能力，強(qiáng)化自學(xué)意識(shí)，反復(fù)造作技術(shù)難點(diǎn)，在課程設(shè)計(jì)中逐步形成前端設(shè)計(jì)及開(kāi)發(fā)人員必須具備的基本職業(yè)素養(yǎng)。
案例的延伸
導(dǎo)航條案例“技能塊”的基礎(chǔ)來(lái)源是上節(jié)課的列表技能，此技能塊又是下節(jié)布局的“拼圖元素”基礎(chǔ)知識(shí)點(diǎn) 。技能重復(fù)并延伸，目的是讓學(xué)生在學(xué)習(xí)新知識(shí)點(diǎn)同時(shí)技術(shù)難點(diǎn)反復(fù)操作，降低知識(shí)點(diǎn)吸收難度。
五、課程學(xué)習(xí)評(píng)價(jià)
? 考核組成
總評(píng)成績(jī)由過(guò)程性考核和終結(jié)性成績(jī)兩部分組成，二者均按百分制計(jì)分，課程總評(píng)成績(jī)＝過(guò)程性考核60%+終結(jié)性考核40%。
? 成績(jī)?cè)u(píng)定
1.過(guò)程性考核
表1 過(guò)程性考核題型占比
2.終結(jié)性考核
考核形式：實(shí)操考試
表2 終結(jié)性考核題型占比
六、課程學(xué)習(xí)組織與服務(wù)
課堂的學(xué)習(xí)組織以教師授課配合線(xiàn)上預(yù)習(xí)、線(xiàn)上討論互動(dòng)、作業(yè)互動(dòng)等方式，完成課堂內(nèi)容的知識(shí)點(diǎn)吸收和鞏固。在教學(xué)組織服務(wù)中強(qiáng)化學(xué)生自學(xué)意識(shí)，教會(huì)學(xué)生學(xué)習(xí)方法，要求學(xué)生課堂記錄筆記。課堂服務(wù)中課堂授課占比50%，線(xiàn)上交流和學(xué)生自主學(xué)習(xí)、創(chuàng)新等占比50%。
七、教學(xué)改革與感想
《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程過(guò)程以O(shè)BE教學(xué)理念為導(dǎo)向，課程設(shè)計(jì)宗旨以“以學(xué)生為本” ，對(duì)網(wǎng)頁(yè)設(shè)計(jì)崗位所需要技能和工作內(nèi)容進(jìn)行對(duì)html5+css3進(jìn)行知識(shí)點(diǎn)的歸納，將代碼冗長(zhǎng)繁多的特點(diǎn)，依據(jù)任務(wù)技能出現(xiàn)的頻率進(jìn)行整合，形成一個(gè)個(gè)“技能塊” ，通過(guò)長(zhǎng)期授課中學(xué)生知識(shí)學(xué)習(xí)的反饋，將難點(diǎn)重點(diǎn)的技能塊在案例設(shè)計(jì)中反復(fù)穿插。經(jīng)過(guò)長(zhǎng)期反復(fù)性操作，學(xué)生慢慢吸收，完成技能學(xué)習(xí)。
一直以來(lái)，藝術(shù)設(shè)計(jì)類(lèi)學(xué)生接觸代碼編程知識(shí)，由于思維模式和知識(shí)儲(chǔ)備，學(xué)習(xí)起來(lái)比較困難，也很難提起興趣。在教學(xué)中出現(xiàn)很多困難，通過(guò)接觸OBE理論，結(jié)合自身多年企業(yè)經(jīng)歷和教學(xué)經(jīng)驗(yàn)，進(jìn)行課程改革，2020級(jí)學(xué)生在此課程改革教學(xué)中，學(xué)習(xí)提升明顯。
聯(lián)系客服
