HTML5+CSS3网页设计实战 教案 3.4 基础练习 2

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。2本章基础练习该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：对容器相关属性进行精确设置。能力目标：具备精确数学计算相关margin、padding值的能力。素养目标：通过案例，培养学生一丝不苟的工作态度。精确计算容器相关属性的取值。Margin、padding属性值的设置。通过上机练习，强化对内外边距属性值的把控能力。Margin、padding的精确计算。通过精确地计算各容器之间的各属性来掌握各属性值。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习回忆盒子模型，一个元素占用的尺寸，包含了哪些属性值？回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入在商业网页布局中，1个像素的精确度，是行业的要求，这要求我们对元素的相关属性值能准确计算，而不是肉眼或不断修改数值进行测试。听讲讲授，演示。任务驱动法，让学生了解任务目标。知识讲授1. 盒子模型2. 层层嵌套下，各元素的属性值计算。要求从最外层容器往内部计算。☆思政讲解：设计师应有的职业素养中，对设计精确到1个像素的追求至关重要。这不仅体现了设计师的专业性和严谨态度，更是对用户体验的极致关注。在设计过程中，每一个像素的微调都可能带来视觉上的巨大差异，影响着整体的美观度和信息的传达效果。这种对精准的追求，不仅提升了设计品质，也赢得了用户的信任和尊重。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【练习3】下图所示为之前练习的页面，如图所示，通过计算容器的width、padding、margin等属性数值，使得左右的灰色边框与图片间的间距相等。根据如图3-54所示的CSS样式代码，如何计算才能使左右缝隙宽度一致？计算各元素四周的margin数值，如图3-55所示。进过计算后，我们调整一下margin左右外边距，如图3-56所示。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分站点结构目录结构正确，文件命名规范。10Html结构容器关系正确40Css代码Margin、padding数值正确50总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课学习，要求掌握：（1）对容器相关属性进行精确设置。（2）具备精确数学计算相关margin、paddi