网页基础与制作 6

第1章PHP开篇PAGE16《网页设计与制作（HTML5+CSS3+JavaScript）（第2版）》教学设计课程名称：授课年级：授课学期：教师姓名：年月课题名称第4章运用盒子模型划分网页模块计划课时7课时教学引入盒子模型是CSS网页布局的核心基础，只有掌握盒子模型的结构和用法，才可以将零散的网页内容模块化，为网页布局和排版打下良好的基础。本章将对盒子模型的概念、相关属性及元素的类型和转换做具体讲解。教学目标使学生了解盒子模型的概念使学生理解块元素与行内元素的区别，能够进行类型转换使学生掌握内边距属性和外边距属性的使用方法，能够为元素设置内边距、外边距使学生掌握边框属性的使用方法，能够为图像、文本等添加边框使学生掌握box-sizing属性，能够计算元素的总宽度和总高度使学生掌握背景属性，能够通过背景属性控制背景颜色和背景图像使学生掌握块元素垂直外边距的合并，能够实现相邻块元素垂直外边距的合并，以及嵌套块元素垂直外边距的合并教学重点<div>标签盒子的宽与高边框属性box-shadow属性背景属性<span>标签元素的转换教学难点边框属性背景属性相邻块元素垂直外边距的合并嵌套块元素垂直外边距的合并教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一课时（认识盒子模型、<div>标签、盒子的宽与高）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课在网页设计中，盒子模型是CSS技术所使用的一种思维模型，理解了盒子模型才能更好地对网页进行排版布局。本节课将详细介绍盒子模型相关的基础知识。三、新课讲解知识点1-认识盒子模型教师通过PPT的方式讲解认识盒子模型。盒子模型的概念和作用元素的内容内边距边框外边距知识点2-<div>标签教师通过PPT结合实际操作的方式讲解<div>标签。<div>标签的作用通过案例演示<div>标签的用法知识点3-盒子的宽与高教师通过PPT结合实际操作的方式讲解盒子的宽与高。width和height属性值的作用演示如何使用width和height属性控制网页中的段落文本四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第二课时（边框属性）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课理解盒子模型的结构之后，要想自如地控制页面中每个盒子的样式，还需要掌握盒子模型的相关属性。本节课将对这些属性进行详细讲解。三、新课讲解知识点-边框属性教师通过PPT结合实际操作的方式讲解边框属性。边框样式（border-style）边框宽度（border-width）边框颜色（border-color）综合设置边框圆角边框（border-radius）图片边框（border-image）四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第三课时（内边距属性、外边距属性、box-shadow属性、box-sizing属性）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课在网页设计中，为了调整内容在盒子中的显示位置，常常需要给标签设置内边距、外边距等。本节课将对内边距属性、外边距属性、box-shadow属性、box-sizing属性进行讲解。三、新课讲解知识点1-内边距属性教师通过PPT结合实际操作的方式讲解内边距属性。padding-top:上内边距;padding-right:右内边距;padding-bottom:下内边距;padding-left:左内边距;padding:上内边距[右内边距下内边距左内边距];知识点2-外边距属性教师通过PPT结合实际操作的方式讲解外边距属性。margin-top:上外边距;margin-right:右外边距;margin-bottom:下外边距;margin-left:左外边距;margin:上外边距[右外边距下外边距左外边距];知识点3-box-shadow属性教师通过PPT结合实际操作的方式讲解box-shadow属性。box-shadow属性的作用box-shadow属性的参数值知识点4-box-sizing属性教师通过PPT结合实际操作的方式讲解box-sizing属性。box-sizing属性的作用box-sizing属性的语法格式content-box和border-box的区别四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第四课时（背景属性）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课相比文本，图像往往能给用户留下更深刻的印象，所以在网页设计中，合理控制背景颜色和背景图像至关重要。本节课将对CSS控制背景属性的相关知识进行具体讲解。三、新课讲解知识点-背景属性教师通过PPT结合实际操作的方式讲解背景属性。设置背景颜色（background-color）设置背景图像（background-image）设置背景图像的平铺（background-repeat）设置背景图像的位置（background-position）设置背景图像固定（background-attachment）设置背景图像的大小（background-size）设置背景图像的显示区域（background-origin）设置背景图像的裁剪区域（background-clip）设置多重背景图像背景复合属性设置背景与图片的不透明度四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第五课时（元素的类型、<span>标签、元素的转换）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课在前面的章节中介绍CSS属性时，经常会提到“仅适用于块级元素”，那么究竟什么是块级元素？标签在默认状态下拥有一定的显示模式，那么如何将元素的类型在显示模式之间进行转换？接下来，本节课将对元素的类型与转换的相关知识进行讲解。三、新课讲解知识点1-元素的类型教师通过PPT结合实际操作的方式讲解元素的类型。块元素行内元素知识点2-<span>标签教师通过PPT结合实际操作的方式讲解<span>标签。<span>标签的作用演示<span>标签的使用知识点3-元素的转换教师通过PPT结合实际操作的方式讲解元素的转换。inlineblockinline-blocknone四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第六课时（相邻块元素垂直外边距的合并、嵌套块元素垂直外边距的合并、阶段案例：制作音乐排行榜）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课当两个相邻或嵌套的块元素相遇时，其垂直方向的外边距会自动合并，发生重叠。了解块元素的这一特性，有助于更好地使用CSS进行网页布局。本节课将针对块元素垂直外边距的合并进行详细的讲解。三、新课讲解知识点1-相邻块元素垂直外边距的合并教师通过PPT结合实际操作的方式讲解相邻块元素垂直外边距的合并。相邻块元素垂直外边距合并的原因案例演示相邻块元素垂直外边距的合并知识点2-嵌套块元素垂直外边距的合并教师通过PPT结合实际操作的方式讲解嵌套块元素垂直外边距的合并。嵌套块元素垂直外边距合并的原因案例演示嵌套块元素垂直外边距的合并知识点3-阶段案例：制作音乐排行榜教师通过PPT结合实际操作的方式讲解阶段案例：制作音乐排行榜。案例分析案例实现四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高