“一體化 + 慕課”教學模式在網頁制作教學中的應用探究

李爭鳴

關鍵詞：一體化教學? 慕課? 網頁制作? 表單

根據相關研究分析，社會對網頁美工、網站前端、網站維護與管理人員的需求數量還是相當大的，網頁制作作為計算機網絡專業的一門專業課程，具有一定的重要性。

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

利用慕課方式教學具有以下幾大優勢。

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

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

一、網頁制作課程教學分析

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

1.學情分析

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

2.課程內容分析

以筆者所在學校為例，網頁制作課著重介紹網頁效果圖設計、HTML標記和CSS層疊樣式表，強調DIV+CSS布局規范和方法，同時，還要適當引導學生學習HTML5、CSS3、JavaScript腳本等最新內容。

3.課程目標分析

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

二、以表單設計學習情境為例，分析教學任務、目標、教學重難點

1.教學任務

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

2.教學目標

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

3.教學重點

一是理解每個表單控件的作用，能準確應用達到所需效果;二是掌握JavaScript的基本語法，能編寫有效的與HTML傳遞數據的語句;三是根據表單設計效果圖，能熟練地切圖并運用DIV+CSS進行表單頁面布局。

4.教學難點

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

三、“一體化 + 慕課”教學模式的應用探究

1.一體化教學在本次教學中的應用

表單設計教學過程如下。

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

2.慕課在本次教學中的應用

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

提出問題之后，視頻還簡單講解了實現該效果的基本方法，及要準備資料的主要方向如HTML5+CSS3、JavaScript，引導學生先自行學習這次任務的知識點，并給出幾個供學習的在線慕課視頻學習網址。

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

3.一體化+慕課在本次任務中的應用過程如下

四、小結

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

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

參考文獻：

[1]張琳.慕課視角下網頁設計課程教學生態模式的構建策略研究[J].山東農業工程學院學報，2016（8）.

[2]唐瓊等.慕課在網頁設計課程教學中的應用——CSS定位教學案例[J].湖北第二師范學院學報，2016（7）.

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

[4]黃濤.“項目教學 + 翻轉課堂”在網頁制作課程中的應用[J].信息與電腦，2018（3）.

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