案例驱动的互动式网页设计课程教学探讨

案例驱动的互动式网页设计课程教学探讨

史晓颖

杭州电子科技大学 计算机学院，浙江杭州， 310018

摘  要： “互动式”教学是有效的教学方法之一，将“互动式”教学理论运用于《html与css样式设计》课程中，采用案例贯穿整个教学过程，强调教学过程中师生间相互沟通的双边动态性，提高学生学习的积极主动性，培养更符合企业实际需求的网页开发人才。

关键词:互动式教学；案例驱动；html与css样式设计

1 引 言

《html与css样式设计》是计算机专业的一门专业技能课，该课程的教学目的是通过讲授html和CSS语法，使学生具备编写静态网页代码和设计网页布局排版的能力，培养更符合企业需求的网页开发人才。对于这门实践性较强的课程，传统的以教师为主体的讲授法无法满足需要，如何在这类工程实践类课程中为学生营造丰富、互动的实践性环节，把设计与编码思维循序渐进地“植入”学生大脑，值得教师思考。本文将“互动式”教学方法导入课程的各个环节，采用案例贯穿整个教学过程，强调师生间的双向沟通，最终实现以“学生为中心”的教学、提高教学质量。

2、“互动式”教学模式的特点

互动式教学最早由美国教育心理学家Palincscar和Brown提出[1]，是一种把教学活动看作师生间、学生间的相互沟通和交流的动态教学方法，具有双边性、激发性和发展性的特点Error: Reference source not found。在“互动式”教学理念中，教师不再采用“满堂灌”的传统教学模式，而是在上课过程中与学生充分沟通，引导学生对问题进行深入的思考与探索，从而激发学生主动参与的积极性，使师生融为一体、彼此接纳与倾听。互动式教学不仅能活跃课堂气氛，而且能挖掘学生的学习潜力，在师生相互作用中产生教学共振，充分体现以教师为主导、以学生为主体、以训练为主线和以思维为核心的教学[3]。

3、课程教学实践

3.1、课前准备

相比于讲授法教学，互动式教学对教师提出了更高的要求。教师在上课过程中不仅要精心备课，同时要鼓励学生主动参与到教学中来，需要做好以下准备工作：

（1）课前精心设计教学过程。老师应能融会贯通地讲解知识点，结合典型案例，设计启发学生思考的问题和讨论，增强学生对专业知识的理解。

（2）善于活跃课堂气氛，及时跟踪学生的学习反馈。教师可以通过巧设疑问调动学生思考，使学生在互动的氛围中接受知识。教师讲课时要实时地从学生的眼神和表情中获取反馈信息，并基于反馈信息及时调整上课节奏。

（3）适时发挥教师的引导作用，使教与学有机统一。教师要引导和激发学生的内在学习动力及创造性，鼓励有独特见解的学生踊跃发言，拉近师生间的距离，使得教学双方都能发挥最佳状态。

3.2 各教学环节的设计与实践

●理论讲解环节

由于《html与css样式设计》一课具有操作性强的特点，在课堂理论讲授过程中，除了单纯的教师讲解知识点外，还应提出大量引导性问题调动学生的思考和积极参与。

具体来说，本课程以案例为引导，对于一个章节的内容，先介绍一个相关的综合案例，演示网页呈现效果，并设置问题来提升学生对该章节知识点的兴趣。例如在讲解表单及JavaScript知识时，教师可在上课开始就提出问题引导学生：如何用css修饰表单的样式，如何用JavaScript实现用户与网页间的交互，让学生带着问题去听课，使得教学过程的互动从上课之初就逐渐展开。以设计的问题做为主线，引导学生与老师进行交流，同学之间也可以相互启发、相互问答，在互动中发现问题并解决问题，促进自主建构知识结构。

●案例分析环节

现有的一些网站设计案例是供学生学习的好素材，如果由教师对案例进行介绍和点评，学生只能被动地接受设计要点。在互动式教学中，教师事先收集一些优秀的网站设计案例，学生以小组为单位在课下学习并分析实现这些案例所采用的技术手段，然后在课上由小组推选出一人来讲解案例的实现技术，督促学生在课余时间认真查阅相关资料，培养其自学能力。同时要求其他小组的成员对演讲者提问，引导学生积极主动地学习，提高学生对优秀作品的认识水平。

●实践环节

《html与css样式设计》课程的目标即通过大量训练，培养学生设计和编写网页的能力，这需要学生进行大量的动手练习。因此在实践教学环节中，也要形成充分的师生互动。如在实践《css规则》的内容时，老师可以首先演示某些代码的效果，让学生在自己的电脑中输入相应代码，并通过修改参数，结合相关样式了解不同css属性的作用。如有学生遇到问题，可以当场提问。在演示环节后，教师走到学生座位上进行“一对一”或“一对多”的逐一或逐组辅导，进行直接的面对面交流。针对不同学生遇到的问题，教师可直接在相关同学的电脑上阅读代码，修改其代码中的错误，让学生在纠错的过程中对知识点理解得更深刻。如果遇到众多学生都提出的普遍性问题，教师利用多媒体工具进行全班讲解。采用这种方式，学生能在与教师共同动手的过程中更加快速和直接地学习语法规则。

●项目实训环节

由于在课程的前半阶段，学生只是学习了html和css相关的语法知识，但对于如何综合运用这些语法来完成一个实际项目还没有清晰的认识。因此，在课程的后半段让学生组队完成一个具体的项目，如个人博客、社团网站、美食网站等，考察学生的学习效果。

在该环节中，首先让小组成员在课前准备相关资料，进行项目总体规划及需求分析。学生在实验课上和课后对项目进行编码实现，培养学生的团队协作能力。在完成项目后，每个小组推选出一个学生对所做项目进行讲解和展示，老师和其他学生对讲解者进行提问，锻炼学生的语言表达能力和应变能力。

为了更好地评价学生的项目完成情况，采取教师评价和学生互评相结合的手段。教师评价是由教师对学生作品做出优缺点的点评及评分，被点评的学生能够第一时间与教师进行互动。学生互评是由教师事先设置好评分表格，让各组内成员分别对其他同学的贡献进行互评，同时让组与组之间的成员对其他组完成的项目进行评价，加权得到总分。这种师生、生生间互动式的评价过程更为公平，能使学生充分了解自己工作的优缺点，实现和谐、民主的课堂评价。

4、结语

《html与css样式设计》是计算机专业中一门实践性较强的课程，旨在培养学生制作网站、美化网页的技能。本文旨在探索将“互动式”教学模式多方位地引入计算机实践类课程中，以案例驱动和贯穿整个教学过程，在上课中形成良好的师生交互，提高学生的实际动手能力和创新思维。

参考文献

1. PALINCSAR A s，BROWN A L．Reciprocal Teaching of Comprehension-Fostering and Comprehension Monitoring Activities[J]．Cognition and Instruction，1984, 1(2):117-175．

2. 董传忠, 张猛, 周志强. “互动式” 教学运用探析[J]. 新课程学习 (下), 2014 (3): 270.

3. 唐世刚，钟万栋．互动式教学模式构建研究[J]．教育理论与实践，2013(18)：42-43．

作者简介：史晓颖(1987-)，女（汉族），浙江省杭州市，杭州电子科技大学讲师，博士，研究方向为大数据分析。