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

張怡芳

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

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

張怡芳

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

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

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

0 引 言

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

1 成長(zhǎng)型思維與固定型思維

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

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

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

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

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

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

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

3 項(xiàng)目實(shí)施過程與方法

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

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

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

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

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

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

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

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

4 結(jié) 語

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

浙江機(jī)電職業(yè)技術(shù)學(xué)院2015年教學(xué)改革建設(shè)類重點(diǎn)項(xiàng)目。

張怡芳，女，副教授，研究方向?yàn)楦呗毥逃?、網(wǎng)頁前端、CAD， yeeforn@163.com。