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

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

一、引言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

大學(xué)生就業(yè)是學(xué)生較為關(guān)心的事宜，根據(jù)就業(yè)崗位的需求更新教學(xué)內(nèi)容有助于提升學(xué)生的就業(yè)競(jìng)爭(zhēng)力?！毒W(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)》課程所面向的就業(yè)崗位是“前端開發(fā)”，因此，本課程在制定教學(xué)大綱時(shí)，參考一些就業(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è)儲(chǔ)備競(jìng)爭(zhēng)技能，引導(dǎo)感興趣的學(xué)生以“Web 前端開發(fā)”作為本科畢業(yè)論文的選題方向，進(jìn)一步幫助學(xué)生掌握“Web 前端開發(fā)”的新技術(shù)，有效提升學(xué)生的就業(yè)競(jìng)爭(zhēng)力。

五、小結(jié)

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