HTML5+CSS3网页设计实战 课堂游戏设计

“击鼓传雷”此雷非彼雷，同学之前传递的并非灾祸，而是学习的机会，一个学习让你快乐的机会。以下是该游戏的流程图：（1）教师抛出的问题，等价n颗雷，当然也可以由第一个被提问的同学来提出n的数值大小，为了不造成太大伤害，建议n数值在3~6之间。（2）我们称第一个被提问的同学为“好学者”，当好学者先思考是否召唤同学帮忙回答时，被召唤的下一位同学为“亲友团”。（3）抄写代码遍数可现场根据啃雷数量灵活把握，适当安排代码量的多少，比如只完成css样式部分，或者只是css属性单词，等等。-------------------------------------------------------------------------------“代码接龙”课堂上进行团队间的代码接龙游戏，教师先将页面效果展示给各位同学，也可以展示完整代码若干秒给同学一些提示。游戏参与者3人为一组，在N个回合中，组内成员可指定某成员添加代码碎片。正式开始游戏后，规则如下：分别挑选1个学生作为队长，由他挑选另外2个学生作为队友。每个人的初始体力值为10点（可根据项目代码量调整），有人体力值<=0时，团队失败。一回合中，每人添加一个代码碎片，消耗其1点体力；一回合中，若有人添加2个代码碎片，则消耗体力值3点。代码碎片是指一个完整的容器标签，如<divid=’box’></div>，或者是css选择器，如#box{}，又或者是单行的属性及属性值，如width:300px;。以下视为消耗1点体力值的代码碎片： <divid=’box’>文字内容</div> Width:300px;以下视为消耗2点体力值的代码碎片，含两个完整标签或属性： <divid=’box’><ahref=”#”>文字内容</a></div>Width:300px;height:200px;这种方式可以锻炼学生间的协作能力，加强学生对团队力量的准确认知，主力应该放在核心代码的位置，辅助选手应该设计相对简单的代码。倘若全员依赖主力选手的话，容易导致主体选手体力值为零，任务失败的情况。结束时，教师点评，强调团队协作、团队分工的重要性。-------------------------------------------------------------------------“拼图游戏”使用Photoshop软件，将案例的每行代码分别拆分成单独一个图层，打乱代码顺序后排列在文件的右侧，如图所示：某学生回答格式范本“将<divid=’box’>代码左边对齐X02-Y9位置。”，教师同时将该代码在Photoshop中移动到对应正确的XY相交点（用移动工具在对应文字上右击，菜单中第一项便是该图层）。如图：如果对Photoshop比较陌生的教师，可以用上图用来演示，根据学生解答在hbuilder中复制代码后，粘贴到学生所说的位置。另外，可以增加难度，可添加部分错误或误导作用的代码碎片。---------------------------------------------------------------------------“密室逃脱”谜题可以设计成逐步解锁的形式，学生每完成一步代码，教师揭示下一步可以采用的代码参考作为提示。通过解谜，学生可以锻炼问题解决能力和逻辑思维能力。游戏规则如下：（1）请2位同学来作为被困密室人员，有一人成功逃脱视为全员成功，予以表扬；均未能逃脱视为失败者，予以安排抄写代码N遍。（2）游戏初始，每人3点体力值，回答错误视为一次行动失败，体力值减1。回答正确则不消耗体力值。某人员连续行动3次视为过度劳累，体力不支，体力值减1。当两人体力值均为0时，游戏失败。（3）书写一个完整的标签代码，或者一个容器的css样式，均视为1次行动。（4）教师提供的提示，可以包含以下信息，目的是让学生能正确筛选出所需“道具”：口述的代码提示。事先在案例代码中抽取部分正确代码，打乱顺序。在案例代码中擦除部分英文单词或属性名称。添加一些误导作用的属性、代码。可以利用百度搜索引擎，根据关键字进行搜索，由学生判定搜索结果，并能从中获取提示。游戏流程如下：（1）教师提供页面效果图，如图：（2）第一步提示，教师讲解：“我们现在要制作的是一个导航，通常导航处的标签可以采用<nav>或者<div>”。停顿等待被困者讲述代码。（3）根据学生讲述的同时教师在教师机hbuilder软件中敲入代码。代码正确时，教师告知该步“正确”，解锁下一个提示，如“我们应该为该容器起个名字”。代码错误时，教师告知答错，扣除该人员1点体力值，不能给予代码提示。（4）等到学生讲述的代码合理（有时并不能立即判定错误），教师可以告知该步“合理”，解锁提示，并告知“接下来代码应该如何调整”。（5）每一步中，可以由2位同学中的任何一位来参与，也可以相互补充。但若有表述错误的人员，视为行动无效，扣除该人员1点体力值。（6）教师在学生讲述代码后，无论正确与否，需要展示当前页面效果，便于被困者调整策略。-------------------------------------------------------------------------------“谁是南郭先生”设定特定的编程场景“程序员的一天”，由教师发布工程项目（网页最终效果图），让2个学生扮演企业老总、项目经理，这2个学生可以在不大幅度修改版面布局的情况下（具体根据案例而定是否可以提出大幅改动），对已完成的案例效果反复挑刺，要求扮演“程序员”的若干位同学去修改页面效果。通过角色扮演，学生能够更直观地理解编程在实际工作中的应用，以及在面对问题时如何思考和解决。游戏规则如下：企业老总可以提出目标效果。提案由项目经理审核，按现有能力（课堂已教授相关知识点）能完成该方案的情况下，不得拒绝老板所提方案。若现有能力无法完成，项目经理有责任告知老板“具体某些无法完成的效果”，并等待老板是否采纳修正。页面无法达到目标效果，视为项目开发方案失败。教师进行评判，如果老板所提方案在现有知识面下完全能实现，视为项目经理、程序员业务能力不足，需接受处罚。若失败前，项目经理已告知现有知识不能做到对应效果，且老板拒不采纳，视为老板高傲自负且没经验，所有