布局与美化博客页面
——Div+CSS
? 教材分析
本着与时俱进的信息技术教学研究理念，初中阶段第一次尝试用dreamweaver软件替代frontpage进行网页教学。“Div +CSS”这部分内容在原苏教版的教材中没有涉及。对比原来教材中的“用表格布局网页”，用“Div+CSS”布局美化网页具有很多优势，应用将更加广泛。在“表格布局”和“框架布局”之后，让学生了解“Div+CSS” ， 更符合新时代的要求。
? 学情分析
学生之前学习过用DreamweaverCS4 新建站点创建网页、表格布局网页，对CSS样式表有所了解，但要达到灵活运用还需不断巩固练习,强化学习。Div+CSS内容涉及代码,内容比较抽象，学生不易接受，适宜用多节课时让学生巩固、提高学习。本节课时间相对较少，不能求全、细，否则容易让学生觉得枯燥，注意力不集中。所以整节课定位在让学生体验div+css的优势和特点，尽量精简、精炼，可视化操作和代码理解相结合。
? 教学目标
1. 知识与技能: 理解Div+CSS。学会创建Div,并用Div+CSS的方式布局整个网页。灵
活运用CSS样式，修改美化网页。
2. 过程与方法: 学生通过布局博客网页，体会Div+CSS布局的优势，了解Div+CSS整
体布局的方法 。
3. 情感态度与价值观:通过网页的布局与美化，提高学生的审美情趣。 4. 行为与创新:通过对博客网页布局的“变幻”，能够将知识举一反三。
? 课时安排 ：一课时 ? 教学重点与难点
教学重点： 插入Div标签块 CSS方框属性设置 教学难点： 对CSS方框属性的理解
? 教学方法与手段
多媒体广播教学 讲授、演示、任务驱动、自主探究、同学互助
? 课前准备 ：DreamweaverCS4 课件 素材 ? 教学过程 教学环节 教师活动 博客的换肤是如何实现的？ 课题引入 简单演示博客换肤。对比提问。 引出Div+CSS布局方式的优势 讲解：什么是Div+CSS CSS如何控制Div块 新授 实例分析（母亲节博客模板） 1、网页结构分析 2、设计视图与代码的对应 演示操作：插入Div块 布置任务一：博客页面整体布局 分解任务：插入top、nav、content Div块 练习反馈 分解任务：插入left、right Div块 布置任务二：放入网页内容 引用外部样式表 任务驱动 局部样式自主修改 任务二反馈 机动：拓展思考启发： 1、如何将博客左右对调变换布局，需要设置CSS方框属性中的哪些参数 2、可否设置padding值调节变幻布局后的文本位置 进阶提高 学生模仿 操作练习 学生探究 操作练习 在实践中体会概念与方法 让学生能够学会将代码与设计视图对应起学生观察 学生思考 学生观察 让学生理解基本概念并掌握基本方法 学生活动 学生观察 学生回答 设计意图 激发学生学习动力 学生自主探究 来，并能够进行学生互助 CSS样式修改 学生自主探究 进一步体会学生讨论 Div+CSS布局学生操作练习 美化的优势，能够将所学知识举一反三
教学环节 教师活动 博客的换肤是如何实现的？ 学生活动 学生观察 学生回答 设计意图 激发学生学习动力 课题引入 简单演示博客换肤。对比提问。 引出Div+CSS布局方式的优势 讲解：什么是Div+CSS CSS如何控制Div块 学生观察 学生思考 学生观察 让学生理解基本概念并掌握基本方法 新授 实例分析（母亲节博客模板） 1、网页结构分析 2、设计视图与代码的对应 演示操作：插入Div块 布置任务一：博客页面整体布局 分解任务：插入top、nav、content Div块 练习反馈 分解任务：插入left、right Div块 布置任务二：放入网页内容 引用外部样式表 学生模仿 操作练习 学生探究 操作练习 在实践中体会概念与方法 让学生能够学会将代码与设计视图对应起学生自主探究 来，并能够进行学生互助 CSS样式修改 任务驱动 局部样式自主修改 任务二反馈 机动：拓展思考启发： 1、如何将博客左右对调变换布局，需要设置CSS方框属性中的哪些参数 2、可否设置padding值调节变幻布局后的文本位置 进阶提高 学生自主探究 进一步体会学生讨论 Div+CSS布局学生操作练习 美化的优势，能够将所学知识举一反三 根据学生练习情况反馈总结 课堂小结 Div+CSS 布局美化的一般步骤 根据学生练习情况反馈总结 课堂小结 Div+CSS 布局美化的一般步骤 学生观察、思考 知识与操作技能的梳理与归学生总结 纳 学生观察、思考 知识与操作技能的梳理与归学生总结 纳
初中信息技术《博客布局与美化——div+css》教学设计word文档
