基于行动导向教学模式的《网页设计与制作》课程设计

陈俊斌

【摘要】 在实际工作岗位中对学生的动手能力要求较强，《网页设计与制作》课程能够培养学生从事网页设计与制作的基本技能，是非常适合采用“行动导向”教学模式的一门课程。为了让行动导向教学模式发挥作用，需要根据工作过程制定课程的主要内容；根据工作岗位制定课程的培养目标；采用传统讲授与行动导向相结合的教学模式；细心地设计各小案例。

【關键字】 行动导向课程设计网页

一、了解工作过程，制定课程主要内容

行运导向课程是基于工作过程的，《网页设计与制作》相关内容是网站建设的，有必要先了解网站建设的基本工作过程，其过程为：（1）对网站进行需求分析；（2）网站地图规划；（3）网页结构设计；（4）网页美工设计；（5）网页素材收集；（6）网页代码编写；（7）网站测试和以及上线；（8）网站运行维护。要完成上述的工作过程需要多门科目的相关知识与技能，比如“网页美工设计”就需要photoshop知识，“网站上线”需要用到服务器、域名等知识。因为课程时间有限，就必需对工作工过相关知识有所取舍和有所侧重，在《网页设计与制作》课程中，将网站地图规划、网页结构设计、网页代码编写这三个内容作为主要内容，如果学生有一定的photoshop基础技能，可将网页美工设计和网页素材收集这两个过程纳入课程的教学中，如果学生没这些基础，则无须花太多时间在本课程中讲解和练习，在网页结构设计中采用草图，在美工设计中教师可直接给出相关的素材。

二、了解工作岗位，制定课程的培养目标

与本课程相关的常见岗位有：（1）网站设计员；（2）网站美工制作员；（3）网页前端开发员；（4）网站后台程序开发员；（5）网站维护员。其中网页前端开发的工作量是最大的，因此在课程设计中将网页代码编写作为重点知识与技能。根据工作岗位的情况，设置了三个培养目标：知识目标、能力目标和情感目标。

2.1知识目标

知识目标是传统教学模式中为学生制定的学习目标，它是弊端是学生掌握了基础知识后却不会应用在工作中，但学习基础知识是为了有能力去完成任务，知识目标是基础，不应被忽视，现将本课程知识目标制定如下：

（1）了解网站开发的工作过程；

（2）掌握网站地图及网页结构相关知识；

（3）掌握HTML基本标签的使用；

（4）掌握表格布局、框架网页、层的布局等知识；

（5）掌握模板和库的使用；

（6）掌握CSS的样式的定义、设置及应用；

（7）掌握Javascript、JQuery脚本语言的使用。

2.2能力目标

基于工作过程的教学方法非常强调动手能力，在学完某一课程后，是否有能力去完成相关的工作，是否有能力去胜任相关的工作岗位，现将本课程能力目标制定如下：

（1）能够设计网站地图及网页结构；

（2）能够通过HTML、CSS及JS等代码实现网页。

2.3情感目标

情感态度指兴趣、动机、自信、意志和合作精神等影响学生学习过程和学习效果的相关因素以及在学习过程中逐渐形成的祖国意识和国际视野。制定合理的情感目标，保持积极的学习态度是学习成功的关键。

（1）培养学生独立进行系统分析、设计、实施、评估的能力；

（2）培养学生获取、分析、归纳、交流、使用信息和新技术的能力；

（3）培养学生自学能力、理解能力与表达能力；

（4）培养学生口头语书面表达能力、人际沟通能力；

（5）培养学生计划组织能力和团队协作能力；

（6）培养良好的心理素质和克服困难的能力。

三、传统讲授与行动导向相结合的教学模式

课程的教学模式主要分为两大部分：

第一部分为基于教师讲授的传统教学部分，主要内容有：

（1）网站及网页概述与开发步骤；

（2）网站地图及网页结构；

（3）HTML语言与CSS样式基础；

（4）Javascript、JQuery基础。

第二部分为行动导向教学模式，通过已掌握的基础知识及开发过程中获取的技能完成案例网站的开发，以网站完整的开发过程为案例，这样可以让学生了解一个网站的开发流程，主要内容有：（1）网站地图的设计；（2）网页结构的设计；（3）网页内容的实现。

之所以在本课程中加入教师讲授这种传统的教学方法，是因为在以往的行动导向课程中发现，直接进入案例的行动导向教学，学生在刚开始接触这门课程时是没有相关的基础知识，学生就需要从大量的知识中找到任务所需的知识，这犹如大海捞针，所以一个任务完成，学生不知道要学哪些知识，打击学生的积极性。

教师以传统的讲授教学模式进行，从而缩小学生自学知识点的范围，减少学生的迷茫，减轻学生在行动导向过程中的学习负担，提高汇报知识的准确性，提升学生学习兴趣，增加学生的成就感，让学生快乐地学习。

讲授法虽然能让学生掌握知识，但无法让学生将所学的知识转化成技能，无法胜任工作岗位对能力及情感的要求，应用到网页开发工作过程当中，故因将课程的重点放在案例实施的过程中，以行动导向教学模式为平台，让学生掌握完成网页实现的方法，有能力完成案例中的网页，并能将技能扩展到其他网页设计与制作中。但仅仅一个网站的案例无法完整展示该门学科的知识，需要在课堂练习及课后练习补充相应的小案例，以完善课程的知识结构。

四、细心地设计各小案例

教师在每次课前都应细心地设计每个小案例中的教学任务，每个小案例的教学任务应注意以下几个方面：

（1）在每个小案例中都应体现知识目标、技能目标与情感目标，在不同的案例中运用相关的技能实现网页的制作，需要让学生有完成任务的技能，还要让学生掌握完成任务的方法，因为课堂所学的知识与技能在现实的网页制作中是不够用的，学生只有即掌握技能又有方法获取新的知识，才能胜任网页设计与开发的岗位。

（2）同一小案例中安排不同层次的任务，对于前期知识与技能掌握较好的学生提出相对复杂的任务，对于掌握较差的学生提出相对较简单的任务，无论哪种难度的任务都能完成本案例，鼓励学生完成复杂的任务，实在困难先完成简单的任务，在课后再完成复杂的任务，这样即能让知识较差的学生学习该案例中的知識技能与方法，提升他们的积极性，又不妨碍较好的学生对更高层次知识技能与方法的掌握。

（3）任务相关知识的扩展与提升，比如：某个效果可以用多种方法实现；某个方法可以在不同的效果上实现。行动导向教学强调的是知识与技能的迁移与应用，在设计小案例时应将相关知识与技能的扩展提示给学生，培养学生自学能力与理解能力。

（4）注重学生的自我总结与分享，每个小案例完成后，让学生分享通过本任务中所学的知识与技能，任务实施过程中所走的弯路，分享能够培养学生进行总结的良好习惯，提升学生口头语书面表达能力、人际沟通能力。

（5）教师的教学行为重点放在课程准备教师点评。在传统的教学方法中，以教师讲授为主，学生是被动学习知识，在行动导向教学模式中，学生是主体，学生主动学习，教师从旁辅助。但并不是说教师的工作并不重要，一堂好的课，需要教师在课前精心地准备案例、课堂流程，才能更好地引导学生去掌握知识与技能，教师在点评中即可以表扬学生，增加学生的自信心和成就感，也可以评价学生完成任务时的方式方法的正确性，更主要的是能完善学生学习与总结过程中知识与技能的不足，并提出任务的相关扩展知识与应用。

（6）通过学生工作页引导学生进行任务实施，在完成相关任务或习题后，达到该次课的教学目的。

以“用CSS制作弹出菜单”课题为例，学生前期已经学习了HTML列表标签与CSS浮动，学生只需要找开所需的“：hover选择器”与“display属性”的使用方法，这个任务学生是可以通过自学完成的。

这个案例的操作技能非常简单，因此本堂课的重点与难点并不在操作技能的掌握上，而是在培养学生“遇到未掌握知识时如何解决问题”的情感能力上。

（1）制定的学习目标为：知识目标，掌握：hover选择器与display属性的使用；能力目标，能够通过CSS样式实现菜单显示与隐藏；情感目标，培养学生“遇到未掌握知识时如何解决问题”的能力。

（2）教学方法采用行动导向教学模式中的任务驱动法，有布置工作任务、任务分析、任务实施、展示与评价、教师讲解、教学小结、作业布置七个教学过程，其中任务实施过程由学生通过电脑自己网络上的相关知识，并应用到本堂课的任务中，以学生自主学习为主，教师引导为辅。

（3）学生工作页任务流程：

①有哪些功能尚未实现？应该怎么办？

②请问你查找知识的途径是？

③本次任务中的关键代码是什么？

④请简述关键代码的作用。

…

请在电脑上编写本次任务所需的代码。

（4）采用两种难度的任务习题，在较难的习题中，要求学生先用前期学习的列表标签及浮动属性制作静态导航条，并在适当的地方加入“：hover选择器”与“display属性”就可完成本堂课任务，在较易的习题中，已经将列表标签及浮动属性的代码编写好，只需在适当的地方加入“：hover选择器”与“display属性”就可完成本堂课任务。学生可根据自身的情况选择用何种难度完成本次任务

（5）提示学生进行两个方向的知识展，第一个扩展方向：弹出菜单功能除了可以用CSS样式制作，还可以用哪些技术制作（扩展知识点：Javascript、JQuery等脚本语言）；第二个扩展方向：“：hover选择器”与“display属性”还可以实现哪些效果（鼠标滑过图片放大显示的相册效果等）。

（6）要求学生对本次任务的完成经过进行汇报。

（7）教师点评与总结，表扬完成得较好的学生，鼓励尚未完成的学生，并重点讲解“：hover选择器”与“display属性”与“遇到未掌握知识时如何解决问题”的方法。

以行动导向教学模式为主导，通过本课程的学习，学生具有网页设计和制作工作最基本的知识与技能、具备较高的职业素质，能基本胜任各公司的网页设计师和网站管理维护等岗位工作。

参 考 文 献

[1]林姗，刘罡.基于行动导向的课程教学模式改革.[J].计算机教育，2015，16（44-48）

[2]苗树红.基于学案导学的行动导向教学探究.[J].中国职业技术教育，2015，05（79-81）

[3]张利国，杨川.行动导向教学法在高职院校电类专业学生创新创业能力培养模式中的应用.[J].当代教育实践与教学研究，2016，05（205-206）

[4]吴晓岚.行动导向教学模式在课程教学中的应用.[J].电脑知识与技术，2015，04（117-118）[5]胡昱.基于行动导向的合作式教学法.[J].教育，2015，04（32-33）