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

课题序号 3 教学班级 教学课时 2 教学形式 新授 课 题 名 称 任务一 个人博客之简约商务风（分步操作3-5） 使用教具 机房、电子教室 教学目的 理解网页的结构，能看懂并手写HTML代码 能根据需要设置CSS属性，看懂并手写CSS代码 深刻理解WEB中的结构和表现相分离的思想 理解页面重构的实现方法 教学重点 深刻理解WEB中的结构和表现相分离的思想 能看懂并手写HTML和CSS代码 教学难点 能看懂并手写HTML和CSS代码 更新、补充、 删节内容 无 课前准备 教案、课件、案例 课外作业 完成书本的思考练习及任务拓展部分 板 书 设 计 教 学 感 想 课堂教学安排 教学环节 主 要 教 学 内 容 教学手段与方式 新课 导入 新授 讲授 教师 演示 学生 操作 总结 评价 展示任务一网页效果，提出任务实施步骤。 分步操作，任务实施 步骤三 完成网页头部 网页头部HTML代码 头部header内容为博客标题.blog_name，其HTML代码如下： !--header start-- header div id=blog_name篱笆小屋/div /header !--header end-- 设置网页头部CSS样式 步骤四 完成导航菜单 网页导航HTML代码 导航菜单nav：具体由项目列表ul和li实现，其HTML代码为： !--nav star