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

课题序号 5 教学班级 教学课时 2 教学形式 新授 课 题 名 称 任务二 个人博客之中国风（分步操作1-2） 使用教具 机房、电子教室 教学目的 理解网页的结构，能看懂并手写HTML代码 能根据需要设置CSS属性，看懂并手写CSS代码 深刻理解WEB中的结构和表现相分离的思想 理解页面重构的实现方法 教学重点 深刻理解WEB中的结构和表现相分离的思想 能看懂并手写HTML和CSS代码 教学难点 能看懂并手写HTML和CSS代码 更新、补充、 删节内容 无 课前准备 教案、课件、案例 课外作业 完成书本的思考练习及任务拓展部分 板 书 设 计 教 学 感 想 课堂教学安排 教学环节 主 要 教 学 内 容 教学手段与方式 新课 导入 新授 讲授 教师 讲解 学生 对比 归纳 教师 演示 学生 操作 总结 评价 一、项目分解，任务分析 DIV+CSS布局的优点就在于页面重构的方便性，如本例中由简洁商务风格的博客页面修改成为浓郁中国风的博客页面，无需修改内容和HTML代码，只需要修改CSS样式即可。 请观察两种风格页面的样图后再进行修改： 各盒子DIV的背景图片、高度及字体样式的修改。最大的改变为：aside层和section层调整了左右位置。所以任务二的主要工作为：根据需要修改相应的CSS属性。 二、知识准备，任务决策 知识准备一 CSS的优先级机制 样式的优先级 多