五星教學(xué)法在網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)課程中的應(yīng)用探討

譚生龍（湖北經(jīng)濟(jì)學(xué)院法商學(xué)院，湖北 武漢 430205，湖北經(jīng)濟(jì)學(xué)院，湖北 武漢 430205）

李周娜，胡清華（湖北經(jīng)濟(jì)學(xué)院，湖北 武漢 430205）

一、引言

《網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)》課程是計算機(jī)專業(yè)、電子商務(wù)專業(yè)、大數(shù)據(jù)專業(yè)、人工智能專業(yè)的一門專業(yè)選修課，也是很多高校面向本科生開設(shè)的一門應(yīng)用性公共選修課。該課程一般為2 個學(xué)分，課時安排包括理論教學(xué)和實驗教學(xué)，其計劃總學(xué)時一般為34 課時，該課程講授的知識點多且面向不同專業(yè)背景的學(xué)生開設(shè)，學(xué)生的編程基礎(chǔ)參差不齊，而且該課程培養(yǎng)學(xué)生設(shè)計網(wǎng)頁、編寫代碼、調(diào)試程序并維護(hù)網(wǎng)站的能力，實踐性較強(qiáng)，要求學(xué)生在學(xué)好理論知識的同時還需使用網(wǎng)頁編程軟件進(jìn)行編程開發(fā)，將設(shè)計好的多張網(wǎng)頁設(shè)計圖用源代碼編程實現(xiàn)，并從整體上把握多張網(wǎng)頁外觀布局的一致性，將多張網(wǎng)頁共同組成一個風(fēng)格一致的網(wǎng)站。因此，學(xué)好本課程對學(xué)生具有一定的挑戰(zhàn)性，本文探討了通過使用“五星教學(xué)法”改革教學(xué)模式，變更教學(xué)方法，幫助學(xué)生高效學(xué)好本課程的一些教學(xué)方法。

二、五星教學(xué)法概述

五星教學(xué)法，又稱“首要教學(xué)原理”[1]，是美國當(dāng)代教育家梅里爾（David Merrill）提出的以“聚焦解決問題”為核心的教學(xué)方法，該方法強(qiáng)調(diào)師生共同參與教學(xué)過程[2]、注重教學(xué)效果，適合培養(yǎng)學(xué)生的編程能力。五星教學(xué)法包括五個步驟[3]：第一、聚焦問題，即課堂講授的內(nèi)容應(yīng)該以解決現(xiàn)實生活中的實際問題作為出發(fā)點；第二、激活舊知，即講授的新知識應(yīng)該與學(xué)生已掌握的舊知識（學(xué)生已熟悉的知識）相聯(lián)系，以學(xué)生先前已掌握的知識作為橋梁引入新知識，逐步過渡到將講授的新知識；第三、示證新知，即展示、論證新知識，教師從多角度講授新知識并應(yīng)用多個實例展示新知識的應(yīng)用場景；第四、應(yīng)用新知，即通過給出多個緊扣新知識的習(xí)題、案例和項目讓學(xué)生進(jìn)行練習(xí)，強(qiáng)化學(xué)生對所學(xué)知識的掌握和理解；第五、融會貫通，即新知識的遷移學(xué)習(xí)，此階段重點培養(yǎng)學(xué)生靈活應(yīng)用所學(xué)新知識的能力，并引導(dǎo)學(xué)生應(yīng)用新知識進(jìn)行創(chuàng)新和創(chuàng)造。

三、網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)課程的教學(xué)現(xiàn)狀

目前，網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)課程主要的教學(xué)模式為“教師講授、學(xué)生模仿并編程實現(xiàn)”，該模式不利于培養(yǎng)學(xué)生靈活應(yīng)用所學(xué)新知識的能力，也不利于培養(yǎng)學(xué)生開發(fā)項目的編程實踐能力。首先，教師在課堂上講授網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)的理論知識，然后教師再安排多個獨立的驗證性實驗對所學(xué)知識進(jìn)行鞏固練習(xí)，實驗課的內(nèi)容主要通過讓學(xué)生編寫代碼重現(xiàn)課本上的例子程序或者重現(xiàn)教師所講授相關(guān)章節(jié)知識點的驗證性實驗代碼，學(xué)生偏重于學(xué)習(xí)網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)課程的理論知識，比如HTML 語言中標(biāo)簽的語法、CSS 層疊樣式的語法、JavaScript 語言中的語法，缺乏對所學(xué)知識的深層次理解，較少關(guān)注學(xué)生對所學(xué)知識的靈活應(yīng)用，也沒有培養(yǎng)學(xué)生開發(fā)項目的實戰(zhàn)技能。

四、五星教學(xué)法在網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)課程中的應(yīng)用

本文將五星教學(xué)法的五個步驟貫徹到教學(xué)過程中，實現(xiàn)對教學(xué)過程的改革。具體而言，“聚焦問題”是在每一次課前，教師向?qū)W生介紹本次課將要講授的知識點，該知識與之前所學(xué)知識點間的關(guān)聯(lián)關(guān)系，為什么要學(xué)這些知識點，這些知識點的應(yīng)用場景在哪里，這些知識點在《網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)》課程的整個知識體系中所處的位置和作用。比如在講授本課程的頁面布局技術(shù)CSS+DIV 頁面布局時，首先，介紹網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)中常用的頁面布局技術(shù)，包括表格布局、CSS+DIV 布局、Flex 布局和Grid 布局等，并介紹它們的應(yīng)用場景和優(yōu)缺點；然后，引入本次課將講授的CSS+DIV 頁面布局概述，并列舉國內(nèi)一些綜合門戶網(wǎng)站的頁面布局實例進(jìn)行分析和講解；比如，展示門戶網(wǎng)站之一的網(wǎng)易首頁的源代碼并分析該頁面的布局模塊及怎樣實現(xiàn)該頁面的布局，講授使用層疊樣式CSS 和DIV 標(biāo)簽可方便實現(xiàn)網(wǎng)易首頁的頁面分塊布局，如果不使用該技術(shù)布局而使用HTML 的表格布局則會使頁面布局復(fù)雜且網(wǎng)頁在瀏覽器中的顯示性能會下降，并進(jìn)一步講解使用CSS+DIV 進(jìn)行頁面布局的優(yōu)勢。

“激活舊知”就是將準(zhǔn)備講授的新知識與學(xué)生已掌握的知識進(jìn)行關(guān)聯(lián)，讓“舊知”成為掌握“新知”的跳板，通過回憶、關(guān)聯(lián)、類比和應(yīng)用“舊知”，將其作為接受“新知”的基礎(chǔ)，從“舊知”逐步過渡到對“新知”的理解和掌握。比如，在課程《網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)》的課堂教學(xué)過程中，在講授層疊樣式CSS 時，把通過設(shè)置HTML 標(biāo)簽的屬性來改變文字格式和使用層疊樣式CSS 設(shè)置文字格式進(jìn)行比較，讓學(xué)生從通過設(shè)置標(biāo)簽屬性設(shè)置文字格式轉(zhuǎn)換到通過設(shè)置標(biāo)簽的CSS 層疊樣式來修改其格式/樣式。

“示證新知”就是在教學(xué)過程中講清楚“新知識”的概念、知識點之間的邏輯關(guān)系，并使用關(guān)鍵案例來示范概念和知識點之間的關(guān)聯(lián)關(guān)系；教學(xué)過程中要使用圖示、知識導(dǎo)圖等手段清晰呈現(xiàn)知識點間的結(jié)構(gòu)關(guān)系或者知識點的應(yīng)用場景，讓學(xué)生在觀察和模仿中掌握“新知”。根據(jù)該原則，結(jié)合具體案例講解知識點的多個應(yīng)用場景。比如在講授層疊樣式的“盒子模型”這一節(jié)時，使用一個在頁面中顯示多段文本，將文本格式放置為頁面居中對齊，設(shè)置多段文本的上下左右內(nèi)外邊距、邊框等屬性的例子，分別講解層疊樣式CSS 的“盒子模型”中相關(guān)的屬性設(shè)置，即塊元素標(biāo)簽的寬度width 屬性、高度height 屬性、外邊距margin 屬性、邊框border 屬性、內(nèi)邊距padding等，并運用這些屬性來設(shè)置一個排版整齊美觀的多段文本且將文本顯示在頁面中央的案例，詳細(xì)講解各CSS 屬性的語法格式和計算盒子的總寬度和總高度的方法。

“應(yīng)用新知”就是在掌握“新知識”之后的練習(xí)過程，由此鞏固學(xué)生掌握“新知”的程度，通過練習(xí)“新知”、鞏固概念并獲得實踐編程技能；逐步過渡到應(yīng)用“新知”解決具體問題。應(yīng)用該原則，并結(jié)合上一原則，通過多個實驗案例講解同一知識點的不同應(yīng)用場景。例如，從不同角度應(yīng)用“盒子模型”的屬性，比如對塊元素外邊距margin 屬性的講解，通過案例展示多段文本可以使用margin 屬性實現(xiàn)上下左右外邊距的設(shè)置、使用margin 屬性實現(xiàn)文本的頁面居中、使用margin 屬性實現(xiàn)塊元素的上下左右平移和當(dāng)設(shè)置多個塊元素的margin 屬性后，相鄰元素間上下margin 屬性的自動融合等。

“融會貫通”是指學(xué)生對所學(xué)“新知識”的融會貫通，對“新知”進(jìn)行總結(jié)、簡化和概念化，并讓學(xué)生在課堂上參與教師主導(dǎo)的翻轉(zhuǎn)教學(xué)，將所學(xué)“新知”應(yīng)用到《網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)》課程的具體案例中去。在此環(huán)節(jié)，一般通過實際項目案例或者選用來源于學(xué)科競賽的綜合案例來訓(xùn)練學(xué)生掌握新知識、應(yīng)用新知識的能力，讓學(xué)生在獨立設(shè)計網(wǎng)站的頁面時能靈活應(yīng)用所學(xué)知識點來實現(xiàn)自己的設(shè)計思想。結(jié)合前一原則的案例，通過將“盒子模型”的設(shè)計理念整合到一個章節(jié)的綜合大作業(yè)中，實現(xiàn)靈活應(yīng)用該頁面布局模式，實現(xiàn)在頁面中不同區(qū)域滿足特定尺寸的頁面布局格式設(shè)置，比如在案例“CSS+DIV 布局”中，使用“盒子模型”實現(xiàn)logo 分區(qū)、header 分區(qū)、menu分區(qū)、多個混排content 分區(qū)和footer 分區(qū)以及分區(qū)內(nèi)嵌套的子分區(qū)的復(fù)雜布局樣式；在案例“CSS 的Flex布局”中，設(shè)置彈性布局各個小塊的邊框、內(nèi)邊距、外邊距等屬性來實現(xiàn)伸縮靈活的自適應(yīng)頁面布局樣式；在案例“CSS 的Grid 布局”中，通過比較網(wǎng)格布局中各個小塊的長寬設(shè)置、間距設(shè)置、對齊設(shè)置及配合使用“盒子模型”中的屬性實現(xiàn)Grid 頁面格式。

為了更好地將五星教學(xué)法應(yīng)用到《網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)》課程的教學(xué)改革過程中，引入信息化輔助教學(xué)手段可顯著提高授課效率。應(yīng)用學(xué)習(xí)通和微助教，將多種成績評價方式[4]引入課堂，比如在微助教平臺下每次課前可快速實施學(xué)生簽到，在微助教中以選擇題形式實現(xiàn)簡短的課前測試，了解學(xué)生對上一次課所講授內(nèi)容的掌握程度，借助這些平臺，教師可在講授完幾個知識點后在課堂上引入課堂小測驗來了解學(xué)生是否已經(jīng)掌握所授知識點，在微助教中實現(xiàn)分小組陳述課程項目并進(jìn)行組間相互評分等；基于學(xué)習(xí)通了解學(xué)生在每次課前自學(xué)微課視頻的情況，并將課外自學(xué)微課視頻的時長作為平時成績之一納入課程期末成績評定，在學(xué)習(xí)通平臺上布置課后作業(yè)、評閱作業(yè)并評分，基于學(xué)習(xí)通的題庫建設(shè)和在課堂、期中和期末從題庫中抽題組卷實現(xiàn)在線考試，基于微助教的分組翻轉(zhuǎn)課堂，每組由3～5 位學(xué)生組成，讓該組完成對本課程某個重要知識模塊的小組陳述并由教師和其他小組共同對該組進(jìn)行評分，通過完成課程大作業(yè)及課程實驗報告來檢查學(xué)生對本課程知識靈活應(yīng)用的情況，基于微助教的課程討論、課程互動、天天快答等實現(xiàn)學(xué)生積極參與教學(xué)，從而實現(xiàn)本課程的全過程成績評定。

任務(wù)驅(qū)動[5]主要是以多個與知識點緊密相關(guān)的項目任務(wù)為載體，需綜合運用所學(xué)的知識點完成網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)的項目；通過完成項目讓學(xué)生在開發(fā)項目的過程中逐步掌握所學(xué)知識并提高編程技能。構(gòu)建有難度梯度的項目庫，按照不同的難度設(shè)置每次作業(yè)，讓學(xué)生完成基礎(chǔ)項目后、有機(jī)會完成挑戰(zhàn)性項目?？梢詫㈨椖糠殖蓪嶒炚n中的項目和課后項目兩部分，在實驗課上的項目可以單次實驗課作為評分單元，設(shè)置成任務(wù)驅(qū)動競賽模式，讓學(xué)生必須在一次實驗課內(nèi)完成該項目并限時提交，并根據(jù)實驗項目的完成情況在全班進(jìn)行評分并排名，同時計入期末總評成績，讓學(xué)生在競爭中來提升和超越自己。

以小組為單位完成一個較綜合的課程大作業(yè)[6]，小組人數(shù)一般控制在3～4 人為宜，課程大作業(yè)的計分為按時提交、項目完成情況和項目展示并陳述三部分構(gòu)成，通過小組間的匿名相互評分和教師評分相結(jié)合的成績評定方式來給定課程大作業(yè)的成績。

以賽促教也是一項讓所學(xué)知識“融合貫通”的有效途徑。《網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)》課程通過引導(dǎo)學(xué)生參加“藍(lán)橋杯Web 應(yīng)用開發(fā)”競賽，實現(xiàn)課堂內(nèi)基礎(chǔ)知識和課堂外的擴(kuò)展知識結(jié)合起來。學(xué)生為了能在“藍(lán)橋杯Web 應(yīng)用開發(fā)”競賽中獲獎，必須按照競賽大綱進(jìn)行全面學(xué)習(xí)和訓(xùn)練，而競賽大綱所要求考查的知識點遠(yuǎn)多于課程大綱所要求的基礎(chǔ)知識點，且該競賽是以完成項目作為考試方式，考試內(nèi)容面向綜合應(yīng)用，因此引導(dǎo)學(xué)生參賽可以培養(yǎng)學(xué)生的綜合應(yīng)用能力，因此將學(xué)科競賽引入課堂，可以有效促進(jìn)學(xué)生學(xué)習(xí)本課程高階知識的積極性，讓學(xué)生在自學(xué)中實現(xiàn)對本課程知識的拓展，也有助于提升學(xué)生的項目開發(fā)能力，是實現(xiàn)所學(xué)新知“融會貫通”的另一有效途徑；另外，將競賽的歷次考試題目經(jīng)過分類、精選、修改后融入各次課程討論和各次作業(yè)的挑戰(zhàn)題目列表中也是一種拓展學(xué)生知識范圍的方法。

大學(xué)生就業(yè)是學(xué)生較為關(guān)心的事宜，根據(jù)就業(yè)崗位的需求更新教學(xué)內(nèi)容有助于提升學(xué)生的就業(yè)競爭力。《網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)》課程所面向的就業(yè)崗位是“前端開發(fā)”，因此，本課程在制定教學(xué)大綱時，參考一些就業(yè)招聘網(wǎng)站如BOSS 直聘、智聯(lián)招聘等網(wǎng)站上的“Web 前端開發(fā)”崗位的招聘條件，根據(jù)這些條件引入一些崗位所需的前端框架作為本課程的拓展學(xué)習(xí)內(nèi)容，引導(dǎo)學(xué)生進(jìn)一步學(xué)好本課程的主流開發(fā)技術(shù)，并在課程大作業(yè)中也引入緊扣主流新技術(shù)的挑戰(zhàn)題供學(xué)生們選做，引導(dǎo)學(xué)生自主學(xué)習(xí)本門課程的拓展學(xué)習(xí)模塊，為他們畢業(yè)后的就業(yè)儲備競爭技能，引導(dǎo)感興趣的學(xué)生以“Web 前端開發(fā)”作為本科畢業(yè)論文的選題方向，進(jìn)一步幫助學(xué)生掌握“Web 前端開發(fā)”的新技術(shù)，有效提升學(xué)生的就業(yè)競爭力。

五、小結(jié)

本文探討了將五星教學(xué)法的理念應(yīng)用于《網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)》課程的教學(xué)改革過程中，將五星教學(xué)法的五個步驟貫穿到課堂教學(xué)、實驗教學(xué)、成績評定等各個教學(xué)環(huán)節(jié)中，從而實現(xiàn)教學(xué)質(zhì)量的提升。同時還借助學(xué)習(xí)通和微助教等信息化手段輔助教學(xué)改革的實施，顯著提高本課程的教學(xué)效果，并能促進(jìn)學(xué)生積極參與教學(xué)過程，提升學(xué)生的學(xué)習(xí)主動性和學(xué)習(xí)效率，有助于提升學(xué)生的編程技能。因此，在《網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)》課程的教學(xué)過程中采用五星教學(xué)法是一種提高教學(xué)質(zhì)量的可選途徑。