HTML5+CSS3网页设计实战 教案 3.1~2 盒子模型特点和标准盒模型

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。23.1盒子模型特点3.2标准盒子模型该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：(1) 理解盒子模型的概念及意义。(2) 了解盒子模型的分类：标准盒模型、怪异盒模型。(3) 掌握标准盒模型的width属性、height属性能力目标：（1）具备合理定义容器width属性、height属性值的能力。（2）具备精确计算容器占用尺寸的能力。（3）具备对元素外观美感与实际应用平衡的思考能力。素养目标：（1）通过对元素尺寸的精确计算，在编程细节上追求卓越和完美，引导学生树立精益求精的工匠精神。盒子模型特点和标准盒模型盒子的理解，盒子模型width属性、height属性。通过简单计算容器所占区域来加强对宽高值属性的认识。根据布局要求精确计算容器的相关属性值。通过两层嵌套的容器，计算指定容器的宽高值。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习回顾上一章节的知识导图。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入网页布局，实际上就是将整个页面分割成若干区域，每个区域定义相关尺寸，将该区域内的元素布局到对应位置。每个区域、每个元素都有自己的范围，而要了解元素的范围，我们引入了盒模型这个概念。相当于整个页面是一个大的盒子，里面要装若干个盒子，每个盒子都需要设置盒子相关属性。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授3.1盒子模型特点CSS中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型。介绍常用的容器（盒子）名字。3.2标准盒模型W3C标准盒模型下盒子的大小=width（content）+border+padding+margin知识点：标准盒模型记忆关键词：层见叠出关键词解析：层见叠出理解为容器计算宽高数值时要考虑接连不断的父子嵌套关系。当网页总体宽高比喻成一个集装箱，里面有包含大量木箱子，木箱子又装着若干个中箱子…………从单个箱子容器来说，内容区以外有三层（内边距、边框、外边距）。装物品的纸盒可以认为是容器的边框，那内边距就是纸盒与物品之间的防撞的填充物，外边距就是防纸盒被挤压的木箱子。在精确计算网页中每个元素的宽高时，我们要先固定总体的宽高值，如同集装箱尺寸在国际标准中是固定的，一层一层往内部计算各种中小箱子的尺寸，而非从内部最小的箱子开始计算。【提问】购买手机收货时，从手机包装的角度出发，观察有几层保护措施？来理解盒子模型的外边距、边框、内边距。☆思政讲解：新职业——收纳师，负责生活中物品的收纳。将物品整齐有序，利用大小不一的盒子收纳。宿舍卫生评比，也应将杂物用一些纸箱、塑料箱装填。3.3盒子模型的相关属性width和height：这两个属性定义了盒子的内容区域的宽度和高度。padding：内边距，定义了内容和边框之间的空间。border：边框，定义了盒子边框的样式、宽度和颜色。margin：外边距，定义了盒子与其他元素之间的空间。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【案例1】完成如图3-2所示的“推荐信息”版块的HTML代码。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分站点结构结构无误，文件名规范10Html结构容器关系正确40Css代码样式最终效果一致40代码书写缩进整齐10总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习，掌握以下：（1）理解盒子模型的概念及意义。（2）了解盒子模型的分类：标准盒模型、怪异盒模型。（3）掌握标准盒模型的margin、padding、border属性。能合理定义容器margin、pad