网页设计与制作项目教程（html+css+bootstrap）教学课件作者徐云晴讲义项目四教案4.docVIP

课题序号 4 教学班级 教学课时 2 教学形式 新授 课 题 名 称 定义网页布局样式（1） 使用教具 机房、电子教室 教学目的 了解CSS的继承性 熟悉网页布局中常用CSS样式属性 了解网页布局的基本形式 熟悉float属性 教学重点 掌握网页布局中常用CSS样式属性 教学难点 掌握float属性 更新、补充、 删节内容 无 课前准备 教案、课件、作业 课外作业 板 书 设 计 教 学 感 想 课堂教学安排 教学环节 主 要 教 学 内 容 教学手段与方式 导入 讲授 讲授 展示 操作演示 举例介绍 举例介绍 讲授 举例介绍 总结与评价 在完成古诗文网页面布局后，进一步设置布局样式。 知识准备一 了解CSS的继承性 根据任务一完成的网页结构，可以得到如下的各个标记间的树型关系图： 知识准备二 熟悉网页布局中的常用CSS样式属性 Width/Height（宽度/高度） Width/Height 属性用来设置元素的宽度/高度。可以使用px、cm 等单位定义宽度。也可以使用百分比。当使用百分比来定义宽度时，它指的是相对于父元素的width来计算的。Width的默认值是auto，此时，浏览器会计算出元素的实际宽度。Width/Height 属性不受内边距、外边距和边框的影响。 Border（边框） （1）Border属性的三个方面： 在任务一中，读者已经了解到Border