关键词：JavaScript 网页游戏 设计制作
中图分类号：TP393.092 文献标识码：A 文章编号：1007-9416（2015）12-0000-00
伴随时展、科技进步，以计算机为基础、互联网络为支撑的信息化技术已经成为了当今时代中的主要因素，不但给人类的生活形态与精神面貌带来了较大的转变，最重要的是在很大程度上改变了人们的生存方式，使人类拥有了另一种生存的可能，同时由于它的发展，也催生了游戏方面的变革，尤其是“网游”的出现，俘获了千万颗童心未泯的心，其利弊得失是当今颇受争议的问题。然而，还是应该对于这一项技术加以关注，对基于JavaScript的网页游戏的设计与制作进行分析研究。
1 概述
网页游戏通过浏览器实现无端网游，只需拥有一根网线、一台电脑即可实现无客户端下载的Web游戏。其最大优势在于程序设计者完全能够一面进行设计、一面进行调整、修改、补充工作。因其系统可以为操作人员提供一个人机交互的界面，从而采用问答的方式，在接收信息后，进行处理，这种在系统――操作者间的交互式处理方式，主要是进行交互作用的信息处理。相对而言，其直观性、可控性与灵活度有了很大的提升，是非交互式处理无法完成的优势所在，依目前发展情况来看，其普遍性在增加，应用范围在逐步扩大，而且备受广大用户喜爱，免除了来自于单道任务所带来的诸多效率问题，因而当操作者较慢的时候，它却可以进行其他任务的处理，节省了时间，使资源得到了充分利用，并且提高了计算机的工作效率。在结合工作方面，将分时处理、交互式处理两种处理方式有效结合起来，不但可以使多个用户进行同时对话；还可以与批处理方式结合起来；在每种结合方式中，都可体现出其独特的优势与特征，而且应用起来也比较方便。
2 开发工具和设计构思分析
2.1 JavaScript
HTML技术用来制作网页，而JavaScript即是通过其自身作为脚本语言的功能对其网页进行功能添加，主要集中于动态功能方面，从而达到命名用户的操作得到响应的效果。其最大特点即是，当其源代码发送至客户端，尤其是在运行之前，没有必要进行任何过程的编译处理，通常来讲，主要是把文本格式中的字符代码发往浏览器，然而让浏览器独自进行解释性运行。由于它是动态、弱类型、基于原型的语言，内置支持类，所以在安全性方面，相对较差，其联系程度较高，独立性不强，因而如果出现一条无法运行的情况时，便会出现其下的语言也不能继续运作，从该方面来看，解译次数有时会偏多，所以，速度慢是其最大缺点。另一方面，作为编译语言，Java的源代码却需要编译，才能传递到客户端运行，因此，就需要搭建起一个平台，使解释器、仿真器，将特定的编译代码加以适度化的约束，以此来达到安全可靠的保障作用。
2.2 CSS
层叠样式表或级联样式表，全称为Cascading Style Sheet，简称CSS.其作用在于对浏览网页进行控制，主要是通过一组格式设置规则加以实现，也就是通过CSS来达到这一目标。功能在于分离页面中的形式与内容，使二者可以独立存放于HTML文档之中。这样，有助于将维护站点的外观变得更加简便，也可以简化HTML文档代码，减少浏览器在加载过程中的时间。从CSS的特征分析，在修改页面方面易于实施，压缩网页体积，同时还能保持页面风格的完全统一。从其功能与作用的价值看，可降低成本，增加工作效率，因为它可以同时管理多个页面，并且根据保存方式，又可以通过改变CSS文档，达到从外部样式到站点中页面的格局的充化。也就是说，对于样式的更新，即可以将网站中的全部元素加以更新。
3 网页游戏设计及制作流程
3.1 游戏背景、素材及举设计举例
根据要上的说明可知游戏需要其可玩性、效果性，所以，先应该以层叠式样表对将要完成的游戏所给定的各要素片理好，做了版面的整理工作，比如，游戏元素的图像选择以及整理工作等。另一方面，游戏素材应该能够透过它来实现一定的吸引人注意的效果。一般而言，除了网站中的撷取，还应该进行PS处理、自绘画等。
举例，为了明白起见，以下以“打地老鼠”为具体的说明，呈现出交互式网页游戏的设计方法。首先，需通过鼠标，完成每一个操作，规则之一，即是不能击打那些白色的地老鼠，打击一次，会让玩家丢一次命。其次，设置一些带有炸弹的地老鼠，分别将其放置在游戏屏幕的左右两边，需对其进行不断打击，否则，即会发生爆炸，当爆炸发生后，也会损失一次命。第三，为玩家设置三次性命，全部丢掉即算GAME OVER。最后，在界面显示出玩家的最终成绩，即打死地老鼠的最终个数。而且在该界面继续显示开始或结束的选项，供玩家选择。该游戏的基础在于地老鼠的出现，需要有相应的控制方法，以使其可以随机在屏幕中出现，其实质即是地老鼠对应元素出现的高度伴随情况之出现。在击打地老鼠时，需要先将选中，再进行鼠标点击即可。
以“打地老鼠”为例，其中需要四种办法达到对地老鼠出现的控制。第一种方法是randomBunny（）函数，第二种方法 是bunnyJumpl（）函数，第三种方法是bunnyJump2（）函数，第四种方法是bunnyJump3（）函数。第一个主要是用来控制地老鼠的随机出现，而对于其它的三种方法，则可依次表述为对于各类伴随情况出现的控制。对于击打，需要通JavaScript中的两个函数来完成，分别是其中的onmousedown/onclick，其交互作用发生在击打地老鼠之时，两个函数在不同的时间发生，前者发生于点击时的事件发生，而后者是点击后放开时事件发生。具体来讲，若要击打到地老鼠，先应该有一个函数，也就是说，clientX，，clientY，getPosition，通过后面的数，即可得到对应的元素的横向与纵向坐标，当地老鼠处于所要打击的坐标范围内，即会被鼠标的点击所打中，也就是说，利用规范与判定来达到所需要的结果。上面未提到的白色地老鼠无需打击以及其他条件及要求，都需要对应的功能来实现。
当出现白色地老鼠与带有炸弹时，便会失去生命，因此，需要根据这一条件设定一个lostlife的函数，其主题简单，在判别条件的设置时，只需要调动该函数，使其值与发生丢失生命值相合即合，也就是说，令lives.lostlife=1，当其不为空值时，执行的是live.lostlife++，当判断live.lostlife>=3时，即可调用函数endgame（）去终止游戏，此时计时停止，等级信息、分数等一一输出到游戏界面。在开始与结束的菜单上，还需要设置两个不同的按钮，分别通过相应的函数进行设置。其中的基本原理是相通的，而且对于各种功能设置及处理方式区别也不是很大，主要是以对应元素与所需功能间的规范化与控制来达到最终所要达到的效果。
除了这些功能设置外，还需要对整个游戏进行相应的控制。其主要内容即是通常玩家可以看到的时间与升级问题，在此中，需要通过计时条、计时条时间被控制来达到。比如，在计时条中，resumlevel（）控制，可以将计时条透明性、计时性进行相应规定，还可以利用计时条的滚动进行提与计时时间控制，这里就需要另一个函数leaveup（）来完成，当这走完时，即可将其设计到升级条件之下，升级的根据也就是地老鼠所停留的时间的长短、数量等。
3.2 演示及测试
首先，安装网页浏览器，以上面所说的“打地老鼠”网页游戏可知，不同的ID可以对不同的地老鼠进行控制，而每个对象的出现都是随机的，当击中白色掉一条命，当击不中带有炸弹者，发生爆炸，也会掉一条命。在演示与测试过程中，可以通过调试功能，对图片的变换进行闪烁界定即可。
3.3 标准及要求
在基于JavaScript的网页游戏的设计与制作中，需要对JavaScript客户端脚本语言有一个明确的认识、对其基于对象的编程思想加以把握，在具体的游戏开发项目中，先应该有一个合理的计划书与备忘录的制作，然后根据项目设计要求及标准，利用一些模块进行网页游戏制作。以下以最为基础，用途最广泛的连连看为例，来介绍作为一个可行项目的基于JavaScript的网页游戏的设计与制作实施过程。
首先，应该在项目设计的基础之上，以设计方案，依次将网页制作、程序开发、测试、文档编写等完成。其要求在于将JavaScript 客户端作为脚本编程技术出发点，进行开发。在设计连连看网页游戏时，先对其网页界面进行整体上的布局，比如，从审美角度的要求，从广大客户需的角度来设定一些原则，将操作系统与界面之间的可操作性进行细致区分，比如在界面的上端可进行时间、初始化等信息的显示；比如设置难度系数易、难、困难等供玩家自主选择等；在界面下端可以设置游戏主体界面，将其位置布置到中位，调整好整体的比例与效果，其实也可以将其反过来，上下换位处理，只是在设计时，给定了一种习惯性，因而导致了最终的适应性，如果反过来，以手机自带的方式提供给广大用户，大多是可以形成其新的玩家习惯的。其次，在连连看游戏网页中，应该对其功能模块设计加以认真分析，功能模块设计，主要是需要了解清楚其中的基本功能需求为何，也就是说，如同上面的“打地老鼠”游戏一般，先确定清楚项目中的对象，并创建根对象；在游戏区的控制或能模块设计方面、游戏区功能模块设计方面等等，都应该先在程序中分级管理，也就是说按照文件的上录入进行分类管理，以项目工程的主到子进行分别建立，最后在完成一系列具体的制作之后，进行测试与演示，然后对其中的效果加以评估。无论是根据模板进行直接的设计，还是利用代码的方式进行编程设计，其结果都可达到最终的网页游戏效果。但是最主要的还是以上面所说的JavaScrip技术、CSS技术为运用基础，把交互式技术引入到网页中，从而实现网页游戏功能。
4 结语
总之，笔者认为从技术的角度而言，基于JavaScript的网页游戏的设计与制作把网络在线小游戏变成了可能，提升了游戏的动态性，增加了机与人之间的交互作用，使可玩性得到了在线升级，随着文化主题的带入，该方面的游戏越来越受到追捧，但同时也应该防止因游戏上瘾所带来的麻烦，尽可能的在游戏的设计与制作方面，根据不同年龄阶级设置一些适应各层级的游戏项目，从而保护未成年人的健康成长。
参考文献
[1] 方蓓.基于JavaScript的简易游戏的实现[J].软件导刊，2013（3）.
[2] 冯科融，王和兴，连加美等.基于HTML5的3D多人网页游戏实现方案[J].微型机与应用，2013（1）.
［关键词］O2O教学模式;网页设计与制作;教学改革
一、O2O教学模式的概念及特点
O2O教学模式，是利用互联网技术，综合线上、线下的优质教学资源，构建双向互动的新型教学模式。其具有的特点如下。(一)对学生实现了个性化学习。学生对于线上学习时间的安排比较自由，可有选择性的对教学视频进行观看。(二)对教师实现了素养的提高。对于每一堂课，教师都必须以基于线下来做线上，以及基于线上来改进线下为原则来准备线上和线下教学资源，且线上线下教学资源必须相互融合。线下教案的设计，线上教学视频的录制与编辑等课前准备工作，教学资源的完成对教师的素养实现了本质的改变。(三)学习资源的丰富性及共享性。为了能更好地利用O2O教学模式进行教学，在网络平台上必须上传丰富的学习资源。(四)能实现师生间的多向交流性。教师与学生、学生与学生之间可以在线上、也可以在线下、同时还可以从线下到线上，再从线上到线下等进行交流讨论，大大的突破了时间与地点上的限制。
二、采用
O2O教学模式的必要性和可行性
(一)必要性
现在的高职院校学生生源主要来自两个渠道，一是通过高考录取进来的专科生，另一部分是通过中考录取为五年一贯制的专科生，生源素质普遍较低，学生学习兴趣不高，自学能力较差。本文作者通过问卷和实地访问调查发现，在传统的教学模式课堂上学生喜欢玩手机，课外时间更是玩得不亦乐乎，甚至达到忘我的境界。为了能达到理想的教学效果，学院管理人员和教职人员齐抓共管，针对问题制定了一系列的对策用以阻止学生玩手机。鉴于此，何不利用学生痴迷于手机这种心态，充分发挥手机移动端的最大作用，结合移动互联网技术，采取O2O模式进行教学。
(二)可行性
通过调查分析，免费无线WIFI已覆盖全院，人人都拥有至少一台移动终端设备，学院机房课外时间都为学生开放。我院已购买了支持手机端学习的超星慕课平台，这些软硬件设备都为开展O2O教学提供了良好的基础。此外，通过调查发现教师很愿意尝试利用这种与互联网关系密切的具有创新的现代信息技术教授方式，学生也很愿意接受这种具有自由灵活性的学习方式。
三、《网页设计与制作》课程应用
O2O教学模式的背景《网页设计与制作》课程的特点是理论难度较大、实践性强。课程的知识点较多且比较抽象，课堂上大多数知识点学生能听懂，但不能将各个知识点融会贯通，遇到实际的WEB页面设计工程时便是无从下手。在传统的教学模式课堂上，教师通过举例展现实际效果将知识点解释清楚，并对各个知识点的关系进行梳理。但由于课时的原因，学生听完之后就没有更多的时间进行下一步讨论，在没有听懂的情况下也没有时间向老师请教，就更不用说对本堂课的知识进行扩充延伸。为了改变传统教学模式教学效果和效率低下问题，2016年5月，我院引进了超星慕课平台，将《网页设计与制作》课程作为试点进行教学改革，探索出一套适合我院的O2O教学模式，然后在全院范围内推广至其他课程。
四、基于O2O教学模式在《网页设计与制作》课程改革与实践
(一)线上网络平台资源的建设
在超星慕课平台上建立网页设计与制作课程，在平台上多种教学资源供学生观看与下载。教师通过appMaker富媒体编辑器对教学视频中知识点的重点、难点进行回放、放大等编辑操作，用以强调内容的重要性。
(二)线上与线下课堂教学模式的改革
在传统教学模式课堂中，教师讲课的基本流程为复习导入新课、新课讲授、课堂小结、布置作业、课后小结五个环节。一堂课45分钟，每个环节分别占用的时间大概为:5－8分钟，30－35分钟，3－4分钟，2－3分钟(课后小结是利用课外的时间完成)。一堂课下来，教师与学生、学生与学生之间基本没有互动环节(除了教师提问环节)，这样不利于学生对知识的吸收与内化。而利用O2O教学模式进行教学，教学环节与时间分配都必须重新设计。
(三)O2O教学模式的教学环节设计
通过探讨总结分析，将O2O教学模式学习时段分为课前、课堂、课后三个时段，具体工作如下:(1)课前时段:课前时段即线上学习时段。在每堂课上课之前，老师都会通过超星慕课平台推送下节课学习内容的消息到学生的移动端。学生收到消息后首先进行的是课程预习及视频的自主学习，学习过程中遇到的问题，可以通过平台中的互动课堂版块进行在线提问和讨论，也可以记录在纸质笔记本上，带到线下课堂上请教老师或与同学进行交流。学生在完成课前时段作业的同时，相应的对下一节课内容已完成记性和理解两个过程，为课堂时段提供充足的准备。(2)课堂时段:课堂时段即线下学习时段。在课堂上，老师首先利用10－15分钟的时间对视频中的知识点、重难点进行梳理，并对学生进行提问以了解学生课前学习的情况。其次利用15－20分钟的时间让学生提问，通过老师或学生(已完全理解该内容的学生)进行解答。再剩下的10－15分钟，学生通过分组的形式讨论老师布置的案例。老师参与程度或分组形式以具体内容而定，最后由每组的组长向老师表述讨论结果，进而老师对每组讨论结果进行总结点评。课堂时段的进行能增强人与人情感上的交流、教师面对面个性化的指导、教师和学生及学生和学生之间的即时讨论等，是很重要的一个环节。(3)课后时段:课后学生再利用时间去观看上一堂课的教学视频，把之前遇到的问题(课堂时段已解决的)再梳理一遍，以达到温故而知新的目的。再完成老师在平台上的在线作业，如有疑问，可以利用超星慕课平台所提供的讨论交流模块在线咨询辅导老师，也可以与同学进行交流，同时对自己的学习效果进行在线测试等。
(四)适应O2O教学模式的教师队伍建设
传统的教学模式中，所有的教学工作基本都是一人完成。而利用O2O教学模式进行教学，虽然老师从主要讲课“降”为只辅导学生、与学生讨论、交流问题的角色，但是平时的工作量不但没有减少，反而成倍增加。老师除了要做在传统的教学模式中准备的工作外，课前必须把教学视频录制编辑好，把教学素材上传到教学平台上，还须与学生保持紧密联系，掌握其学习动态，根据学生的学习效果优化课程教学内容，时刻在线为学生解答问题等。由于一名老师精力有限，是很难独立完成这么大的工作量的。因此，教学团队经过探讨，对团队老师进行分工，将工作量进行分解，明确每个老师在O2O教学模式中各个教学环节的角色、任务及相互协作的关系。将团队分成主讲教师和辅导教师两部分。主讲教师主要由具有丰富的教学实践经验的教师组成，主要负责课前教学视频的录制编辑，课堂时段的讲课并组织学生讨论交流。而辅导教师主要负责课前消息的、课后答疑、题目、作业收集与批改等工作。大家都把自己的工作任务做好，有事情积极沟通，抱着相互协作的态度完成课程教学工作。
(五)O2O教学模式的考核机制
O2O教学模式的考核机制以培养学生实践创新能力目的，以平时的学习态度为基础，依据教学环节进行设计，以期末考试总成绩100%进行计算。平时学习态度占10%，包括线下上课和实训考勤;实训作业和报告完成情况占10%;课前时段学习占10%，包括教学视频观看情况，线上任务点的完成等;课堂时段学习占15%，包括问题的提出、讨论的积极性等。课后时段占10%，包括在线测试、作业完成情况、复习观看教学视频等。最后必须按照要求完成一个综合型的网站作品，这是考查学生综合实践及创新能力的代表作，包括图像的处理、动画的制作、审美观等，所占的比重很大，占45%;期末总评分为以上六环节项分数的总和，只要有一项环节分不及格，课程总评成绩为不及格。
五、O2O教学模式的实施效果
在O2O教学模式的实践过程中，我们设置2015级计算机应用技术专业一班为试点班，二班为对照班。其中一班人数为35人，二班人数为38人。两个班之前的网页设计与制作前导课程均有同一个老师执教，各门课程期末考试成绩统计情况基本一致。通过一个学期的学习，对两个班教学效果进行总结分析。(1)从交上来综合型的网站作品分析，一班学生设计出来的作品在颜色搭配、代码使用、美观整洁度明显优于二班学生;(2)从省级大学生科技创新与职业技能竞赛网页设计与制作项目获奖率分析，一班学生获奖比往年高，而二班基本持平。此外，通过对试点班进行无名问卷调查，85%的学生认为在新的教学模式下，自我控制能力和自学能力得到了很大的提高，75%的学生认为新的教学模式更有趣，82%的学生认为自己的团队协作能力、语言表达能力和自信得到了提升，90%的学生认为自己的实践创新能力得到了提高。
六、总结
实践证明，采用O2O教学模式进行教学，能够提高网络优秀资源共享率，改变了教师的教学方式和学生的学习方式，在教学过程中取得了良好的效果。但也遇到一些不可预测的问题，需要我们一线教学工作人员在以后的教学过程中不断地探索与改进.
参考文献:
［1］井靖，何红旗，王志刚，殷冠英．O2O教学模式”在大学计算机专业教学中的应用原则［J］．计算机教育，2016(2)．
［2］胡小华．O2O电商模式下服务营销课程教学模式的创新思考［J］．长春教育学院学报，2015(11)．
关键词：网页制作 递进式 案例任务 小项目探究 项目导向
网页制作课程是高等职业学校计算机应用专业的必修课，这门课程与其他课程相比，无论是教学内容还是教学方法上都有其特殊之处，它集知识和技能于一体，有较强的操作性和综合实践性，它涉及文字版面处理、计算机语言、计算机图像处理、FLASH动画、数据库等相关知识，需要有一定的相关课程知识基础。
一、灵活处理教材，设计递进式的课程体系
网页制作这门课程的操作性和综合实践性很强，教师必须对现行的教材进行内容改革，灵活处理教材。首要任务就是要根据该课程的特点结合高等职业学校学生的实际情况，确立正确的教学目标，制定相应的教学计划，调整教学内容。高职学生网页教学目标是培养学生制作设计一个网站，因此制定网页课程的教学内容，第一阶段：网站配色与布局、使用Photoshop处理图形图像、使用 Dreamweaver制作网页；第二阶段：制作FLASH动画、制作 JavaScript脚本特效、SQLServer数据库管理和开发；第三阶段：网站项目开发与实战。依据网站制作与设计流程，教师再进行课程整合,按阶段分模块设计递进的教学内容，在教学中打破传统的从概念到原理的逻辑顺序，根据教学计划与课程标准，开发以培养学生智力技能与专业技能为目标的校本教材，并制作以课次为单位的案例和任务单，以月为单位的小项目和以学期为单位的综合项目，通过任务完成达到技能的掌握与知识点的链接，通过项目制作达到综合设计能力的培养，从而让学生掌握网页制作的相关知识，培养相关能力。
二、改革教学法，采用递进式的教学模式
网页制作涵盖的知识和技能很丰富，教学中教师不能采用简单的知识传授和灌输这种传统的教学方法，而是要努力提高学生的综合应用能力和创新能力，加强学生的实践动手能力。课程必须安排在计算机房进行，采用教与学结合的方式，在老师的指导下，学生通过多练多做来掌握相关知识和技能。结合教学经验，笔者认为根据学生学习的不同阶段可采用不同的教学方法。
1.案例任务教学法
案例任务教学法主要用于学生学习网页制作的初级阶段课程，在这一阶段中学生主要以培养兴趣，掌握基础知识和基本技能为主，教师的教学采用以案例为线索、以任务为目标的教学方法。在教学中教师根据不同的知识点选择相配套的案例和任务，这些案例和任务的编排要遵循由浅入深、由易向难、循序渐进的原则，同时这些案例和任务要为后续的综合案例和项目作铺垫。例如教师在讲授第一阶段“图形图像”这一模块教学内容时，可以设计一个与网页有关的案例――“GEARHEAD公司LOGO”，这个案例中涉及图像选择工具、图层样式、图层组及文字工具等技能，同时涉及网页LOGO的基本常识。教师在完成本例的分析演示后，要求学生模仿制作，然后再下达任务――布置一系列著名网站的LOGO图标以供学生选择模仿制作，学生通过模仿制作掌握相关的图像技能，同时掌握LOGO的基本知识，并鼓励能力强的学生设计自己喜欢的LOGO图标。通过案例任务教学法培养学生举一反三的能力，调动学生的能动性。
2.小项目探究法
案例任务驱动法主要强调学生独立性，而忽略学生之间的合作。当今社会是一个高度合作化的时代，一个没有合作精神与合作能力的人必将无法在将来的生活和工作中得到发展。为此，推行小项目合作探究十分必要。小项目探究法主要用于学生学习网页课程的技能强化阶段，通过初级阶段的学习，学生已初步掌握了网页制作的基本知识点，现在进入提高强化阶段，本阶段教学内容分为两个方面，一方面是让学生对初始阶段的案例和任务进行强化和提高，另一方面是让学生在强化旧知识过程中掌握新
知识。
本阶段采用小组合作探究形式，首先将学生每4～6人分为一个小组，并选基础好的学生为组长，教师根据学生已学过的知识和上一阶段的任务，设计阶段小项目，这些小项目既是初级阶段的任务的综合，又是下一阶段综合项目的子项目。在教如何“使用Dreamweaver制作网页”时可以制定几个主题，如“低碳”“城运会”“关爱动物”小组形式自由选题，让同学们综合应用前面学过的配色、图形等知识，合作探究设计一个网站的雏形。教师指导学生设计一个学案，该学案能在课堂教学中起指导和引领作用，促使学生主动探索，建构知识结构体系。学生根据学案中的要求，利用实训课和课外时间，在规定的时间（两周）内完成，学生可以进行不同的角色分工，合作完成，教师在学生制作过程中进行适时跟踪，指导并解答学生制作过程中存在的疑难问题，学生完成后再进行小组总结和评价，最终将小组总结评价及作品打包通过 FTP 上传给老师，教师及时地进行阶段小结、点评，同时展示优秀作品。
“小项目设计与合作探究”教学法是以任务为主线、教师为主导、学生为主体的教学方法。在教学中，教师要充分地了解学生，及时解决学生学习遇到的困难，引导学生大胆进行问题的探究，及时做好积极的评价。教师要尝试建立灵活客观、立足于平常的“自主、合作、探究”学习评价体系，以期不断激励学生参与“自主、合作、探究”学习过程，培养学生的合作意识和自主创新的能力。
3.综合项目导向法
网页制作教学的目标让学生完成一个综合网站制作，在这个阶段中采用“项目导向法”。在高等职业教育中，项目教学是一种综合性的课程模式，通过前两个阶段的学习，学生已具备网页制作的相关知识和基本技能，同时也有小组合作探究的基本能力。本阶段主要是提高学生综合网站开发的水平，同时也是为了检验学生的学习成果。
例如，在讲网页制作――综合项目实战时，首先让学生根据个人的爱好设计一个小型主题网站的网站规划书，这样学生在学期初就知道本学期自己在这门课程的学习中要达到怎样的要求、完成什么任务，就会使他们产生学习的兴奋点。在这种教学模式下，学生成为了学习的主体，教师在教学过程中扮演引导者，学生在教师的指导下自主学习，边学边做，边做边学，完成教师安排的教学内容，完成原定的项目（个人网站设计）。在完成一个项目任务后而获得的成功愉悦和满足感，不但提高了学生的学习兴趣和学习的积极性,同时也培养了学生自主学习的能力，让他们学会学习。教师真正做到了素质教育所提倡的“授人以渔”而不是“授人以鱼”。
在项目导向法的实施过程中，仍然以小组合作的形式，并根据同学们的特点模拟合作企业的岗位为同学们分配任务，如策划师、图像技师、动画技师、后台程序设计师等，让同学们在项目中负责各自专门的任务，并共同完成一个综合项目，最后上传到 WEB 服务器上。教师组织学生对每组的作品进行评价、总结并展示优秀作品。
总之，这个阶段能巩固和提升学生知识、技能，同时锻炼学生的综合应用能力和分析问题、解决问题的能力，培养学生的合作能力和创新的设计能力，提高学生的综合素质。
通过以上这些方法激发学生的学习兴趣，调动学生的学习积极性，同时改善“网页制作”课程的教学效果。通过有效的学习，学生的综合技能和综合质素得到提高。为了进一步适应高等职业学校教育改革，教师仍要对该课程的教学进行积极探索，精心设计教学案例和项目，寓教于乐，争取更好的教学效果，培养更多的技能型人才，以提高学生的就业竞争力。
参考文献：
[1]杨晓明.《网页制作》课程教学改革的探索与研究[J].甘肃联合大学学报,2008(3).
[2]沈道云.任务驱动教学法在Photoshop教学中的应用[J].职业教育研究,2006(12).
《网页设计与制作》课程是《Web应用程序设计》课程的先修课程，为Web应用程序的页面布局和界面设计打基础。为了适应市场对“网页设计制作人员”的岗位需求和为了实现网页设计到Web应用程序设计的过渡，有必要对现有的《网页设计与制作》课程进行改革，使学生能适应“网页设计制作人员”的岗位需求并能将《网页设计与制作》课程里学习的实践成果能直接应用于基于.net或JSP的Web应用程序设计。
2、《网页设计与制作》课程现状及存在问题
笔者所在学校的计算机科学与技术、软件工程、网络工程三个专业都开设了《网页设计与制作》课程。传统的网页设计与制作课程主要基于网页三剑客Dreamweaver、Fireworks、Flash制作出精美的网页。这些网页内容丰富多彩，结构复杂，能满足静态网页的页面需要，但这些网页不能直接应用于基于.net或JSP的Web应用程序开发中，不能满足动态网页的页面需求。Web应用程序开发，是通过后台数据库与Web服务器的信息交换，由后台数据库提供实时数据更新和数据查询服务。《Web应用程序设计》课程有两种主流的开发技术：.net与JSP。在《Web应用程序设计》课程中，主要讲解.net技术与JSP技术，而不讲解页面设计，需要学生将《网页设计与制作》课程学习到的网页设计知识融合到Web应用程序设计中来，使动态页面既有数据库的内容，又界面美观。而学生在传统的《网页设计与制作》课程里学习的页面知识不能直接应用于Web应用程序设计。有必要对《网页设计与制作》课程进行教学改革，增加CSS，Div，Javascript，AJAX等内容，以完成学生向Web应用程序设计的过渡。
3、教学改革措施
3.1课程定位与目标
《网页设计与制作》课程的实践性较强，是网络工程专业的核心课程，是计算机科学与技术、软件工程专业的选修课。本课程以计算机导论、计算机程序设计语言为先修课程，以培养学生实际动手能力为目标，使学生具备网页素材搜集、网页元素制作、网站布局和规划、脚本代码编写、网站、网络建设管理与维护等知识与技能，并培养学生团队协作能力、沟通能力、分析问题能力、解决问题能力，同时也为后续课程《Web应用程序设计》的学习奠定基础和实现向Web应用程序开发的顺利过渡。
课程目标包括：①理解网站的工作原理，学会构建网站；②熟练掌握Photoshop、Fireworks、Flash等软件处理网页素材；③熟练使用CSS、Div进行网页设计；④掌握网页脚本语言的使用方法；⑤培养学生做出具有一定水准的网页（包括Javascript，CSS+Div）。
3.2优化教学内容
以往《网页设计与制作》的教学内容大多是按网页三剑客展开，而以向Web应用程序设计的过渡为导向的课程改革需要将《网页设计与制作》课程内容与Web应用程序开发的动态页面要求相结合，满足日后的Web应用程序设计要求。
教学内容主要包括：①网页图片处理；②网页动画制作；③基于HTML+CSS+Div+Javascript网页设计。
借助Dreamweaver进行可视化页面设计转向纯代码的编写，全部靠手工编写代码来设计网页页面。
3.3教学方法改革
教学方法由传统的演示法向多样式教学方法发展，主要有以下4种：
启发式-模仿法：初学时需要大量浏览一些优秀网站案例。通过欣赏国内外优秀网站，让学生在外观视觉的享受中感受网页设计领域的奇妙，培养学习兴趣。并选中几个案例，进行一步一步地模仿设计。
任务驱动法：每个学习案例都布置了学习任务，课程体系结构以任务为主线，贯穿整个学习过程。教师在课堂讲解理论知识后，布置学习任务，学生自己动手独立完成学习任务，将理论与实践相结合，使理论知识得以实践。
项目教学法：将实际的网站设计项目直接在课堂再现，以项目为驱动，带动各知识点，让学生边学边练。让学生了解网站开发的流程，也促进各知识点的应用，快速吸收所学
内容。
3.5学生设计成果能向《Web应用程序设计》课程过渡
《网页设计与制作》课程是《Web应用程序设计》的先修课程，学生通过《网页设计与制作》课程的学习，设计出的网页成果要能直接移植或方便的移植到Web应用程序设计中来，而不能出现设计出的网页成果与《Web应用程序设计》无关，与后续课程脱节。
方法：（1）利用Dreamweaver等网页编辑软件，纯手工编写代码，保存为后缀名为html或htm的文件，通过不同的浏览器测试页面的预览效果。日后通过修改文件后缀名来适应.net开发或JSP开发，实现向Web应用程序设计的移植。
对于基于.net的Web应用程序，在 Visual Studio环境下进行网页设计，实现网页设计向基于.net的Web应用程序的直接移植；对于基于JSP开发的Web应用程序，在Eclipse环境下进行网页设计，实现网页设计向基于JSP的Web应用程序的直接移植。
4、结语
通过《网页设计与制作》课程教学改革与实践，课程结课后学生都能够独立完成基于HTML+CSS+Div+Javascript的小型网站网页的设计，且这些网页要能直接移植或方便的移植到Web应用程序设计中，实现向Web应用程序设计的完美过渡。通过课程改革，提高了学生的学习兴趣，锻炼了他们的实际动手实践能力，并为后续《Web应用程序设计》的页面设计打下良好的基础。
参考文献：
[1] 彭莉，张道军，高好良.《网页设计与网站建设》课程教学改革与实践.软件导刊，2013，12（2）：170-172.
[2] 董玉兰.教师引导 学生探究——《网页修饰》教学设计.课程教育研究，2013.
关键词： 《网页设计与制作》 工作过程 课程设计
《网页设计与制作》是一门综合性很强的课程，是计算机应用技术专业的专业技能课程之一。在本课程的开设过程中，我们通过对网页美工师、网站设计师等岗位的调研，学习和借鉴德国等先进国家的职业教育经验，结合《网页设计与制作》课程的特点，基于工作过程导向确定了该课程设计的指导思想和课程内容体系。
一、课程设计思路
基于工作过程的课程体系开发是以职业岗位工作过程为导向，以职业技能为中心，以学生为主体，实现知识传授与职业能力训练相结合、学历教育与职业资格证紧密结合，重视专业技能和综合职业能力考核，培养面向生产、建设、服务和管理第一线需要的高技能应用型人才。在基于工作过程的课程开发过程中，遵循“岗位导向、注重过程（工作过程和开发设计过程）、多能（专业能力、方法能力、社会能力）并重、细化标准”的原则，按照“工作任务（职业岗位的典型工作任务）―行动领域（工作任务的分析归纳）―学习领域（工作过程的课程开发）―学习情境（教学过程的方案设计）”的步骤进行。
二、课程内容体系的建设
1.课程教学目标的确定
“以就业为导向，以能力为目标”的高职课程改革，首要任务就是明确课程的教学目标。在教学中，我们在岗位分析基础上确定本课程的教学目标。
*知识目标：学会如何规划网站、设计网页；能根据网站内容的特点设计并制作相应风格的网站。
*能力目标：掌握从Internet网上搜索需要的资料并进行加工处理的技能；掌握利用相关软件设计、制作网页的技能。
*情感目标：学会协作；学会如何正确认识、评价自己与同学；增强自信心；培养良好的职业道德。
2.课程教学内容设计
在工作过程为导向的教学过程中，需改变传统学科型课程以学科知识逻辑为主线、专业理论知识为主体的教学内容，应以实际工作任务需要为基础，以职业活动为主线，以培养职业核心能力为本位，注重理论知识与实践知识、职业技能的综合，重新组织和设计教学内容。
根据对网页制作岗位工作过程的调查与分析显示，工作人员应具有完整的设计思路和创造理念，能独立进行门户网站、行业网站的策划、规划、架设工作，能独立完成网站编程、后台搭建等。依据学生职业能力形成规律和网页制作的实际工作过程，坚持理论够用、适用、实用原则，将工作任务模块转换成教学内容，我们将课程内容调整为：网站策划、网站规划、网页风格设计、网页制作、网站测试和网站上传与更新维护六个知识模块，每一个小的模块项目又具体细化为一个个小的任务。教学内容均来自于职业岗位的具体工作任务，并使教学内容由抽象的概念转变为具体的工作项目，构建围绕职业核心能力为中心的以“做”为主体的课程。
3.课程教学方法
为了充分发掘学生的创造潜能，提高学生解决实际问题的综合能力，我们采用工学结合、教学做一体的教学模式，综合采用了项目导向、任务驱动、案例分析、多媒体演示等教学方法，将“在实践中学习、在学习中实践、理论与实践教学一体化”的思想贯穿在整个教学过程中。本课程以完整的“企业宣传网站”为例，将各个知识点融于项目开发过程中，从简单到复杂，从基础到高级。在教学过程中，首先以需要制作的项目为背景，设计相关的案例，以案例的讲解引出项目，以问题形式提出，这样每个小项目的主题也就是教学重、难点的内容，项目的完成过程也就是教学重难点的突破过程。最后，以“布置项目”的方式引入有关概念，展开教学内容。学生通过项目实践寻找完成任务的途径和方法，最终得到项目结果。通过本课程的学习，学生不仅学到了基本知识、基本技能，而且通过项目的开发，积累了项目开发的经验。
此外，深入开展第二课堂活动，指导学生课余实践活动，引导学生将课堂上学到的知识和方法应用到其他网站项目的开发中去，学以致用。充分利用校内实训基地，将教学与实训合一，满足培养学生综合能力的需要。
4.课程教考核方式
建立科学、完整的课程考核方式，是检验项目教学方法的实际效果，促使学生更积极主动地投入到项目任务的自主学习和实操中，提高教学质量的主要手段。课程的考核以能力考核为主，采用多种方式综合考核的方法。课程的总评成绩由平时成绩和期末考核成绩两部分构成，其中平时学习考核成绩占课程总评成绩的40%。期末考核成绩占课程总评成绩的60%。平时考核成绩由课堂讨论、交流，提交的课后作业完成情况综合评定。期末考核采用理论+实践的考试模式。理论考试采用国家信息产业部“网页设计师”认证考试并实施；实践考试采用“项目开发+现场答辩”的考核方式，重点考核学生对整个项目开发的思路及开发方法，同时考查学生口头表达能力、与人沟通能力，最主要的考核是以项目最后实现的效果及每个人完成工作量的情况、完成工作的质量及效率进行评分，由项目小组与教师共同打分。在交流评价的基础上对学生获得的材料和做出的作品进行检验。验证学生自己的观点。通过对比师生评价结果，找出造成结果差异的原因，让学生反思他们在探究实践中所运用的解决问题的策略。
三、结语
在今后的教学中，我们必须依据高等职业教育人才培养目标和职业岗位综合能力的需要,以工作过程为导向进行《网页设计与制作》课程开发，依据该课程的知识结构特点，以职业能力为目标确定教学内容，注重职业情境中实践智慧的养成,提高毕业生的素质和就业能力。
参考文献：
［1］姜大源.当代德国职业教育主流教学思想研究［M］.清华大学出版社，2007，（4）.
关键词：网页设计与制作 项目化教学 创新意识 兴趣
中图分类号：G421 文献标识码：A 文章编号：1674-098X（2012）12（b）-0-01
个人或单位运用网页通过网络向社会展示自身的形象，发展自身的产品营销以及活动是目前比较受欢迎的发展方向。随着科学水平的提高，网页制作的技术也不断发展。各大高校也逐渐开设《网页设计与制作》课程，《网页设计与制作》课程具有很强的实用和操作性。在过去的教学工作者，笔者通过项目化教学有效的提升了教学质量，主要是通过教学方法及成绩评定方式的创新实现了项目化教学的实施，以此总结出一些经验感想和广大同行交流沟通。
1 明确课程特点，把握教学内容和教学目标
《网页设计与制作》课程是高职院校计算机专业的重要课程，要以让学生掌握网站设计全过程，自主开发一定规模网站为最终的教学目的开展教学工作。《网页设计与制作》这门课程操作性和综合实践性较强，另外知识接受的速度和遗忘的速度都比较快。所以教师要重视对学生能力的培养，将知识结合到实际案例中进行教学，重点教授实际需要的知识内容，重视学以致用的教学观念的教育实施。
2 激发学生学习兴趣，以学生为主导，采用适当的教学方法
在教学过程中想要提高学生的学习兴趣，进一步提高其网页制作的能力可以从以下几方面入手。
1）采用“案例”+“任务驱动”教学方法，让学生变被动学习为主动学习，如果在教学过程中始终运用传统知识点对应案例的案例教学法，就会自然形成教师为主体，学生被动倾听的教学模式，这种情况下学生的学习主动性和积极性不能被调动起来。所以，教师要将任务驱动式教学方法应用到教学，结合案例法使用。也就是以任务为指引，结合时间里，设置教学课程安排和结构顺序，保证教学循序渐进，由浅入深的进行。在进行每章知识内容的教学的时候，教师要总结整章知识结合经典案例实施教学。在课程完成之前，教师将案例展示给学生引导学生思考安利的实施方法，引导其带着问题和任务展开新课程的预习。这种任务和案例相结合的教学模式，不仅能够活跃课堂氛围，也能引发学生的学习兴趣，使其积极主动地参与到学习当中。
2）举办学生作品大赛，展示成果、促进交流，教师可以通过组织 “网页设计大赛”鼓励学生积极展示自己的能力，提高学生参与的积极性，提升其学习的主动性，另外这类比赛对学生的学习方法和方向都有很强的指导意义，也能够在一定程度上加强学生的实践能力，对学生的创新意识和进去思想的培养也有很重要的作用。
3）精彩网站案例展示，开展评析活动，教师平时应注意收集一些有创意、有特色的优秀网站及网页，推荐给学生学习、欣赏，在展示优秀网站案例的同时，教师对网站的整体设计，网站的布局，以及网站特效等多方面进行分析，学生可以一边欣赏一边听教师讲解，同时，引导学生思考网站的美工、动画、布局、样式等，思考自己能否通过努力完成如此优秀的站点。几节课下来，不少学生都跃跃欲试，从而有效地激发了学生的学习热情。
4）自主选择网站设计内容，提高学生学习积极性，在实训过程中，要求学生自定主题进行网站的制作与设计，通过自拟主题，使学生在自己的兴趣基础上完成相关网页，学生学习积极性明显提高。
3 具体实施
整学期的《网页设计与制作》课程由以下四个部分组成。
（1）网页基础知识介绍；（2）网页页面制作；（3）网页特效制作；（4）网页图像处理和动画制作。这四个部分的知识和技能考核就是完成一个网站的制作。
1）项目的确定。网站的主题是什么呢？ 首堂课先让学生欣赏精品网页，同时提出相关问题。然后通过筛选，初步确定主题。因为这些主题都是学生自己选择的，所以学生兴趣特别浓厚，为以后网站内容的丰富奠定基础。
2）制定计划。在设计过程中，可以通过分组的形式方便学生互相讨论交流，互相学习，教师要鼓励学生以团队形式完成设计任务。学生可以自行组成四到无名成员的小组，推选出组长，确定组名。之后教师要指导各小组确定项目实施计划，分配组员职责，确定任务范围。这样的任务分配能够让每个学生都感受到自身在组内的存在感，使其积极主动地参与到设计活动中来，能够统一努力完成网站。另外，各个小组之间要形成竞争关系，在实训完成的时候小组推举一名成员介绍组内作品，全体统一评选最优作品。这些活动的开展，能够在提高学生学习兴趣的同时锻炼其集体协作和表达能力。
3）计划实施。在这一阶段，项目小组开始落实项目。教师要作为一个指导者，及时指导学生的实施行为，及时解答学生的疑问。例如，为学生网页主题的选定提供必要的建议；协助学生测试网页等。但是教师不应该过多干预学生的实践行为。
4）检查评估。检查评估要在项目进行过程中实施，可以让学生首先进行自我评价和反思，然后教师要对学生对知识点的掌握情况，使用效果，应用水平作出总体评价。
5）评价考核。主要分阶段性考核和综合项目考核等，根据阶段性考核反映出来的问题及时调整教学进度、教学内容等，从而实施全过程监控。重视基本技能考核，以能力考核为本位。具体来说评价内容包括：①平时项目中的子任务完成情况占20%；②平时学习态度的评价占10%；③综合项目完成情况的评价占50%；④组内评价和组间互评各占10%。
值得注意的是，无论项目最终的成果有没有达到预期的效果，教师都应该对学生的努力进行肯定，做出表扬。通过鼓励的方式，让学生建立起学习信心，使得学生在以后的项目实践中不断进步。笔者通过对两年教学过程中所应用的教学方法进行总结和思考，最终得出这些教学方法能够有效提高学生的学习兴趣，可以提升其参与的积极性，同时还能锻炼其创新和实践能力，可以有效提高其交流协作能力，这种情况使教学效果整体有了很大提升。
参考文献
关键词： 案例教学 网页设计与制作课程教学 教学设计
一、案例教学概念
案例教学法就是教师列举案例进行教学的方法。教师根据教学目标、教学内容的要求，组织学生对典型案例进行分析、讨论、交流，学习掌握知识，加深对基本概念和基本原理的理解，同时提高学生分析问题和解决问题的能力。
二、案例教学设计实例
（一）教学内容分析
《网页设计与制作》课程的教材有很多种。网页开发软件也有很多选择，如Dreamweaver，FrontPage等。我校选择的教材是《DreamweaverCS5中文版基础与实例教程》。在讲解过程中不能完全按照教材的章节内容进行教学，必须根据课程内容的逻辑关系进行合理教学设计。在教学设计过程中按照知识点的难易程度和各章的逻辑关系，将本书的知识点归纳为下图：
（二）学习者分析
1.一般特征
《网页设计与制作》课程是计算机网页设计专业的一门专业必修课，是计算机专业的核心课程。授课对象是计算机网页设计专业一年级学生。这些学生年龄基本在十七八岁，这一阶段的学生直觉思维能力较强，思维活跃，喜欢学习技巧性的知识。如果在教学中能合理地对学生进行引导，能够发挥出学生潜在的创新能力。该教学班的学生以男生为主，女生占很小比例。每个班45人，女生只有6-10人。在教学过程中要注意观察学生的行为，及时提醒学生进行有意注意。职业学校的学生在个性差异方面和普通中小学生差别很大。职业学校的学生对于学习动机中的认知内驱力很弱。在长期的不良学习习惯影响下，他们不会主动学习自己想知道的知识。反过来只要是他感兴趣的知识，他的学习动机就会很强。所以教师的主导作用很重要。他们不善于语言文字的表达，可是这些学生特别聪明，尤其在逻辑、身体运动、人际交往、自然观察等方面表现突出 。所以进行在教学设计时让学生多参与，多发言，注重技能练习是很有必要的。在学习风格方面，职业学校的学生喜欢听觉、视觉、触觉上的刺激，而不喜欢枯燥的文字说明。职业学校的学生不好管理的一个最重要的问题就是学生的情绪不稳定，容易冲动。所以在讲课过程中教师要格外注意学生的情绪变动，变换不同教学组织方式吸引学生注意，维持他们的学习动机。
2.初始能力
中等职业学校的学生生源比较广泛。学生分布不集中，由于地域限制，个体差异较大，学生的学习基础也不同。有的学生经常接触计算机，已经掌握了计算机的基础应用，有的学生很少接触计算机，连基本的计算机操作都不会。但是计算机专业不只有网页设计专业，还有计算机应用、计算机网络专业。学生既然选择网页设计专业，就应该对本专业进行过了解，对网页设计有浓厚兴趣。
3.信息素养
职业学校的学生普遍喜欢上网，对于计算机的基本使用方法已经初步掌握。有些学生家里也有计算机，所以他们的信息检索能力很强。接受和使用电子新设备的能力也很好。能够运用所学知识解决实际问题。
（三）学习目标
知识和技能：了解网站开发的流程，学会建立站点，能够用自己的话对网站的总体规划进行描述。
过程和方法：在教师的指导下分析确定主题下的目标用户，掌握网站的总体规划，清晰划分网站模块，版面设计合理，完成预期的网页跳转。
情感态度和价值观：在网站设计过程中，学生依据网站评价标准，不断对网页的色彩搭配、整体风格进行完善，这样才能锻炼学生对色彩的审美能力、创新能力。
（四）教学重点和难点
教学重点：网站的整体规划
教学难点：首页版面布局的合理设计
（五）教学策略
本节课的内容是理论性知识，学生在学习时没有学习兴趣，如果仍然按照教师讲解、学生接受的教学方式进行教学，则教学效果不理想。应选择基于案例的探究型的集体学习模式进行学习，让学生通过对案例的学习，反过来总结出知识。这样学生才能够更深刻地理解知识。
（六）教学流程
[情境导入]
师：大家是通过什么渠道知道这个学校的？生：朋友，同学，亲戚介绍，学校招生（引起学生注意，激发学生学习兴趣，并引导学生明确网站的用户定位）。
师：看过学校的招生简章后，大家对学校进行了了解，那么有没有同学上过咱们学校的网站呢？学生回答：有（使学生对学校网站产生浓厚的兴趣）。
现在我们一起来欣赏学校网站，并提问：同学们自己能够设计出一个完整的网站吗？怎样设计？生：能（调动学生的积极性）。
[展示案例]
这是学校网站的首页，这个网页中包含哪些网页元素？学生回答：文字，图片，导航栏，超级链接，滚动文字，视频，友情链接等（复习知识）（引导学生选择适合的布局方法）。
这些内容是怎么组织起来的？学生回答：表格布局，层布局，框架，DIV+CSS。
[学生探究]
1.首页版面设计
师：大家试着先将网站首页的版面进行整体规划。学生实践操作。
2.确定网站整体风格
师：布局规划好后确定一种色彩作为网站的主色调，包括文字，背景，导航，模块的色彩。
学生讨论， 并使用CSS定义文字、图片的背景色。
3.收集素材
师：网站首页中的元素是怎么获取的？学生回答：上网收集。
4.网页的设计制作
师：我将这些元素给大家发下去，大家将这些元素添加到设计好的布局中，并记录下问题和困难。
学生分别讨论网页中图片、文字、视频的添加方法，并对元素进行添加，对遇到的问题进行记录。
师：网站的首页基本信息添加完成，但是网站并不是只有一页，那么其他页和首页怎样进行跳转？学生讨论导航栏的设置和各网页的层次结构，并进行链接。
5.动态模块添加
师：现在的网页内容都是静态的，我们学过哪些知识可以实现动态效果？学生回忆代码设置文字，图片滚动，SPRY构件添加选项卡效果。师：最后不要忘记学校的地址和联系方式。学生设置下方模块内容并输入版权信息。
6.测试运行
师：大家的网站能够正常运行吗？学生进行运行调试。
[知识总结]
师：从大家设计网站首页的实践可知网站开发的流程是什么？学生回答：整体规划，确定网站的整体风格，收集资源，设计制作网页，添加动态网站代码，运行测试（引导学生对实践过程进行总结，归纳出新知）。
老师补充：设计网站的第一步是明确主题，分析用户需求。之后进行草图的设计。学生梳理知识。（教师的总结能够使学生对新知识掌握得更加牢固深刻。）
[评价]
对各组学生作品进行评价，并对遇到的问题进行解答。学生评价，反思，领会（评价、反思、反馈能更好地促进学生对知识的建构）。
三、教学反思
案例教学法的成功运用需要教师依据教学目标、教学内容、教学重难点知识精心设计好案例，并在教学过程中运用适当的方法对学生进行提问，引导学生进行分析、讨论、总结、评价，最后教师让学生进行自主创作。学生充分运用所学知识与技能，进行创造性的实践操作。上交作品后，师生共同对学生作品进行评价，进一步促进学生对知识的建构。
参考文献：
[1]刘勇.案例教学法在网页设计教学中的应用研究[J].南昌高专学报，2010（6）：107-109.
关键词：项目驱动；网页设计；教学改革
中图分类号：G642文献标识码：A文章编号：1009-3044(2011)17-4132-02
Design and Application of Project Driving Teaching Methodology in the Course of Homepage Design and Manufacture in Higher Vocational College
LI Lei
(Henan Agricultural Vocational College, Zhengzhou 451450, China)
Abstract: Homepage Design And Manufacture Course is one of the practical courses in the major of computer in higher vocational college. For Web designer has broad employment prospects, the students learn this course with high interests. But the traditional teaching mode have many limitations. The project driving teaching methodology in the course of Homepage Design And Manufacture mentioned in this article can greatly overcome the shortcomings and improve the teaching quality.
Key words: project driving; homepage design; reform of curriculum
项目驱动教学法是目前高职院校中较为流行的教学方法之一，是一种借助于具体项目的实施来达到一定教学效果，完成特定教学任务的教学方法。此教学方法尤其适用于高职院校中实践性较强的课程教学。《网页设计与制作》课程基本理论较少，实践性非常强，课程以其生动，活泼，实用性强等特点，受到广大学生的欢迎。在本课程教学中采用项目驱动教学法，将学生置身于具体的实验项目中，能较好的培养学生的观察能力、动手能力和配合协作能力，形成自己对网页设计的独到见解，能为学生以后走向工作岗位提供难得的项目开发经验，提高的就业竞争力。
1 传统教学方法的局限性
《网页设计与制作》课程的主要特点是：理论知识少，实践性强。教师在授课过程中，绝大部分时间都用在教授学生怎样使用设计软件，指导学生完成具体的制作、设计等任务。可以说本课程的最终教学任务是：要求学生能够熟练使用网页设计软件，能独立或协作设计制作完整的网站。
高职院校中传统的《网页设计与制作》教学模式一般采用理论和实践并重，即教师在教学过程中采用1~2个学时讲解理论知识和设计方法，用对等的学时指导学生上机实践的教学模式。教师在理论课教学中多采用：① 让学生浏览、观察若干目标网页设计实例；② 按步骤向学生讲解，分步完成作品的设计；③ 总结操作步骤，回顾重点、难点。也就是“提出问题――解决问题――总结分析问题”的3步走方法，其实质还是传统的“填鸭式教学”，教学内容枯燥，方法单一。学生普遍反映：学习被动，教师讲解的时间太长，在听课过程中思想难以长时间高度集中，真正能记住的只是单一的例题。在上机实践时，往往只能做出简单、孤立的小模块，不能看到整体的网页设计效果，无法独立制作完整的网站作品。可见，在本课程中采用传统的3步走的教学方法局限性很大。
2 项目驱动教学法的思想、特点
2.1 项目驱动教学法的教学思想
项目驱动法的教学思想是：通过将社会上真实的工程项目案例引入到课程教学当中，激发学生的好奇心和参与的热情，鼓励学生主动的发现问题，思考问题，探索寻找解决问题的最佳途径和方法。使学生通过完成项目设计对课程整体知识结构有更深层次的理解，促使学生化被动为主动，增强学习积极性，从而提高对所学知识的认知水平，提高动手操作的能力，形成具有学科迁移价值的问题求解策略和团队合作精神。
2.2 项目驱动教学法的特点
项目驱动教学法的主要特点是：以项目为红线，以学生为主导，以教师为依托。① 以项目为红线，要求所选的项目是真实的或近似真实的工程项目，选择的项目要涵盖课程的主要内容，可操作性强。②以学生为主导，要求学生通过独立或是协同配合完成一个具有明确目的的项目案例，在项目实施过程中掌握相应的知识技能，充分调动主观能动性，挖掘学习潜力。③以教师为依托，要求教师根据自己的工作经验和知识水平，设计和选取适合学生，紧贴社会需求的工程项目，引导学生置身于尽可能真实的项目情景之中，配合学生应用所学知识完成项目的设计，并在项目设计过程中给予必要的帮助。
3 项目驱动教学法的整体设计
3.1 项目的设计要求
为最大限度的让学生涉足各种各样的实际工程项目，教师必须准备丰富的项目储备和标准化项目案例，设置商业设计公司中需要的所有技术岗位，同时，还要求紧贴学生所学知识和操作技能并适当有所提高。这样既能使学生快速上手，迅速的进入特定的项目开发组，又能锻炼学生的主动学习能力，让学生体验到在团队协作过程中攻克难关的快乐，使学生在近似真实的商业项目开发环境中进行项目开发，完成由学生向职业人的转变。
3.2 项目小组的划分
项目小组的划分是关系到整个项目完成效果和能否充分调动每个学生的参与积极性，使其快乐、主动的参与到项目中的重要前提条件之一。由于，学生对本课程的学习有好有坏，对网页设计中各个模块设计的掌握程度各有不同。比如，有的学生对网站框架设计、flash、网站美工等静态网页设计技能掌握的较好，有的则对JavaScript、VBScript、PHP等动态网页设计技能掌握较好。因此，项目小组的划分方式为学生自愿结合，每小组的人数根据项目大小和复杂程度的不同有所变化，以4-6人为宜。这样既能保证项目的顺利完成，又能保证每位成员都参与其中，发挥各自的特长。
3.3 项目的具体设计
项目的具体设计是项目驱动教学法的关键，项目设计的好坏关系到能否最大限度的调动学生的参与积极性和项目的最终完成效果。因此，既要求项目设计包含网页设计课程中主要的知识点，功能模块和常用的设计方法，又要求项目的设计能吸引学生广泛参与，难易适中，具有普遍代表性。笔者根据多年的《网页设计与制作》课程教学经验，选择了当前热门的“网上书店”项目作为项目具体的案例。（见表1）
3.4 课程学时的设置和考核方式
3.4.1 课程学时的设置
结合课程的特点和具体的实施项目，笔者打破传统的教师讲授和学生上机并重的教学模式，采用了教师讲授占20%，学生上机操作占80%的课时设置方法。使学生在掌握基本理论的前提下，尽可能减少授课学时。这样的学时设置，既能让学生有大量的时间进行具体的项目设计，又能保证教师在学生进行项目设计时和学生交流、沟通，给予必要的指导和帮助。
3.4.2 课程的考核方式
笔者根据本课程的特点和项目实施的具体要求，制定的考核方案为：总分100分，其中，理论20分，上机操作（项目设计）70分，考勤10分。在具体的考核中，采用项目展示和小组答辩的方式，答辩小组推选代表进行项目展示和答辩，其他小组的成员作为评委，对答辩小组进行测评和打分，学生评委所打的分数占上机操作分70分的40%；教师对小组进行能力行为评定，通过观察小组成员的平时的表现，分析、评价其在小组中负责的项目模块和所具备的工作能力，给予恰当的分数，教师所打的分数占上机操作分70分的60%。每位学生的最终考核分数为：理论分值+学生评委分数×40%+教师分数×60%+考勤分数。通过上述考核方式，培养了学生团队合作意识，使每个项目小组都成为具有高度凝聚力及协作精神的项目团队，并形成以项目考核为核心导向的学生评价机制。
4 总结
自从该教学方法实施以来，学生对《网页设计与制作》课程产生了浓厚的兴趣，学习成绩稳步上升，实际动手能力也得到了显著的提高。学生们普遍反映：学习过程中心情愉快，所学习制作的项目案例也是当前主流网页设计公司通用的网页设计方法，在学校就能学到走向工作岗位时才能接触到的项目开发经验，无形中增加了自己的就业竞争力。
参考文献：
[1] 胡必波.项目驱动教学法应用研究[J].合作经济与科技,2008(7).
[2] 危立辉.项目驱动式单片机实验教学探讨[J].科技文汇,2010,11（下旬刊）.
