張微微 河北工程技術(shù)學(xué)院

1 概述

Web前端開發(fā)是計(jì)算機(jī)領(lǐng)域比較熱門的工作崗位。因此，許多院校計(jì)算機(jī)專業(yè)開設(shè)了Web前端開發(fā)技術(shù)等相關(guān)專業(yè)。本課程主要的教學(xué)內(nèi)容有HTML、CSS、JavaScript和JS前端框架，以及Dreamweaver開發(fā)工具的使用，主要知識(shí)點(diǎn)包含HTML標(biāo)記、CSS樣式、CSS+DIV布局、JavaScript基礎(chǔ)語法、JavaScript對(duì)象、DOM和BOM、jQuery等。以往，本課程的教學(xué)過程主要是圍繞Web前端開發(fā)的知識(shí)點(diǎn)，在講解知識(shí)點(diǎn)后，讓學(xué)生編寫練習(xí)題目達(dá)到消化和鞏固知識(shí)點(diǎn)的目的。本課程的目標(biāo)是培養(yǎng)學(xué)生設(shè)計(jì)和制作Web頁面的綜合能力，這種圍繞知識(shí)點(diǎn)的教學(xué)方式使得學(xué)生不能將知識(shí)進(jìn)行綜合，學(xué)生不能很好的將知識(shí)點(diǎn)應(yīng)用到實(shí)際項(xiàng)目中。為了培養(yǎng)學(xué)生的學(xué)習(xí)興趣和綜合能力，可以采用以項(xiàng)目為驅(qū)動(dòng)的的項(xiàng)目化教學(xué)方法。

2 教學(xué)內(nèi)容

課程內(nèi)容主要有HTML、CSS、JavaScript和JS前端框架。根據(jù)學(xué)期時(shí)?？梢詫?duì)教學(xué)內(nèi)容進(jìn)行課時(shí)的調(diào)整。表1為課程主要內(nèi)容及學(xué)時(shí)分配：

3 項(xiàng)目驅(qū)動(dòng)

在課程中，實(shí)施項(xiàng)目驅(qū)動(dòng)的教學(xué)方法是貫穿在整個(gè)學(xué)期中。在學(xué)期初，可以將班級(jí)中的學(xué)生分為十個(gè)組，每個(gè)組的學(xué)生進(jìn)行相同版式的網(wǎng)頁設(shè)計(jì)，從而形成一種比賽競(jìng)爭(zhēng)的氛圍。圖1為某組的網(wǎng)頁示例。

圖1 網(wǎng)頁示例

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

在學(xué)期末，可以以組為單位，組織學(xué)生進(jìn)行網(wǎng)頁的第一次評(píng)比。評(píng)比的目的是讓學(xué)生很好的總結(jié)所學(xué)知識(shí)，鞏固學(xué)生的學(xué)習(xí)興趣和學(xué)習(xí)積極性，為后續(xù)Java Web開發(fā)奠定學(xué)習(xí)基礎(chǔ)。圖2為相同組的學(xué)生制作的網(wǎng)頁作品。

圖2 學(xué)生網(wǎng)頁作品

4 總結(jié)

Web前端開發(fā)是一門實(shí)踐性較強(qiáng)的課程，課程的目的是讓學(xué)生掌握Web頁面的制作技術(shù)。使用項(xiàng)目驅(qū)動(dòng)的教學(xué)方法有助于教學(xué)的開展和提高教學(xué)效果。在實(shí)際應(yīng)用中，這種教學(xué)方法受到了學(xué)生的普遍好評(píng)。

[1] 雷蘊(yùn).Web前端開發(fā)課程教學(xué)研究與實(shí)踐[J].電腦知識(shí)與技術(shù),2016(34).

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

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