课题项目六网页布局
课时12课时（540min）
知识技能目标：
（1）熟悉盒子模型、元素的浮动与定位的基础知识
（2）熟悉网页布局的基础知识
（3）熟悉视口与媒体查询的基础知识
教学目标（4）能够使用Dreamweaver2021构建经典的网页布局
（5）能够使用Dreamweaver2021构建响应式布局。
素质目标：
（1）在网页布局的过程中关注用户的需求和体验，培养以用户为中心的设计思维
（2）培养积极向上的心态
教学重点：盒子模型、元素的浮动与定位的基础知识，网页布局的基础知识，视口与媒体查询的基础
教学重难点知识
教学难点：构建经典的网页布局，构建响应式布局
教学方法案例分析法、问答法、讨论法、讲授法
教学用具电脑、投影仪、多媒体课件、教材
教学过程主要教学内容及步骤
【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课
前任务
课前任务
请大家预习本节课内容，了解网页布局的知识。
【学生】完成课前任务
【教师】使用APP进行签到
考勤
【学生】班干部报请假人员及原因
【教师】组织学生讨论以下问题：
（1）网页中的元素有哪些显示形式？
（2）设置元素的哪些样式能够改变元素的位置？
互动导入
【学生】思考、讨论、举手回答
【教师】总结学生的回答
【教师】通过学生的回答，引入新知，讲解盒子模型、元素的浮动、元素的定位等知识
一、盒子模型
【教师】利用多媒体展示“盒子模型的基本结构”图片（详见教材），并进行讲解
盒子模型是网页布局的基础，它规定了元素在页面中的显示方式和占据的空间，使用它便于控制
传授新知元素在页面中的排列方式。一个标准的盒子模型由4个部分组成，分别为内容（content）、填充
（padding）、边框（border）与边距（margin），盒子模型的基本结构如图所示。
以生活中的盒子为例，内容是盒子中放置的物品，填充是防止物品磕碰所填充的泡沫、气泡膜等辅
料，边框是盒子本身，边距是盒子与盒子之间的空隙。1
【教师】利用多媒体展示“用于设置盒子模型样式的属性”图片（详见教材），并进行讲解
在Dreamweaver2021中，可以使用“CSS设计器”面板中的“属性”窗格设置盒子模型的样式。
其中，文本、边框、背景等样式的相关属性前面已经介绍过。下面主要介绍“属性”窗格“布局”设置
区中用于设置盒子模型显示、边距、填充与溢出行为等样式的属性。
（1）display属性用于设置显示。……（详见教材）
（2）margin属性用于设置边距。……（详见教材）
?①单击该属性右侧的“设置速记”区域，直接在编辑框中输入1～4个值。……（详见教材）
②在该属性下方的矩形设置区中单击相应的边距，输入属性值。……（详见教材）
（3）padding属性用于设置填充。……（详见教材）
（4）overflow-x属性用于设置水平溢出行为。……（详见教材）