课题:制作”专业教程”

授课人：周晓青

授课班级：125班学生

时间：4月10日第六节课      

地点：实训楼2号机房

教学目标：

知识目标：

      1.了解Div+Css布局网页。

2.理解网页各部分的常用命名方法。

技能目标：

     1.掌握根据页面效果图分析页面组成，以及嵌套关系。

2.掌握应用Div+Css布局页面知识分析网页，并为各部分命名。

3.掌握Div的插入。

情感目标：培养学生课前预习的学习习惯，主 动学习的优良作风，小组协作的团队精神。

教学重点： 1.掌握分析网页结构，利用Div+Css布局网页。

2.掌握Div的命名。

3.掌握Div标签的创建。

教学难点： 掌握Div标签的创建。

教学资源：

信息资源：教材、教案、课件；设备资源：投影、机房

教学方法：任务引领、演示讲解

教学步骤：

一.导入：展示个人网站，复习已经学过的栏目，出示本单元***终效果网页图，展示本节课的主要任务。

     二．学习新单词，做一个小练习，初步对网页布局有所了解。

     三．讲解本节课的相关知识点。

 1.什么是Div:Div就是一个区块容器标记，可以容纳各种网页元素。

 2.什么是Div+CSS布局：把Div中的内容视为一个独立的对象，通过css规则进行控制。

3、使用Div+CSS布局页面的方法：在容器中嵌套插入多个Div，分别设置其宽度高度，边框、填充、浮动等规则。

     四．分析网页布局结构，为13个Div命名。

     五．讲解操作注意事项。

     六．展示操作步骤的图解。

     七．在教材上画出来13个Div的插入位置，名称及CSS 规则。

     八．展示效果图，教师讲解******个Div的插入，学生开始练习操作，巡视并辅导。

总结：本节课我们学习了布局网页的第三种方法：Div+CSS,要求同学们会分析页面的布局结构，会使用Div+CSS对页面进行布局。

板书设计：

                 制作“专业教程”网页

一． 网页各部分命名：

二． Div标签对话框三要素：位置        ID        CSS规则

作业：完善表格。