計算思維導向的《網頁設計與制作》課程設計研究

葉 嫣，李培國

(1. 廣州商學院 信息技術與工程學院，廣州 511363； 2. 暨南大學 信息科學技術學院，廣州 510632)

《網頁設計與制作》課程，作為大學計算機基礎課程的重要組成部分，逐漸成為各個專業的公共必修課程；同時，在計算機二級考試-WEB程序設計部分中，有相當比例的知識點都與《網頁設計與制作》課程有關。首屆“九校聯盟(C9)計算機基礎課程研討會”，旗幟鮮明的把“計算思維能力的培養”作為計算機基礎教育的核心任務【1-3】。大學計算機教育，必須加強以計算思維能力培養為核心的計算機基礎課程體系建設和教學內容的研究[4]。

《網頁設計與制作》課程，主要以教授網頁基礎知識，網頁制作工具的使用，以及網頁制作的其他相關技術等內容。筆者認為，該課程的傳統課程設計，很難能夠培養學生的計算思維能力，因此需要根據新的教學理念，進行課程設計的改革更新。

1 課程學習目標

通過《網頁設計與制作》課程的學習，學生能夠掌握網頁制作的基礎知識，能夠使用網頁開發工具，制作簡單的網頁；熟練掌握WEB程序設計中的基本知識點；了解和熟悉網站管理的基本知識，為今后的學習和工作中有關網頁制作和使用打下良好的基礎。

通過“項目制”的課程內容編排，讓學生通過本課程的學習，能夠了解和掌握一個完整的網站制作項目流程，為將來的實際工作提供良好的經驗和指導。

課程內容的設計，以“培養計算思維”為核心，使學生在學習課程內容的同時，初步了解計算思維的基本含義，并且能夠在今后的學習和工作中，有意識地使用計算思維解決實際問題，達到培養學生計算思維的目的。

2 課程教學內容

1.1 課程內容

根據課程的學習目標，本課程需要教授以下幾部分內容：

表1 課程授課內容

1.2 課程單元內容設計

在課程內容單元的設計上，依據計算思維能力培養的核心目標，將大部分的課程內容單元都設計成為符合計算思維過程的單元小節，下面以“DIV+CSS的布局”這一課程單元為例，詳細闡明課程單元的設計方法。

(1)基本問題定義。經過前面的學習，學生已經掌握了使用表格來布局一個網頁；對于簡單頁面，以及內容元素相對固定的頁面，這種方式能夠很好的勝任。示例中的網頁，包含很多層級的頁面元素，以及多樣化的顯示效果；同時，包括一些可以自由隱藏和顯示的元素。在這種情況下，試想一下，如果使用傳統的表格布局方式，可以想象表格的嵌套層級會非常多，頁面代碼會非常復雜和凌亂；另外，對于那些動態的元素，也很難通過表格來進行布局和顯示。

(2)分析和簡化問題。學生可以分析一下，那么為什么會出現上述的那些問題呢？首先，是由于表格布局的“刻板性”導致的。采用表格布局，把整個頁面劃分為不同的行列形式，這就導致了不能夠靈活的將元素隨意定義在希望的位置。通過這樣的分析，表格布局的主要問題就是：布局不具備靈活性，元素布局與顯示樣式的綁定過于緊密。

(3)問題解決方案。通過分析，學生了解到表格布局存在主要問題，那么如何解決這些問題呢？教師需要引入更為靈活的布局方法，同時，布局與樣式的設置之間，耦合性不能過于緊密，以便可以進行靈活地樣式設置。所以，才有了DIV+CSS的布局方式。

(4)回顧與總結。通過這一節的學習，學生首先了解了表格布局的局限性和存在的問題；通過分析這些局限性出現的原因，然后引入布局更為靈活的DIV+CSS的布局方式，來實現更好的布局效果。同學們也可以思考一下，通過學習DIV+CSS布局方法，能否對比一下兩種布局方式存在哪些不同點，以及各自適合什么樣的場景。

3 課程教學設計

在《網頁設計與制作》傳統的課程教學設計中，主要是將整個課程所有的知識點，按照一定的順序，分配到各個課程單元中去；在知識點的分布過程中，并沒有太多考慮學生在實際學習過程中，是否能夠契合到實際的網站的設計和制作的實踐順序，從而更好地在實際中運用所學的知識；同時，這樣單純的按照順序來組織知識點，也會忽略掉知識點之間的有機結合，學生不能夠更深入地理解知識點之間的關聯性，從而形成有效的知識網狀結構，降低學習效率。

在本文中，引入“項目教學法”[5]進行設計，以一個主題網站制作項目作為教學目標，各個單元的知識點講解完運用到主題網站上，依次包括需求調研、需求分析、詳細設計、網頁制作、網站管理、測試、發布等項目過程，并分別對應到各個課程單元中；整個教學任務完成的同時，學生也跟著完成了一個主題網站制作的項目過程，把原本離散的知識點融合成了一個整體，并運用到實際的項目中去。通過這樣的教學和實踐方式，學生能夠更好地掌握知識點之間更為立體的關系，從而形成很好的知識網，能夠更為靈活地將所學知識運用到實踐當中去。

具體的課程單元與相應的項目階段的對應關系(見圖1)。

圖1 課程教學設計

4 計算思維培養

本課程作為大學生計算機基礎課程之一，也需要承擔培養大學生計算思維的責任。本文主要在兩個方面進行學生計算思維的引導和培養：課程結構設計，課程內容的講解。

(1)計算思維。按照周以真教授的定義，計算思維就是運用計算機科學的基礎概念，進行問題求解、系統設計、以及人類行為理解等涵蓋計算機科學之廣度的一系列思維活動[6]。作為大學生計算機基礎教育的核心，所有計算機基礎教育的課程，必須從各個方面潛移默化地對學生的計算思維能力進行培養。

圖2 課程結構設計

(2)課程結構設計方面。本課程整體采用項目教學法，引入完整的項目過程，這本身就有利于培養學生的計算思維：在前期進行網站需求的整理，弄清需要解決的具體問題是什么，界定問題的具體范圍；然后通過需求的分析過程，進行簡化、抽象、轉化等方法，找到最終需要實現的功能點；最后再借助計算機，完成相應的網站制作，從而解決最初的需求問題。

(3)課程內容講解方面。在實際知識點講解的過程中，本文主要采用“案例教學法”進行大部分知識點的講解和演示。在課程的開始階段，可以讓學生瀏覽大量的成功網站案例，通過參看不同類型的網站，多樣而又絢麗地設計讓學生對網站設計產生濃烈的興趣；在興趣的驅動下，展開各個學習單元的教學。

在各個學習單元內，同樣提供相關內容的成功示例；讓學生帶著分析、總結的方式，從成功的實例中去總結設計的要求，例如網站的布局結構、網站的配色設計、網站的菜單類型、網站的跳轉方式等，以及相應的實現方式；在這個過程中通過參考、總結的方式，學習相關的知識，并提高分析和解決問題的能力。

在使用案例教學法講解知識點的同時，也要注重引導學生采用計算思維的方式。例如，在講解模板的定義和使用這一節，首先，描述我們當前碰到的問題，我們在制作同一個網站的二級頁面時，有大量的頁面元素經常是重復出現的，例如頁眉、導航、頁腳、版權信息等等，這往往需要大量的重復工作。這時我們可以借助于模板，把大量需要重復制作的元素提取出來，精簡到一個模板中；后續相同架構的網頁就可以直接通過調用該模板，直接生成相應的網頁。這個過程就是一個完整的計算思維的過程：分析問題，提煉和簡化問題，找到相應的解決辦法，最后解決問題。

通過上述兩個方面，就可以從宏觀(項目整體流程)和微觀(具體的知識點學習)兩個角度，讓學生在學習中能夠更好地接受和體會計算思維的本質含義，并在今后的學習和工作中，能夠更好地運用計算思維解決各種問題，從而真正建立起計算思維。

5.課程考核設計

《網頁設計與制作》課程，是一門注重實踐操作的課程，著重培養學生如何在今后的學習和工作中，正確的運用課堂知識和工具，制作出符合需求的網站頁面的能力。基于這樣的培養目標，本文在課程考核方式上，側重于考核學生的動手能力方面；同時，也會兼顧學生的平時課堂表現，考核成績主要分為平時成績(20%)、項目單元成績(30%)和課程設計(50%)三個方面。

5.1 平時考核

課程的平時成績主要包括出勤情況、課堂表現和學習態度等，主要通過課堂點名，課上觀察、課堂提問，以及課上分組討論等方式進行考察和記錄，并綜合以上各個方面的表現，最終確定平時成績。

5.2 項目單元考核

這部分成績，主要通過檢查學生在每個項目節點結束時，項目單元的完成情況來確定的。例如，在需求調研階段結束時，檢查每個學生的需求調研文檔，根據相應的完成情況，給出該項目單元的成績；最終，整個項目流程結束后，再給出整個項目單元的成績。

5.3 課程設計

本課程采用課程設計代替傳統的理論考試，通過具體的網站項目制作，考察學生對于網頁制作知識的理解，以及在實際制作時的運用能力。在評定課程設計成績時，主要從以下幾個方面進行評判：①網站的功能完整性；①網站整體的風格與布局；①網站的易用性；①網站的色彩搭配和美觀性；

通過上述的幾個方面，基本能夠評判學生在制作網站時，是否掌握了本課程的理論知識，并合理地運用到實際的網站制作中，從而給出相應合理的最終成績。

6 結語

《網頁設計與制作》是一門理論與實踐結合非常緊密的課程，而且更偏重于實踐操作的課程；傳統的授課方式，更多是教授課本上的理論知識，學生無法直接清晰的了解如何去完整的設計制作一個網站，從而在進行課程設計，以及今后面臨網站制作工作時，無法很好的完成。

采用項目教學法，模擬整個網站項目的開發制作過程，讓學生參與每個過程，從而清晰的理解具體的設計開發過程；而且，在每個項目單元，學生都需要完成具體的項目任務，這也能更大地驅動學生的主觀能動性，更好地將所學知識應用于實踐當中。同時，有了整個課程項目的經驗，學生能夠更好地完成課程設計工作，獨立完整地設計和制作一個網站。

在課程知識的設計和講授方面，盡量采用有利于培養學生培養計算思維的方式，引導學生建立起計算思維；通過項目教學法，以及課程設計的過程，更有助于學生按照計算思維的方式思考和解決問題，從而慢慢建立起計算思維。計算思維不僅是計算機專業學生應該具備的能力，而是所有專業的學生都應該具有的思維方式。因此，大學計算機基礎教育，就應該承擔培養學生計算思維的責任。然而，培養計算思維，并不是通過一兩門課程就能夠完成的；而是應該將計算思維的培養，融入到計算機基礎教育的所有課程中去，只有這樣才能夠逐步建立起學生的計算思維，并在今后的學習和工作中，能夠真正地運用計算思維來思考和解決相應的問題，這才是培養計算思維的最終目標。