项目式教学在《网页设计与制作》课程中的探索与实践

段珊珊

摘要：高职教学中项目是课程知识点的载体，针对我校软件技术专业学生的实际情况，在《网页设计与制作》课程教学中以真实项目为教学项目;关注项目中所需要的知识点;激发学习的学习主动性进行课程教学改革与探索，提高了教学质量培养了学生解决问题的能力。

关键词：项目化教学;课程改革;网页设计;学习成就感

中图分类号：G642 文献标识码：A

文章编号：1009-3044（2020）15-0148-03

1引言

项目式教学一直是高职教学中广泛采用的行之有效的教学方式，教学项目的选取、来源与教学项目是否应对了当下毕业生的能力需求关乎了教学的成功与失败。《网页设计与制作》这门课程是信电工程学院软件技术专业的二年级学生第一学期的重要的专业核心基础课程，其目的是通过课程的学习掌握网页设计的制作，掌握HTML5.0语言、CSS样式、掌握网页的基本架构与设计与常用的动态脚本，是前端设计的专业基础课程。通过对软件专业历届的学生的调查和授课老师的总结，该课程教学效果不理想，主要原因是：课程教学基于知识点，知识点零碎繁多，教师授课过程中采用基于知识点的案例教学，学生学习了很多的案例，但是茫然不知道如何应用这些知识，就好像认识了很多的汉字但是也不会写出好的作文是一样的道理，学生学习缺少成就感，疑惑这样做的简单的网页没有用处，容易失去学习的热情。为了提高教学质量让学生学到有用的技能，我在软件2017级和2018级学生中采用真实项目进行教学实践与探索。

2教学实践与探索

2.1高屋建瓴，思维先行

思维领导行动，我的思路是在教学中并不着急讲解技术，而是首先要分析网站结构，培养学生的思维意识。什么是一个网站项目？这个项目应该由哪些要素组成？在上这门课之前学生可能没这个意识，以前上网就是单纯的上网，从上这门课开始我就要求上网时候多做一件事，就是要求学生注意每次浏览网页的时候注意网页的布局如LOGO，导航，轮播图，那些是固定不动的（固定定位），固定不动的元素放在那个位置;哪些是动态的，如倒计时，TAB切换，导航;注意不同类型网页的色彩搭配;注意网页的图片与文字的关系。有意识地让学生带着这些问题去浏览网页，这些思维贯穿教学的始终，处处皆学问，浏览网页时稍微用心，学生就对网页的结构，色彩，布局有所了解，增强了学生观察能力和分类总结的能力。

2.2技术够用，围绕项目的需求

《网页设计与制作》这门课程H5标签众多，我们选用的教材也多是按照标签的顺序来讲，即便是项目式的教材也是如此。我在上课的时候给学生提出的要求是先学会做一个简单的网页，熟练掌握网页的结构。教学的第一个项目是学生最熟悉“我的校园”一个页面的设计，这个网页就是由上面LOGO+导航构成，中间有内容区，内容区分为标题正文和图片，下部版权所有的相关信息三个部分组成，页面布局如图2.1所示：

图1是网页中常用的上中下的布局，上中下通栏式的设计，版心居中（中间点画线区为版心区，下同），而logo区、导航栏和FOOTER部分的背景色往往是占据浏览器的从左到右占据整个宽度，教学一开始我们就以此布局图为例来讲解项目，并没有遵循教材的顺序先讲解标签后讲样式，而是项目需要什么我们就讲什么。所用到的标签有div（布局用），h1-h5标题，p正文，img图像，a超链接用来布局导航;所用到的样式有内部样式style，背景颜色background_color，margin边距。

教学的知识点的选取紧紧围绕教学项目的需要，重点讲项目需要的，实际工作中很少用到的建议学生自学。所以在教学中我们并没有遵循教材的顺序，比如内联式样式往往是安排在教材的中部之后，在这之前用到的样式都是嵌入式样式，而我在教学中第一个教学项目就用到了内联式样式忽略了嵌入式样式，是因为内联式样式遵循了内容与样式分离的原则在实际的工作中更需要，而嵌人式样式只有在很少的情况下才用到。所以我在上课的过程基本上只关注工作中学生会用什么，很少用的地方或者不会用的知识点学生可以自己在课外了解。

再如之前的教学采用的软件式是传统的可见即可得的dreamweaver 6.0，从17级学生教学我采用的软件式HBUILD-ERX，是因为在专业调研时我们了解到在实际的工作环境中从来不用dreamweaver 6.0，为了对接工作需求让学生在毕业后快速使用工作环境我们更换为HBUILDERX要求学生在智能提示下自己写代码。根据学生在学习的过程中的反馈，这样的直接奔着目标去學习也最容易有学习成效。

2.3遵循认知规律，项目先易后难

教学我们选定的第二个进阶的项目是来自互联网上真实存在的“鲜花销售网站”，由老师带领学生对该网站的网页分析制作模仿，对学生进行技能与素养的训练。

“鲜花销售网站”主要有三个页面，主页，商品详情页和注册登录页面，下面展示的主页的结构图，这个项目的主页由上部区域，中间内容分为左右两栏，下面FOOTER部分组成;除了中间部分比第一个项目复杂之外，页面右下角采用了固定定位导航，在商品的展示页面由于需要打热卖等标签还用到了相对定位和绝对定位的混合使用;限时抢购和动态轮播图用到了_a_vascript脚本。所以比第一个项目增加了很多的难度。鲜花销售网站主页结构如图2所示：

“鲜花销售网站”详情页是我们惯常看到的商品页面图，上面有一个大图，下面有四张小图，单击大图时候右侧会出现放大镜，这个效果要用脚本实现，右侧的技术难点是出现了三个TAB切换项，详情，用户评价和购物保障，当选择对应的TAB时候，下面的区域显示对应的内容。商品详情页结构如图2.3所示：

2.4把握方向，增强学生的学习成就感

我们可以看到“鲜花销售网站”项目中的主页和详情页我们在网上经常看到的网页都是这样的，学生只要学会设计这两个网页那么前端的技术学生已经基本达到了够用的原则。在教学中我把握了一个方向，网页的基本结构学生是一定要掌握的，在此基础上也就是项目的有效性，商品网站是什么样的我们就学着做什么样的。对于众多的学生而言做出来的项目能够和商品网站中的很类似学生就很有信心和成就感。

“网页设计与制作课程”涉及的技术繁多，真实的商业网站一定少不了优秀的脚本，网页中用到的脚本技术，网页的特效，这些方向有很多，但是我们只关注了一个方向，就是常见到的网站中用到的脚本技术。简单的脚本要求学生能写会改，比如网页中用到的TAB切换项，倒计时，商品数量的增减;难度大的脚本基本要求在会用的基础上争取能改比如“商品详情”页面中的放大镜。放大镜的脚本对初学者很有难度，我是把放大镜的脚本发给学生带领学生看懂会用，学有余力的学生则在能看懂的基础上能进行修改，能修改的学生则就有了创新，刚刚结束的这学期课程中就有学生对放大镜的代码做了改进。总之教学过程中要把握当下学生需要掌握什么技术，围绕这些技术进行项目化的组织教学。

2.5激发学生的学习主动性

高职生的生源中每个班总有三五个同学学习非常具有主动性，当然也有个别同学家中有矿，上学只是过来经历一下，大多数同学还是想学一门技能到毕业走到社会上时可以傍身，同学们多有学习的愿望;拥有学习的愿望但是在学习的过程中每个人的情况都不同，加上班级氛围的影响并不是每个同学都能取得理想的学习效果。要让学生主动学，要有技巧来激发学生学习的主动性。在教学改革中我们主要通过以下手段来激发学生学习的积极性。

1）高屋建瓴，明确学习目的

教学很重要的是让学生明白通过课程的学习达到什么样的教学目的，做到心中有数。教学的第一次课我就把教学项目展示给学生看，同時把学长的作业展示给学生看，让学生清楚知道这门课程学完之后自己可以做什么能够做到什么样子。增强学生的学习的信心与学习兴趣。

2）肯定学生的学习能力。

每一个阶段性的学习项目验收时充分肯定学生的学习成果;总绪性项目验收时邀请优秀的学生在全班同学面前展示并汇报自己的项目，锻炼学生的表达能力;总结性项目总评时候邀请课题组所有老师做评委进行点评，这样可以让学生对课程足够重视，为了获得教师同学的认可与对自己的肯等会付出更多的努力，另一方面模拟了毕业答辩得到多一次的历练。

2）学业帮扶拓展学生的思维

我们学院历来有一个学业的帮扶活动，就是选择上一届课程优秀的同学做助教在晚自习时帮助下一届的同学辅导作业，众所周知能做出来和能讲出来有很大的差距，通过指导低年级同学的作业，部分的学生得到了思维上的锻炼，表达能力的锻炼也扩大了自己的交友面。

4）以赛促学

学院通过社团把有强烈学习愿望和学习主动性学习技术的学生组织起来，依托信电工程学院所有的老师进行辅导，社团每学期在全院范围内组织网页设计与制作大赛。大赛虽然只是校级别小但学生也积极参与，赛项每年赛出的作品也使学生可以看到自己的差距，每一次前进也都增强了学生的学习的信心与动力。

3总结

我们在2017级与2018级软件专业学生的《网页设计与制作》课程中采用了项目化教学实践，第一采用真实的商业项目作为载体把知识点串起来，提高教学的有效性;第二是精简知识点，关注真实项目中用的频率高的知识点，提高教学效率;第三，用有效的方法激发学生的学习主动性。增强学生的信心与学习成就感，相对于传统以内容技术为主知识结构的案例式教学方法教学质量得到了很大的提高。