第10课 使用CSS与Div设置网页样式与布局（3）（教案）-《网页制作三合一案例教程》同步教学（航空工业出版社）

课题 第10课 使用CSS与Div设置网页样式与布局（3） 课时 2课时（90 min） 教学目标 知识目标： （1）掌握边框、列表和定位样式属性的含义及设置方法 （2）能够应用Div＋CSS构建网页布局 技能目标： （1）能够设置边框、列表和定位样式属性 （2）能够灵活运用各类CSS样式 素质目标： 实践是检验真理的唯一标准，学习理论知识的同时，要注重知识的运用 教学重难点 教学重点：边框、列表和定位样式各类属性的含义 教学难点：应用Div＋CSS构建网页布局 教学方法 问答法、讨论法、讲授法、练习法 教学用具 电脑、投影仪、多媒体课件、教材 教学设计 第1节课：课前任务→ 考勤（2 min）→  问题导入（3 min）→传授新知（35 min）→课堂讨论（5 min） 第2节课：问题导入（3 min）→ 传授新知（15 min）→ 课堂实训（22 min）→ 课堂小结（3 min）→ 作业布置（2 min） 教学过程 主要教学内容及步骤 设计意图 第一节课 课前任务 【教师】有人将HTML比做身体，CSS就好比是衣服，让学生总结CSS在网页当中的作用 【学生】按照要求完成课前任务 通过课前任务，让学生了解CSS控制网页外观的作用 考勤 （2 min） 【教师】使用文旌课堂APP进行签到 【学生】班干部报请假人员及原因 培养学生的组织纪律性，掌握学生的出勤情况 问题导入 （3min） 【教师】提出以下问题，并随机邀请学生进行回答 上节课我们介绍了类型、背景、区块和方框样式属性，那么边框、列表、定位和扩展有哪些样式属性？ 【学生】聆听、思考、回答 【教师】总结学生的回答，导入本节课内容：设置CSS样式属性 温故而知新，在上节课的基础上，引出本节课要学习的知识 传授新知 （35 min） 【教师】讲解新知，介绍如何设置CSS样式属性 任务五 设置CSS样式属性 一、任务说明 本任务将分别介绍边框、列表和定位样式属性。由于扩展样式很少用到，所以此处不再介绍。 二、预备知识 （一）设置边框样式 在“***的CSS规则定义”对话框的分类列表中选择“边框”选项，右侧将显示样式、宽度等与边框相关的属性，如图5-49所示（详见教材）。 “边框”选项中常用属性的意义如下： Style：设置边框样式。取消选择“全部相同”复选框可分别设置元素各个边的边框样式；选择“全部相同”复选框可将相同的边框样式属性应用于元素的Top，Right，Bottom和Left侧。 Width：设置边框粗细。取消选择“全部相同”复选框可分别设置元素各个边的边框粗细；选择“全部相同”复选框可将相同的边框粗细属性应用于元素的Top，Right，Bottom和Left侧。 Color：设置边框颜色。取消选择“全部相同”复选框可分别设置元素各个边的边框颜色；选择“全部相同”复选框可将相同的边框颜色属性应用于元素的Top，Right，Bottom和Left侧。 （二）设置列表样式 在“***的CSS规则定义”对话框的分类列表中选择“列表”选项，右侧将显示列表符号类型、列表符号图像等与列表相关的属性，如图5-50所示（详见教材）。 “列表”选项中常用属性的意义如下： List-style-type：设置项目符号或编号的外观。 List-style-image：可以指定项目符号为自定义图像。可以单击“浏览”按钮选择图像，或输入图像路径。 List-style-position：设置项目符号的位置。“outside”表示以列表项项目符号的原始位置为准对齐；“inside”表示以列表项内容的原始位置为准对齐，也就是相对原始位置向内缩进一定距离。 （三）设置定位样式 在“***的CSS规则定义”对话框的分类列表中选择“定位”选项，右侧将显示位置、显示等与定位相关的属性，如图5-51所示（详见教材）。 “定位”选项中常用属性的意义如下： Position：在CSS＋Div布局中，Position发挥着非常重要的作用，很多容器的定位都是用它来完成的。Position的属性值有4个选项，它们分别是absolute，fixed，relative和static。absolute表示绝对定位，就是指定元素在浏览器中的横竖坐标值，该位置不会随页面大小和位置的改变而改变；fixed表示相对于窗口的固定定位，一般很少使用；relative表示相对定位，是相对于元素原始位置的定位；static表示默认，一般情况下不会用到。 Visibility：用于设置元素的显示或隐藏。如果不指定该属性，则默认将继承父级元素的值。 Placement：设置Div的位置。比如在Position中设置元素为相对定位后，在此处可以设置具体的相对定位的距离。