HTML、CSS 與JavaScript 程序設(shè)計(jì)課程建設(shè)的探索與實(shí)踐

朱士玲　葉青　盧鵬　吉立建

摘要：為了使HTML、CSS與JavaScript程序設(shè)計(jì)課程更加貼合當(dāng)前的教育需求和技術(shù)發(fā)展趨勢(shì)，文章從課程目標(biāo)、課程內(nèi)容、教學(xué)方法改革、課程評(píng)價(jià)機(jī)制幾個(gè)方面進(jìn)行課程建設(shè)的探索與實(shí)踐，為學(xué)生提供一個(gè)全面、實(shí)用、前沿的學(xué)習(xí)平臺(tái)，使學(xué)生不僅能夠掌握Web開發(fā)的技術(shù)知識(shí)，還能夠發(fā)展成為具備創(chuàng)新能力和終身學(xué)習(xí)能力的專業(yè)人士。

關(guān)鍵詞：前端開發(fā)；Web開發(fā)；課程建設(shè)；教學(xué)方法改革

中圖分類號(hào)：TP3 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2024）14-0169-04 開放科學(xué)（資源服務(wù)）標(biāo)識(shí)碼（OSID） ：

0 引言

HTML、CSS和JavaScript作為網(wǎng)頁設(shè)計(jì)的三大核心技術(shù)，對(duì)于培養(yǎng)具備實(shí)際應(yīng)用能力的計(jì)算機(jī)專業(yè)人才具有重要意義[1]。通常大數(shù)據(jù)技術(shù)專業(yè)的學(xué)生在大一上、下學(xué)期會(huì)先學(xué)習(xí)C語言和Java語言程序設(shè)計(jì)課程，有一定的編程基礎(chǔ)，但就如何把網(wǎng)站的界面更好地用前端技術(shù)呈現(xiàn)出來還未曾接觸，為此，HTML、CSS 與JavaScript程序設(shè)計(jì)往往會(huì)被開設(shè)為大二上學(xué)期的必修課程，培養(yǎng)學(xué)生將前后端知識(shí)綜合應(yīng)用于實(shí)際的Web開發(fā)中。

傳統(tǒng)的前端開發(fā)課程往往存在教學(xué)目標(biāo)不明確、教學(xué)內(nèi)容和教學(xué)案例陳舊落后、知識(shí)點(diǎn)覆蓋不全面、前后知識(shí)銜接不緊密、教學(xué)方法單一、課程資源匱乏、重理論輕實(shí)踐、重專業(yè)技能輕思政教育等問題[2]，導(dǎo)致學(xué)生在面對(duì)某一頁面設(shè)計(jì)需求時(shí)，仍然不能快速準(zhǔn)確地利用所學(xué)知識(shí)實(shí)現(xiàn)頁面布局、頁面元素的樣式設(shè)置和交互功能，也缺乏相應(yīng)的問題解決能力、創(chuàng)新精神以及行業(yè)素養(yǎng)。因此，探索新的課程建設(shè)道路顯得尤為重要，不僅對(duì)學(xué)生的個(gè)人發(fā)展，也對(duì)高校的教育質(zhì)量、企業(yè)的人才儲(chǔ)備以及整個(gè)社會(huì)的技術(shù)進(jìn)步和經(jīng)濟(jì)發(fā)展具有深遠(yuǎn)影響[3]。

1 課程建設(shè)的目標(biāo)

思想道德目標(biāo)：學(xué)生應(yīng)了解與Web開發(fā)相關(guān)的法律法規(guī)，確保未來在工作中遵守相關(guān)法律法規(guī)；遵守學(xué)術(shù)誠信，不抄襲他人作品，誠實(shí)地完成所有課程作業(yè)和項(xiàng)目；對(duì)自己的學(xué)習(xí)負(fù)責(zé)，對(duì)團(tuán)隊(duì)合作的項(xiàng)目負(fù)責(zé)，培養(yǎng)良好的工作態(tài)度和社會(huì)責(zé)任感。

知識(shí)目標(biāo)：掌握HTML、CSS 和JavaScript 的基礎(chǔ)知識(shí)，包括熟練掌握 HTML 的語義化、CSS 的樣式表設(shè)計(jì)以及 JavaScript的編程思想；熟練使用前端開發(fā)工具；理解Web標(biāo)準(zhǔn)和規(guī)范；了解最新的Web技術(shù)和趨勢(shì)；理解并掌握前端開發(fā)的全過程。

能力目標(biāo)：培養(yǎng)實(shí)踐能力，通過實(shí)際的網(wǎng)頁設(shè)計(jì)和開發(fā)，提高學(xué)生的編程能力和解決實(shí)際問題的能力；培養(yǎng)創(chuàng)新思維，鼓勵(lì)學(xué)生設(shè)計(jì)獨(dú)特的Web應(yīng)用和解決方案；培養(yǎng)團(tuán)隊(duì)協(xié)作能力，通過團(tuán)隊(duì)項(xiàng)目和協(xié)作任務(wù)，提高學(xué)生的團(tuán)隊(duì)合作和溝通能力；培養(yǎng)自主學(xué)習(xí)能力，使學(xué)生能夠適應(yīng)技術(shù)的快速變化。

素質(zhì)目標(biāo)：培養(yǎng)學(xué)生的網(wǎng)頁設(shè)計(jì)創(chuàng)意思維、藝術(shù)設(shè)計(jì)素質(zhì)；培養(yǎng)學(xué)生的批判性思維能力，使他們能夠分析和評(píng)估不同的技術(shù)方案和設(shè)計(jì)選擇；培養(yǎng)終身學(xué)習(xí)的習(xí)慣，不斷更新知識(shí)和技能，實(shí)現(xiàn)個(gè)人持續(xù)成長。

2 課程內(nèi)容建設(shè)

本課程注重理論與實(shí)踐相結(jié)合，課程的總學(xué)時(shí)為64學(xué)時(shí)，其中理論32學(xué)時(shí)，實(shí)踐32學(xué)時(shí)。為了保證教學(xué)內(nèi)容的連貫性，通常采用4節(jié)連上的課堂教學(xué)模式，其中前2節(jié)以理論講解為主，后2節(jié)以學(xué)生做實(shí)驗(yàn)為主，老師答疑為輔的方式展開教學(xué)。

2.1 理論教學(xué)內(nèi)容

表1為理論教學(xué)內(nèi)容計(jì)劃表，該部分共分為11個(gè)知識(shí)板塊，32學(xué)時(shí)，根據(jù)教學(xué)內(nèi)容合理安排在1～16周內(nèi)學(xué)習(xí)，在每一個(gè)教學(xué)內(nèi)容中都融入了與教學(xué)主題相關(guān)的課程思政要素。教學(xué)內(nèi)容的安排可保證HTML、CSS和JavaScript知識(shí)點(diǎn)的全覆蓋，從表1中可看出各知識(shí)點(diǎn)依次遞進(jìn)，環(huán)環(huán)相扣，不僅能夠幫助學(xué)生掌握專業(yè)知識(shí)，還能培養(yǎng)他們的社會(huì)責(zé)任感和職業(yè)道德。

2.2 實(shí)踐教學(xué)內(nèi)容

實(shí)踐教學(xué)與理論教學(xué)相輔相成，在每一個(gè)知識(shí)板塊的理論內(nèi)容學(xué)習(xí)完成后，就進(jìn)入與之相對(duì)應(yīng)的實(shí)踐項(xiàng)目，表2為實(shí)踐教學(xué)內(nèi)容計(jì)劃表，每一次的實(shí)踐項(xiàng)目豐富且緊貼理論教學(xué)內(nèi)容，同時(shí)融入了多個(gè)典型的網(wǎng)頁設(shè)計(jì)案例，考慮到教材內(nèi)容的局限性，實(shí)踐內(nèi)容還會(huì)拓展諸如數(shù)據(jù)渲染、桌面端組件庫Element、vue框架等流行技術(shù)，由淺入深，使學(xué)生充分將理論知識(shí)應(yīng)用到實(shí)踐中，直觀地感受到前端開發(fā)帶來的樂趣和挑戰(zhàn)，提高學(xué)生的編程技能和問題解決能力。

3 教學(xué)方法改革

本課程采用線上線下混合式[4]、“教、學(xué)、做”一體化[5]教學(xué)模式，通過多種教學(xué)手段和形式，全方位地培養(yǎng)學(xué)生的前端開發(fā)能力，圖1是本課程的教學(xué)方法設(shè)計(jì)，主要分為課前、課中和課后三個(gè)階段。

1） 課前階段：以線上教學(xué)為主。在課程準(zhǔn)備階段由教師在超星學(xué)習(xí)通建設(shè)好本門課程的在線學(xué)習(xí)平臺(tái)，將教學(xué)大綱、教案、課件、代碼、思維導(dǎo)圖、教學(xué)視頻、拓展資料、習(xí)題庫等教學(xué)資源上傳至學(xué)習(xí)平臺(tái)。在每次上課前，教師將預(yù)習(xí)任務(wù)通過學(xué)習(xí)通下發(fā)給學(xué)生，要求學(xué)生在規(guī)定時(shí)間內(nèi)完成學(xué)習(xí)資料、視頻觀看和學(xué)習(xí)效果測(cè)試，根據(jù)學(xué)生的完成情況設(shè)置激勵(lì)積分，作為平時(shí)作業(yè)的考評(píng)成績(jī)。在該階段通過學(xué)生的答題情況和互動(dòng)留言梳理普遍反映的重難點(diǎn)，為課中階段的教學(xué)設(shè)計(jì)做準(zhǔn)備。

2） 課中階段：以線下教學(xué)為主，線上互動(dòng)為輔。教師介紹本次課程要完成的實(shí)驗(yàn)任務(wù)，以引出學(xué)習(xí)內(nèi)容、目標(biāo)和重難點(diǎn)，使學(xué)生帶著問題參與整個(gè)課程的學(xué)習(xí)中來。在理論教學(xué)環(huán)節(jié)，緊密結(jié)合實(shí)際案例，使學(xué)生在技術(shù)的運(yùn)用中掌握知識(shí)。在解釋抽象知識(shí)時(shí)，如浮動(dòng)的概念，可配以3D動(dòng)畫演示的方式，使學(xué)生直觀地感受元素設(shè)置浮動(dòng)后產(chǎn)生的效果和影響。在講解完某個(gè)知識(shí)點(diǎn)后，通過在線學(xué)習(xí)平臺(tái)設(shè)置隨堂問答和隨堂練習(xí)環(huán)節(jié)，以鞏固所學(xué)知識(shí)，提高學(xué)生的學(xué)習(xí)專注度。在實(shí)驗(yàn)環(huán)節(jié)，采用單人、小組合作的方式展開實(shí)驗(yàn)，先由教師挑選出1～2道題目分析，再以邊敲代碼邊講解的方式進(jìn)行示范教學(xué)。針對(duì)較簡(jiǎn)單的題目，由學(xué)生單獨(dú)完成，以培養(yǎng)獨(dú)立解決問題的能力。針對(duì)較復(fù)雜的題目分小組討論，學(xué)生分享各自的想法，然后根據(jù)想法實(shí)現(xiàn)頁面效果，最后教師對(duì)學(xué)生的作品做出點(diǎn)評(píng)。在實(shí)驗(yàn)完成后，要形成實(shí)驗(yàn)報(bào)告，詳細(xì)記錄實(shí)驗(yàn)的主要設(shè)計(jì)思路及源程序、主要問題和解決方案、測(cè)試數(shù)據(jù)和結(jié)果、心得體會(huì)與自我評(píng)價(jià)，以鍛煉學(xué)生的歸納總結(jié)能力。

3） 課后階段：以線上互動(dòng)為主。教師需要復(fù)盤課中階段自身的教學(xué)情況和學(xué)生的學(xué)習(xí)情況，并形成教學(xué)總結(jié)。為滿足學(xué)生的學(xué)習(xí)需求，應(yīng)及時(shí)錄制和發(fā)布理論和實(shí)驗(yàn)教學(xué)視頻，作為傳統(tǒng)課堂教學(xué)的補(bǔ)充，并通過在線上學(xué)習(xí)平臺(tái)發(fā)布進(jìn)階版章節(jié)測(cè)試題和網(wǎng)頁設(shè)計(jì)題，要求學(xué)生在規(guī)定時(shí)間內(nèi)完成作答和作品設(shè)計(jì)，獲取相應(yīng)的任務(wù)激勵(lì)積分。學(xué)生可通過線上討論等方式與教師交流學(xué)習(xí)中遇到的問題，教師以線上留言或錄制解答視頻的方式，對(duì)常見問題進(jìn)行詳細(xì)講解。該階段增加了師生之間的互動(dòng)頻率，有助于提高學(xué)生的學(xué)習(xí)積極性，也為教師提供了及時(shí)了解學(xué)生學(xué)習(xí)狀況的途徑，有助于調(diào)整教學(xué)策略，提高教學(xué)質(zhì)量。

4 課程評(píng)價(jià)機(jī)制

為了全面評(píng)價(jià)學(xué)生的學(xué)習(xí)效果，本課程建立多元化的課程評(píng)價(jià)體系。表3為課程成績(jī)組成表，總體分為過程性成績(jī)和終結(jié)性成績(jī)。

前端開發(fā)作為一門實(shí)踐性很強(qiáng)的課程，其終結(jié)性教學(xué)評(píng)估方式從傳統(tǒng)的考試卷轉(zhuǎn)向課程設(shè)計(jì)，可增強(qiáng)學(xué)生的實(shí)踐能力、知識(shí)的綜合運(yùn)用能力、團(tuán)隊(duì)協(xié)作能力，培養(yǎng)創(chuàng)新思維?？紤]到學(xué)生的整體學(xué)習(xí)情況，設(shè)置三種題型供學(xué)生選擇，第一種選題是給定網(wǎng)頁設(shè)計(jì)效果圖、素材和具體功能需求，如某高校網(wǎng)站、某企業(yè)網(wǎng)站、某社會(huì)團(tuán)體網(wǎng)站等。第二種是半開放選題，只指定設(shè)計(jì)題目和大體的設(shè)計(jì)內(nèi)容，但不提供設(shè)計(jì)素材，如個(gè)人簡(jiǎn)歷網(wǎng)頁、個(gè)人博客網(wǎng)頁、技術(shù)論壇網(wǎng)頁、電商網(wǎng)頁、新聞門戶網(wǎng)頁等。第三種是全開放選題，由學(xué)生自擬題目，要求主題健康向上，需求分析合理，能夠綜合運(yùn)用本門課程的相關(guān)知識(shí)。課程設(shè)計(jì)題目在14周下發(fā)，學(xué)生自愿選題，自由組隊(duì)，每組成員1～4 人，在17周根據(jù)作品完成情況、答辯情況、分工明細(xì)和課程設(shè)計(jì)報(bào)告撰寫情況進(jìn)行評(píng)分。

5 實(shí)施效果

5.1 學(xué)生表現(xiàn)

本文提出的課程建設(shè)思路已在2023-2024學(xué)年第1學(xué)期應(yīng)用于2022級(jí)大數(shù)據(jù)技術(shù)專業(yè)3個(gè)班級(jí)的教學(xué)工作中，圖2～圖4分別是大數(shù)據(jù)2201班（43人）、2202班（43人）和 2203班（48人）的成績(jī)分布圖。課程成績(jī)充分結(jié)合學(xué)生的平時(shí)成績(jī)、實(shí)驗(yàn)成績(jī)和課程設(shè)計(jì)成績(jī)。其中在課程設(shè)計(jì)環(huán)節(jié)，有26% 的小組選擇了企業(yè)網(wǎng)站設(shè)計(jì)，21% 的小組選擇了高校網(wǎng)站設(shè)計(jì)，17% 的小組選擇了社會(huì)團(tuán)體網(wǎng)站設(shè)計(jì)，19% 的小組選擇了半開放題目，剩下的小組選擇了自擬題目。從圖2～4 中可以看出，學(xué)生的成績(jī)位于80～89分之間的較多，說明大部分學(xué)生能夠較好地完成隨堂任務(wù)、理論作業(yè)和實(shí)驗(yàn)任務(wù)，掌握了課程所要求的基本知識(shí)和技能。此外，優(yōu)秀級(jí)別的同學(xué)在課程設(shè)計(jì)中能夠設(shè)計(jì)出2個(gè)以上美觀、具有交互效果及創(chuàng)新性的頁面，答辯流利，報(bào)告質(zhì)量高；良好級(jí)別的同學(xué)能夠設(shè)計(jì)出1～2 個(gè)頁面，具有一定的特效，報(bào)告質(zhì)量較高；中等級(jí)別的同學(xué)能夠設(shè)計(jì)出1個(gè)頁面，但報(bào)告質(zhì)量稍差；及格等級(jí)的學(xué)生存在答辯不流利，報(bào)告質(zhì)量差等問題；不及格的同學(xué)存在在組內(nèi)無工作量等問題。

5.2 教學(xué)質(zhì)量反饋

表4是學(xué)生根據(jù)教師的授課情況所反饋的教學(xué)質(zhì)量滿意度調(diào)查表，滿意度采用百分制，從表中可以看出，學(xué)生對(duì)本課程建設(shè)思路下的教學(xué)方法較為滿意，但仍有改進(jìn)空間，比如在課堂上應(yīng)多采用啟發(fā)式、參與式、討論式等教學(xué)方法提高學(xué)生的課堂參與度等。

6 結(jié)束語

本文通過對(duì)當(dāng)前HTML、CSS與JavaScript程序設(shè)計(jì)課程的教育現(xiàn)狀的分析，結(jié)合教學(xué)理論與實(shí)踐，對(duì)該課程的建設(shè)進(jìn)行了全面的探索與實(shí)踐。我們重視課程內(nèi)容的實(shí)用性與前瞻性，注重教學(xué)方法的互動(dòng)性與創(chuàng)新性，強(qiáng)調(diào)實(shí)踐環(huán)節(jié)的系統(tǒng)性與實(shí)效性。通過這些努力，課程不僅提高了學(xué)生的學(xué)習(xí)興趣和參與度，也顯著提升了他們的技術(shù)能力和解決實(shí)際問題的能力。未來，我們將繼續(xù)跟蹤行業(yè)發(fā)展趨勢(shì)，不斷更新課程內(nèi)容，優(yōu)化教學(xué)方法，并加強(qiáng)與企業(yè)的合作，以確保課程能夠更好地滿足學(xué)生和市場(chǎng)的需求。

參考文獻(xiàn)：

[1] 龍軍，王家寧.Web前端開發(fā)課程建設(shè)的探索與實(shí)踐[J].電腦知識(shí)與技術(shù)，2021，17（19）：196-198.

[2] 陳少燕.Web前端開發(fā)課程教學(xué)模式改革[J].中國新通信，2023，25（4）：51-53.

[3] 王紅軍，胡宇航，汪洪祥，等.Web前端開發(fā)課程體系建設(shè)與實(shí)踐探索[J].文化創(chuàng)新比較研究，2021，5（2）：64-66.

[4] 高廣銀，儲(chǔ)久良，成艷，等.線上線下混合式一流課程建設(shè)研究與實(shí)踐：以“Web前端開發(fā)技術(shù)” 課程為例[J].計(jì)算機(jī)時(shí)代，2022（4）：77-79.

[5] 李娟，李宏博，蘇丹，等.Web前端開發(fā)課程項(xiàng)目式教學(xué)改革與實(shí)踐[J].高師理科學(xué)刊，2022，42（10）：78-81.

【通聯(lián)編輯：朱寶貴】

基金項(xiàng)目：廣東省高等教育教學(xué)改革項(xiàng)目《基于OBE 理念的大數(shù)據(jù)專業(yè)項(xiàng)目導(dǎo)向教學(xué)模式研究與實(shí)踐》（編號(hào)：2023JXGG05） ；2022 年質(zhì)量工程建設(shè)，面向?qū)ο蟪绦蛟O(shè)計(jì)課程教研室（2022ZLGC19）