計(jì)算思維導(dǎo)向的《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程設(shè)計(jì)研究

葉 嫣，李培國(guó)

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

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

《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程，主要以教授網(wǎng)頁(yè)基礎(chǔ)知識(shí)，網(wǎng)頁(yè)制作工具的使用，以及網(wǎng)頁(yè)制作的其他相關(guān)技術(shù)等內(nèi)容。筆者認(rèn)為，該課程的傳統(tǒng)課程設(shè)計(jì)，很難能夠培養(yǎng)學(xué)生的計(jì)算思維能力，因此需要根據(jù)新的教學(xué)理念，進(jìn)行課程設(shè)計(jì)的改革更新。

1 課程學(xué)習(xí)目標(biāo)

通過(guò)《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程的學(xué)習(xí)，學(xué)生能夠掌握網(wǎng)頁(yè)制作的基礎(chǔ)知識(shí)，能夠使用網(wǎng)頁(yè)開(kāi)發(fā)工具，制作簡(jiǎn)單的網(wǎng)頁(yè)；熟練掌握WEB程序設(shè)計(jì)中的基本知識(shí)點(diǎn)；了解和熟悉網(wǎng)站管理的基本知識(shí)，為今后的學(xué)習(xí)和工作中有關(guān)網(wǎng)頁(yè)制作和使用打下良好的基礎(chǔ)。

通過(guò)“項(xiàng)目制”的課程內(nèi)容編排，讓學(xué)生通過(guò)本課程的學(xué)習(xí)，能夠了解和掌握一個(gè)完整的網(wǎng)站制作項(xiàng)目流程，為將來(lái)的實(shí)際工作提供良好的經(jīng)驗(yàn)和指導(dǎo)。

課程內(nèi)容的設(shè)計(jì)，以“培養(yǎng)計(jì)算思維”為核心，使學(xué)生在學(xué)習(xí)課程內(nèi)容的同時(shí)，初步了解計(jì)算思維的基本含義，并且能夠在今后的學(xué)習(xí)和工作中，有意識(shí)地使用計(jì)算思維解決實(shí)際問(wèn)題，達(dá)到培養(yǎng)學(xué)生計(jì)算思維的目的。

2 課程教學(xué)內(nèi)容

1.1 課程內(nèi)容

根據(jù)課程的學(xué)習(xí)目標(biāo)，本課程需要教授以下幾部分內(nèi)容：

表1 課程授課內(nèi)容

1.2 課程單元內(nèi)容設(shè)計(jì)

在課程內(nèi)容單元的設(shè)計(jì)上，依據(jù)計(jì)算思維能力培養(yǎng)的核心目標(biāo)，將大部分的課程內(nèi)容單元都設(shè)計(jì)成為符合計(jì)算思維過(guò)程的單元小節(jié)，下面以“DIV+CSS的布局”這一課程單元為例，詳細(xì)闡明課程單元的設(shè)計(jì)方法。

(1)基本問(wèn)題定義。經(jīng)過(guò)前面的學(xué)習(xí)，學(xué)生已經(jīng)掌握了使用表格來(lái)布局一個(gè)網(wǎng)頁(yè)；對(duì)于簡(jiǎn)單頁(yè)面，以及內(nèi)容元素相對(duì)固定的頁(yè)面，這種方式能夠很好的勝任。示例中的網(wǎng)頁(yè)，包含很多層級(jí)的頁(yè)面元素，以及多樣化的顯示效果；同時(shí)，包括一些可以自由隱藏和顯示的元素。在這種情況下，試想一下，如果使用傳統(tǒng)的表格布局方式，可以想象表格的嵌套層級(jí)會(huì)非常多，頁(yè)面代碼會(huì)非常復(fù)雜和凌亂；另外，對(duì)于那些動(dòng)態(tài)的元素，也很難通過(guò)表格來(lái)進(jìn)行布局和顯示。

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

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

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

3 課程教學(xué)設(shè)計(jì)

在《網(wǎng)頁(yè)設(shè)計(jì)與制作》傳統(tǒng)的課程教學(xué)設(shè)計(jì)中，主要是將整個(gè)課程所有的知識(shí)點(diǎn)，按照一定的順序，分配到各個(gè)課程單元中去；在知識(shí)點(diǎn)的分布過(guò)程中，并沒(méi)有太多考慮學(xué)生在實(shí)際學(xué)習(xí)過(guò)程中，是否能夠契合到實(shí)際的網(wǎng)站的設(shè)計(jì)和制作的實(shí)踐順序，從而更好地在實(shí)際中運(yùn)用所學(xué)的知識(shí)；同時(shí)，這樣單純的按照順序來(lái)組織知識(shí)點(diǎn)，也會(huì)忽略掉知識(shí)點(diǎn)之間的有機(jī)結(jié)合，學(xué)生不能夠更深入地理解知識(shí)點(diǎn)之間的關(guān)聯(lián)性，從而形成有效的知識(shí)網(wǎng)狀結(jié)構(gòu)，降低學(xué)習(xí)效率。

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

具體的課程單元與相應(yīng)的項(xiàng)目階段的對(duì)應(yīng)關(guān)系(見(jiàn)圖1)。

圖1 課程教學(xué)設(shè)計(jì)

4 計(jì)算思維培養(yǎng)

本課程作為大學(xué)生計(jì)算機(jī)基礎(chǔ)課程之一，也需要承擔(dān)培養(yǎng)大學(xué)生計(jì)算思維的責(zé)任。本文主要在兩個(gè)方面進(jìn)行學(xué)生計(jì)算思維的引導(dǎo)和培養(yǎng)：課程結(jié)構(gòu)設(shè)計(jì)，課程內(nèi)容的講解。

(1)計(jì)算思維。按照周以真教授的定義，計(jì)算思維就是運(yùn)用計(jì)算機(jī)科學(xué)的基礎(chǔ)概念，進(jìn)行問(wèn)題求解、系統(tǒng)設(shè)計(jì)、以及人類(lèi)行為理解等涵蓋計(jì)算機(jī)科學(xué)之廣度的一系列思維活動(dòng)[6]。作為大學(xué)生計(jì)算機(jī)基礎(chǔ)教育的核心，所有計(jì)算機(jī)基礎(chǔ)教育的課程，必須從各個(gè)方面潛移默化地對(duì)學(xué)生的計(jì)算思維能力進(jìn)行培養(yǎng)。

圖2 課程結(jié)構(gòu)設(shè)計(jì)

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

(3)課程內(nèi)容講解方面。在實(shí)際知識(shí)點(diǎn)講解的過(guò)程中，本文主要采用“案例教學(xué)法”進(jìn)行大部分知識(shí)點(diǎn)的講解和演示。在課程的開(kāi)始階段，可以讓學(xué)生瀏覽大量的成功網(wǎng)站案例，通過(guò)參看不同類(lèi)型的網(wǎng)站，多樣而又絢麗地設(shè)計(jì)讓學(xué)生對(duì)網(wǎng)站設(shè)計(jì)產(chǎn)生濃烈的興趣；在興趣的驅(qū)動(dòng)下，展開(kāi)各個(gè)學(xué)習(xí)單元的教學(xué)。

在各個(gè)學(xué)習(xí)單元內(nèi)，同樣提供相關(guān)內(nèi)容的成功示例；讓學(xué)生帶著分析、總結(jié)的方式，從成功的實(shí)例中去總結(jié)設(shè)計(jì)的要求，例如網(wǎng)站的布局結(jié)構(gòu)、網(wǎng)站的配色設(shè)計(jì)、網(wǎng)站的菜單類(lèi)型、網(wǎng)站的跳轉(zhuǎn)方式等，以及相應(yīng)的實(shí)現(xiàn)方式；在這個(gè)過(guò)程中通過(guò)參考、總結(jié)的方式，學(xué)習(xí)相關(guān)的知識(shí)，并提高分析和解決問(wèn)題的能力。

在使用案例教學(xué)法講解知識(shí)點(diǎn)的同時(shí)，也要注重引導(dǎo)學(xué)生采用計(jì)算思維的方式。例如，在講解模板的定義和使用這一節(jié)，首先，描述我們當(dāng)前碰到的問(wèn)題，我們?cè)谥谱魍粋€(gè)網(wǎng)站的二級(jí)頁(yè)面時(shí)，有大量的頁(yè)面元素經(jīng)常是重復(fù)出現(xiàn)的，例如頁(yè)眉、導(dǎo)航、頁(yè)腳、版權(quán)信息等等，這往往需要大量的重復(fù)工作。這時(shí)我們可以借助于模板，把大量需要重復(fù)制作的元素提取出來(lái)，精簡(jiǎn)到一個(gè)模板中；后續(xù)相同架構(gòu)的網(wǎng)頁(yè)就可以直接通過(guò)調(diào)用該模板，直接生成相應(yīng)的網(wǎng)頁(yè)。這個(gè)過(guò)程就是一個(gè)完整的計(jì)算思維的過(guò)程：分析問(wèn)題，提煉和簡(jiǎn)化問(wèn)題，找到相應(yīng)的解決辦法，最后解決問(wèn)題。

通過(guò)上述兩個(gè)方面，就可以從宏觀(項(xiàng)目整體流程)和微觀(具體的知識(shí)點(diǎn)學(xué)習(xí))兩個(gè)角度，讓學(xué)生在學(xué)習(xí)中能夠更好地接受和體會(huì)計(jì)算思維的本質(zhì)含義，并在今后的學(xué)習(xí)和工作中，能夠更好地運(yùn)用計(jì)算思維解決各種問(wèn)題，從而真正建立起計(jì)算思維。

5.課程考核設(shè)計(jì)

《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程，是一門(mén)注重實(shí)踐操作的課程，著重培養(yǎng)學(xué)生如何在今后的學(xué)習(xí)和工作中，正確的運(yùn)用課堂知識(shí)和工具，制作出符合需求的網(wǎng)站頁(yè)面的能力?；谶@樣的培養(yǎng)目標(biāo)，本文在課程考核方式上，側(cè)重于考核學(xué)生的動(dòng)手能力方面；同時(shí)，也會(huì)兼顧學(xué)生的平時(shí)課堂表現(xiàn)，考核成績(jī)主要分為平時(shí)成績(jī)(20%)、項(xiàng)目單元成績(jī)(30%)和課程設(shè)計(jì)(50%)三個(gè)方面。

5.1 平時(shí)考核

課程的平時(shí)成績(jī)主要包括出勤情況、課堂表現(xiàn)和學(xué)習(xí)態(tài)度等，主要通過(guò)課堂點(diǎn)名，課上觀察、課堂提問(wèn)，以及課上分組討論等方式進(jìn)行考察和記錄，并綜合以上各個(gè)方面的表現(xiàn)，最終確定平時(shí)成績(jī)。

5.2 項(xiàng)目單元考核

這部分成績(jī)，主要通過(guò)檢查學(xué)生在每個(gè)項(xiàng)目節(jié)點(diǎn)結(jié)束時(shí)，項(xiàng)目單元的完成情況來(lái)確定的。例如，在需求調(diào)研階段結(jié)束時(shí)，檢查每個(gè)學(xué)生的需求調(diào)研文檔，根據(jù)相應(yīng)的完成情況，給出該項(xiàng)目單元的成績(jī)；最終，整個(gè)項(xiàng)目流程結(jié)束后，再給出整個(gè)項(xiàng)目單元的成績(jī)。

5.3 課程設(shè)計(jì)

本課程采用課程設(shè)計(jì)代替?zhèn)鹘y(tǒng)的理論考試，通過(guò)具體的網(wǎng)站項(xiàng)目制作，考察學(xué)生對(duì)于網(wǎng)頁(yè)制作知識(shí)的理解，以及在實(shí)際制作時(shí)的運(yùn)用能力。在評(píng)定課程設(shè)計(jì)成績(jī)時(shí)，主要從以下幾個(gè)方面進(jìn)行評(píng)判：①網(wǎng)站的功能完整性；①網(wǎng)站整體的風(fēng)格與布局；①網(wǎng)站的易用性；①網(wǎng)站的色彩搭配和美觀性；

通過(guò)上述的幾個(gè)方面，基本能夠評(píng)判學(xué)生在制作網(wǎng)站時(shí)，是否掌握了本課程的理論知識(shí)，并合理地運(yùn)用到實(shí)際的網(wǎng)站制作中，從而給出相應(yīng)合理的最終成績(jī)。

6 結(jié)語(yǔ)

《網(wǎng)頁(yè)設(shè)計(jì)與制作》是一門(mén)理論與實(shí)踐結(jié)合非常緊密的課程，而且更偏重于實(shí)踐操作的課程；傳統(tǒng)的授課方式，更多是教授課本上的理論知識(shí)，學(xué)生無(wú)法直接清晰的了解如何去完整的設(shè)計(jì)制作一個(gè)網(wǎng)站，從而在進(jìn)行課程設(shè)計(jì)，以及今后面臨網(wǎng)站制作工作時(shí)，無(wú)法很好的完成。

采用項(xiàng)目教學(xué)法，模擬整個(gè)網(wǎng)站項(xiàng)目的開(kāi)發(fā)制作過(guò)程，讓學(xué)生參與每個(gè)過(guò)程，從而清晰的理解具體的設(shè)計(jì)開(kāi)發(fā)過(guò)程；而且，在每個(gè)項(xiàng)目單元，學(xué)生都需要完成具體的項(xiàng)目任務(wù)，這也能更大地驅(qū)動(dòng)學(xué)生的主觀能動(dòng)性，更好地將所學(xué)知識(shí)應(yīng)用于實(shí)踐當(dāng)中。同時(shí)，有了整個(gè)課程項(xiàng)目的經(jīng)驗(yàn)，學(xué)生能夠更好地完成課程設(shè)計(jì)工作，獨(dú)立完整地設(shè)計(jì)和制作一個(gè)網(wǎng)站。

在課程知識(shí)的設(shè)計(jì)和講授方面，盡量采用有利于培養(yǎng)學(xué)生培養(yǎng)計(jì)算思維的方式，引導(dǎo)學(xué)生建立起計(jì)算思維；通過(guò)項(xiàng)目教學(xué)法，以及課程設(shè)計(jì)的過(guò)程，更有助于學(xué)生按照計(jì)算思維的方式思考和解決問(wèn)題，從而慢慢建立起計(jì)算思維。計(jì)算思維不僅是計(jì)算機(jī)專(zhuān)業(yè)學(xué)生應(yīng)該具備的能力，而是所有專(zhuān)業(yè)的學(xué)生都應(yīng)該具有的思維方式。因此，大學(xué)計(jì)算機(jī)基礎(chǔ)教育，就應(yīng)該承擔(dān)培養(yǎng)學(xué)生計(jì)算思維的責(zé)任。然而，培養(yǎng)計(jì)算思維，并不是通過(guò)一兩門(mén)課程就能夠完成的；而是應(yīng)該將計(jì)算思維的培養(yǎng)，融入到計(jì)算機(jī)基礎(chǔ)教育的所有課程中去，只有這樣才能夠逐步建立起學(xué)生的計(jì)算思維，并在今后的學(xué)習(xí)和工作中，能夠真正地運(yùn)用計(jì)算思維來(lái)思考和解決相應(yīng)的問(wèn)題，這才是培養(yǎng)計(jì)算思維的最終目標(biāo)。