第五单元 任务4 DIV+CSS布局（教案）-《计算机网络基础》（高等教育出版社）同步精品课堂

《计算机网络基础》教案 课 题 《第五单元 任务4 DIV+CSS布局》 课 型 讲授 课 时 2 授课班级 计算机专业学生 授课时间 授课教师 教材分析 本课程是高等教育出版社《计算机网络基础》网页制作模块的核心布局任务。它承接任务3（修饰页面元素），是学生从“美化页面”向“布局页面”跨越的关键节点。教材以“保护濒危动物”项目为主线，通过“盒模型认知 → 文档流与浮动掌握 → 综合布局实战”的递进逻辑，引导学生掌握使用DIV+CSS进行页面布局的核心技能，完全符合项目化教学“认知—方法—实践”的递进规律。通过三个子任务的完成，学生将能够独立运用盒模型、浮动和清除浮动等属性，完成一个完整的“保护濒危动物”主题页面布局 学情分析 学生已掌握HTML基本标签（<div>、<p>、<h1>等）和CSS基本属性（背景、边框、字体等），具备初步的网页美化能力。 能力基础：能够使用HBuilder创建项目、编写HTML和CSS代码并预览，具备一定的代码调试能力。 教学对策：通过实物比喻（课桌、盒子）化解盒模型抽象概念，通过浮动现象演示（元素“漂移”和“遮挡”）直观展示浮动效果，通过分步骤实战（布局一→布局二） 降低综合布局的挫败感 学习目标 1、 学生能够深入理解盒模型的概念，包括内容（content）、内边距（padding）、边框（border）和外边距（margin）； 2、 熟练运用 div 结合 CSS 进行网页布局，理解块级元素和行内元素在布局中的特点和应用； 3、 掌握浮动属性（float）的作用，理解“浮动脱离文档流实现水平并列”的布局原理； 4、完成 “保护濒危动物” 网页页面的布局设计； 学习重难点 重点：盒模型的组成与尺寸计算；float属性的基本用法；清除浮动（clear）的方法； 难点：理解浮动元素脱离文档流后对后续元素的影响（高度塌陷、元素遮挡）；正确运用浮动和清除浮动实现稳定的多列布局； 教学方法 讲授法、任务驱动法 课前准备 教学课件、思维导图、相关图片资料 教学媒体 PPT 教学过程 教学环节 教师活动设计 学生活动设计 设计意图 活动一： 创设情境 生成问题 真实情境导入（结构分析）： 1、教师在大屏幕上展示一张完整的网页截图（如博客网站，包含头部导航、横幅图片、多列新闻列表、页脚等典型区块）。 2、教师提问：“同学们，这是一张大家都很熟悉的网页。请大家仔细观察，想一想：这张网页从整体上看，可以划分为几个大的功能区域？ 3、引导学生思考并回答：网页可以划分为头部、横幅、主体、页脚等几个大的部分。 4、引出主题：学习的DIV+CSS布局。 1. 观察大屏幕上的网页截图。 2. 思考并回答教师提问，尝试对网页进行区域划分（头部、导航、横幅、内容区、页脚等）。 3. 认识到“划分结构”是制作网页的第一步，明确本节课的学习目标。 通过对一个真实网页进行结构分析，直接切入“布局”这一核心概念。让学生从“整体到局部”的视角认识网页，建立“页面由多个功能区块组成”的思维模型，为后续学习盒模型和浮动布局奠定认知基础。 活动二： 调动思维 探究新知 任务一：盒模型 1. 发布活动一：展示类似项目作品，引导学生说出优秀作品布局特点。 2. 引导讲解：使用实物盒子道具（如一个带盖子的纸箱）进行比喻讲解： - 内容（content）：盒子里面装的东西（文字、图片）。 - 内边距（padding）：盒子内部与东西之间的填充物（泡沫、气泡膜）。 - 边框（border）：盒子的四壁（纸板的厚度）。 - 外边距（margin）：盒子与其他盒子之间的间距（保持距离）。 3. 尺寸计算讲解：在黑板上画出示意图，演示盒模型总宽度的计算公式：总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right。 4.【互动探究一】——“盒模型度量”抢答： - 教师出示一个CSS规则。 - 提问：“这个<div>元素的内容区宽度是多少？”“总宽度是多少？”。 1.观察类似项目的优秀作品，框画出其布局结构，说出优秀作品的布局特点. 2. 观察实物盒子，听讲并记录盒模型四部分（content、padding、border、margin）的定义。 3. 记录总尺寸计算公式。 4. 参与“盒模型度量”抢答，巩固计算能力。 展示类似项目优秀作品，能迅速吸引学生注意力，激发他们对网页布局的兴趣。引导学生主动观察并说出作品布局特点，有助于培养学生的观察能力，让学生在欣赏作品的同时，思考网页布局的关键要素，为后续学习盒模型与网页布局的联系奠定基础。 活动三： 调动思维 探究新知 子任务二：DIV+CSS布局基础知识 1.问题1：为什么div的结构布局是上下结构呢？ . 引导讲解（结合PPT演示）： - 文档流：默认从上到下、从左到右排列，块级元素独占一行。 - <div>元素：块级容器，常用于页面分块。 2.问题2：如何修改文档流布局？将div的上下布局变成左右布局呢？ - 浮动属性（float）：让元素脱离文档流，向左或向右“浮动”到允许的位置。 - 浮动的影响：后续元素会“钻”到浮动元素的下面，造成遮挡。 - 清除浮动（clear）：阻止后续元素受前面浮动元素的影响。 3.展示三个div块在布局下的几种形式：无浮动、左右浮动、全部左浮动、清除左浮动； 4.发布活动二：请在Hbuilder中用<div>标签规划出图片中的盒子布局。 1.思考问题； 2.观察PPT演示，理解文档流、浮动、清除浮动的概念。 3.在问题1的基础上思考问题2； 3.在hbuilder中完成活动二的操作。 以两个问题为导向，激发学生思考，自然引入文档流、div 元素及浮动等关键知识点。结合 PPT 演示，直观呈现抽象概念，让学生理解 div 上下结构成因及改变布局的方法，为后续学习布局奠定理论基础。展示不同浮动状态下 div 块的布局形式，帮助学生建立可视化认知，深化对浮动和清除浮动效果的理解，明白其在实际布局中的多样性与应用场景。 活动四： 调动思维 探究新知 子任务三：“保护濒危动物”网页页面布局（实操） 1. 发布任务与项目结构分析： - 展示“保护濒危动物”页面的结构图，分析页面由头部（Header）、横幅（Banner）、主体（Main，含4个box）、页脚（Footer） 四个部分组成。 - 强调今天的核心任务：让主体区域的4个box从“一列堆叠”（布局一）变为两行两列并排（布局二），使用浮动属性实现。 2. 教师分步演示（重点强调浮动布局的步骤与易错点）： - 步骤一：项目准备：在HBuilder中创建项目“保护濒危动物”，复制素材图片，创建style.css外部样式表。 - 步骤二：编写基础样式（布局一）：设置全局样式（*清除内外边距，body背景色），设置.header、.banner、.main（仅宽度，不设高度）、.box1~.box4（宽490px，高360px）、.footer的宽度和背景图片。预览效果——所有块级元素从上到下排列（布局一）。 - 步骤三：添加浮动属性（实现布局二）：在style.css中为.box1、.box2、.box3、.box4添加float: left;。预览效果——发现主体区域“缩”成一条，页脚“跑”到了中间位置（高度塌陷和遮挡）。 - 步骤四：添加外边距：为.box1和.box3添加margin-right: 20px;，为行与行之间留出空白。 - 步骤五：清除浮动：为.footer添加clear: both;，让页脚回到主体内容下方，恢复正常的文档流。 3. 学生实操（巡堂指导与互动）： - 让学生独立完成从基础样式到浮动布局再到清除浮动的全过程。 1. 明确任务要求：制作“保护濒危动物”页面，实现布局二（多列并排）。 2. 跟随实操： - 创建项目并准备素材 → 编写基础CSS样式（布局一）→ 添加浮动属性 → 添加外边距 → 清除浮动 → 预览布局二效果。 - 遇到问题先自行排查，再举手请教或小组互助。 3. 完成基本要求后，尝试调整浮动顺序（如部分float: right），观察效果变化。 将综合实操任务拆解为从“布局一”到“布局二”的清晰递进步骤（基础样式 → 添加浮动 → 调整间距 → 清除浮动），并通过“教师演示→学生跟练→即时鼓励展示”的闭环，确保每位学生都能理解浮动从“添加”到“清除”的完整逻辑，突破教学难点。 活动六： 巩固练习 素质提升 1、 完成课堂的随堂练习。 2、 “要让一个块级元素向左浮动，应该使用哪个CSS属性？属性值是什么？” 思考并回答教师提问，回顾本堂课所学知识点 回顾所学，巩固知识点 课堂小结 作业布置 课堂小结：引导学生回顾本节所学知识。 作业：1、完成课后习题 2、完成思维导图的绘制。 板书设计 教学反思 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 学科网（北京）股份有限公司 $