李爭鳴

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

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

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

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

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

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

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

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

1.學(xué)情分析

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

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

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

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

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

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

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

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

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

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

3.教學(xué)重點

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

4.教學(xué)難點

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

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

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

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

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

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

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

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

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

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

四、小結(jié)

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

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

參考文獻：

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

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

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

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

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