《中文版Dreamweaver网页制作案例教程[2021版]》教案 项目六 网页布局.docx
PAGE8
PAGE8
PAGE9
PAGE9
课题
项目六网页布局
课时
12课时（540min）
教学目标
知识技能目标：
（1）熟悉盒子模型、元素的浮动与定位的基础知识
（2）熟悉网页布局的基础知识
（3）熟悉视口与媒体查询的基础知识
（4）能够使用Dreamweaver2021构建经典的网页布局
（5）能够使用Dreamweaver2021构建响应式布局。
素质目标：
（1）在网页布局的过程中关注用户的需求和体验，培养以用户为中心的设计思维
（2）培养积极向上的心态
教学重难点
教学重点：盒子模型、元素的浮动与定位的基础知识，网页布局的基础知识，视口与媒体查询的基础知识
教学难点：构建经典的网页布局，构建响应式布局
教学方法
案例分析法、问答法、讨论法、讲授法
教学用具
电脑、投影仪、多媒体课件、教材
教学过程
主要教学内容及步骤
课前任务
【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务
请大家预习本节课内容，了解网页布局的知识。
【学生】完成课前任务
考勤
【教师】使用APP进行签到
【学生】班干部报请假人员及原因
互动导入
【教师】组织学生讨论以下问题：
（1）网页中的元素有哪些显示形式？
（2）设置元素的哪些样式能够改变元素的位置？
【学生】思考、讨论、举手回答
【教师】总结学生的回答
传授新知
【教师】通过学生的回答，引入新知，讲解盒子模型、元素的浮动、元素的定位等知识
一、盒子模型
【教师】利用多媒体展示“盒子模型的基本结构”图片（详见教材），并进行讲解
盒子模型是网页布局的基础，它规定了元素在页面中的显示方式和占据的空间，使用它便于控制元素在页面中的排列方式。一个标准的盒子模型由4个部分组成，分别为内容（content）、填充（padding）、边框（border）与边距（margin），盒子模型的基本结构如图所示。
以生活中的盒子为例，内容是盒子中放置的物品，填充是防止物品磕碰所填充的泡沫、气泡膜等辅料，边框是盒子本身，边距是盒子与盒子之间的空隙。
【教师】利用多媒体展示“用于设置盒子模型样式的属性”图片（详见教材），并进行讲解
在Dreamweaver2021中，可以使用“CSS设计器”面板中的“属性”窗格设置盒子模型的样式。其中，文本、边框、背景等样式的相关属性前面已经介绍过。下面主要介绍“属性”窗格“布局”设置区中用于设置盒子模型显示、边距、填充与溢出行为等样式的属性。
（1） display属性用于设置显示。……（详见教材）
（2） margin属性用于设置边距。……（详见教材）
①单击该属性右侧的“设置速记”区域，直接在编辑框中输入1～4个值。……（详见教材）
②在该属性下方的矩形设置区中单击相应的边距，输入属性值。……（详见教材）
（3） padding属性用于设置填充。……（详见教材）
（4） overflow-x属性用于设置水平溢出行为。……（详见教材）
（5） overflow-y属性用于设置垂直溢出行为。……（详见教材）
二、元素的浮动
【教师】利用多媒体展示“元素按照默认顺序排列的页面效果”图片（详见教材），并进行讲解
在标准文档流中，元素默认按照从左至右、从上至下的顺序排列。要想调整元素的位置，就需要为元素设置浮动。
【教师】利用多媒体展示“产生浮动影响后的页面效果”图片（详见教材），并进行讲解
设置浮动后，浮动元素会脱离标准文档流的控制，移动到其父元素中的指定位置；浮动元素之前的兄弟元素不受影响，之后的兄弟元素会占据该元素原来的位置，出现位置偏移问题；浮动元素的父元素可能会出现高度塌陷问题。产生浮动影响后的页面效果如图所示。
【教师】利用多媒体展示“清除浮动影响后的页面效果”图片（详见教材），并进行讲解
若想清除元素浮动带来的影响，可以为浮动元素之后的兄弟元素设置清除浮动；为浮动元素的父元素指定高度，或者在父元素内容的末尾添加一个清除所有浮动的空的div标签。清除浮动影响后的页面效果如图所示。
【教师】利用多媒体展示“设置浮动和清除浮动的影响”图片（详见教材），并进行讲解
在Dreamweaver2021中，可以使用“CSS设计器”面板“属性”窗格“布局”设置区中的属性设置浮动和清除浮动的影响。
（1） float属性用于设置浮动。……（详见教材）
（2） clear属性用于清除浮动的影响。……（详见教材）
三、元素的定位
元素的定位是指对元素的位置进行精确控制，从而实现不同的网页布局效果。
1．定位方法
在CSS3中，常用的定位方法有4种，分别为静态定位、绝对定位、固定定位与相对定位。
【教师】利用多媒体展示“元素按照默认顺序排列的页面效果”图片（详见教材），并进