“一體化 + 慕課”教學(xué)模式在網(wǎng)頁(yè)制作教學(xué)中的應(yīng)用探究

李爭(zhēng)鳴

關(guān)鍵詞：一體化教學(xué)? 慕課? 網(wǎng)頁(yè)制作? 表單

根據(jù)相關(guān)研究分析，社會(huì)對(duì)網(wǎng)頁(yè)美工、網(wǎng)站前端、網(wǎng)站維護(hù)與管理人員的需求數(shù)量還是相當(dāng)大的，網(wǎng)頁(yè)制作作為計(jì)算機(jī)網(wǎng)絡(luò)專業(yè)的一門專業(yè)課程，具有一定的重要性。

近幾年，慕課以一種開(kāi)放、自由的教學(xué)模式出現(xiàn)，是信息時(shí)代“互聯(lián)網(wǎng)+教育”的產(chǎn)物。一體化教學(xué)是適應(yīng)社會(huì)和市場(chǎng)要求的一種全新教學(xué)模式，以典型工作任務(wù)作為引導(dǎo)，以企業(yè)真實(shí)工作環(huán)境為載體，將教學(xué)與實(shí)操，學(xué)校與企業(yè)完美地聯(lián)系在一起。筆者應(yīng)用了兩種慕課方式，一種是教師提前制作好的慕課視頻，主要講解本次工作任務(wù)和實(shí)現(xiàn)效果的一些基本方法，可以提前發(fā)給學(xué)生在課下進(jìn)行學(xué)習(xí)。一種是引導(dǎo)學(xué)生通過(guò)相關(guān)慕課網(wǎng)站選擇自己合適的課程進(jìn)行學(xué)習(xí)。

利用慕課方式教學(xué)具有以下幾大優(yōu)勢(shì)。

學(xué)生通過(guò)慕課學(xué)習(xí)，不僅能進(jìn)行知識(shí)的預(yù)習(xí)，也能拓寬學(xué)生的知識(shí)面，從而開(kāi)闊學(xué)生的視野。有助于學(xué)生碎片化學(xué)習(xí)、移動(dòng)學(xué)習(xí)，這樣，學(xué)生可以更好地對(duì)自己進(jìn)行時(shí)間管理。

學(xué)生進(jìn)行慕課學(xué)習(xí)，比課堂更易集中注意力。學(xué)生按需學(xué)習(xí)，自主決定學(xué)習(xí)內(nèi)容與學(xué)習(xí)進(jìn)度，是課堂教學(xué)的良好輔助。培養(yǎng)了學(xué)生良好的信息素養(yǎng)，也提高了學(xué)生網(wǎng)絡(luò)信息獲取能力和分析能力，在慕課方式的學(xué)習(xí)中，學(xué)生能夠自主地學(xué)習(xí)研究，就會(huì)養(yǎng)成自主探究的良好習(xí)慣。

一、網(wǎng)頁(yè)制作課程教學(xué)分析

隨著Web技術(shù)的發(fā)展，網(wǎng)頁(yè)制作技術(shù)不斷更新，各種制作軟件層出不窮，而網(wǎng)頁(yè)制作課程作為計(jì)算機(jī)網(wǎng)絡(luò)專業(yè)的核心學(xué)科，有著一定的重要性，目前網(wǎng)頁(yè)制作課程主要是針對(duì)各章節(jié)的內(nèi)容制定相應(yīng)的實(shí)操內(nèi)容，缺少對(duì)學(xué)生綜合職業(yè)能力的培養(yǎng)。并且，一味地依賴科教書(shū)，不僅跟不上時(shí)代的發(fā)展，也滿足不了學(xué)生的需求，更達(dá)不到企業(yè)用人需要。這時(shí)，就需要教師及時(shí)創(chuàng)新教育理念、調(diào)整教學(xué)方法，針對(duì)網(wǎng)頁(yè)制作課程教學(xué)內(nèi)容，增減相應(yīng)知識(shí)點(diǎn)，這里通過(guò)一體化教學(xué)與慕課技術(shù)來(lái)激發(fā)學(xué)生內(nèi)心深處的學(xué)習(xí)需求，學(xué)習(xí)到課本外最新、最前沿的知識(shí)，如HTML5、CSS3、JavaScript 腳本、JQ等最新技術(shù)。

1.學(xué)情分析

網(wǎng)頁(yè)制作課程是計(jì)算機(jī)網(wǎng)絡(luò)專業(yè)第四學(xué)期開(kāi)設(shè)的專業(yè)課，學(xué)生已經(jīng)學(xué)習(xí)了PS、網(wǎng)頁(yè)美工、程序設(shè)計(jì)等相關(guān)基礎(chǔ)輔助課程，并且通過(guò)本課程前三個(gè)項(xiàng)目的練習(xí)，學(xué)生學(xué)習(xí)了HTML語(yǔ)言、DIV+CSS布局方法、還有HTML5+CSS3的部分技術(shù)。根據(jù)之前的教學(xué)成果分析，目前呈現(xiàn)的問(wèn)題是學(xué)生理解與執(zhí)行能力存在嚴(yán)重兩極分化的情況，一部分學(xué)生能夠很好很快速地完成教師布置的任務(wù)，并且能夠自主學(xué)習(xí)課外延伸知識(shí)，一部分學(xué)生對(duì)基礎(chǔ)知識(shí)的理解還存在欠缺的情況，從而出現(xiàn)越學(xué)習(xí)越困難的情況。

2.課程內(nèi)容分析

以筆者所在學(xué)校為例，網(wǎng)頁(yè)制作課著重介紹網(wǎng)頁(yè)效果圖設(shè)計(jì)、HTML標(biāo)記和CSS層疊樣式表，強(qiáng)調(diào)DIV+CSS布局規(guī)范和方法，同時(shí)，還要適當(dāng)引導(dǎo)學(xué)生學(xué)習(xí)HTML5、CSS3、JavaScript腳本等最新內(nèi)容。

3.課程目標(biāo)分析

網(wǎng)頁(yè)制作課要求學(xué)生熟練掌握網(wǎng)頁(yè)效果圖的設(shè)計(jì)與切片、 DIV+CSS的主流布局方法，以及HTML5、CSS3、JavaScript的靈活運(yùn)用，為網(wǎng)站前端的職位要求打下良好的基礎(chǔ)。

二、以表單設(shè)計(jì)學(xué)習(xí)情境為例，分析教學(xué)任務(wù)、目標(biāo)、教學(xué)重難點(diǎn)

1.教學(xué)任務(wù)

一體化教學(xué)可以讓學(xué)生從職業(yè)崗位出發(fā)，以客戶需求進(jìn)行研究思考，制作實(shí)踐可行的工作計(jì)劃。以某酒店網(wǎng)站用戶注冊(cè)頁(yè)面學(xué)習(xí)情境作為本次教學(xué)任務(wù)，介紹如何通過(guò)以上幾種教學(xué)方式結(jié)合來(lái)提升教學(xué)質(zhì)量，培養(yǎng)學(xué)生職業(yè)技能。

2.教學(xué)目標(biāo)

在完成這個(gè)工作任務(wù)中，學(xué)生學(xué)到的知識(shí)具有開(kāi)放性，但通過(guò)四個(gè)星期的時(shí)間，學(xué)生需要掌握以下幾點(diǎn)：能夠準(zhǔn)確定義不同的表單控件;根據(jù)客戶需求設(shè)計(jì)滿意的用戶注冊(cè)效果圖;并利用DIV+CSS進(jìn)行布局與美化;能夠編寫JavaScript腳本對(duì)本頁(yè)面輸入信息進(jìn)行驗(yàn)證;適當(dāng)加入HTML5與CSS3進(jìn)行表單美化與優(yōu)化用戶體驗(yàn);最后進(jìn)行效果的展示與總結(jié)。

3.教學(xué)重點(diǎn)

一是理解每個(gè)表單控件的作用，能準(zhǔn)確應(yīng)用達(dá)到所需效果;二是掌握J(rèn)avaScript的基本語(yǔ)法，能編寫有效的與HTML傳遞數(shù)據(jù)的語(yǔ)句;三是根據(jù)表單設(shè)計(jì)效果圖，能熟練地切圖并運(yùn)用DIV+CSS進(jìn)行表單頁(yè)面布局。

4.教學(xué)難點(diǎn)

一是能靈活運(yùn)用JavaScript對(duì)HTML表單中輸入的數(shù)據(jù)進(jìn)行有效驗(yàn)證;二是掌握表單樣式的控制，能夠靈活運(yùn)用HTML5+CSS3美化表單界面;三是能對(duì)制作時(shí)出現(xiàn)的問(wèn)題進(jìn)行分析并調(diào)試;四是代碼編寫時(shí)要考慮便于今后的修改與維護(hù)。

三、“一體化 + 慕課”教學(xué)模式的應(yīng)用探究

1.一體化教學(xué)在本次教學(xué)中的應(yīng)用

表單設(shè)計(jì)教學(xué)過(guò)程如下。

一是學(xué)生進(jìn)行分組（教師注意各組需強(qiáng)弱搭配，每組4～5人），分發(fā)本次工作頁(yè)給各小組;二是學(xué)生根據(jù)工作頁(yè)，分析討論并提取客戶需求，制定工作計(jì)劃;三是根據(jù)需求，組內(nèi)各成員均設(shè)計(jì)該酒店用戶注冊(cè)頁(yè)面效果圖;四是組內(nèi)選出一種效果圖方案，并討論完善;五是組內(nèi)根據(jù)統(tǒng)一方案，進(jìn)行分工制作，本次任務(wù)包括網(wǎng)頁(yè)元素的布局、表單控件的合理設(shè)置、用戶輸入數(shù)據(jù)合理驗(yàn)證等;六是組長(zhǎng)將方案組合，并將最終效果討論完善;七是各小組將本組最終制作效果進(jìn)行展示、講解，主要說(shuō)明該效果用到的布局方式、技術(shù)，學(xué)到的東西以及待完善的地方。

2.慕課在本次教學(xué)中的應(yīng)用

在以往一體化教學(xué)中，每次任務(wù)開(kāi)始都是直接將工作頁(yè)發(fā)給各小組，但有些學(xué)生不太愿意閱讀文字的東西，如果有那么一個(gè)生動(dòng)、酷炫的視頻能進(jìn)行介紹是最好不過(guò)的。所以，在這里，教師就可以將提前制作好的慕課視頻發(fā)給學(xué)生，里面用動(dòng)畫的效果介紹了下次的任務(wù)要求與效果，并提出本任務(wù)的幾個(gè)主要問(wèn)題：一是實(shí)現(xiàn)表單頁(yè)面中圓角、陰影邊框;二是實(shí)現(xiàn)注冊(cè)部分出生日期年月日實(shí)時(shí)選擇功能;三是實(shí)現(xiàn)頭像的實(shí)時(shí)顯示功能;四是幾個(gè)輸入文本框的實(shí)時(shí)驗(yàn)證功能。

提出問(wèn)題之后，視頻還簡(jiǎn)單講解了實(shí)現(xiàn)該效果的基本方法，及要準(zhǔn)備資料的主要方向如HTML5+CSS3、JavaScript，引導(dǎo)學(xué)生先自行學(xué)習(xí)這次任務(wù)的知識(shí)點(diǎn)，并給出幾個(gè)供學(xué)習(xí)的在線慕課視頻學(xué)習(xí)網(wǎng)址。

看完視頻后，學(xué)生可以將里面的基本方法進(jìn)行反復(fù)的操作練習(xí)來(lái)掌握，并記下其他需要實(shí)現(xiàn)的功能，這樣學(xué)生帶著問(wèn)題去主動(dòng)學(xué)習(xí)，學(xué)生在空閑時(shí)間利用電腦或手機(jī)按任務(wù)要求尋找合適的網(wǎng)上慕課視頻進(jìn)行學(xué)習(xí)，教師在此過(guò)程中，要做好監(jiān)督，并適時(shí)提出問(wèn)題，讓學(xué)生有針對(duì)性地學(xué)習(xí)，組長(zhǎng)適時(shí)做好討論，將成員所學(xué)進(jìn)行整合與應(yīng)用。

3.一體化+慕課在本次任務(wù)中的應(yīng)用過(guò)程如下

四、小結(jié)

本次任務(wù)采用線上線下混合式教學(xué)模式，緩解了傳統(tǒng)教學(xué)中遇到的一些困境，不僅能讓學(xué)生做好任務(wù)前的預(yù)習(xí)，還能在任務(wù)中學(xué)到延伸知識(shí)，提高了學(xué)生自主學(xué)習(xí)的積極性，強(qiáng)烈激發(fā)了學(xué)習(xí)者的學(xué)習(xí)熱情，增強(qiáng)了學(xué)生的職業(yè)技能。學(xué)生根據(jù)個(gè)性化的學(xué)習(xí)資料進(jìn)一步進(jìn)行鞏固復(fù)習(xí)，強(qiáng)化對(duì)知識(shí)的理解，完善知識(shí)體系。

通過(guò)這兩種方式的結(jié)合，教師主動(dòng)將課堂交給學(xué)生，教師在其中更多的是扮演主持人、引導(dǎo)者、顧問(wèn)的角色，整個(gè)過(guò)程以企業(yè)工作流程的方式，引導(dǎo)學(xué)生積極發(fā)揮團(tuán)隊(duì)作用，自主控制學(xué)習(xí)節(jié)奏，掌握學(xué)習(xí)的主動(dòng)權(quán)，自主探究學(xué)習(xí)內(nèi)容。不管是一體化教學(xué)還是慕課學(xué)習(xí)，都需要學(xué)員具有一定的自覺(jué)性，所以，在本次任務(wù)中，教師要根據(jù)情況做好引導(dǎo)與監(jiān)督，對(duì)于個(gè)別學(xué)習(xí)基礎(chǔ)較弱的學(xué)生，目標(biāo)不能定太高，并適時(shí)進(jìn)行鼓勵(lì)與講解，教學(xué)方法不能硬搬，要做到因材施教、快樂(lè)學(xué)習(xí)。

參考文獻(xiàn)：

[1]張琳.慕課視角下網(wǎng)頁(yè)設(shè)計(jì)課程教學(xué)生態(tài)模式的構(gòu)建策略研究[J].山東農(nóng)業(yè)工程學(xué)院學(xué)報(bào)，2016（8）.

[2]唐瓊等.慕課在網(wǎng)頁(yè)設(shè)計(jì)課程教學(xué)中的應(yīng)用——CSS定位教學(xué)案例[J].湖北第二師范學(xué)院學(xué)報(bào)，2016（7）.

[3]劉萬(wàn)輝.網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)例教程[M].北京：人民郵電出版社，2013.

[4]黃濤.“項(xiàng)目教學(xué) + 翻轉(zhuǎn)課堂”在網(wǎng)頁(yè)制作課程中的應(yīng)用[J].信息與電腦，2018（3）.

（作者單位：揭陽(yáng)市高級(jí)技工學(xué)校）