行动导向教学法在网页设计实践教学中的应用

陈礼娟

【摘要】近年来，我国职业教育正步入全新的发展时期，随着项目课程的深入推进，运用行动导向教学法实施教学越来越普遍。本文以网页设计教学中“电子类企业网站设计”的实际教学案例，分析说明如何采用行动导向教学法进行项目课程的设计与实施。

【关键词】行动导向；教学法；网页设计；实践

一、引言

职业教育基于行动导向的教学，其根本意义在于：学习过程以学生为中心，教师是整个学习过程的组织者和协调者，遵循“信息、计划、决策、实施、评价、转化”这一完整的“行动”过程序列，在教学中师生互动，让学生通过“独立地获取信息、独立地制订计划、独立地实施计划、独立地评估计划”，在自己亲自动手的实践中，掌握专业知识、习得职业技能，从而构建属于自己的经验和知识体系。职业教育的教学是一种“有目标的活动”，即行动，强调“行动即学习”，包括个体的主观意识行动，又包括个体的客观具体行动，最终实现行为动作与心智行动的统一。行动导向教学法是职业教育的主要教学方式方法，其教学方法实施的基础=用心+用手+用脑（职业活动）。职业教育的职业属性要求职业教育的教学过程应尽可能地与职业的工作过程保持一致性，学习过程依照职业的工作过程展开，以便获得完整的职业行动能力。

近年来，我国职业教育正步入全新的发展时期，随着项目课程的深入推进，运用行动导向教学法实施教学越来越普遍；下面以网页设计教学中“电子类企业网站设计”为例，从以下几个方面浅析行动导向教学法项目课程的设计与实施。

二、教学分析

由于授课对象为计算机网络专业学生，他们将来从事的岗位之一就是网页设计与制作，国家职业标准要求该岗位的人员掌握网页设计的基本概念，学会使用常用的网页设计软件，掌握常用脚本语言，能够从事静态和动态网页的设计与制作，具备网站的建设和管理能力。为此，在这一教学目标下要想实现“教学内容”与“岗位需求”的无缝对接，就必须依据企业实际需求对教材进行项目化处理，从“网站制作流程”出发，设计本门课程的项目（电子类企业网站设计）及任务（前期准备、建立站点、搭建网站框架、网页美化与特效及各页面内容区制作）。

由于学生已具备网页基本知识，会制作简单的静态网页。根据课程标准，可从知识与技能、过程与方法、情感态度与价值观三维目标出发，将本项目教学目标设计为：达成目标引领、促成目标支撑的能力化、整合化、系统化教学目标。基于职业岗位工作应用，考虑中职学生学情，确定本项目的重点是Dreamweaver CS5制作企业网站的基本技巧；CSS+DIV设计网页的方法与技巧为本单元教学的关键。难点是HTML代码编写的基本技巧。

三、教学策略

为承载这一教学内容，可将授课地点选在网站设计实训室，并采用任务驱动法培养学生的综合职业能力。在教学中运用以下教学手段实施教学：

1.教学资源信息化：使用FLASH动画、优秀網站；同时针对“教学关键”设计符合学生认知能力和水平的微课，并发布到素材空间，作为课堂教学的一种重要补充与拓展资源，满足学生的个性化学习。

2.教学模式情境化：采用企业项目组管理模式，提升学生对实际工作岗位认知。任命曾参加省市级技能竞赛的四名学生为项目组组长，组长的职责不但要掌握项目组内工作状态，还要协调组内资源，配合老师完成本次任务。

四、教学过程

本项目的教学过程以任务为载体，以企业网站制作的一般流程开展教学。

1.前期准备

①创设情境，提出任务

一个网站项目的需求是各种各样，甚至千奇百怪的，但无论怎样，这种需求都是来自于客户的实际需求或是公司自身发展的需要。在这一阶段，教师利用情境模拟法提出项目任务，创设一个情境，告诉学生：某电子企业想制作一个网站，用于宣传它的产品，扩大知名度，于是委托我们来完成网站的制作。

②了解需求，定位功能

我们要制作的是电子类企业网站，作为一个企业网，因其受众广泛，定位必须要清晰，企业通过互联网发布信息，供全球检索，以此来宣传企业、展示产品及服务，并通过网络与各行业交流、推销并合作。带领学生进入到模拟情境后，可以用角色扮演法，由教师和学生分别扮演企业方和项目方，了解企业建网站的需求，并编写“网站功能描述书”。

③分组

根据学生具体情况进行分组，共分为4个项目组，各设立一名组长。分组时依据组内性质不同，组间性质相同的原则。组内性质不同，不同的学生之间形成互补，保证组内成员各有所长并互相取长补短，每个学生在小组中都能发挥各自的作用，形成合作的基础。组间性质相同，使全班各小组间保持大体的均衡，以保证全班各小组间的公平竞争。

④优秀网站欣赏与分享，形成标准

开放网络给学生上网，各组搜集一些设计美观有特色、内容多元丰富、功能强大、有特色的网站进行欣赏与分享，进一步启发学生思维，吸引学生的注意力，激发其好奇心，促使学生主动参与学习。然后组织学生讨论制作一个既漂亮实用又符合客户需求的网站需要把握哪些基本要素，遵循哪些基本原则，并参照企业标准编写形成“优秀网站标准”。

2.方案论证

围绕建站任务，根据客户的实际需求以及网站设计的行业规定，各小组在组长的组织下，进行任务细化和分工，确定本组网站的设计方案。包括确立网站的主题、采用什么样的界面色调风格、如何划分网页框架栏目及网页数量等，完成网站建设策划书。

根据网站建设策划书，各小组内部讨论确定技术路线和平台，明确工作流程，制订工作计划，填写分工工作计划表，工作内容可分为素材（文本、图片）的收集和整理、美工设计、FLASH动画制作、视频拍摄与编辑、网页制作、数据库设计等，让组内所有的成员都参与进来，做到人人有事做，事事有人做。

这一过程就是让学生确定应该怎么做，采用头脑风暴的策略。通过小组内的讨论，在活跃课堂气氛的同时，既组织学生参与到课堂的知识学习中来，又能提高学生逻辑思维能力、语言组织能力、协调管理能力，培养良好的团队合作能力。教师可以参与到学生的交流中来，给出合理建议，同时观察各小组的工作状态并作好记录。

3.网站设计与制作实现

这个阶段的任务就是一步步实施制定的计划，通过小组内多重交流和问题的探讨分析解决等形式开展交往性学习，学生逐步加强自行组织和负责学习过程，教师发挥咨询者和协调者的作用，类似于导演的角色，在整体上引导和把控学习过程，检查工作进度和中期成果。

这期间各组建立站点物理结构，利用DIV搭建网页框架，利用CSS美化文字、链接、图片、表格、表单，使用HTMT标记，为各网页添加并美化内容区等。小组内个人活动主要有资料的收集整理，FLASH网页动画的制作，图形图像的处理等。组长主要掌控网站制作的整体设计方案，监督整体的进度。

在网站设计制作过程中学生出现的问题主要有：一是所设计网站与客户需求不匹配；二是所设计网站未涵盖所有客户需求。如何使学生以Dreamweaver CS5为工具，将企业的需求准确、全面的转换为网站就成为了本项目教学的重点。为突破这一重点，将网站的设计分解为确定栏目、美工设计、网页标准字体、网站LOGO、基本颜色、动画设计、图片素材整理等，再根据此定位分别制作出首页、二级页面及内容详页PSD草图，并根据需要切图备用；网站设计完成后，进入网页设计实现环节，这项任务主要采用DIV+CSS布局方式完成，在此階段重点突破关键点和难点。

4.网站推广与维护

在教学的过程中将理论知识和操作实践进行有效融合，从而使中职计算机网页设计课程的教学过程呈现职业化、过程化和综合化的发展趋势，并且在教学的过程中逐渐引导学生成为学习的主体，是行动导向教学法实施的重点。因此，在网站推广与维护阶段，为了模拟真实的应用场景，我们把实训室的教师机作为服务器，让各个小组分别在教师机测试上传，其他小组成员则进行网站访问，并根据访问体验提出反馈意见。各组长综合反馈意见后再组织小组成员讨论修改，教师在修改过程中主要进行疑难解答。经过反复测试访问修改后，最终各小组形成自己完整的网站。

5.成果验收，多重评估

各组长组织成员学习“优秀网站标准”，申请验收的小组成员需对客户（教师）进行网站操作访问演示，锻炼其表达沟通能力。教师全程按照标准规范学生操作。

工作任务评价是需要教师和学生共同参与的多重评价，评价以小组为单位，不是单纯地给学生或小组打出一个成绩，而是在评价的过程中帮助学生发现问题、分析问题并解决问题。评价的过程同时也是经验交流的过程，不仅是对制作网站方法和技巧的评价，更是对小组整体工作和集体智慧的评价。

五、教学效果小结

通过教学发现本项目教学的亮点主要有以下几点：

1.将学习对象设计成任务。通过电子类企业网站设计作为课程载体，激发了学生的学习兴趣。

2.将学习对象设计成一个真实具体的工作过程。采用企业项目组管理模式，把课堂完全交给学生，以教师为主导、以学生为主体。

3.将学习对象设计成工具。在完成项目的技术工作和组织工作中，强化非智力因素的渗透、提升职业素养。

六、结语

在网页设计人才培育过程中不仅要提高学生的动手能力，并且还需要学生在应对复杂的工作环境时，可以及时准确地处理发生的问题，而不是只能处理一些单一不变的工作问题，在教学的过程中不仅需要将所有的教学内容迁移到实践课程中，并且还需要为学生创建一些复杂多变的虚拟工作环境，从而不断的提高学生的综合工作能力。在网页设计课中采用行动导向教学法，以学生今后的工作为基本导向，以学生自主学习为实践的流程，不仅让学生的职业技能得到更多的提高，并且学生的身心也得到了更加健康的生长。对教师而言，需要精心设计课程内容并设置合理的学习情景，还需提高自身的理论和专业素养，从而更好的在教学活动中引导学生完成相应的项目或任务，从而让每一名学生都能够学有所得。

参考文献：

[1]戴士弘.职教院校整体教改[M].清华大学出版社，2015.

[2]黄蓝会.行动导向教学法在高校计算机教改中的应用分析[J].电脑迷，2018（09）：121.