渐进式“Web前端设计”与成长型思维训练

张怡芳

（浙江机电职业技术学院 信息技术系，浙江 杭州310053）

渐进式“Web前端设计”与成长型思维训练

张怡芳

（浙江机电职业技术学院 信息技术系，浙江 杭州310053）

根据高职学生特点分析成长型思维与固定思维的特点与不同，针对高职教育的现状提出以渐进式的方式进行“Web前端设计”，说明“Web前端设计”课程教学的主要任务，阐述项目实施过程与方法。

Web前端设计；渐进式；响应式网页；成长型思维模式。

0 引 言

中国的高职教育正面临着重大的变革。多数高职学生是固定型思维（Fixed Mindset），其特点是普遍缺少学习主动性，一旦遇到问题就很容易放弃努力；另一方面，课程内容与实际应用脱节较为严重；在教学过程中，课时安排较分散，讲过的内容往往不能及时巩固；课程评价体系存在着问题，期末考试往往比例过重，造成学生平时不需要认真学习，依靠考前突击应付考试。因此，有必要将学生的固定型思维方式改变为成长型思维方式（Growth Mindset），另一方面，采用能激励学生学习主动性的教学手段，开发他们的大脑活动性，让学生对所学的知识感兴趣，同时能从学习中找到乐趣，提高信心，帮助学生找到自信。

1 成长型思维与固定型思维

斯坦福大学行为心理学教授Carol Dweck提出，带有固定型思维模式（Fixed Mindset）的孩子，普遍认为自己的能力、天赋、智力等都已经成型，不可改变，努力和斗争只会让他们感到自己很蠢；而成长型思维模式（Growth Mindset）的孩子则认为才能与智力是能够通过努力而获得提升的，因为他们努力克服困难能创造新的神经元连接，能让大脑越来越聪明。科学已经证明，智商就如同肌肉一样，是可以被发展的，每一次挑战大脑舒适区（Comfort Zone）的极限去学习一些新的和有难度的东西，大脑神经元就会发展出新的连接，长此以往，人会变得越来越聪明[1]。Carol Dweck经过科学研究发现，成长型思维模式显然是可以被教育和塑造的。拥有成长型思维的孩子做事不易放弃，能从过程中享受到乐趣，更容易寻求帮助，复原力更强，更加坚毅。他们会更在意自己从一件事中是否真正学到了东西，而不仅仅是能够通过考试。常用正面的、积极的语言会影响到我们的思维习惯，这就是播种行为。固定型思维方式的孩子大脑不活跃，遇到困难和问题会逃避，例如考试不及格了下次就作弊，或者跟成绩更差的孩子比较，以获得满足感。

当前，多数高职学生的特点是“Fixed Mindset”而不是“Growth Mindset”，这就意味着，学生认为自己不够聪明，遇到困难问题就逃避。因此，我们在教学中，需要改变他们以往消极的想法，让这部分学生动起来，训练他们的思维模式，使之从固定型思维变为成长型思维。事实是，我们的学生多数是从小被打击长大的，这就需要给他们更多的鼓励，特别是在日常的学习生活中，在他们想要放弃时提醒他。当孩子在抱怨事情太难、学不会、搞不懂的时候，告诉他们，他们只是还不懂（Not Yet），让他们相信，每一次挑战大脑舒适区（Comfort Zone）的极限去学习一些新的、有难度的东西，努力并不断挑战难点，大脑神经元就会发展出新的连接，能让他们变得越来越聪明，因为聪明是能被教育和培养的。一旦学生通过自己的努力成功地克服了难题，这种满足感会激发学生进一步努力并不断自我暗示，其实就在悄悄地培养成长型思维，让他们拥有Grit（坚韧，勇气），逐步达到成长型思维方式大脑训练的目的。虽然，相对于Carol Dweck研究中的小学生来说，我们的学生年龄偏大了，但是只要他们真正了解到这一点，对于成长型思维的训练还是卓有成效的。

2 Web前端设计/开发课程的教学任务

以往学校计算机类专业网页设计与制作课程教学采用了多种教改手段，例如使用 “三阶段五任务”进行课程教学，“分层帮带”的学生学习方式也达到了一定的成效，但由于各种原因，如班级人数较多，上课方式基本沿用传统“上课2学时+上机2学时”方式，所采用的案例、项目不具备系统性，对于提高学生的实际网页设计能力，提高学习的能动性与兴趣的作用不明显，制约了整体的教学效果[23]。Web前端设计/开发人才需求在近几年非常紧俏，新技术的发展，平板电脑、智能手机不断推陈出新，网页出现在各类不同形状大小终端上，使得网页设计已经完全不同于10年前那种传统的内容与形式。新的需求迫使各个高校特别是应用型本科或者高职院校在网页设计教学特别是Web前端开发中必须有所改变。

实际上，每个学生在学习过程中都希望心理满足。对固定型思维的学生来说，学习的成就感尤其重要，如何让这些学生有满足感，课程内容与授课方式很关键。由于网页设计的特点是“所见即所得”，学生做的努力直接可以体现在他们的作品，这就非常合适于成长型思维训练的课程教学。

因此，我们提出，Web前端设计作为计算机类重要的专业基础课之一，不仅仅是传统的网页设计与制作课程，而应是渐进式的“Web前端设计”，以渐进式的网页案例项目为设计载体，将Web前端设计中所涉及的HTML+CSS网页设计、JavaScript网页特效以及Photoshop图形图像处理糅合在一起，以完成真实实用网站建设项目为最终目标，除了必备的HTML、CSS样式等基础知识外，还包括HTM5、CSS3、JavaScript特效等当前前端开发的主流技术基础，如果课时允许的话，还将涉及JQuery等，最终设计完成相对复杂、实用、美观的前端综合性网页，同时也为后续课程 Web应用系统设计与开发、软件项目设计实训等课程提供了专业基础保障。

这种方式，打破了传统的网页设计与制作、图形图像处理等课程各自为政的教学模式，将网页前端设计中所涉及的专业基础知识糅合在一起，通过“渐进式”的案例项目教学，变学生被动听课为学生在“做”中“学”，改变学生被动学习的现状，通过学生不断地攻克难点而获得满足感，一方面达到学即能用的教学效果，另一方面又训练了学生的成长型思维，这在当今的高职专业教育中有着非常现实的意义。

3 项目实施过程与方法

实施中，我们将大项目分解为若干子项目，引导学生学习，并在课程学习过程中逐步完成各个子项目，项目复杂度、难度螺旋式上升，最后将各个子项目综合整合到大项目中，达到循序渐进的教学目的。课堂教学中，取消原来的“教室上课+机房上机”模式，改为采用“教学练一体化”的项目化教学方式，根据精心准备的教学案例与项目，在相对集中的时间段内，完成课程教学活动，教师仅仅讲述最重要的必要步骤与内容，让学生带着问题完成任务；强化过程与实践的考核，督促学生改被动学习为主动学习，让学生成为学习的主体；学生完成学习任务后，能够设计中等复杂程度的网页前端页面集合（网站）。同时，课程的综合项目以完成当前实际的中小型企业网站为要求，增强学生的学习成就感，锻炼学生解决问题的能力，做到教学与实际应用无缝接轨。

学生不只在大一进行课程学习，而是通过学生自身更深入的学习实践，将项目延续到大三阶段，学生最终能针对实际企业网站的Web前端需求，解决Web前端开发的问题，并可作为毕业设计作品，应用于企业实际。对于多数需要从固定思维模式转换到成长型思维模式的学生来说，我们需要打破传统的一条线评价体系，将学生的进步（Improvement）量也作为重要的评价内容。一旦这部分能够最终完成一个大家满意的网页前端，具有一定的实用性，则学生的毕业设计就视为合格，而不一定是传统的程序设计作品等。

我们在完成了前期调研与项目组集中研讨完成课程案例与项目的设计后，已经于2015学年的第二学期开始试行每周4～8学时的集中时段式“教学练一体”课程教学方式，将“渐进式 ”内容逐步实施于课程教学中。目前已经实施的班级有信管2015级学生以及物联中美班2014级学生，他们通过一个学期的学习掌握了网页HTML基础、简单特效、响应式网页设计方法等。同时，他们完成了两个大型的网站项目：（响应式）企业网站的模仿及创新式网页设计项目，教学效果明显。

目前，学校在Web前端设计的实际教学过程中，可以根据不同的专业调整课时。例如网络专业的学时数相对较多，而信管相对少一些。另外，中美合作物联班课时相对集中，具体见表1。

表1 渐进式Web前端设计

从表1中可以看出，信管专业分两个学期学习该课程：56学时的Web前端设计基础（HTML+CSS+响应式设计）学习，30学时的集中综合实训，可以进一步加入JavaScript特效、CSS3、HTML5等。网络专业分3个学期学习该课程：分别完成50学时的Web前端设计基础、50学时的响应式设计CSS3、HTML5等，30学时的综合实训可以加入JavaScript特效甚至JQuery特效等。学时相对少的物联2014班级，则在一个学期中完成65学时（HTML+CSS +响应式网页+JavaScript）的 Web前端设计。

教学所使用的综合性项目，一种为需要一模一样模仿的案例，基本都是当前实际网站的前端网页；另一种为创意型综合设计项目，要求学生不得与现有的网站重复。前者主要训练学生对所学知识的巩固，而后者则训练学生的创新性思维，学生通过寻找满足感得到成长型思维模式的训练。学生在完成作品时，因为直接对接当前网页前端，所见即所得，他们很有成就感，也找到了学习的乐趣，通过这种渐进式的课程学习安排，学生的学习效率大大提高，同样的学时数，就可能达到以往需要两倍学时的效果，教学效果令人满意。在期末，课程组还通过教研活动，让师生共同讨论教学模式的经验与教训，根据学生反馈结果，及时调整教学内容与方式，对项目内容及其方案设计进行优化。本学期，本系列课程继续进行中，师生双方都评价良好。

后续我们将根据优化的教学项目内容及其方案继续实施课题提出的教学模式，并逐步形成系统性的“渐进式”项目化教学在Web前端设计课程中的实践模式，进一步完善项目内容，逐步完善一系列课程教学文档、评价与考核方式等。

4 结 语

我们通过渐进式的课程内容设置，让学生在学习中得到满足感，同时锻炼他们的成长型思维。一种良好的高职教育制度，可以从本质上解决高职教育中存在相关问题， 而在一个良好的制度下产生的教学方法，才能最大限度保证教学质量。成长型思维的训练，不仅能让学生提高自我学习和自我提高的能力，更能提高职业素养，对于学生是受益终身的，这也是我们教育的目的。

[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

浙江机电职业技术学院2015年教学改革建设类重点项目。

张怡芳，女，副教授，研究方向为高职教育、网页前端、CAD， yeeforn@163.com。