《HTML5CSS3 网页设计与制作》教案-20 第7章 第 3 节 盒模型详解

课程教案-20第7章基于DIV+CSS的网页课题名称第3节盒模型详解授课班级软件技术等大一上学期授课班级授课学时2授课地点机房授课形式讲解+上机练习参考教材《前端HTML+CSS修炼之道》教学资源电子课件、教案、文字材料知识目标掌握盒子模型的基本概念；掌握块元素和行内元素的区别技能目标掌握设置元素边框、边界等控制大小和间距的css属性；能够对整个页面进行HTML结构设计；能够让页面整体居中，以及对整体页面及页面各布局的教学目标大小进行控制；能够计算每个元素所占的宽度；素质目标培养学生认真、一丝不苟的学习态度教学盒子模型重点教学重点与难点教学对整体页面、页面元素及页面各布局的大小进行控制难点本次所讲内容选自教材第7章第3节通过本节课的学习使学生掌握盒子模型的基本概念掌握设置元素边框、边界等控制大小和间距的CSS属性；能够对整个页面进行学情分析HTML结构设计；能够让页面整体居中，以及对整体页面及页面各布局的大小进行控制；能够计算每个元素所占的宽度；理解内外边距的不同之处课前复习理论课讲授的DIV+CSS相关概念课中

1、讲解盒子模型，重点讲解以下内容1盒模型宽度、高度教学过程2内边距3边框4外边距

2、上机实战，讲解并完成以下网页采用启发式教学，通过多媒体课件现场演示更加生动，与学生互动效果更好；在教学反思上机课上学生学会了如何创建站点和简单的网页页面；课后布置了有关站点的作业，并且利用上机时间完成和指导工作课后总结在上机实战过程中存在的问题，预习下次课知识。