项目4 制作企业介绍页面（盒子模型）教案二_第1页
项目4 制作企业介绍页面（盒子模型）教案二_第2页
项目4 制作企业介绍页面（盒子模型）教案二_第3页
项目4 制作企业介绍页面（盒子模型）教案二_第4页
项目4 制作企业介绍页面（盒子模型）教案二_第5页
已阅读5页，还剩1页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

附件教案课程名称：授课教师：适用专业：教学单位：信息工程学院编制时间：年月天津滨海汽车工程职业学院授课教案首页授课班级：课程名称AI+网页前端开发企业级项目教程课程类型□理论☑理论+实践□实训总学时64授课地点周次7授课学时2教学目标学习目标：熟练掌握盒子模型边距属性（内边距padding、外边距margin）的核心用法；理解边距对网页布局的影响；技能目标：能准确区分内边距（padding）与外边距（margin）的概念及作用，明确二者的应用场景差异；熟练掌握内边距、外边距的单方向属性（上、右、下、左）及复合属性的设置方法，能根据布局需求灵活调整数值；素质目标：培养严谨的代码编写习惯，注重边距数值的合理性、代码的规范性，提升代码的可读性与可维护性，契合企业级开发标准。教学重点1.内边距（padding）的单方向属性（padding-top、padding-right、padding-bottom、padding-left）及复合属性设置方法。2.外边距（margin）的单方向属性（margin-top、margin-right、margin-bottom、margin-left）及复合属性设置方法。教学难点内边距、外边距的综合运用；理解塌陷问题以及他们的解决方法教材及教参《AI+网页前端开发企业级项目教程》版本978-7-5606-7987-1信息化资源PPT课件、学习通教学环节安排教学设计以“企业级网页元素间距调整”为核心任务，通过情境导入激发兴趣，理论讲授突破重点，AI辅助演示规范操作，小组实践强化技能，总结拓展融入思政，让学生在“学中做、做中学”，同时培养职业素养。教学实施要求1.熟练掌握边距属性的核心知识点，能结合企业级项目案例拆解知识点，及时解答学生实践中的疑问；2.要求学生复习盒子模型组成及边框属性相关知识3.注重过程性评价，结合课堂互动、实践任务完成质量、小组协作表现、思政感悟等进行综合评价，及时反馈学生学习不足，针对性指导改进。教学后记课后练习拓展提高教学反思教学内容与教学过程注释一、巩固复习，导入新课展示两个企业级网页片段（一个间距合理、布局美观；一个间距混乱、元素拥挤），提问学生“这两个网页呈现效果差异明显，核心问题出在哪里？”，引导学生观察并发现“元素间距”是关键。结合学生已学的盒子模型知识，回顾“内容区、边框”的作用，引出本节课核心——边距属性（内边距、外边距），说明边距是调整网页元素间距、实现美观布局的核心，是企业级前端开发中不可或缺的技能。二、新课讲解1.边距属性整体概述明确边距属性的核心作用：调整网页元素的间距，分为内边距（padding）和外边距（margin），结合“快递盒”类比强化理解：内边距是快递盒内部填充物（内容与盒子边界的距离），外边距是快递盒之间的距离，二者作用不同、不可混淆。强调：边距数值可设置为正数（扩大间距）、负数（缩小间距/元素偏移），单位常用px（像素），结合AI工具生成简单示例代码，展示内边距、外边距的基础效果，帮助学生建立直观认知。2.内边距属性详细讲解内边距的设置方法：单方向属性：padding-top（上内边距）、padding-right（右内边距）、padding-bottom（下内边距）、padding-left（左内边距），每个属性单独设置数值，示例：padding-top:10px;复合属性：按“上右下左”的顺序设置数值，简化代码，示例：padding:10px15px10px15px;（上下10px，左右15px）；补充简写形式（如padding:10px;表示四个方向均为10px）。易错点提醒：内边距会影响盒子的实际尺寸（实际宽度=内容区宽度+左右内边距+左右边框宽度），结合AI调试工具展示尺寸变化，避免学生忽略这一细节。3.外边距（margin）属性讲解外边距的设置方法，与内边距对比讲解，降低学生理解难度，重点突破难点：设置方法：与内边距完全一致，包含单方向属性（margin-top、margin-right等）和复合属性，结合AI工具生成代码，对比内边距效果，强化区别。核心难点：外边距折叠现象——相邻两个元素的margin-top和margin-bottom会重叠，取较大值作为最终间距；父子元素嵌套时，子元素的margin-top会传递给父元素。结合AI调试工具，实时演示折叠现象，讲解解决方法（如给元素添加边框、使用overflow:hidden、设置padding替代margin）。企业级应用场景：外边距常用于调整元素之间的整体间距（如导航栏与banner、产品卡片之间），内边距用于调整元素内部内容与边框的间距（如按钮内部文字、卡片内容），结合企业级案例讲解，让学生明确应用场景。4.外边距塌陷问题在CSS中，相邻元素的外边距不会相加，而是会合并（塌陷）为其中的较大值。这一现象主要发生在相邻的兄弟元素或具有包含关系的父子元素之间。解决办法通常有： 只给其中一个盒子设置外边距给两个盒子分别套一个父盒子，父盒子属性设置为overflow:hidden，同时让父盒子是密闭区域，从而触发BFC（BlockFormattingContext，块级格式化上下文）。父子盒子之间的塌陷通常解决办法有：方法一：为父盒子添加边框（border）或内边距（padding）方法二：为父盒子设置

overflow

属性方法三：使用flexbox布局方法四：为子盒子设置

display:inline-block教师示范案例一：内边距的设置演示：<!DOCTYPEhtml><htmllang="en"><head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<title>Document</title>

<style>

p{

width:200px;

height:200px;

border:10pxsolidorange;

background-color:pink;

}

.box1{

padding:20px;/*综合设置内边距，四个方向均为20px*/

}

</style></head><body>

<pclass="box1">

设置padding,其上下左右内边距皆为20px

</p>

<pclass="box2">

不设置padding,2个盒子的宽高都为200px，边框10px

</p></body></html>展示运行结果：案例二，外边距的设置：<!DOCTYPEhtml><htmllang="en"><head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<title>外边距设置示例</title>

<style>

.box1{

width:200px;

height:100px;

border:2pxsolid#000;

padding:20px;/*综合设置内边距，四个方向均为20px*/

margin:20px;/*综合设置外边距，四个方向均为20px*/

background-color:#f0f0f0;

}

.box2{

width:200px;

height:100px;

border:2pxsolid#000;

padding:20px10px;/*上下内边距20px，左右内边距10px*/

margin:20px10px;/*上下外边距20px，左右外边距10px*/

background-color:#f0f0f0;

}

</style></head><body>

<divclass="box1">

这是一个设置了外边距的盒子，与其他元素之间有20px的间距。

</div>

<divclass="box2">

这是另一个设置了外边距的盒子，自身边框与其他元素之间上下有20px的距离，左右有10px的距离。

</div></body></html>展示运行结果：学生实践，巩固提升基础任务（全体完成）：1.教材项目四中的4.2.3小结代码全部完成。挑战任务（有实力学生完成，实现因材施教）：1.完成“企业级简单产品列表布局”，具体要求：1）创建1个导航栏（包含3个菜单选项）和4个产品卡片（每个卡片包含产品名称、简单描述）。2）导航栏：设置合理内边距（上下10px、左右18px），菜单选项之间设置适当外边距（12px），确保导航布局整齐。3）产品卡片：设置内边距（上下14px、左右16px），卡片之间设置外边距（12px），避免折叠现象，确保所有卡片整齐排列。4）可以用AI工具辅助生成边距相关代码，调试布局，解决可能出现的边距异常、布局错位问题。5）代码规范：缩进一致，属性命名规范，添加必要注释，符合企业级开发要求。五、总结拓展，融入思政总结：学生对边距属性（内边距、外边距）的区分及应用场景的掌握程度，是否能准确设置边距数值。学生对外边距折叠现象的理解及解决能力；思政：边距的设置讲究“适度”，多一分则拥挤、少一分则松散，这正如我们的职业成长，既要像内边距一样，不断

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论