張怡芳

（浙江機電職業(yè)技術(shù)學(xué)院 信息技術(shù)系，浙江 杭州310053）

漸進式“Web前端設(shè)計”與成長型思維訓(xùn)練

張怡芳

（浙江機電職業(yè)技術(shù)學(xué)院 信息技術(shù)系，浙江 杭州310053）

根據(jù)高職學(xué)生特點分析成長型思維與固定思維的特點與不同，針對高職教育的現(xiàn)狀提出以漸進式的方式進行“Web前端設(shè)計”，說明“Web前端設(shè)計”課程教學(xué)的主要任務(wù)，闡述項目實施過程與方法。

Web前端設(shè)計；漸進式；響應(yīng)式網(wǎng)頁；成長型思維模式。

0 引 言

中國的高職教育正面臨著重大的變革。多數(shù)高職學(xué)生是固定型思維（Fixed Mindset），其特點是普遍缺少學(xué)習(xí)主動性，一旦遇到問題就很容易放棄努力；另一方面，課程內(nèi)容與實際應(yīng)用脫節(jié)較為嚴重；在教學(xué)過程中，課時安排較分散，講過的內(nèi)容往往不能及時鞏固；課程評價體系存在著問題，期末考試往往比例過重，造成學(xué)生平時不需要認真學(xué)習(xí)，依靠考前突擊應(yīng)付考試。因此，有必要將學(xué)生的固定型思維方式改變?yōu)槌砷L型思維方式（Growth Mindset），另一方面，采用能激勵學(xué)生學(xué)習(xí)主動性的教學(xué)手段，開發(fā)他們的大腦活動性，讓學(xué)生對所學(xué)的知識感興趣，同時能從學(xué)習(xí)中找到樂趣，提高信心，幫助學(xué)生找到自信。

1 成長型思維與固定型思維

斯坦福大學(xué)行為心理學(xué)教授Carol Dweck提出，帶有固定型思維模式（Fixed Mindset）的孩子，普遍認為自己的能力、天賦、智力等都已經(jīng)成型，不可改變，努力和斗爭只會讓他們感到自己很蠢；而成長型思維模式（Growth Mindset）的孩子則認為才能與智力是能夠通過努力而獲得提升的，因為他們努力克服困難能創(chuàng)造新的神經(jīng)元連接，能讓大腦越來越聰明?？茖W(xué)已經(jīng)證明，智商就如同肌肉一樣，是可以被發(fā)展的，每一次挑戰(zhàn)大腦舒適區(qū)（Comfort Zone）的極限去學(xué)習(xí)一些新的和有難度的東西，大腦神經(jīng)元就會發(fā)展出新的連接，長此以往，人會變得越來越聰明[1]。Carol Dweck經(jīng)過科學(xué)研究發(fā)現(xiàn)，成長型思維模式顯然是可以被教育和塑造的。擁有成長型思維的孩子做事不易放棄，能從過程中享受到樂趣，更容易尋求幫助，復(fù)原力更強，更加堅毅。他們會更在意自己從一件事中是否真正學(xué)到了東西，而不僅僅是能夠通過考試。常用正面的、積極的語言會影響到我們的思維習(xí)慣，這就是播種行為。固定型思維方式的孩子大腦不活躍，遇到困難和問題會逃避，例如考試不及格了下次就作弊，或者跟成績更差的孩子比較，以獲得滿足感。

當前，多數(shù)高職學(xué)生的特點是“Fixed Mindset”而不是“Growth Mindset”，這就意味著，學(xué)生認為自己不夠聰明，遇到困難問題就逃避。因此，我們在教學(xué)中，需要改變他們以往消極的想法，讓這部分學(xué)生動起來，訓(xùn)練他們的思維模式，使之從固定型思維變?yōu)槌砷L型思維。事實是，我們的學(xué)生多數(shù)是從小被打擊長大的，這就需要給他們更多的鼓勵，特別是在日常的學(xué)習(xí)生活中，在他們想要放棄時提醒他。當孩子在抱怨事情太難、學(xué)不會、搞不懂的時候，告訴他們，他們只是還不懂（Not Yet），讓他們相信，每一次挑戰(zhàn)大腦舒適區(qū)（Comfort Zone）的極限去學(xué)習(xí)一些新的、有難度的東西，努力并不斷挑戰(zhàn)難點，大腦神經(jīng)元就會發(fā)展出新的連接，能讓他們變得越來越聰明，因為聰明是能被教育和培養(yǎng)的。一旦學(xué)生通過自己的努力成功地克服了難題，這種滿足感會激發(fā)學(xué)生進一步努力并不斷自我暗示，其實就在悄悄地培養(yǎng)成長型思維，讓他們擁有Grit（堅韌，勇氣），逐步達到成長型思維方式大腦訓(xùn)練的目的。雖然，相對于Carol Dweck研究中的小學(xué)生來說，我們的學(xué)生年齡偏大了，但是只要他們真正了解到這一點，對于成長型思維的訓(xùn)練還是卓有成效的。

2 Web前端設(shè)計/開發(fā)課程的教學(xué)任務(wù)

以往學(xué)校計算機類專業(yè)網(wǎng)頁設(shè)計與制作課程教學(xué)采用了多種教改手段，例如使用 “三階段五任務(wù)”進行課程教學(xué)，“分層幫帶”的學(xué)生學(xué)習(xí)方式也達到了一定的成效，但由于各種原因，如班級人數(shù)較多，上課方式基本沿用傳統(tǒng)“上課2學(xué)時+上機2學(xué)時”方式，所采用的案例、項目不具備系統(tǒng)性，對于提高學(xué)生的實際網(wǎng)頁設(shè)計能力，提高學(xué)習(xí)的能動性與興趣的作用不明顯，制約了整體的教學(xué)效果[23]。Web前端設(shè)計/開發(fā)人才需求在近幾年非常緊俏，新技術(shù)的發(fā)展，平板電腦、智能手機不斷推陳出新，網(wǎng)頁出現(xiàn)在各類不同形狀大小終端上，使得網(wǎng)頁設(shè)計已經(jīng)完全不同于10年前那種傳統(tǒng)的內(nèi)容與形式。新的需求迫使各個高校特別是應(yīng)用型本科或者高職院校在網(wǎng)頁設(shè)計教學(xué)特別是Web前端開發(fā)中必須有所改變。

實際上，每個學(xué)生在學(xué)習(xí)過程中都希望心理滿足。對固定型思維的學(xué)生來說，學(xué)習(xí)的成就感尤其重要，如何讓這些學(xué)生有滿足感，課程內(nèi)容與授課方式很關(guān)鍵。由于網(wǎng)頁設(shè)計的特點是“所見即所得”，學(xué)生做的努力直接可以體現(xiàn)在他們的作品，這就非常合適于成長型思維訓(xùn)練的課程教學(xué)。

因此，我們提出，Web前端設(shè)計作為計算機類重要的專業(yè)基礎(chǔ)課之一，不僅僅是傳統(tǒng)的網(wǎng)頁設(shè)計與制作課程，而應(yīng)是漸進式的“Web前端設(shè)計”，以漸進式的網(wǎng)頁案例項目為設(shè)計載體，將Web前端設(shè)計中所涉及的HTML+CSS網(wǎng)頁設(shè)計、JavaScript網(wǎng)頁特效以及Photoshop圖形圖像處理糅合在一起，以完成真實實用網(wǎng)站建設(shè)項目為最終目標，除了必備的HTML、CSS樣式等基礎(chǔ)知識外，還包括HTM5、CSS3、JavaScript特效等當前前端開發(fā)的主流技術(shù)基礎(chǔ)，如果課時允許的話，還將涉及JQuery等，最終設(shè)計完成相對復(fù)雜、實用、美觀的前端綜合性網(wǎng)頁，同時也為后續(xù)課程 Web應(yīng)用系統(tǒng)設(shè)計與開發(fā)、軟件項目設(shè)計實訓(xùn)等課程提供了專業(yè)基礎(chǔ)保障。

這種方式，打破了傳統(tǒng)的網(wǎng)頁設(shè)計與制作、圖形圖像處理等課程各自為政的教學(xué)模式，將網(wǎng)頁前端設(shè)計中所涉及的專業(yè)基礎(chǔ)知識糅合在一起，通過“漸進式”的案例項目教學(xué)，變學(xué)生被動聽課為學(xué)生在“做”中“學(xué)”，改變學(xué)生被動學(xué)習(xí)的現(xiàn)狀，通過學(xué)生不斷地攻克難點而獲得滿足感，一方面達到學(xué)即能用的教學(xué)效果，另一方面又訓(xùn)練了學(xué)生的成長型思維，這在當今的高職專業(yè)教育中有著非常現(xiàn)實的意義。

3 項目實施過程與方法

實施中，我們將大項目分解為若干子項目，引導(dǎo)學(xué)生學(xué)習(xí)，并在課程學(xué)習(xí)過程中逐步完成各個子項目，項目復(fù)雜度、難度螺旋式上升，最后將各個子項目綜合整合到大項目中，達到循序漸進的教學(xué)目的。課堂教學(xué)中，取消原來的“教室上課+機房上機”模式，改為采用“教學(xué)練一體化”的項目化教學(xué)方式，根據(jù)精心準備的教學(xué)案例與項目，在相對集中的時間段內(nèi)，完成課程教學(xué)活動，教師僅僅講述最重要的必要步驟與內(nèi)容，讓學(xué)生帶著問題完成任務(wù)；強化過程與實踐的考核，督促學(xué)生改被動學(xué)習(xí)為主動學(xué)習(xí)，讓學(xué)生成為學(xué)習(xí)的主體；學(xué)生完成學(xué)習(xí)任務(wù)后，能夠設(shè)計中等復(fù)雜程度的網(wǎng)頁前端頁面集合（網(wǎng)站）。同時，課程的綜合項目以完成當前實際的中小型企業(yè)網(wǎng)站為要求，增強學(xué)生的學(xué)習(xí)成就感，鍛煉學(xué)生解決問題的能力，做到教學(xué)與實際應(yīng)用無縫接軌。

學(xué)生不只在大一進行課程學(xué)習(xí)，而是通過學(xué)生自身更深入的學(xué)習(xí)實踐，將項目延續(xù)到大三階段，學(xué)生最終能針對實際企業(yè)網(wǎng)站的Web前端需求，解決Web前端開發(fā)的問題，并可作為畢業(yè)設(shè)計作品，應(yīng)用于企業(yè)實際。對于多數(shù)需要從固定思維模式轉(zhuǎn)換到成長型思維模式的學(xué)生來說，我們需要打破傳統(tǒng)的一條線評價體系，將學(xué)生的進步（Improvement）量也作為重要的評價內(nèi)容。一旦這部分能夠最終完成一個大家滿意的網(wǎng)頁前端，具有一定的實用性，則學(xué)生的畢業(yè)設(shè)計就視為合格，而不一定是傳統(tǒng)的程序設(shè)計作品等。

我們在完成了前期調(diào)研與項目組集中研討完成課程案例與項目的設(shè)計后，已經(jīng)于2015學(xué)年的第二學(xué)期開始試行每周4～8學(xué)時的集中時段式“教學(xué)練一體”課程教學(xué)方式，將“漸進式 ”內(nèi)容逐步實施于課程教學(xué)中。目前已經(jīng)實施的班級有信管2015級學(xué)生以及物聯(lián)中美班2014級學(xué)生，他們通過一個學(xué)期的學(xué)習(xí)掌握了網(wǎng)頁HTML基礎(chǔ)、簡單特效、響應(yīng)式網(wǎng)頁設(shè)計方法等。同時，他們完成了兩個大型的網(wǎng)站項目：（響應(yīng)式）企業(yè)網(wǎng)站的模仿及創(chuàng)新式網(wǎng)頁設(shè)計項目，教學(xué)效果明顯。

目前，學(xué)校在Web前端設(shè)計的實際教學(xué)過程中，可以根據(jù)不同的專業(yè)調(diào)整課時。例如網(wǎng)絡(luò)專業(yè)的學(xué)時數(shù)相對較多，而信管相對少一些。另外，中美合作物聯(lián)班課時相對集中，具體見表1。

表1 漸進式Web前端設(shè)計

從表1中可以看出，信管專業(yè)分兩個學(xué)期學(xué)習(xí)該課程：56學(xué)時的Web前端設(shè)計基礎(chǔ)（HTML+CSS+響應(yīng)式設(shè)計）學(xué)習(xí)，30學(xué)時的集中綜合實訓(xùn)，可以進一步加入JavaScript特效、CSS3、HTML5等。網(wǎng)絡(luò)專業(yè)分3個學(xué)期學(xué)習(xí)該課程：分別完成50學(xué)時的Web前端設(shè)計基礎(chǔ)、50學(xué)時的響應(yīng)式設(shè)計CSS3、HTML5等，30學(xué)時的綜合實訓(xùn)可以加入JavaScript特效甚至JQuery特效等。學(xué)時相對少的物聯(lián)2014班級，則在一個學(xué)期中完成65學(xué)時（HTML+CSS +響應(yīng)式網(wǎng)頁+JavaScript）的 Web前端設(shè)計。

教學(xué)所使用的綜合性項目，一種為需要一模一樣模仿的案例，基本都是當前實際網(wǎng)站的前端網(wǎng)頁；另一種為創(chuàng)意型綜合設(shè)計項目，要求學(xué)生不得與現(xiàn)有的網(wǎng)站重復(fù)。前者主要訓(xùn)練學(xué)生對所學(xué)知識的鞏固，而后者則訓(xùn)練學(xué)生的創(chuàng)新性思維，學(xué)生通過尋找滿足感得到成長型思維模式的訓(xùn)練。學(xué)生在完成作品時，因為直接對接當前網(wǎng)頁前端，所見即所得，他們很有成就感，也找到了學(xué)習(xí)的樂趣，通過這種漸進式的課程學(xué)習(xí)安排，學(xué)生的學(xué)習(xí)效率大大提高，同樣的學(xué)時數(shù)，就可能達到以往需要兩倍學(xué)時的效果，教學(xué)效果令人滿意。在期末，課程組還通過教研活動，讓師生共同討論教學(xué)模式的經(jīng)驗與教訓(xùn)，根據(jù)學(xué)生反饋結(jié)果，及時調(diào)整教學(xué)內(nèi)容與方式，對項目內(nèi)容及其方案設(shè)計進行優(yōu)化。本學(xué)期，本系列課程繼續(xù)進行中，師生雙方都評價良好。

后續(xù)我們將根據(jù)優(yōu)化的教學(xué)項目內(nèi)容及其方案繼續(xù)實施課題提出的教學(xué)模式，并逐步形成系統(tǒng)性的“漸進式”項目化教學(xué)在Web前端設(shè)計課程中的實踐模式，進一步完善項目內(nèi)容，逐步完善一系列課程教學(xué)文檔、評價與考核方式等。

4 結(jié) 語

我們通過漸進式的課程內(nèi)容設(shè)置，讓學(xué)生在學(xué)習(xí)中得到滿足感，同時鍛煉他們的成長型思維。一種良好的高職教育制度，可以從本質(zhì)上解決高職教育中存在相關(guān)問題， 而在一個良好的制度下產(chǎn)生的教學(xué)方法，才能最大限度保證教學(xué)質(zhì)量。成長型思維的訓(xùn)練，不僅能讓學(xué)生提高自我學(xué)習(xí)和自我提高的能力，更能提高職業(yè)素養(yǎng)，對于學(xué)生是受益終身的，這也是我們教育的目的。

[1] Wikipedia. Mindset[EB/OL]. [2016-11-01]. https：//en.wikipedia.org/wiki/Mindset#Fixed_mindset_and_growth_mindset.

[2] Zhang Y F, Yang B W. A mode of ability-targeted computer curriculum reform based on projects in engineering education[EB/OL]. [2016-12-20]. http：//ieeexplore.ieee.org/document/6028606/.

[3] Zhang Y F, Yang B W. A method of 3-tier group-study in higher vocational education[EB/OL]. [2016-12-20]. http：//ieeexplore.ieee. org/document/6295421/.

（編輯：孫怡銘）

1672-5913(2017)03-0084-04

G642

浙江機電職業(yè)技術(shù)學(xué)院2015年教學(xué)改革建設(shè)類重點項目。

張怡芳，女，副教授，研究方向為高職教育、網(wǎng)頁前端、CAD， yeeforn@163.com。