思維導(dǎo)圖在中職前端HTML5教學(xué)中的應(yīng)用探討

林峰

摘要：思維導(dǎo)圖是東尼·博贊發(fā)明的一種有效的思維工具，它以圖文并茂的形式，將知識(shí)和思維形象化，且近些年在教育領(lǐng)域中思維導(dǎo)圖的應(yīng)用越來越廣泛，本文論述了在中職前端基礎(chǔ)課程教學(xué)中思維導(dǎo)圖的應(yīng)用的優(yōu)勢，剖析了思維導(dǎo)圖融入教學(xué)設(shè)計(jì)、課堂教學(xué)、培養(yǎng)學(xué)生能力、學(xué)生評價(jià)等方面的策略，并以前端HTML5的教學(xué)為例，探討思維導(dǎo)圖的具體應(yīng)用。

關(guān)鍵詞：思維導(dǎo)圖應(yīng)用策略;HTML5教學(xué);發(fā)散思維

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2020）13-0185-02

HTML5是中職計(jì)算機(jī)前端應(yīng)用技術(shù)與服務(wù)專業(yè)的核心基礎(chǔ)課程，在培養(yǎng)前端開發(fā)人才起著重要地位。這門課程理論部分不多，但需要掌握的知識(shí)點(diǎn)不少，HTML5涵蓋了大量的標(biāo)簽和屬性，傳統(tǒng)的教學(xué)方法就是一節(jié)課講若干的標(biāo)簽、幾個(gè)屬性，大部分學(xué)生當(dāng)堂就能掌握。但是隨著課程的展開，需要記憶的標(biāo)簽屬性日益增多，學(xué)生就會(huì)忘了前面的知識(shí)，或者混淆了知識(shí)點(diǎn)，在做具體項(xiàng)目時(shí)，造成效率低下，或者出錯(cuò)連連，有的學(xué)生就會(huì)放棄這門學(xué)科。

如何讓學(xué)生把學(xué)習(xí)知識(shí)記下來，即使將來忘了，也能很快地聯(lián)想起來，這就是計(jì)算機(jī)前端教學(xué)中需要考慮的問題，經(jīng)過這兩年的教學(xué)實(shí)踐，通過思維導(dǎo)圖對教學(xué)進(jìn)行重構(gòu)，取得良好的效果。

1思維導(dǎo)圖的優(yōu)勢

思維導(dǎo)圖是一種圖形思維工具，它采用文字結(jié)合圖形的形式，按照知識(shí)的內(nèi)在聯(lián)系進(jìn)行知識(shí)結(jié)構(gòu)的重組，使知識(shí)的層次關(guān)系、存儲(chǔ)結(jié)構(gòu)更加清晰化，思維導(dǎo)圖是將整個(gè)知識(shí)點(diǎn)及相應(yīng)的邏輯聯(lián)系放在一張圖中，直觀得體現(xiàn)出來。運(yùn)用思維導(dǎo)圖，可以高效系統(tǒng)地掌握各個(gè)知識(shí)點(diǎn)，提高記憶的效率，以及培養(yǎng)發(fā)散思維的能力。

2思維導(dǎo)圖在前端HTML5教學(xué)中的應(yīng)用

2.1通過思維導(dǎo)圖進(jìn)行知識(shí)重構(gòu)

思維導(dǎo)圖通常應(yīng)用于知識(shí)點(diǎn)多，各部分關(guān)聯(lián)性強(qiáng)的學(xué)科，通過思維導(dǎo)圖制作出整個(gè)知識(shí)體系的框架結(jié)構(gòu)，以圖形的形式清晰地表現(xiàn)出來，有助于學(xué)生的理解和記憶，同時(shí)教師在教學(xué)內(nèi)容的安排上更加靈活。

針對HTML5知識(shí)點(diǎn)多，關(guān)聯(lián)性強(qiáng)的特點(diǎn)，在上課前首先將要學(xué)習(xí)的知識(shí)點(diǎn)制作成思維導(dǎo)圖來概括，思維導(dǎo)圖注重關(guān)鍵詞的應(yīng)用，通過簡潔明了的詞匯來描述知識(shí)點(diǎn)，這樣便于學(xué)生抓住重點(diǎn)。比如上HTML5第一次課，通過展示全書內(nèi)容的思維導(dǎo)圖（如圖1），讓學(xué)生對這門課有個(gè)總體的印象，對學(xué)習(xí)目標(biāo)有了明確的認(rèn)識(shí)，這樣比學(xué)生看教材目錄去了解課程內(nèi)容，效果要更好。思維導(dǎo)圖的設(shè)計(jì)思路就是“緊扣教材、線索明了、用詞精準(zhǔn)、結(jié)構(gòu)清晰”，力圖讓學(xué)生在讀圖的過程中快速抓住重點(diǎn)。

2.2應(yīng)用思維導(dǎo)圖提高課堂效率

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

3應(yīng)用思維導(dǎo)圖培養(yǎng)學(xué)生發(fā)散思維

思維導(dǎo)圖是培養(yǎng)邏輯思維能力的高效工具，它是以輻射的形式存在，有利于人腦的思維的發(fā)散展開。

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

4應(yīng)用思維導(dǎo)圖進(jìn)行分組協(xié)作學(xué)習(xí)

思維導(dǎo)圖也是一種有效的溝通工具，傳統(tǒng)的分組教學(xué)中，小組討論的效果并不理想，組員各自為政，缺乏有效的交流溝通。經(jīng)過分析，其實(shí)就是缺乏有效的溝通工具，利用思維導(dǎo)圖能很好地解決這個(gè)問題。

在搭建“陽光心理咨詢網(wǎng)站”的綜合項(xiàng)目實(shí)踐中，要求學(xué)生開發(fā)一個(gè)真正意義上的網(wǎng)站，教師首先將網(wǎng)站開發(fā)流程的思維導(dǎo)圖發(fā)給學(xué)生（如圖3），要求學(xué)生分組協(xié)作完成網(wǎng)站項(xiàng)目的開發(fā)，理解網(wǎng)站的開發(fā)流程。

各小組以公司的模式進(jìn)行開發(fā)設(shè)計(jì)，組長按思維導(dǎo)圖的分支模塊對組員進(jìn)行了任務(wù)分配，各組員對所對應(yīng)的模塊進(jìn)行拓展，以思維導(dǎo)圖的形式進(jìn)行展示。比如負(fù)責(zé)“總體規(guī)劃”的成員，在“總體規(guī)劃”的支點(diǎn)上進(jìn)行功能拓展（如圖4）：使用表格還是DIV+CSS進(jìn)行網(wǎng)站的設(shè)計(jì)？目標(biāo)用戶是針對學(xué)生群體還是師生群體？網(wǎng)站的風(fēng)格只是展示型，還是包含留言、表單等互動(dòng)版塊，網(wǎng)站包含哪些功能模塊等，在思維導(dǎo)圖中體現(xiàn)出來。

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

實(shí)踐證明，以“圖”的形式來交流，更為簡潔明了，因?yàn)橥瑢W(xué)們的思路都以已經(jīng)“畫”在思維導(dǎo)圖上了，比單純的語言交流更加直接清晰。而且以思維導(dǎo)圖為媒介的交流模式的高效性會(huì)被學(xué)生認(rèn)可，將來學(xué)生在其他學(xué)習(xí)或工作中會(huì)不自覺地使用思維導(dǎo)圖進(jìn)行溝通交流。

5引導(dǎo)學(xué)生應(yīng)用思維導(dǎo)圖

思維導(dǎo)圖可視化的優(yōu)點(diǎn)，可以讓學(xué)生快速地掌握知識(shí)的重難點(diǎn)，理清知識(shí)點(diǎn)間的聯(lián)系，所以在教學(xué)過程中，有意識(shí)地教會(huì)學(xué)生掌握思維導(dǎo)圖的制作和使用，中職學(xué)生有電腦的不多，所以推薦學(xué)生使用百度腦圖等思維導(dǎo)圖的APP進(jìn)行制作。有意識(shí)地培養(yǎng)學(xué)生使用思維導(dǎo)圖，引導(dǎo)學(xué)生對知識(shí)進(jìn)行歸類細(xì)分，強(qiáng)化學(xué)生課堂所學(xué)的知識(shí)。每次課后都要求學(xué)生根據(jù)所學(xué)的知識(shí)，按照自己的理解制作思維導(dǎo)圖，這項(xiàng)任務(wù)作為學(xué)生成績考核的一塊。

HTML5常用標(biāo)簽有十幾類，通過一張思維導(dǎo)圖可以將這些知識(shí)點(diǎn)進(jìn)行分類細(xì)化，方便學(xué)生的記憶。學(xué)生在做項(xiàng)目或考試復(fù)習(xí)時(shí)，如果知識(shí)點(diǎn)忘記了，看下思維導(dǎo)圖，馬上就能回憶起所學(xué)的知識(shí)，提高了學(xué)生的學(xué)習(xí)效率。

經(jīng)過觀察，很多學(xué)生掌握的思維導(dǎo)圖后，會(huì)有意識(shí)將它應(yīng)用于其他科目的學(xué)習(xí)中，也取得很好的效果，這也是我們教育工作者所期待的。

6思維導(dǎo)圖應(yīng)用于學(xué)生的評價(jià)

傳統(tǒng)的評價(jià)方式就是上課提問，檢查學(xué)生的練習(xí)，考試等方式，但是這種評價(jià)方式是片面的、不全面的，無法對學(xué)生所掌握的知識(shí)結(jié)構(gòu)進(jìn)行了解。所以布置學(xué)生完成思維導(dǎo)圖作業(yè)，要求學(xué)生獨(dú)立完成，就是將自己所學(xué)的知識(shí)進(jìn)行串聯(lián)，學(xué)生學(xué)得透徹，理解得深刻，思維導(dǎo)圖就會(huì)做得全面，邏輯性強(qiáng)，錯(cuò)誤率少，教師通過學(xué)生的思維導(dǎo)圖，就能了解學(xué)生掌握的情況。

在HTML5教學(xué)實(shí)踐中，為了評價(jià)學(xué)生的學(xué)習(xí)效果，制作了思維導(dǎo)圖質(zhì)量評價(jià)表，通過評分，可以掌握到學(xué)生的學(xué)習(xí)情況。

在小組協(xié)作的項(xiàng)目實(shí)訓(xùn)環(huán)節(jié)中，教師通過各組完成的思維導(dǎo)圖進(jìn)行評判，及時(shí)提出指導(dǎo)性意見。

7結(jié)束語

經(jīng)過教學(xué)實(shí)踐證明，應(yīng)用思維導(dǎo)圖在前端HTML5教學(xué)實(shí)踐中取得了良好的效果。對教師而言，掌握思維導(dǎo)圖進(jìn)行教學(xué)，教學(xué)銜接更為流暢，邏輯更為嚴(yán)謹(jǐn)，提高了上課效率，也優(yōu)化了老師對學(xué)生的評價(jià)。對學(xué)生而言，應(yīng)用思維導(dǎo)圖學(xué)習(xí)大大激發(fā)了學(xué)生的學(xué)習(xí)興趣，學(xué)生對知識(shí)的掌握更為系統(tǒng)、更為透徹，同時(shí)也培養(yǎng)了學(xué)生嚴(yán)謹(jǐn)?shù)倪壿嬎季S能力，將來不管在學(xué)習(xí)和工作中，這種能力給學(xué)生的影響是終身的。不單是HTML5這門課，很多前端的課程如JAVASCRIPT、uI設(shè)計(jì)、微信小程序制作等課程，應(yīng)用思維導(dǎo)圖進(jìn)行教與學(xué)，都將產(chǎn)生事半功倍的效率。