版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
附件教案课程名称：授课教师：适用专业：教学单位：信息工程学院编制时间：年月天津滨海汽车工程职业学院授课教案首页授课班级：课程名称AI+网页前端开发企业级项目教程课程类型□理论☑理论+实践□实训总学时64授课地点周次6授课学时2教学目标学习目标：掌握盒子模型的核心概念与应用方法；能运用盒子模型相关属性完成网页元素的布局美化；技能目标：准确理解盒子模型的组成（内容区、内边距、边框、外边距）；边框（border）的样式、宽度、颜色属性设置；素质目标：培养问题排查能力，能主动解决盒子模型应用中的常见问题，养成自主学习、主动探究的习惯；教学重点盒子模型的核心组成；边框属性的综合设置教学难点边框属性的综合运用，能根据网页布局需求灵活调整各属性，避免布局错位教材及教参《AI+网页前端开发企业级项目教程》版本978-7-5606-7987-1信息化资源PPT课件、学习通教学环节安排教学设计采用“理论+实践”的教学模式。结合高职学生“重技能、善实践”的特点，将AI工具融入教学全过程，帮助学生快速掌握知识点，提升实践能力。教学实施要求1.熟练掌握盒子模型知识点及前端开发工具的使用，能结合企业级项目案例讲解知识点，及时解答学生实践中的问题。2.要求学生提前预习盒子模型基础概念，熟悉VSCode基本操作，主动参与课堂互动与实践，积极运用AI工具辅助学习，完成课堂实践任务与课后作业教学后记课后练习完成教材对应习题拓展提高教学反思教学内容与教学过程注释一、导入新课通过展示公司的企业介绍页，提问学生“网页中的按钮、卡片、导航栏等元素，为什么能整齐排列、有清晰的边界和间距？”，引导学生观察网页元素的布局特点。简要介绍本节课的学习目标、重点难点，告知学生本节课将结合AI工具，掌握盒子模型的组成、边框和边距属性，能完成简单布局实践。二、讲授新课结合ppt讲解以下几方面内容：1.盒子模型概述：盒子模型就是将HTML页面中的元素看作一个矩形的盒子，每个矩形盒子由内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分组成。用“快递盒”类比：内容区（快递物品）、内边距（快递盒内部填充物）、边框（快递盒本身）、外边距（快递盒之间的距离），让学生直观理解各部分作用。重点强调：每个HTML元素都是一个盒子，盒子的实际尺寸=内容区宽度/高度+内边距（左右/上下）+边框宽度（左右/上下）。介绍盒子模型的相关属性。2.div标签的基本概念<div>是双标签语法，包含开始标签<div>和结束标签</div>。它本质上是一个块级元素，可在网页中创建一个矩形区域，用于容纳各种网页元素，如段落、标题、表格、图像等。3.盒子模型注意事项使用盒子模型时，需注意元素的默认内外边距，建议初始化以避免影响布局。此外，背景显示范围、元素的通用性及属性的灵活运用也是关键，掌握这些能更精准地控制样式与布局。4.盒子模型边框属性边框（border）是围绕内容和内边距的线，可使用border属性设置其宽度（border-width）、样式（border-style）和颜色（border-color）。CSS3还新增了圆角边框等属性。具体属性如下：三、教师写代码演示案例一：通过一个具体案例对边框border属性进行演示：1<!DOCTYPEhtml>2<htmllang="en">3<head>4
<metacharset="UTF-8">5
<metaname="viewport"content="width=device-width,initial-scale=1.0">6
<title>综合设置边框</title>7
<style>8
*{9
margin:0;10
padding:0;11
}12
p{13
border:5pxsolidblack;
/*设置盒子的边框为5像素厚，实线，颜色为黑色*/14
}15
</style>16</head>17<body>18
<p>19
设置段落的边框为5px、实线、黑色20
</p>21</body></html>展示运行结果，如下图案例二：单侧边框设置教师写出如下代码：<!DOCTYPEhtml><htmllang="en"><head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>综合设置边框</title>
<style>
*{
margin:0;
padding:0;
}
.one{
width:200px;
border-top:10pxdashed
blue;
/*上边框：2像素，虚线，蓝色*/
border-right:5pxdottedorange;
/*右边框为5像素，点线，橙色*/
border-bottom:10pxdoublepurple;
/*下边框为5像素，点线，橙色*/
border-left:5pxsolidred;
/*左边框为5像素，点线，橙色*/
}
.two{
border-bottom:5pxsolidblue;
/*下边框为5像素，实线，蓝色*/
}
</style></head><body>
<pclass="one">
上边框：2像素虚线
蓝色
<br>
右边框：5像素点线
橙色
<br>
下边框：2像素双实线
紫色<br>
左边框：5像素
实线
红色
<br>
</p>
<ul>
<li>无边框li标记</li>
<liclass="two">下边框：5像素实线蓝色</li>
<li>无边框li标记</li>
</ul>
</body></html>展示运行结果，并讲解如何设置单侧边框案例三：圆角边框设置教师写出代码：<!DOCTYPEhtml><htmllang="en"><head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
div{
display:inline-block;/*转换为行内块元素，使其能够一行显示并能设置宽高*/
}
.box1{
width:200px;
height:150px;
border:2pxsolidblue;
border-radius:10px;
/*设置整体圆角半径*/
}
.box2{
width:200px;
height:150px;
border:2pxsolidred;
border-radius:10px30px;
/*设置左上右下、右上左下圆角半径*/
}
.box3{
width:200px;
height:150px;
border:2pxsolidgreen;
border-radius:10px30px50px;/*设置左上、右上左下、右下、圆角半径*/
}
.box4{
width:200px;
height:150px;
border:2pxsolidorange;
border-radius:10px30px50px70px;/*设置左上、右上、右下、左下圆角半径*/
}
</style>
</head>
<body>
<divclass="box1">盒子1</div>
<divclass="box2">盒子2</div>
<divclass="box3">盒子3</div>
<divclass="box4">盒子4</div>
</body>
</html>展示运行结果，并讲解如何设置圆角边框四、学生实践，集中指导鼓励学生独立完成上述三个案例内容，并解决实操过程中出现的bug。对于共性问题，教师给与指导与帮助。五、总结拓展，思政融入1.课堂总结：师生共同回顾本节课核心知识点，梳理盒子模型的组成、边框属性、边距属性的重点内容，强调易错点（如边框样式必填、外边距折叠、尺寸计算）。3.拓展延伸：结合企业级项目，介绍盒子模型在复杂布局中的应用（如嵌套盒子、响应式布局中的边距调整），布置课
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2026年秋季开学初中军训须知与注意事项课件
- 2026年秋季开学幼儿园认识灭火器与逃生标识课件
- 2026年秋季开学大学军训成长感悟分享课件
- 2026秋部编版一年级上册语文第四单元单元培优卷（B卷）
- 专题02阅读理解（说明文）-备战2023年高考英语母题题源解密（解析版）
- 目录-2025版三维设计二轮复习高考物理
- 机构投资者在耐心资本配置中的决策逻辑与实践分析
- 碳中和背景下绿色债券发行机制探析
- 人工智能技术在供应链网络优化中的应用效能与决策智能化机制分析
- 互联网企业盈利模式特征与业绩表现关联性研究
- 露天矿山作业安全操作规程
- GB/T 41666.4-2024地下无压排水管网非开挖修复用塑料管道系统第4部分：原位固化内衬法
- 《无粘结钢绞线体外预应力束》(JT∕T 853-2013)
- 第四章煤的结构
- 恒瑞人防工程监理实施细则范文
- 桥梁养护工作计划
- 人大换届选举培训提纲
- GB/T 3400-2002塑料通用型氯乙烯均聚和共聚树脂室温下增塑剂吸收量的测定
- GB/T 27548-2011移动式升降工作平台安全规则、检查、维护和操作
- 2011年四川高考理综试题及答案（高清扫面版）
- 2023年脚手架搭设规范
评论
0/150
提交评论