基于Web前端設(shè)計課程教學在高職院校中的探索研究

鄧慈云 胡柳 吳瑤

摘要：大數(shù)據(jù)時代，高等職業(yè)院校對大數(shù)據(jù)技術(shù)與應(yīng)用專業(yè)的相關(guān)課程正在不斷嘗試改革創(chuàng)新，試圖找到適合高職學生的教學方法和手段。本文分析了《Web前端設(shè)計》課程中存在的不足，提出了結(jié)合多種創(chuàng)新型教學模式的解決方案。通過實踐證明，該方法能夠有效提高教學水平。

關(guān)鍵詞：前端技術(shù);高職院校;教學改革;課程教學

中圖分類號：G642? ? ? ? 文獻標識碼：A

文章編號：1009-3044（2021）13-0102-02

Abstract： Big data， higher vocational colleges are constantly trying to reform and innovate courses related to Big data technology and application， trying to find teaching methods and means suitable for the college students. This article analyzes the deficiencies in the "Web Front-end Design" course， and proposes a solution combining a variety of innovative teaching modes. Practice has proved that this method can effectively improve the teaching level.

Key words：front-end technology;high vocational colleges; teaching reform; course; teaching

1引言

Web前端是創(chuàng)建Web頁面或App等前端界面呈現(xiàn)給用戶的過程，通過HTML，CSS及JavaScript以及衍生出來的各種技術(shù)、框架、解決方案，來實現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶界面交互。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展和HTML5、CSS3的應(yīng)用，現(xiàn)代網(wǎng)頁更加美觀，交互效果顯著，功能更加強大?！禬eb前端設(shè)計》是我院大數(shù)據(jù)技術(shù)與應(yīng)用專業(yè)中專業(yè)基礎(chǔ)課程之一，通過該門課程的教學，讓學生具備網(wǎng)頁設(shè)計與制作的能力，為后續(xù)數(shù)據(jù)采集和數(shù)據(jù)可視化的學習打下基礎(chǔ)。

2 教學現(xiàn)狀分析

我院在Web前端技術(shù)的教學過程中，主要存在三個方面的問題：1）教學模式單一;2）課堂教學時間固定;3）學生自制能力不足。

1） 教學模式單一

目前，我院大多數(shù)教師仍主要采用課堂教學，教學模式單一。出現(xiàn)這種現(xiàn)狀的原因是：首先，教師習慣于傳統(tǒng)的教學模式，思想固定。其次，Web前端設(shè)計課程是一門實踐性較強的課程。傳統(tǒng)教學模式下，在課堂上花費了大量的時間講授理論知識和實例演示。導致學生實踐的時間不足，編程能力提高速度慢。最后，教師的線上教學經(jīng)驗不足，還處于積累階段。

2） 線上和線下教學結(jié)合度不夠

信息時代，線上和線下教學各有優(yōu)劣。將兩者相結(jié)合的混合式教學模式，能夠很好地解決彼此帶來的不足。但是，在實際的教學過程中，存在線上和線下混合教學結(jié)合程度不夠。如何將線上教學和線下課堂有效的結(jié)合，而非簡單地將線上線下教學簡單的組合起來，直接影響到Web前端技術(shù)課程的教學質(zhì)量。

3） 學生自制能力不足

學生在線上教學的過程中，教師缺乏對學生的有效管控，無法及時掌握學生的學習狀態(tài)。部分學生出現(xiàn)思想開小差或受到網(wǎng)絡(luò)等外界的影響，導致學習效率低下。造成這些現(xiàn)象的主要原因是：學生自制力不足，部分學生自身的專業(yè)基礎(chǔ)差，學習能力不強。

3 創(chuàng)新教學模式在教學中的應(yīng)用

針對Web前端課程在教學過程中存在的問題，本文提出了采用“線上任務(wù)驅(qū)動教學+線下案例教學”的混合模式。首先，以市場需求為導向，通過對地方產(chǎn)業(yè)鏈和崗位技能需求進行分析。然后，針對高職學生的認知特點，重構(gòu)課程內(nèi)容。以企業(yè)的典型案例為載體，形成從簡單實例到復雜案例的系統(tǒng)化學習。最后，讓學生在遞進式案例教學過程中培養(yǎng)網(wǎng)頁設(shè)計與制作的綜合職業(yè)技能和職業(yè)素養(yǎng)。

1）構(gòu)建思路

基于“線上任務(wù)驅(qū)動，線下案例教學”的混合模式中，整個課程教學分成三個階段：課前、課中和課后。（1）課前，線上讓學生提前了解項目模塊的劃分情況，模塊任務(wù)和所需技能，同時完成理論知識的自主學習。（2）課中，線下教師重點講解項目模塊中技術(shù)的重點難點，以及提升學生靈活運用知識的能力。（3）課后，下達模塊任務(wù)，讓學生自行完成實踐任務(wù)，鞏固所學的知識和技能。

2）課程設(shè)計思路

在Web前端技術(shù)課程中，采用線上任務(wù)驅(qū)動教學+線下案例教學的教學模式。首先，根據(jù)課程標準中知識點選取合適的案例來進行任務(wù)分解并組織線下教學。如專業(yè)學習網(wǎng)站，該網(wǎng)站的設(shè)計與實現(xiàn)囊括了本課程所學的所有知識：網(wǎng)頁基礎(chǔ)，圖文混排，表格和表單的應(yīng)用，CSS美化頁面，多媒體頁面的制作，使用JavaScript實現(xiàn)頁面動態(tài)效果和交互性和使用 bootstrap框架開發(fā)快速建站的等內(nèi)容。其次，教師對案例進行解剖，以知識點為基礎(chǔ)，進行模塊設(shè)計。同時，根據(jù)劃分的模塊，完成線上學生的實踐任務(wù)清單。案例模塊分解如表1所示。

3） 課程實施過程

整個教學實施過程中，首先，教師利用學習通等線上平臺提前建設(shè)課程資源，并向?qū)W生推送。然后，以小組為單位，每個小組設(shè)置一名組長。教師課堂上重點講解項目模塊中技術(shù)的重點難點。組長負責匯報小組學習和任務(wù)完成情況以及碰到的問題。針對這些問題開展討論、探討如何處理解決，以培養(yǎng)他們解決問題的能力。接下來，以小組為單位，線上下達模塊任務(wù)，任務(wù)下達后，組長完成任務(wù)分配、組織討論交流，讓學生自行完成實踐任務(wù)，鞏固所學的知識和技能。通過組員之間的相互督促，相互協(xié)助，培養(yǎng)他們的自主學習能力和團隊合作能力等技能。

4） 課程評價體系

在設(shè)計Web前端技術(shù)課程的考核標準中，減少了期末考試的比重，從原來的40%減少到30%;增加了平時成績的考核比重，從原來的60%增加到70%。平時成績包括線上完成學習、模塊任務(wù)和線下課堂成績兩個部分，各占一半。其中，線上成績包括線上課程學習10%，線上測評10%，模塊任務(wù)完成情況15%。線下成績包括課堂參與討論15%，隨堂測試10%，學生互評成績10%。成績比例的分布注重學生在模塊中任務(wù)的完成情況和自主學習的程度，同時還注重學生的自評和互評。

4 結(jié)束語

目前Web前端技術(shù)課程存在教學模式單一，線上和線下教學結(jié)合度不夠以及學生自制能力不足等問題。針對上述問題，提出了一種“線上任務(wù)驅(qū)動教學+線下案例教學”的混合模式教學模式。在該模式下，學生通過完成模塊任務(wù)，將理論知識用于實踐，專業(yè)技能得到了鞏固和強化，也給他們帶來了學習的成就感和滿足感。從而學生的學習自主性和積極性也有了明顯提高。

參考文獻：

[1] 馬睿.“互聯(lián)網(wǎng)+”背景下的Web前端開發(fā)課程教學模式的探討[J].計算機產(chǎn)品與流通，2020（10）：202.

[2] 李永鋒.應(yīng)用型本科院校軟件技術(shù)類課程的教學實踐研究[J].計算機教育，2019（12）：117-121.

[3] 吳鴻韜，李智，袁玉倩.基于OBE理念的Web前端開發(fā)技術(shù)課程教學改革[J].計算機教育，2019（11）：91-93，98.

[4]孟瑤，葛玉潔，王康，馬雨琪.“Web前端開發(fā)技術(shù)”課程微課設(shè)計研究[J].計算機時代，2019（3）：82-84.

【通聯(lián)編輯：王力】