网页前端开发案例教学论文

一、单元教学目标

本单元的能力目标为：分析网站页面结构、制作网站模板；能够编辑XHTML添加页面段落文字、超链接、标题字；能够创建样式表文件；能够修改元素背景、大小、对齐方式、超级链接效果。本单元的知识目标为：掌握<h1>、<h2>、<p>、<a>、<ul>、<li>标签的作用和用法；CSS样式width、height、font-size、color、background、float、clear、overflow、margin、padding、border、line-height、text-décoration属性的作用和用法。本单元的素质目标为：页面布局分解能力；手写代码的能力。

二、案例教学设计

（一）引入情境

教师在布置任务前设计教学情境，本单元设计了2个教学情境。情景1：该公司的网络管理员申请了新的电子邮箱，现在需要对网站版权部分的邮件地址进行修改；情景2：现在公司网站需要新增加一个模板“在线咨询”，需要制作“在线咨询”栏目页面。教师在提出情境后向学生提问：为什么要做模板，制作模板有什么好处。接着，教师指导学生在以下两个网站中实现上述情景待解决的问题，一个是没有使用模板的网站，另一个是使用模板的网站。最后教师总结制作模板的好处。在此过程中，学生思考情景1、2可以怎样实现，并观看教师如何实现，体验如何实现情景1，2。

（二）布置任务

教师提出本单元的学习任务，制作网站模板页。并分析实现思路：分析网站页面布局结构，找出公共部分和不同部分；制作页面公共区域（暂存为普通网页）；在页面中添加可编辑区域；保存模板。目的是让学生对模板的制作流程有一个初步的认识。学生在此阶段需要明确教师提出的任务，了解任务实现思路。

（三）案例演示

案例模板的制作分八个步骤来完成，每个步骤都有详细的教学内容，教师活动，学生活动，教学重点。如表1案例演示步骤所示。

三、知识讲解

在演示案例过程中，教师将详细介绍修改div的大小，对齐方式；使用“以图换字”的方法修改<h1>的背景实现Logo图片的显示；使用<ul>实现水平导航条；修改超级链接的效果；修改段落文字的效果；设置clear属性清除浮动，重点介绍样式的创建、语法、案例中用到属性。学生通过教师演示、自己练习掌握width、height、font-size、color、background、float、clear、overflow、margin、padding、border、line-height、text-décoration属性的含义以及用法。

四、课堂考核

单元考核主要考核学生对本次课内容掌握的情况。教师将使用20分钟的时间考核学生本单元的掌握情况，学生随机抽取任务步骤1、3、5、6、7、8现场制作，在考核过程中确保学生是独立完成的，教师当堂计分。

作者：冯燕 单位：湖南机电职业技术学院