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

课题序号 2 教学班级 教学课时 2 教学形式 新授 课 题 名 称 任务一 个人博客之简约商务风（分步操作1-2） 使用教具 机房、电子教室 教学目的 理解网页的结构，能看懂并手写HTML代码 能根据需要设置CSS属性，看懂并手写CSS代码 深刻理解WEB中的结构和表现相分离的思想 理解页面重构的实现方法 教学重点 深刻理解WEB中的结构和表现相分离的思想 能看懂并手写HTML和CSS代码 教学难点 能看懂并手写HTML和CSS代码 更新、补充、 删节内容 无 课前准备 教案、课件、案例 课外作业 完成书本的思考练习及任务拓展部分 板 书 设 计 教 学 感 想 课堂教学安排 教学环节 主 要 教 学 内 容 教学手段与方式 新课 导入 新授 讲授 教师 演示 学生 操作 总结 评价 展示任务一网页效果，提出任务实施步骤。 分步操作，任务实施 步骤一 创建站点及首页 新建站点blog，注意images文件夹下分为skin1和skin2两个文件夹，分别对应于两种不同风格的博客页面。在站点中新建网页index1.html，网页标题为“任务1——个人博客之简约商务风”。 步骤二 构建页面整体结构 页面结构分析 我们用DIV+CSS布局完成“个人博客之简约商务风”网页 这是一种典型的页面布局形式。分为头部、导航菜单、主体部分（侧边栏和内容区）、页脚四个部分。将页面布局用DI