《Web前端技术》课程图文混排单元教学设计 .pdfVIP

《Web前端技术》课程图文混排单元教学设计

一、案例教学活动课的教学理念及设想

《Web前端技术》是计算机专业学生的必修课程，本课程采用任务

驱动法，在任务完成的过程中，采用研究性学习来激发学生创新的自

主学习。前期铺垫以够用为原则的基础知识，以实际动手操作完成任

务带动相关理论的学习，抓住大、中专学生以形象思维方式为主的特

点，在教学中以实际操作作为切入点，逐渐激发带动学生的各项智能

的不同程度的提高。通过学生在完成任务时的自主设计，创新设计，引

发学生的发现欲望和想象思维，在学生自主不断的发现探究过程中，激

发学生的潜能，达到开启智能提高学生素质的目的。

二、案例教学活动课的教学设计思路与教学模式整个教学体系分

为基础篇和操作篇两部分。基础篇为以够用

为原则的基础知识铺垫。操作篇中Html，CSS，JavaScript部分的内

容都围绕着任务进行，任务以案例的形式出现，且彼此相关，自成一

体。（表1）

学生在案例教学活动课中通过完成任务，使其进一步体会所学知

识的使用要领；利用任务驱动法，对学生个体进行多元智能的开发和

提升；在任务的完成过程中，学生自主创新设计，并采用研究性学习，

使得学生积极主动地投入活动。在学生与他人合作共事的基础上，进

行自我管理和自我发展，并在安排自己的任务和解决问题的过程中使其

综合能力得以提高。在学生自己不断的发现探究过程中，其创新思维

得到了培养，归纳思维和演绎思维得到了锻炼，程序代码在学生的反复

修改调试中得以反复应用，从而使所学理论知识不断巩固深化。

三、案例教学活动课的教学活动设计

1、学生组织

组织案例活动小组。案例活动小组采用学生自由组合，老师适当

调整的方法来组成。

2、教学案例的活动设计在《图文混排》课中，整体教学思路设计

围绕一个环节两个行动展开：教学环节、教师行为和学生活动。具体的

教学环节分为6步：

任务1：项目演示。展示完成的案例“三种人不宜长时间使用手

机”，用分析组成元素的方法来引导学生探究学习，明确学习任务，

激发学习兴趣。

任务2：搭建html基础页面。通过学生观察网页，讨论分析网页

构成，编写html代码，完成基础页面的创建。

任务3：演示操作。把word中文本设置的知识点迁移到网页设

中，便于学生对知识点的理解与掌握，学生观察老师的操作

-『j-

示范。

任务4：实际演练。每个学生根据自己的实际情况，从名片、贺

卡、班刊封面三个难易程度不同的任务中挑选一个进行分析，并应用文

本属性的设置方法，实现最初设计效果。

任务5：组内评价。从效果实现以及代码规范的角度对组内的成员

进行相互评价。

任务6：归纳总结。梳理知识点，点评学生掌握完成情况，布置下

课任务。

具体的教学实施如下：

（1）任务引入

V教师引导学生欣赏做好的网页，让学生体会美的效果，引起学生

的学习需求。通过这个网页，让学生清楚认识到：文本和图片是网页的

核心内容，是网页主要传达信息的方法。文字和图片的设计直接影响

网页的整体效果。

V进一步进行网页对比，让学生观察使用CSS设定样式之后的效

果与仅使用HTML定“结构”的页面效果的异同。

V通过两组不同的对比，让学生明确：Html可以对文本和图片

进行简单的样式设置，但是不够灵活，文件较大，浏览速度慢；使用CSS

对文本图片的样式进行设置更灵活、精确，更加丰富多彩，文件容积

小，浏览速度快。

（2）完善html基础页面

V老师抛出任务，演示做好的网页，引导学生观察，引出本次的

任务：如何利用css设计文字与图片的属性，设计网页的显示效果，

要求学生能够具体指出对文本和图片进行哪些设置，培养学生的观察能

力与语言表达能力，由于把word中图文混排的知识点迁移过来，直接

降低了学习的难度，帮助学生轻松接受任务。

V具体实现步骤：教师下发基础的html页面，引导学生根据根据

前面的分析思考如何修改页面；学生以小组为单位，观察讨论，统一

思想，要实现演示效果，应该如何修改html