《Web前端開發技術》課程教學改革與實踐

張微微 河北工程技術學院

1 概述

Web前端開發是計算機領域比較熱門的工作崗位。因此，許多院校計算機專業開設了Web前端開發技術等相關專業。本課程主要的教學內容有HTML、CSS、JavaScript和JS前端框架，以及Dreamweaver開發工具的使用，主要知識點包含HTML標記、CSS樣式、CSS+DIV布局、JavaScript基礎語法、JavaScript對象、DOM和BOM、jQuery等。以往，本課程的教學過程主要是圍繞Web前端開發的知識點，在講解知識點后，讓學生編寫練習題目達到消化和鞏固知識點的目的。本課程的目標是培養學生設計和制作Web頁面的綜合能力，這種圍繞知識點的教學方式使得學生不能將知識進行綜合，學生不能很好的將知識點應用到實際項目中。為了培養學生的學習興趣和綜合能力，可以采用以項目為驅動的的項目化教學方法。

2 教學內容

課程內容主要有HTML、CSS、JavaScript和JS前端框架。根據學期時常可以對教學內容進行課時的調整。表1為課程主要內容及學時分配：

3 項目驅動

在課程中，實施項目驅動的教學方法是貫穿在整個學期中。在學期初，可以將班級中的學生分為十個組，每個組的學生進行相同版式的網頁設計，從而形成一種比賽競爭的氛圍。圖1為某組的網頁示例。

圖1 網頁示例

在教學過程中，教師可以先講授知識點的語法，然后讓學生進行簡單的練習。當學生基本掌握了知識點后，可以將所學知識應用到自己的Web頁面中，從而進行了較為深入的實踐。例如，教師在講解HTML中的無序列表一節，教師可以給出無序列表的語法，無序列表和超鏈接的結合。進而可以講解使用無序列表制作網頁菜單。學生在學習網頁菜單之后，基本可以實現自己Web頁面中的簡單導航菜單。經過這一系列知識點的講解之后，學生的學習興趣就會逐漸增加，學習積極性也會相應提高，教學過程就會取得良好的效果。

在學期末，可以以組為單位，組織學生進行網頁的第一次評比。評比的目的是讓學生很好的總結所學知識，鞏固學生的學習興趣和學習積極性，為后續Java Web開發奠定學習基礎。圖2為相同組的學生制作的網頁作品。

圖2 學生網頁作品

4 總結

Web前端開發是一門實踐性較強的課程，課程的目的是讓學生掌握Web頁面的制作技術。使用項目驅動的教學方法有助于教學的開展和提高教學效果。在實際應用中，這種教學方法受到了學生的普遍好評。

[1] 雷蘊.Web前端開發課程教學研究與實踐[J].電腦知識與技術,2016(34).

[2] 蔚繼承,燕飛.面向能力培養的《Web技術及應用》課程教學改革[J].教育教學論壇,2016(49).

[3] 魏冬梅.Web前端開發課程教學探討與實踐[J].福建電腦,2013(6).