五星教學法在網頁設計與網站建設課程中的應用探討

譚生龍（湖北經濟學院法商學院，湖北 武漢 430205，湖北經濟學院，湖北 武漢 430205）

李周娜，胡清華（湖北經濟學院，湖北 武漢 430205）

一、引言

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

二、五星教學法概述

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

三、網頁設計與網站建設課程的教學現狀

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

四、五星教學法在網頁設計與網站建設課程中的應用

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

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

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

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

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

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

任務驅動[5]主要是以多個與知識點緊密相關的項目任務為載體，需綜合運用所學的知識點完成網頁設計與網站建設的項目；通過完成項目讓學生在開發項目的過程中逐步掌握所學知識并提高編程技能。構建有難度梯度的項目庫，按照不同的難度設置每次作業，讓學生完成基礎項目后、有機會完成挑戰性項目。可以將項目分成實驗課中的項目和課后項目兩部分，在實驗課上的項目可以單次實驗課作為評分單元，設置成任務驅動競賽模式，讓學生必須在一次實驗課內完成該項目并限時提交，并根據實驗項目的完成情況在全班進行評分并排名，同時計入期末總評成績，讓學生在競爭中來提升和超越自己。

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

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

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

五、小結

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