HTML5+CSS3网页设计实战 教案 3.3 margin、padding属性

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。23.3盒子模型的相关属性该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1） margin外边距属性及书写格式（2） padding内边距属性及书写格式（3） border边框属性能力目标：（1） 具备合理设置容器margin、padding属性的能力。（2） 具备根据父容器大小，合理规划子容器相关属性值的能力。素养目标：（1）世界最大单口径射电望远镜——“天眼”，了解中国天眼的技术含量，提升民族自豪感。（2）了解“感动中国”的众多人物，树立正确的时代价值观，远离畸形的追星文化。（3）对盒子各属性的精确计算，提升一丝不苟的学习态度、精益求精的工作态度。盒子模型的相关属性margin外边距属性、padding内边距属性、border边框属性。通过相关案例的属性设置前后对比，让学生加强理解与认识。通过0点~9点的顺时针记忆对应的属性值顺序。Margin、padding的双参数、三参数书写格式。采用“默认上右下左，缺谁找对门”的记忆方式。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习在众多练习中，书写容器样式时，起手式建议大家书写容器width、height属性，确保页面效果出现一些异常情况。必要时，可以为容器设置一定的边框或者底色以观察容器范围。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入通过盒子模型，我们知晓整个页面实际上是一层层大小递减的容器嵌套的反映。如何精确定义每个盒子的位置、尺寸，这里我们就要了解盒子的重要属性：margin、padding、border。在之间的练习中，我们基本了解了border的属性，也相对来说比较容易理解。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授3.3.2margin外边距属性margin简写：分别写“上右下左”的外边距数值（时针0到12点顺时针旋转来记忆）margin:10px;/*四个边都有10px的边距*/margin:10px20px;/*上/下边有10px的边距，左/右边有20px的边距*/margin:10px20px30px;/*上边有10px的边距，左/右边有20px的边距，下边有30px的边距*/3.3.3padding内边距属性与margin参数一样，也可以采用1参数、2参数、3参数、4参数的写法，也是遵循“上右下左”的书写顺序。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【案例5】完成如图3-38所示的浅灰色容器水平居中效果，同时设置各图片之间的间距，不要求整体图片集的左右间距对称。☆思政解说：“感动中国”入选的人物，他们来自各行各业，却都以自己的方式诠释了什么是真正的奉献与坚持。这些人物的事迹感人至深，他们用自己的行动传递着爱与希望，激励着更多的人勇往直前，为社会的进步与发展贡献自己的力量。他们是时代的楷模，值得我们每一个人学习和敬仰。历年来入选“感动中国”的人物中国，你记得哪个？【案例6】设置图片与边框之间的间距，如图3-41所示。☆思政讲解：‌‌天眼‌，即‌500米口径球面射电望远镜，是中国贵州省黔南布依族苗族自治州的一座重大科技基础设施，具有极高的科技含量和复杂的构造。以下是天眼的一些主要科技特点：‌巨大的‌反射面‌：天眼的反射面由4450个反射单元组成，总面积达25万平方米，相当于30个足球场大小。这种大规模的反射面设计需要极高的精度和复杂的工程技术。‌高精度机械控制‌：天眼的反射面精度要求达到二十万分之一，这意味着每个反射单元的位置和角度都需要极其精确的控制，以确保望远镜的整体性能。‌‌超高灵敏度‌：天眼的灵敏度达到了世界第二大射电望远镜的2.5倍以上，这使得它能够探测到更微弱的宇宙信号，发现更多的脉冲星和其他天体现象。上机操作教师演示该页面最终效果图，并进行思政讲解巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分站点结构目录结构正确，文件命名规范。10Margin属性简写格式正确，间距适合。30Padding属性简写格式正确，间距适合。30Border属性简写格式正确，粗细合理。20页面综合效果整体美观，元素间隔及边框数值合理。10总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课，要求我们掌握：（1） margin、padding、border属性及书写格式（2） 能根据父容器大小，合理规划子容器相关属性值。对盒子各属性的精确计算，提升一丝不苟的学