论文部分内容阅读
摘 要：作为一种新型标准化的网页设计模式，DIV CSS布局技术具有更强的功能和更高的灵活性，被广泛应用于网页布局中。本文着重阐述任务驱动教学法在DIV CSS布局技术中的教学实践，以实质任务为突破口，解决中职生学习DIV CSS布局技术的难点，以期有效激发学生学习的积极性和主动性。
关键词：中职；网页设计；DIV CSS；任务驱动
传统的网页设计一般采用表格布局，这种布局模式简单、快速，但是源代码存在大量冗余，页面结构复杂且不易修改。DIV CSS布局技术的出现，解决了传统布局模式的缺点，成为一种新型标准化的网页设计模式。然而DIV CSS布局技术对于中职学生而言难度较大，学习中容易厌烦，缺乏对新技术的求知欲和创新精神。对教师来说则面临教学内容的抽象化和复杂化。为此，实践中，可尝试在讲解DIV CSS布局技术时采用任务驱动教学法，让学生通过设计“个人网站”“淘宝网店”及“博客”等切身实际的任务，以任务为引领，达到初步掌握DIV CSS布局技术的目的。
一、网页设计中DIV CSS布局技术的教学现状分析
DIV CSS是WEB2.0标准化设计的一项技术，具有代码简洁、页面优化、浏览快速、更新及维护方便等优点，是IT行业中网页设计的一项标准技术。中职计算机专业的学生由于基础比较薄弱，习惯于窗口式的软件操作，对于他们而言学习DIV CSS技术是枯燥、繁琐和痛苦的事情。另外，在网页设计课程的学习中学生习惯于“老师讲—学生看—实验操作”流程式的学习方式，实验缺乏情景化和生活化，因此，学生学习的积极性不强。
“需要—学习动机—学习行动—结果满足—学习兴趣”是学习兴趣产生的过程，应该设计适合于学生“需要”的任务，改变“讲—听—练”的传统教学模式，明确目标，面对现实问题，并结合中职生的年龄特点和个性心理，以任务为引领，引导学生自主学习、协作学习。
二、任务驱动法在DIV CSS
布局技术教学中的可行性分析
1.任务驱动教学法分析
任务驱动教学法是以“学习者为中心”，以完成具体任务为过程，在任务中结合教学内容，“学习者”通过主动学习，调整、重组知识结构，在典型“任务”驱动下由易到难、循序渐进地完成一系列“任务”，从而形成清晰的思路，掌握解决问题的方法和构建完整的知识体系。通过对“任务”的实施，培养学生分析问题、解决问题、沟通协作、创新思维的能力。
2.任务驱动教学法优势
相比传统的教学模式，任务驱动教学法的优势在于：①“学生为主体”的作用明显；②能充分激发学生的学习兴趣，提高学习的积极性；③能有效地发挥学生的创造性思维；④有利于培养学生分析问题和解决问题的能力；⑤有利于学生个性发展和创新能力的提高。
3.DIV CSS布局技术教学中任务设计要点
任务的设计需生活化、真实化、主题密切化，要符合中职学生年龄特点和认知能力，能体现自我个性和价值。在任务中体现分层教学，通过任务实施，在自助和互助学习中探究任务知识的延伸。
（1）任务的设计应以激励学生主动学习兴趣为出发点。以激发学生学习兴趣为出发点，设计与学生自我主题密切相关的任务。例如，实践中我以设计“个人网站”和“淘宝网店”为任务，利用校园网作为学生作品展示平台，符合中职生求知欲和表现欲的心理，重视中职生的关注焦点，激发学生对DIV CSS布局技术的学习热情。
（2）任务的实施应以师生互动、边学边做为切入点。坚持“以任务为主线、教师为主导、学生为主体”的原则，实施中教师提供解决任务的知识和线索，积极参与互动，充当学生知识搜索的对象，主导学生实施任务，是学生实施任务的引导者、沟通者和情境的创建者，实施中把握任务的系统性、延续性和难易程度。实践中学生设计的DIV布局由1列到多列，从导航菜单到下拉菜单，由CSS文本修饰到CSS动态菜单设置，由易到难、循序渐进、边学边做，最终完成预定任务。
（3）任务的目的应以实现学生主动参与、积极探索、创新思维、发挥个性为落脚点。任务实施中鼓励学生大胆猜想、判断和提问，学会逻辑推理和创新，克服思维定式。在“个人网站”布局设计中，会出现布局不规范，标识不清，CSS调用混乱等问题，通过问题的解决，学生在掌握了基本方法后能够触类旁通，举一反三，探索和自我开拓。
三、任务驱动教学法在DIV CSS布局技术教学中的具体实施
以“个人网站设计”为案例，采用任务驱动教学法，在任务的实施过程中划分为前任务、任务环、后任务三个教学环节。
1.前任务
前任务环节主要为任务的设定和引入，该环节采用两个实施过程：
（1）创设情境。实施任务前，我组织同学欣赏“网易博客”“新浪博客”“虾米CGI”等知名网站中优秀个人网页，分析页面的布局，全班同学参与点评不同网页的优缺点，提出对网页布局、美化及风格设计的新思路，鼓励大家学好DIV CSS技术，在网络上展示自己的优秀作品。通过激发学生兴趣点创建情境，引入学习
（2）提出任务，操作示范。鼓励大家发挥自己的聪明才智，提出利用DIV CSS布局技术建设一个宣传自我、体现自我个性的“个人网站”任务。示范中讲解DIV CSS的结构和布局方法、CSS的样式规则和CSS盒模型等，演示DIV布局固定行列、多行多列及利用CSS格式化。实例示范环节中利用DIV CSS布局技术设计一个“个人网站”的页面布局样例（见下图），着重讲解页面层的容器“#Container{}”与“#Header{}、PageBody{}、#Footer{}”、“#Sidebar{}、#MainBody{}”之间的父子层关系，分析CSS对DIV及页面的控制、排版、修饰、美化过程。
2. 任务环
实施任务过程中设定执行任务环节称为任务环，分为任务、计划、报告。 （1）任务：学生执行任务。根据设定的任务内容，在教师的引导下学生独立完成“个人网站”建设任务，在页面布局设计中，学生充分发挥自己的想象力，设计各具特性的布局方式。任务执行中学生会碰到DIV布局的规划问题，CSS修饰排版问题，容器内DIV与CSS的定义问题等；教师参与全程互动和技术指导，在解答问题时要充分发挥学生的探索精神，鼓励自我思考、自主学习或协作学习，倡导学生之间沟通协作和交流，通过不同观点和问题的交锋、补充和修正，最终解决问题。实践中根据学生基础能力和水平差异设定三种分层：①合格层：能利用DIV CSS布局完成“个人网站”中三层页面的布局及设计，加入页面元素并采用CSS排版、修饰和美化，网页链接正确，基本实现整个网站的完整性；②良好层：能利用DIV CSS技术完成主要框架之外附加结构的布局和美化，完成主导航条设计、logo设计、CSS的应用。③优秀层：利用DIV布局并设计动态导航栏，编写CSS代码，设计下拉及多级弹出菜单。执行任务过程中鼓励学生根据自己的掌握能力和兴趣完成高一层的内容，通过扩展知识创新对“个人网站”的设计。
（2）计划：任务实施过程中的记录。在任务实施过程中要求学生制定计划表，包含过程记录、时间记录、问题记录、作品的展示内容、技术手段及创新内容。
（3）报告：作品展示。完成任务后，教师集中时间对作品进行展示，根据制定的计划，要求每个参与者对“个人网站”设计中DIV布局的方法，CSS盒子模型属性的设计方法等内容进行讲解，提出创新点和后期目标。
3.后任务：后期评价
建立评价模式，通过网络共享学生作品，分发评价表，学生对每个作品进行评价，评价内容包含：网站结构完整性、创意、DIV布局、CSS应用、动态导航栏设计、多级菜单应用、创新点等。根据评价结果，挑选优秀作品进行集中展示，共同二次评价作品的DIV布局、CSS应用、技术难度、创新点等，同时作者接受评价者的提问，依据二次评价结果推选部分优秀作品在校园网内展示，鼓励其他作品进行二次或多次修改，并补充挂入校园网。展示、评价和挂网能激发学生对自我作品的重视和对其他作品的关注，激发学生的兴奋点和成就感，对提高学生学习兴趣有很大帮助。
四、DIV CSS网页布局设计教学中实施任务驱动教学法的意义
在DIV CSS网页布局设计教学中采用任务驱动教学法，改变传统的教学模式，整个过程以学生为主体，教师主导任务的实施，在“做”的过程中融入“学”和“教”。对中职学生而言学习DIV CSS技术有较大的难度，采用任务驱动教学法，设计切合学生实际的任务，可突破传统教学中的5大问题：①有效促进学生学习的积极性；②“以学生为主体”，改变传统教学模式，学生参与的自由度高，发挥空间大、主动性强。③在合作与沟通中不断解决出现的问题，有效掌握DIV CSS布局技术知识，并不断地创新和提高。④切合自身实际任务的实施，学生学习的出发点和目标明确，对新技术的学习产生渴望，明确团结协作的意义和创新带来的魅力。⑤任务的实施有效地推进DIV CSS的应用，让后续的网页设计朝标准化的方向发展。
五、结论与反思
任务驱动教学法让学生成为学习的主人，掌握与人沟通协作的能力，在任务驱动下培养了实践和创新能力，同时提高了课堂学习效率。教师主导任务的组织、引导、促进、评价、咨询，学生主动参与、积极学习、探索和创新，提升了教师的职业荣誉感和幸福感。
参考文献：
[1]姜大源.关于职业教育课程开发[J].职业教育研究，2010（6）.
[2]杨建勋.计算机教学中任务驱动教学法的实施[J].教育与职业，2013（6）.
[3]陈 伟，余劲松.网页制作（第2版）[M].北京：高等教育出版社，2008.
（作者单位：福建省漳州第一职业中专学校）
关键词：中职；网页设计；DIV CSS；任务驱动
传统的网页设计一般采用表格布局，这种布局模式简单、快速，但是源代码存在大量冗余，页面结构复杂且不易修改。DIV CSS布局技术的出现，解决了传统布局模式的缺点，成为一种新型标准化的网页设计模式。然而DIV CSS布局技术对于中职学生而言难度较大，学习中容易厌烦，缺乏对新技术的求知欲和创新精神。对教师来说则面临教学内容的抽象化和复杂化。为此，实践中，可尝试在讲解DIV CSS布局技术时采用任务驱动教学法，让学生通过设计“个人网站”“淘宝网店”及“博客”等切身实际的任务，以任务为引领，达到初步掌握DIV CSS布局技术的目的。
一、网页设计中DIV CSS布局技术的教学现状分析
DIV CSS是WEB2.0标准化设计的一项技术，具有代码简洁、页面优化、浏览快速、更新及维护方便等优点，是IT行业中网页设计的一项标准技术。中职计算机专业的学生由于基础比较薄弱，习惯于窗口式的软件操作，对于他们而言学习DIV CSS技术是枯燥、繁琐和痛苦的事情。另外，在网页设计课程的学习中学生习惯于“老师讲—学生看—实验操作”流程式的学习方式，实验缺乏情景化和生活化，因此，学生学习的积极性不强。
“需要—学习动机—学习行动—结果满足—学习兴趣”是学习兴趣产生的过程，应该设计适合于学生“需要”的任务，改变“讲—听—练”的传统教学模式，明确目标，面对现实问题，并结合中职生的年龄特点和个性心理，以任务为引领，引导学生自主学习、协作学习。
二、任务驱动法在DIV CSS
布局技术教学中的可行性分析
1.任务驱动教学法分析
任务驱动教学法是以“学习者为中心”，以完成具体任务为过程，在任务中结合教学内容，“学习者”通过主动学习，调整、重组知识结构，在典型“任务”驱动下由易到难、循序渐进地完成一系列“任务”，从而形成清晰的思路，掌握解决问题的方法和构建完整的知识体系。通过对“任务”的实施，培养学生分析问题、解决问题、沟通协作、创新思维的能力。
2.任务驱动教学法优势
相比传统的教学模式，任务驱动教学法的优势在于：①“学生为主体”的作用明显；②能充分激发学生的学习兴趣，提高学习的积极性；③能有效地发挥学生的创造性思维；④有利于培养学生分析问题和解决问题的能力；⑤有利于学生个性发展和创新能力的提高。
3.DIV CSS布局技术教学中任务设计要点
任务的设计需生活化、真实化、主题密切化，要符合中职学生年龄特点和认知能力，能体现自我个性和价值。在任务中体现分层教学，通过任务实施，在自助和互助学习中探究任务知识的延伸。
（1）任务的设计应以激励学生主动学习兴趣为出发点。以激发学生学习兴趣为出发点，设计与学生自我主题密切相关的任务。例如，实践中我以设计“个人网站”和“淘宝网店”为任务，利用校园网作为学生作品展示平台，符合中职生求知欲和表现欲的心理，重视中职生的关注焦点，激发学生对DIV CSS布局技术的学习热情。
（2）任务的实施应以师生互动、边学边做为切入点。坚持“以任务为主线、教师为主导、学生为主体”的原则，实施中教师提供解决任务的知识和线索，积极参与互动，充当学生知识搜索的对象，主导学生实施任务，是学生实施任务的引导者、沟通者和情境的创建者，实施中把握任务的系统性、延续性和难易程度。实践中学生设计的DIV布局由1列到多列，从导航菜单到下拉菜单，由CSS文本修饰到CSS动态菜单设置，由易到难、循序渐进、边学边做，最终完成预定任务。
（3）任务的目的应以实现学生主动参与、积极探索、创新思维、发挥个性为落脚点。任务实施中鼓励学生大胆猜想、判断和提问，学会逻辑推理和创新，克服思维定式。在“个人网站”布局设计中，会出现布局不规范，标识不清，CSS调用混乱等问题，通过问题的解决，学生在掌握了基本方法后能够触类旁通，举一反三，探索和自我开拓。
三、任务驱动教学法在DIV CSS布局技术教学中的具体实施
以“个人网站设计”为案例，采用任务驱动教学法，在任务的实施过程中划分为前任务、任务环、后任务三个教学环节。
1.前任务
前任务环节主要为任务的设定和引入，该环节采用两个实施过程：
（1）创设情境。实施任务前，我组织同学欣赏“网易博客”“新浪博客”“虾米CGI”等知名网站中优秀个人网页，分析页面的布局，全班同学参与点评不同网页的优缺点，提出对网页布局、美化及风格设计的新思路，鼓励大家学好DIV CSS技术，在网络上展示自己的优秀作品。通过激发学生兴趣点创建情境，引入学习
（2）提出任务，操作示范。鼓励大家发挥自己的聪明才智，提出利用DIV CSS布局技术建设一个宣传自我、体现自我个性的“个人网站”任务。示范中讲解DIV CSS的结构和布局方法、CSS的样式规则和CSS盒模型等，演示DIV布局固定行列、多行多列及利用CSS格式化。实例示范环节中利用DIV CSS布局技术设计一个“个人网站”的页面布局样例（见下图），着重讲解页面层的容器“#Container{}”与“#Header{}、PageBody{}、#Footer{}”、“#Sidebar{}、#MainBody{}”之间的父子层关系，分析CSS对DIV及页面的控制、排版、修饰、美化过程。
2. 任务环
实施任务过程中设定执行任务环节称为任务环，分为任务、计划、报告。 （1）任务：学生执行任务。根据设定的任务内容，在教师的引导下学生独立完成“个人网站”建设任务，在页面布局设计中，学生充分发挥自己的想象力，设计各具特性的布局方式。任务执行中学生会碰到DIV布局的规划问题，CSS修饰排版问题，容器内DIV与CSS的定义问题等；教师参与全程互动和技术指导，在解答问题时要充分发挥学生的探索精神，鼓励自我思考、自主学习或协作学习，倡导学生之间沟通协作和交流，通过不同观点和问题的交锋、补充和修正，最终解决问题。实践中根据学生基础能力和水平差异设定三种分层：①合格层：能利用DIV CSS布局完成“个人网站”中三层页面的布局及设计，加入页面元素并采用CSS排版、修饰和美化，网页链接正确，基本实现整个网站的完整性；②良好层：能利用DIV CSS技术完成主要框架之外附加结构的布局和美化，完成主导航条设计、logo设计、CSS的应用。③优秀层：利用DIV布局并设计动态导航栏，编写CSS代码，设计下拉及多级弹出菜单。执行任务过程中鼓励学生根据自己的掌握能力和兴趣完成高一层的内容，通过扩展知识创新对“个人网站”的设计。
（2）计划：任务实施过程中的记录。在任务实施过程中要求学生制定计划表，包含过程记录、时间记录、问题记录、作品的展示内容、技术手段及创新内容。
（3）报告：作品展示。完成任务后，教师集中时间对作品进行展示，根据制定的计划，要求每个参与者对“个人网站”设计中DIV布局的方法，CSS盒子模型属性的设计方法等内容进行讲解，提出创新点和后期目标。
3.后任务：后期评价
建立评价模式，通过网络共享学生作品，分发评价表，学生对每个作品进行评价，评价内容包含：网站结构完整性、创意、DIV布局、CSS应用、动态导航栏设计、多级菜单应用、创新点等。根据评价结果，挑选优秀作品进行集中展示，共同二次评价作品的DIV布局、CSS应用、技术难度、创新点等，同时作者接受评价者的提问，依据二次评价结果推选部分优秀作品在校园网内展示，鼓励其他作品进行二次或多次修改，并补充挂入校园网。展示、评价和挂网能激发学生对自我作品的重视和对其他作品的关注，激发学生的兴奋点和成就感，对提高学生学习兴趣有很大帮助。
四、DIV CSS网页布局设计教学中实施任务驱动教学法的意义
在DIV CSS网页布局设计教学中采用任务驱动教学法，改变传统的教学模式，整个过程以学生为主体，教师主导任务的实施，在“做”的过程中融入“学”和“教”。对中职学生而言学习DIV CSS技术有较大的难度，采用任务驱动教学法，设计切合学生实际的任务，可突破传统教学中的5大问题：①有效促进学生学习的积极性；②“以学生为主体”，改变传统教学模式，学生参与的自由度高，发挥空间大、主动性强。③在合作与沟通中不断解决出现的问题，有效掌握DIV CSS布局技术知识，并不断地创新和提高。④切合自身实际任务的实施，学生学习的出发点和目标明确，对新技术的学习产生渴望，明确团结协作的意义和创新带来的魅力。⑤任务的实施有效地推进DIV CSS的应用，让后续的网页设计朝标准化的方向发展。
五、结论与反思
任务驱动教学法让学生成为学习的主人，掌握与人沟通协作的能力，在任务驱动下培养了实践和创新能力，同时提高了课堂学习效率。教师主导任务的组织、引导、促进、评价、咨询，学生主动参与、积极学习、探索和创新，提升了教师的职业荣誉感和幸福感。
参考文献：
[1]姜大源.关于职业教育课程开发[J].职业教育研究，2010（6）.
[2]杨建勋.计算机教学中任务驱动教学法的实施[J].教育与职业，2013（6）.
[3]陈 伟，余劲松.网页制作（第2版）[M].北京：高等教育出版社，2008.
（作者单位：福建省漳州第一职业中专学校）