思維導圖在中職前端HTML5教學中的應用探討

林峰

摘要：思維導圖是東尼·博贊發明的一種有效的思維工具，它以圖文并茂的形式，將知識和思維形象化，且近些年在教育領域中思維導圖的應用越來越廣泛，本文論述了在中職前端基礎課程教學中思維導圖的應用的優勢，剖析了思維導圖融入教學設計、課堂教學、培養學生能力、學生評價等方面的策略，并以前端HTML5的教學為例，探討思維導圖的具體應用。

關鍵詞：思維導圖應用策略;HTML5教學;發散思維

中圖分類號：TP311 文獻標識碼：A

文章編號：1009-3044（2020）13-0185-02

HTML5是中職計算機前端應用技術與服務專業的核心基礎課程，在培養前端開發人才起著重要地位。這門課程理論部分不多，但需要掌握的知識點不少，HTML5涵蓋了大量的標簽和屬性，傳統的教學方法就是一節課講若干的標簽、幾個屬性，大部分學生當堂就能掌握。但是隨著課程的展開，需要記憶的標簽屬性日益增多，學生就會忘了前面的知識，或者混淆了知識點，在做具體項目時，造成效率低下，或者出錯連連，有的學生就會放棄這門學科。

如何讓學生把學習知識記下來，即使將來忘了，也能很快地聯想起來，這就是計算機前端教學中需要考慮的問題，經過這兩年的教學實踐，通過思維導圖對教學進行重構，取得良好的效果。

1思維導圖的優勢

思維導圖是一種圖形思維工具，它采用文字結合圖形的形式，按照知識的內在聯系進行知識結構的重組，使知識的層次關系、存儲結構更加清晰化，思維導圖是將整個知識點及相應的邏輯聯系放在一張圖中，直觀得體現出來。運用思維導圖，可以高效系統地掌握各個知識點，提高記憶的效率，以及培養發散思維的能力。

2思維導圖在前端HTML5教學中的應用

2.1通過思維導圖進行知識重構

思維導圖通常應用于知識點多，各部分關聯性強的學科，通過思維導圖制作出整個知識體系的框架結構，以圖形的形式清晰地表現出來，有助于學生的理解和記憶，同時教師在教學內容的安排上更加靈活。

針對HTML5知識點多，關聯性強的特點，在上課前首先將要學習的知識點制作成思維導圖來概括，思維導圖注重關鍵詞的應用，通過簡潔明了的詞匯來描述知識點，這樣便于學生抓住重點。比如上HTML5第一次課，通過展示全書內容的思維導圖（如圖1），讓學生對這門課有個總體的印象，對學習目標有了明確的認識，這樣比學生看教材目錄去了解課程內容，效果要更好。思維導圖的設計思路就是“緊扣教材、線索明了、用詞精準、結構清晰”，力圖讓學生在讀圖的過程中快速抓住重點。

2.2應用思維導圖提高課堂效率

應用思維導圖的教學過程，就是以思維導圖的脈絡為主線，根據每條線所包括的知識點展開教學，如在講解圖像IMG標簽時，事先在導圖畫出四個分支：語義、屬性、路徑、可選屬性。（如圖2）教學時根據各分枝的知識點展開，每個知識點進行提煉概括，這樣在課堂項目教學時，老師在操作的同時，對涉及的知識點進行解釋，學生在理解知識點的同時對圖像進行記憶，可以做到“所見即所學”“所學即所得”，很大程度提高了課堂學習效率。

3應用思維導圖培養學生發散思維

思維導圖是培養邏輯思維能力的高效工具，它是以輻射的形式存在，有利于人腦的思維的發散展開。

比如在HTML5項目實訓教學設計中，要求學生仿某電商平臺設計商場網頁的界面，中心主題就是設計商城，學生先根據這個中心主題來制作思維導圖，將設計的思路以子節點的形式放人導圖中，學生自由發揮，比如子節點內容有“主頁界面框架”“目錄結構劃分”“素材收集”“版塊劃分”“網頁風格”等，在子節點上再根據相應的模塊能進行添加，反復進行這樣的操作使用就可以將需要的節點添加完成，這樣學生再根據完成的思維導圖來制作商場網頁。在制作的過程，如果有新的思路，比如在網頁要增加一個“問題回答”這個版塊，那么在思維導圖中進行補充，把自己的想法直接在導圖中體現。實踐證明，這種思維導圖設計思路能有效培養學生的發散思維，學生思路更易于展開，同時也提高學生邏輯嚴謹性。

4應用思維導圖進行分組協作學習

思維導圖也是一種有效的溝通工具，傳統的分組教學中，小組討論的效果并不理想，組員各自為政，缺乏有效的交流溝通。經過分析，其實就是缺乏有效的溝通工具，利用思維導圖能很好地解決這個問題。

在搭建“陽光心理咨詢網站”的綜合項目實踐中，要求學生開發一個真正意義上的網站，教師首先將網站開發流程的思維導圖發給學生（如圖3），要求學生分組協作完成網站項目的開發，理解網站的開發流程。

各小組以公司的模式進行開發設計，組長按思維導圖的分支模塊對組員進行了任務分配，各組員對所對應的模塊進行拓展，以思維導圖的形式進行展示。比如負責“總體規劃”的成員，在“總體規劃”的支點上進行功能拓展（如圖4）：使用表格還是DIV+CSS進行網站的設計？目標用戶是針對學生群體還是師生群體？網站的風格只是展示型，還是包含留言、表單等互動版塊，網站包含哪些功能模塊等，在思維導圖中體現出來。

最后組員將各自負責設計的思維導圖拿出來匯總，形成一個大的思維導圖，最終通過頭腦風暴，同學們對方案進行討論增改，直接在思維導圖上修改，形成一個最終比較完善的建站方案，再分工完成。在完成過程中，如果有新的思路，那么直接在導圖上變動，其他同學一看就清楚了。

實踐證明，以“圖”的形式來交流，更為簡潔明了，因為同學們的思路都以已經“畫”在思維導圖上了，比單純的語言交流更加直接清晰。而且以思維導圖為媒介的交流模式的高效性會被學生認可，將來學生在其他學習或工作中會不自覺地使用思維導圖進行溝通交流。

5引導學生應用思維導圖

思維導圖可視化的優點，可以讓學生快速地掌握知識的重難點，理清知識點間的聯系，所以在教學過程中，有意識地教會學生掌握思維導圖的制作和使用，中職學生有電腦的不多，所以推薦學生使用百度腦圖等思維導圖的APP進行制作。有意識地培養學生使用思維導圖，引導學生對知識進行歸類細分，強化學生課堂所學的知識。每次課后都要求學生根據所學的知識，按照自己的理解制作思維導圖，這項任務作為學生成績考核的一塊。

HTML5常用標簽有十幾類，通過一張思維導圖可以將這些知識點進行分類細化，方便學生的記憶。學生在做項目或考試復習時，如果知識點忘記了，看下思維導圖，馬上就能回憶起所學的知識，提高了學生的學習效率。

經過觀察，很多學生掌握的思維導圖后，會有意識將它應用于其他科目的學習中，也取得很好的效果，這也是我們教育工作者所期待的。

6思維導圖應用于學生的評價

傳統的評價方式就是上課提問，檢查學生的練習，考試等方式，但是這種評價方式是片面的、不全面的，無法對學生所掌握的知識結構進行了解。所以布置學生完成思維導圖作業，要求學生獨立完成，就是將自己所學的知識進行串聯，學生學得透徹，理解得深刻，思維導圖就會做得全面，邏輯性強，錯誤率少，教師通過學生的思維導圖，就能了解學生掌握的情況。

在HTML5教學實踐中，為了評價學生的學習效果，制作了思維導圖質量評價表，通過評分，可以掌握到學生的學習情況。

在小組協作的項目實訓環節中，教師通過各組完成的思維導圖進行評判，及時提出指導性意見。

7結束語

經過教學實踐證明，應用思維導圖在前端HTML5教學實踐中取得了良好的效果。對教師而言，掌握思維導圖進行教學，教學銜接更為流暢，邏輯更為嚴謹，提高了上課效率，也優化了老師對學生的評價。對學生而言，應用思維導圖學習大大激發了學生的學習興趣，學生對知識的掌握更為系統、更為透徹，同時也培養了學生嚴謹的邏輯思維能力，將來不管在學習和工作中，這種能力給學生的影響是終身的。不單是HTML5這門課，很多前端的課程如JAVASCRIPT、uI設計、微信小程序制作等課程，應用思維導圖進行教與學，都將產生事半功倍的效率。