引导文教学法在网页布局与CSS中的应用

2012-04-29郑慧君彭勇周芹

计算机时代 2012年3期

郑慧君彭勇周芹

摘要：引导文教学法是德国职业教育和培训广为采用的一种教学方法，强调培养学生独立学习、工作计划制作、实施和评估的能力。作为教学改革的探索，在网页布局与CSS专业课中采用了引导文教学法，按照引导文教学法的6个步骤进行教学设计。实践表明，教学效果良好。

关键词：引导文；教学法；网页布局； CSS

中图分类号：G642文献标志码：A文章编号：1006-8228（2012）03-48-03

Application of guidance teaching method in courses of webpage layout and CSS

Zheng Huijun, Peng Yong, Zhou Qin

（Department of Computer Engineering, Dongguan Professional Training College, Dongguan， Guangdong 523808， China）

Abstract： Guidance teaching method is a widely used teaching method in German professional training schools, because it emphasizes developing students' independent learning, planning, implementation and evaluation ability. The authors apply this method to webpage layout and CSS course, and introduce six steps of guidance teaching method for teaching design in this paper. It achieves good teaching effects.

Key words： guidance teaching； teaching method； webpage layout； CSS

0 引言

与传统教学法相比，引导文教学法充分尊重学生主体地位，借助引导文教学文件，引导学生掌握独立学习和工作的方法，能对一些复杂的工作流程进行策划和操作，可以独自制定计划，执行工作计划并对成果进行检查。这种教学方法的实质是，老师把原来要讲的内容用引导课文的形式编写出来，让学生学习使用，引导学生自行控制学习和工作。

引导文教学法是一种以学生为主体、教师为主导，以学生自学为主的教学方法，通过“引导问题、制定计划、决策、实施计划、检查成果、评估”等六个步骤实施教学活动，有利于培养和提高学生的自学能力、分析问题和解决问题的能力，以及对环境变化的心理承受能力[1]。

CSS作为高等职业院校计算机专业的一门基础课程，在网页设计中起着至关重要的作用。本文把引导文教学法运用在网页布局与CSS的教学中，按照引导文法的实施步骤、教学过程、注意事项进行了教学设计。将工学结合的教育理念和引导文教学方法引入到该课程改革中, 有利于实现该课程的人才培养目标。

1 相关工作

引导文教学法是国外采用的教学方法，尤其是在德国职教领域广泛采用的一种教学法。80年代它与“双轨制”一同引入，但在我国未被推广使用。引导文教学法主要的内容是：在教学中，让学生从大量技术材料(如专业手册、软件的帮助文档、相关专业书籍以及网络)中独立获取所需要的专业信息，独立制定完成工作任务的计划，从而获得解决新的、未知问题的能力；系统地培养学生的“完整行为模式”，着重培养学生独立学习和工作的能力。在教学活动中，教师将需要解决的问题或需要完成的任务以引导文的形式交给学生，学生在引导实践过程中，理解和把握课程要求的知识和技能，体验创新的艰辛与乐趣，培养分析问题和解决问题的能力及团队合作能力等[2,3]。引导文教学法虽然未被我国推广采用，但还是有不少的应用案例。例如，边颖研究了行动导向教学法在AutoCAD辅助设计课程改革中的应用,按照引导文的方法和步骤进行了AutoCAD的课堂设计[4]；姜雪等研究了引导文教学法在高职创业教育课程中的运用[5]。

2 引导文教学法在网页布局与CSS课程中的应用

2.1 教学背景

网页布局是计算机专业的一门基础课程，主要内容是控制静态网页和动态网站的显示，美化网页，减少冗余代码，使网站整体风格一致。学生学习该课程应该有一定的HTML基础和实际操作能力。之所以在该课程中运用引导文教学法进行教学，旨在使学生利用已学的知识来解决问题，培养其借助媒介独立自主地获取信息的能力和自学能力，培养其创新思维能力。因为网页的设计和美化千变万化，不能总是按照一种规定的方式进行网页布局。

2.2 课程能力目标

我们对学生毕业后从事的UI设计师或网页设计师这一职业所需要的能力进行了能力目标分析，确定了本课程的能力目标。

⑴ 专业能力：熟悉最新的CSS版本的基本语法结构；掌握样式表的几种写法；熟练准确掌握和运用CS中的基本属性；熟练地利用CSS样式设计表格的样式；熟练地使用DIV+CSS进行网页布局，弄清相对定位和绝对定位的区别；能够熟练利用CSS制作丰富多样的菜单。

⑵ 方法能力：在教师教授的基础上，进行自主学习，学习新技术，新规范，新标准的能力；具有敏锐的观察能力和设计能力；将基础知识进行融会贯通、举一反三、发散思维和创新设计的能力；能够根据需求制定完整的实施计划；对完成的项目进行演讲、展示、分析、评估和总结的能力。

⑶ 社会能力：进行团队协作和分工的能力；具有严谨的工作态度，有较强的竞争意识。

2.3 教学设计

作为现代职业教育教学的一种方法，引导文是专门的教学文件，借助引导文，教师可就一项实际工作或来自工程实践的与教学内容密切相关的技术问题，指导学生的自学过程。以下是网页布局与CSS教学中的一个应用实例，教学主题为学生利用给定素材自选主题进行网页的布局。我们按照四节课的时间进行教学过程设计，过程如表1所示。

表1教学过程设计

[[教学环节&教师活动&学生活动&设计意图&时间&引言&教师讲解&学生听讲、讨论&引出课堂主题&5分钟&网页的一般布局结构&教师提问并总结&学生合作回答问题&让学生了解网页的一般结构&5分钟&网页布局中内容部分的布局&教师提问并总结&学生合作回答问题&让学生了解网页内容部分的分栏方法&4分钟&讲解课程所给素材和课堂任务&教师讲解&学生听讲、讨论&让学生弄清楚课堂任务&6分钟&引导性问题：根据某一主题设计一个完整的网站首页&教师给出引导性

问题&各组学生讨论、确定主题&锻炼学生的快速决策

能力&10分钟&确定主题后制定工作计划&教师指导&各组学生共同讨论制定工作计划&培养学生制定工作计划的能力&15分钟&作出决策&教师指导&各组学生共同讨论做出正确可行的决策&学生围绕主题确定网页的主色调、网页布局&10分钟&实施&教师指导&各组学生分工协作完成工作计划内容&锻炼学生的查找信息的能力和设计能力&100分钟&检查&教师讲解检查标准&各组学生按照标准互进行交叉检查&锻炼学生独立的评价

能力&15分钟&评估&教师点评&学生接受老师提出的意见&使学生总结工作过程中的不足&10分钟&]]

2.4 教学实施

2.4.1 提出引导问题

引导问题包含了为解决任务所需的所有信息。它引导学生独立获取所需信息，并对整个工作过程的执行提供帮助。本实例的引导问题如下：

⑴ 如何确定网站的主题；

⑵ 如何根据主题确定网站的主色调；

⑶ 如何进行网站布局的划分并利用DIV+CSS进行网页布局；

⑷ 如何通过设置UL和LI的样式来完成滑动门菜单的制作；

⑸ 如何设置网页超链接的属性和鼠标移上的效果；

⑹ 如何在页面中插入FLASH，（这在前面的知识点讲解中没有提到，需要学生自己考虑，自己去查阅相关参考资料来完成）；

⑺ 如何统一设置整个网页文字的属性；

⑻ 如何设置网页的背景颜色或背景图片。

设计引导问题要注意的是不要设计简单的是非性问题，即回答“是”或“不是”的问题；不要设计过于简单的问题；对于设计出来的问题学生必须借助于之前所学知识的综合运用或者通过网络查询才能解答；设计的问题应该针对相应的工作步骤，同时注意，问题不要过于空泛或者容易产生歧义；不要设计过于复杂或综合性太强的问题；在要避免问题中出现不容易理解的措辞，引导问题要符合学生的知识理解水平，太过复杂的问题会做学生在规定的时间内无法完成；设计的问题要包含学生所学知识，并在这个基础上进行加深；引导问题应该引导学生解决实际问题，学生通过解决引导问题来逐步完成教学安排的任务；不要设计跟完成相应工作步骤无关的，或者关联很少的问题。

2.4.2 工作计划

工作计划就是工作前的思考，要考虑所有的相关工作和步骤，考虑网页所必须的主题和内容、菜单设计、FLASH的插入、内容部分的分栏、页脚部分的设计，还要考虑到分工与协作，各任务的先后顺序和时间的安排。学生(以小组为单位)各自写好网页设计步骤和分工，然后以组为单位进行讨论。在引导文教学中，没有对与错，只有合适与不合适，这样，可大大提高同学们的团队合作能力和发言的积极性。下面是学生自己写的工作计划样本。

任务一：确定网站主题并搜索整理相关的内容；主题由讨论确定，内容由1人完成（时间不限）。

任务二：利用DIV+CSS进行网页总体布局的划分，由3人共同完成，完成时间为20分钟。

步骤 1.设计好网页的布局模式，计算好个模块的宽带和高度以及各模块间的间距；

步骤 2.在html页面上写好div框架；

步骤 3.利用CSS设置每个div的宽度、高度和背景图片等属性。

任务三：设置顶部滑动门菜单，由2人共同完成（20分钟）。

步骤 1. 利用UL和LI写好页面框架，使用超链接设置主菜单，写好菜单项的名称；

步骤 2. 利用CSS设置超链接和UL、LI的属性，达到预期的效果。

任务四：插入FLASH，网上查询插入FLASH的方法，由1人完成（10分钟）；

任务五：网页内容部分各栏目的内容填充和样式设置；

任务六：进行页面底部的设置，由2人完成（20分钟）；

任务七：网页各部分的合并，由2人共同完成（20分钟）。

2.4.3 决策

决策是前一步工作的延续，同样是各由小组讨论（团队合作）来完成，但指导老师会参与其中。教师与学生以谈话的方式一起进行交流讨论，听取讨论结果，帮助选择可行的工作计划或对目前的工作计划作出修订或者重新制定工作计划。因为各个学生的能力与水平会有差异，工作计划安排要视各个学生的情况进行调整。工作计划中还要考虑的一个主要的问题是如何把网页设计的任务分工、合并，以及各部分任务的先后顺序。

与学生的专业谈话中教师要对学生比较迷惑的问题加以引导，说明问题的难点。讨论作为一个学习的机会，其质量直接受到学生的热情程度、投入程度以及参与意愿的影响，要让每个学生都投入到项目的学习和实施当中。

这一过程中，应该要求每个人都对工作计划提出自己的意见和见解，充分发挥每个人的作用，每个人都安排一定的任务，避免总是由“较好”的学生完成任务的情况。

2.4.4 实施

计划的实施由学生按照工作计划进行分工协作的方式进行。整个实施阶段，教师不参与具体的实施过程，教师的作用是监督，适时地给学生指出工作中的错误，对遇到的困难给予帮助。如果遇到新的技能问题，指导教师可另外提供帮助，但不一定采用授课形式。如FLASH的插入、网页的布局，学生先说出应怎样设置，指导教师作出纠正和补充，然后演示给学生看。教师指出学生的错误，而不是马上就给出答案，答案应由小组成员共同寻找。当学生的实施发生严重错误时，指导教师就必须立即制止。

计划实施过程中可以检验方案的可行性。小组成员选择的方案可能在实施时遇到了问题(计划和实际操作的差距)学生将会相互对比，并发现问题，从而修正、完善计划，最终得出较为理想的实施计划。通过切身体会、结合实际思考得出的结论，比老师课堂传授更容易被掌握和应用。

2.4.5 检查

实施过程中的每个步骤都会检查表，如表2所示，学生能在表中了解到为了实现学习目标，要付出什么努力。在计划实施过程中不断进行检查和优化，可以达到最佳效果。一般情况下，检查过程是，首先由学生自己检查他们所完成的作品，然后由教师（或者其他学生）检查。各组之间也可以交换检查，这也是他们学习、交流经验和心得的机会。

表2检查表

[[序号&步骤&检查项目&学生评估&教师评估&1&1&网页内容（10%）&&&2&2&网页布局划分，网页整体颜色搭配（20%）&&&3&3&顶部滑动门导航菜单设计（20%）&&&4&4&页面内容部分左边和右边的设置（40%）&&&5&5&页脚的设置（10%）&&&]]

2.4.6 评估

最后由教师点评，并与学生一起讨论、总结，并评出名次，对设计好的小组给出奖励，对设计相对差的给予鼓励，鼓励学生不断探索创造。教师的评价不是单纯给出成绩，很大程度上是解决出现的问题，提出后继学习中应该注意的问题；评估也是经验的交流评估的另外一个重要内容是，根据检查表对学生的网站首页设计进行质量评价。

3 结束语

总之，引入引导文教学法，不仅能教给学生专业知识和技能，更能培养他们的专业能力、方法能力和社会能力。引导文法是培养学生“关键能力”的一种卓有成效的方法。实践表明，将它应用到网页布局与CSS教学中，激发了学生的学习兴趣，提高了教学质量。

参考文献：

[1] 姜大源.职业教育学研究新论[M].教育科学出版社,2007.

[2] [德]Ernst Nausch.德国双元制职业技术教育[Z].同济大学职业技术教

育学院译,2006.

[3] [德]Frank Bünning 职业技术教育培训(TVET)中的行动导向教学法

导论[Z].同济大学职业技术教育学院译,2007.