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

课题序号 6 教学班级 教学课时 2 教学形式 新授 课 题 名 称 定义网页布局样式（3） 使用教具 机房、电子教室 教学目的 定义古诗文网的页面布局样式 教学重点 掌握定义页面布局样式基本方法 教学难点 掌握定义页面布局样式的常用技巧 更新、补充、 删节内容 无 课前准备 教案、课件、作业 课外作业 板 书 设 计 教 学 感 想 课堂教学安排 教学环节 主 要 教 学 内 容 教学手段与方式 导入 操作演示 操作演示 操作演示 操作演示 操作演示 总结与评价 在上节课完成网页标题、导航的CSS样式定义的基础上，继续完成整张网页的样式定义。 步骤四 布局main、aside和footer 1．根据前面分析的排版形式布局main、aside和footer。 main { float: left; width: 80%; } aside { float: right; width: 18%; } footer { clear: both; } 效果如图 步骤五 制作main部分 1．分析main结构。 2．构建main结构。 在设计视图下，删除虚线框中的文字“此处为新 main 标签的内容”，分别插入两个section标签，设置class均为“main-section”。然后再在这两个section中分别插入一个header标签（class为“