概念圖在《動態網頁設計》教學中的應用

李春艷　石秋香

摘 要：概念圖是以圖的形式來呈現思考的過程或者知識的關聯。本文分析了概念圖應用于《動態網頁設計》教學中的原因，介紹了概念圖的繪制過程以及概念圖在《動態網頁設計》教學中的具體應用。

關鍵詞：概念圖；教學

目前，我國多數院校的教育技術學專業、計算機相關專業都開設動態網頁設計類的課程。《動態網頁設計》是我院教育技術學專業學生的一門必修課程，本課程的主要任務是培養學生利用ASP技術開發動態網頁的能力。針對前幾輪教學中存在的問題，筆者嘗試用概念圖進行教學，取得了良好的教學效果，希望能對其他同仁起到拋磚引玉的作用。

1 概念圖應用《動態網頁設計》教學的原因分析

1.概念圖簡介

概念圖是盛行于歐美國家的一種教學策略，它以直觀形象的方式表達知識結構，能有效呈現思考的過程及知識的關聯，引導學生進行意義建構。[1]概念圖是由3 部分組成：節點、連線、連接語詞。節點表示概念；連線表示兩個概念之間的意義聯系，并用箭頭符號指示方向；連接語詞是用來標注連線的，描述兩個概念間的關系。[2]目前使用較廣的概念圖工具是Inspiration，它簡單易用，教師可以在較短的時間內教會學生如何使用。

2.《動態網頁設計》教學存在的問題

《動態網頁設計》教學內容主要包括ASP編程的基礎知識和實例。本課程的主要教學目標是讓學生在掌握基礎知識的基礎上，能夠設計和制作交互式的動態網站。因此，實例教學具有重要的意義，它不但能夠讓學生鞏固以前所學的基礎知識，還能夠使學生掌握交互式的動態網站創建的過程，培養學生解決實際問題的能力，以及探索和創新能力。

交互式的動態網站創建必然會涉及到每個網頁的設計、網頁之間鏈接的設計以及網頁之間傳遞參數的確定，這就說明具體的實例教學內容比較復雜、邏輯性比較強，這為教師的教和學生的學都帶來了一定困難。在前幾輪的教學中，筆者發現學生對如何實現某一功能的代碼不成問題，也就是單個頁面的編寫對學生來說比較容易；但是學生弄不清各個頁面之間的聯系以及頁面間需要傳遞的參數，不懂網站中的網頁是如何聯系起來的。

3.概念圖應用于《動態網頁設計》教學的優勢

人的大腦有一種特點，容易記住直觀的東西，內容一多就會迷失在繁雜的信息中。但是，如果把自己的想法用概念圖的形式畫下來，想法就會躍然紙上，思路也會變得更加清晰。因此可以把概念圖應用到動態網頁設計教學中。

在動態網頁設計的概念圖中，網頁就是一個節點，可以用箭頭表示兩個網頁之間的關系，箭頭的方向決定了網頁之間鏈接的方向，兩個網頁之間的連接語詞描述了網頁之間的鏈接關系以及需要傳遞的參數。概念圖應用于教學中可以幫助學生認清網頁之間的聯系及參數傳遞，引導思維的走向，對編程學習起著促進作用。

2 動態網頁概念圖的繪制

在教學中，筆者使用Inspiration教學軟件進行概念圖的繪制。概念圖的制作沒有嚴格的程序規范，但是要學習制作一個好的概念圖，一般可以通過以下幾個步驟來實現：

（1）繪制主頁面結點，在主結點的方框或圓圈中，寫下主頁面的文件名和主要功能，用“注釋”標記寫入如何實現這一具體功能。

（2）繪制從主頁面可以鏈接到的其他二級頁面結點，方框或圓圈中可以寫文件名和主要的功能，用“注釋”標記寫入如何實現這一具體功能，以方便具體代碼的編寫。

（3）連線及連接詞的繪制：在連接線上寫上合適的連結詞。連結詞必須清晰表達兩個頁面是如何實現鏈接的（例如按鈕、熱文字）以及會傳遞什么參數。

（4）依次建立下級頁面及頁面間的聯系。

3 概念圖在《動態網頁設計》教學中的應用

1.借助概念圖，有利于教師的教和學生的學

教師在課前畫概念圖的過程，相當于一個備課的過程，通過畫概念圖，教師可以非常清晰地了解到一節課的教學內容、各個環節之間的關系、在教學中應該考慮什么問題等。具體的課堂教學過程中，概念圖的應用有兩種方式：

（1）教師應用做好的概念圖進行講解

交互網站設計的教學常常從主頁面開始，然后逐層講解各頁面。因為Inspiration具有折疊隱藏功能，這樣教師在課堂中就可以使用備課時做出的概念圖。隨著教師講課進度的推進，逐漸顯示各個頁面，這樣可以使教師的講課更加條理清晰，通過網頁的一層層展開，同學們的思維也會漸漸的清晰。Inspiration 中“注釋”框的設計，類似于教學小黑板的功用。 “注釋”框輕捷靈活，既不限多少塊，又可隨時折疊收藏，因此在具體講解某個頁面的時候，教師就可以把“注釋”框展開，和同學們詳細分析此頁面需要那些功能以及如何實現。Inspiration還具有超鏈接的功能，教師在講課的時候可以使用此功能鏈接到具體的網頁源代碼，這樣就節省了時間。

（2）教師和學生共同繪制概念圖

Inspiration專為教學而設計，大量符號直接放在桌面上，隨手取用，十分方便。因此教師可以在教學的過程中和學生共同繪制交互網站的概念圖。

在教學過程中，教師可以，一邊講授一邊繪畫，使學生非常清楚地看到整個繪畫過程。這一過程，一方面可以使學生了解網頁之間是如何建立聯系和傳遞參數的；另一方面也可以讓學生感受到教師是如何利用概念圖對交互網站進行設計的。教師也可讓學生來繪制概念圖，這樣不但增加了互動，激發了學生的學習興趣，促使學生積極思考，加強對網頁關系的理解，同時也增強了他們的成就感。

實踐表明，概念圖以簡潔明了的圖形形式表現復雜的網頁結構，形象地呈現各網頁之間的聯系，包括網頁之間鏈接的關系以及傳遞的參數，從而提高了學習者對動態互網站構建的理解。

2.借助概念圖，有助于學生網站設計能力的提高

學生通過自己繪制交互網站概念圖，學習者能深刻領會網頁之間的相互關系，了解自己知識以及設計能力方面的不足，及時進行調整和補救。利用概念圖，學習者之間還可以相互學習交流，是網站設計能力提高的有效方法和策略。教師通過概念圖可以獲得關于學生網站設計掌握情況的大量信息，很快發現學生對網頁之間聯系的理解程度和在理解過程中存在的錯誤，從而更有針對性地進行教學。實踐證明，概念圖不僅可以激發學生的學習興趣，而且可以幫助學生理清思路，掌握網頁之間的關系，有助于學生網站設計能力的提高。

3.借助概念圖，改變傳統的評價方式

原有的教學評價方式就是筆試或讓學生制作一個動態網站?？荚囃荒芸疾槟承┲R點，這種形式不能充分、完整地評價學生的網頁設計與制作能力。制作動態網站這種形式又無法避免有些學生從網上下載，這兩種形式都不能考查到學生的實際能力。

平時，通過讓學生畫概念圖，教師可及時了解學生學習的學習情況與診斷學生的問題，從而改進教學，是形成性評價的好方式。同樣，概念圖也可以作為總結性評價的工具，是學生頭腦中關于網頁知識結構的圖示化再現，可反映出學生交互網站設計能力。因此在期末考核時，采用基礎知識考試和繪制概念圖的方式，通過基礎知識測試了解學生ASP基礎知識的掌握情況，通過繪制概念圖，了解學生網站設計能力。

4 總結

概念圖既是評價工具，也是教學策略，更是一種深層的學習方法，可以幫助學生有效地記憶、理清思路，進而解決問題，形成能力。概念圖應用于動態網頁設計課程中不但有利于教師的教，更有利學生的學和學生交互網站設計能力的提高，可相信概念圖在動態網頁設計類課程教學中的應用會越來越廣泛。

參考文獻

[1] 顧娟.概念圖在地理學習中的應用[J]. 成都大學學報（教育科學版），2007（2）：46_47.

[2] 王兄，湯服成.概念圖及其在數學學習中的現實意義[J]. 數學教育學報， 2004（3） ：16-18.