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

下载本文档

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

文档简介

附件教案课程名称：授课教师：适用专业：教学单位：信息工程学院编制时间：年月天津滨海汽车工程职业学院授课教案首页授课班级：课程名称AI+网页前端开发企业级项目教程课程类型□理论☑理论+实践□实训总学时64授课地点周次7授课学时2教学目标学习目标：熟练掌握盒子模型进阶属性（box-sizing、box-shadow、背景属性）的核心用法；理解各属性在企业级网页开发中的应用场景，能运用三大属性优化网页布局与视觉效果；技能目标：准确理解box-sizing属性的核心作用；掌握box-shadow属性的语法结构掌握背景属性（background-color、background-image、background-repeat、background-position等）的单属性与复合属性设置；素质目标：培养严谨的代码编写习惯，注重属性设置的规范性与合理性；培养团队协作与沟通能力，在小组实践中能分工配合，共同完成企业级模块美化任务；教学重点box-sizing属性设置、box-shadow属性的语法结构、背景属性的核心用法教学难点box-sizing:border-box与content-box的区别、box-shadow属性各参数的协同调整，能结合网页整体风格，设置自然、美观的阴影效果教材及教参《AI+网页前端开发企业级项目教程》版本978-7-5606-7987-1信息化资源PPT课件、学习通教学环节安排教学设计以“企业级网页模块美化”为核心任务，通过情境导入激发学生兴趣，理论讲授拆解三大属性的核心知识点，AI辅助演示规范操作流程，小组实践强化技能应用，总结拓展融入思政教育，让学生在“学中做、做中学”，既掌握专业技能，又培养职业素养。教学实施要求1.熟练掌握三大属性的核心知识点及AI前端辅助工具的使用技巧，能结合企业级项目案例拆解知识点，将复杂知识点简单化、具象化；2.要求学生复习盒子模型基础属性（边框、边距）相关知识；教学后记课后练习完成教材对应习题拓展提高教学反思教学内容与教学过程注释一、巩固复习，导入新课1.情境导入：展示两个企业级网页模块（一个未使用进阶属性，布局粗糙、视觉单调；一个使用box-sizing、box-shadow、背景属性，布局规整、视觉美观、层次清晰），提问学生“这两个模块的呈现效果差异显著，核心是运用了哪些盒子模型进阶技能？”，引导学生观察并发现三大属性的作用。2.衔接前置：回顾学生已学的盒子模型基础属性，指出“基础属性能实现简单布局，但无法满足企业级网页的视觉美化与布局便捷性需求”，引出本节课核心——盒子模型进阶属性（box-sizing、box-shadow、背景属性），说明这些属性是企业级前端开发中优化布局、提升视觉效果的核心技能，学好这些属性能让网页更贴合岗位需求。二、新课讲解1.box-sizing属性核心作用：控制盒子的尺寸计算方式，解决“内边距、边框导致盒子实际尺寸超出预期”的问题，是企业级开发中简化布局计算的常用属性。语法：box-sizing:content-box|border-box;重点讲解两种取值的区别（结合AI工具生成示例代码，直观展示效果）：content-box（默认值）：盒子实际尺寸=内容区宽度/高度+内边距+边框，内边距和边框会“撑开”盒子，布局计算繁琐。border-box（常用值）：盒子实际尺寸=设置的width/height，内边距和边框包含在设置的尺寸内，不会撑开盒子，简化布局计算，契合企业级开发需求。易错点提醒：设置border-box后，需注意内容区的实际可用空间（内容区尺寸=设置的width/height-内边距-边框），结合AI调试工具展示尺寸变化，帮助学生理解。2.box-shadow属性核心作用：为盒子添加阴影效果，增强网页视觉层次，让元素更具立体感，是企业级网页美化（如卡片、按钮）的常用属性。语法：box-shadow:水平偏移垂直偏移模糊半径扩散半径颜色;逐参数讲解（结合AI工具生成不同效果的代码，直观演示）：水平偏移：正数向右，负数向左，控制阴影的水平位置；垂直偏移：正数向下，负数向上，控制阴影的垂直位置；模糊半径：数值越大，阴影越模糊（不可为负数）；扩散半径：数值越大，阴影范围越大（可正可负）；颜色：设置阴影颜色（十六进制、RGB、rgba），rgba可设置透明度，实现更自然的阴影效果。企业级应用：常用于卡片、按钮、导航栏等元素，增强视觉层次感，结合企业级案例讲解，让学生明确应用场景。3.背景属性核心作用：为盒子设置背景（颜色、图片），优化网页视觉效果，是企业级网页设计中不可或缺的属性，重点讲解常用单属性及复合属性。常用单属性（结合AI工具生成代码演示）：background-color：设置背景颜色，可使用十六进制、RGB、颜色名称；background-image：设置背景图片，语法：background-image:url("图片路径");，需注意图片路径的正确性；background-repeat：控制背景图片是否重复（no-repeat不重复、repeat重复、repeat-x水平重复、repeat-y垂直重复）；background-position：控制背景图片的位置，可使用方位词（center、top、left等）或数值；background-size：控制背景图片的尺寸（cover覆盖整个盒子、contain完整显示图片、具体数值），解决图片拉伸、错位问题。复合属性：将多个单属性合并设置，简化代码，示例：background:颜色图片重复定位尺寸;易错点提醒：背景图片路径的正确性、background-size与background-position的协同使用，结合AI工具排查路径错误、图片适配问题。教师示范案例一,box-sizing属性的使用：<!DOCTYPEhtml><htmllang="en"><head>

<metacharset="UTF-8">

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

<title>Box-sizing示例</title>

<style>

div{

display:inline-block;

width:150px;

height:150px;

padding:20px;

margin:20px;

border:10pxsolidblack;background-color:skyblue;

}

.box1{

box-sizing:content-box;/*默认值*/

}

.box2{

box-sizing:border-box;/*包括内容区域、内边距和边框*/

}

</style></head><body>

<divclass="box1">box1内容区域</div>

<divclass="box2">box2内容区域</div></body></html>展示运行效果案例二：设置背景颜色：<!DOCTYPEhtml><htmllang="en"><head>

<metacharset="UTF-8">

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

<title>背景颜色示例</title>

<style>

div{

display:inline-block;

width:200px;

height:200px;

}

.box1{

background-color:lightblue;/*设置背景颜色为浅蓝色*/

}

.box2{

background-color:rgba(255,0,0,0.5);/*设置半透明红色背景*/

}

</style></head><body>

<divclass="box1">背景颜色：浅蓝色</div>

<divclass="box2">背景颜色：半透明红色</div></body></html>展示运行结果：学生实践，巩固提升基础任务（全体完成）：1.完成教材4.2.4到4.2.6的章节代码，并演示运行结果。挑战任务（有实力学生完成，因材施教）：1.“企业级卡片美化”案例2.步骤如下：步骤1：创建HTML结构，定义一个企业级产品卡片（div标签），添加产品名称、简单描述等基础内容。步骤2：运用AI工具生成box-sizing:border-box;，设置卡片宽度、高度，添加内边距和边框，演示“边框、内边距不撑开盒子”的效果，简化尺寸计算。步骤3：运用AI工具生成box-shadow属性，设置自然的阴影效果（水平偏移5px、垂直偏移5px、模糊半径8px、扩散半径2px、rgba(0,0,0,0.1)），增强卡片立体感。步骤4：运用AI工具设置背景属性，为卡片添加背景颜色（浅灰色），为卡片标题添加背景图片，设置不重复、居中显示，优化视觉效果。步骤5：结合AI调试工具，调整各属性参数，实时预览效果，讲解“参数调整对视觉效果的影响”，强调属性组合的合理性，同时提醒学生注意代码规范，添加必要注释。五、总结拓展，融入思政总结：师生共同回顾本节课核心知识点，梳理box-sizing、box-shadow、背景三大属性的核心用法、易错点及企业级应用场景。思政元素：box-sizing属性教会我们“把握边界、合理规划”，正如我们的职业成长，要明确自身定位、坚守职业边界，合理规划学习与工作，才能高效完成任务；box-shadow属性让网页更有层次，正如我们的

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

温馨提示

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

最新文档

评论

0/150

提交评论