第3章 06布局与美化博客页面——Div+CSS（教学设计）-初中信息技术八年级同步教学设计+视频+图片（苏科版2018）

布局与美化博客页面——Div＋CSS 课题：布局与美化博客页面——Div＋CSS（第3章 第2节 第6课时） 一、教材分析 “Div＋CSS”这部分内容为教材新增内容。对比原来教材中的“用表格布局网页”，用“Div＋CSS”布局美化网页具有很多优势，应用更加广泛。在“表格布局”和“框架布局”之后，让学生了解“Div＋CSS”更符合新时代的要求。 二、学情分析 学生之前学习过用Dreamweaver CS4 新建站点创建网页、表格布局网页，对CSS样式表有所了解，但要达到灵活运用还需不断巩固练习，强化学习。Div＋CSS内容涉及代码，内容比较抽象，学生不易接受，适宜用多节课时让学生巩固、提高学习。本节课时间相对较少，不能求全、细，否则容易让学生觉得枯燥，注意力不集中。所以整节课定位在让学生体验Div＋CSS的优势和特点，尽量精简、精练，可视化操作和代码理解相结合。 三、教学目标 1. 知识与技能 理解Div＋CSS。学会创建Div，并用Div＋CSS的方式布局整个网页。灵活运用CSS样式，修改美化网页。 2. 过程与方法 学生通过布局博客网页，体会Div＋CSS布局的优势，了解Div＋CSS整体布局的方法 。 3. 情感、态度与价值观 通过网页的布局与美化，提高学生的审美情趣。 4. 行为与创新 通过对博客网页布局的“变幻”，能够将知识举一反三。 五、教学重点与难点 1. 重点 插入Div标签块、CSS方框属性设置。 2. 难点 对CSS方框属性的理解。 六、教学方法 讲授、演示、任务驱动、自主探究、同学互助。 七、教学准备 Dreamweaver CS4、课件、素材。 八、教学过程 （一）课题引入 1. 教师活动 博客的换肤是如何实现的？简单演示博客换肤。对比提问，引出Div＋CSS布局方式的优势。 2. 学生活动 学生仔细观察，积极思考并回答。 3. 设计意图 激发学生学习动力。 （二）知识新授 1. 概念 （1）教师活动 教师讲解：什么是Div＋CSS，CSS如何控制Div块，并进行实例分析（母亲节博客模板），分析网页结构，并分析设计视图与代码的对应。教师演示操作：插入Div块。 （2）学生活动 学生观察，思考。 （3）设计意图 让学生理解基本概念并掌握基本方法。 2. 操作 （1）教师活动 布置任务一：博客页面整体布局。分解任务1：插入top、nav、content Div块。练习反馈；分解任务2：插入left、right Div块。 布置任务二：放入网页内容：引用外部样式表，局部样式自主修改。 （2）学生活动 学生模仿，操作练习，期间开展自主探究，学生互助等。 （3）设计意图 在实践中体会概念与方法，让学生能够学会将代码与设计视图对应起来，并能够进行CSS样式修改。 3. 机动：拓展思考启发 （1）教师活动 ①如何将博客左右对调变换布局，需要设置CSS方框属性中的哪些参数？②可否设置padding值调节变幻布局后的文本位置？ （2）学生活动 学生自主探究，学生讨论，学生操作练习。 （3）设计意图 进阶提高，进一步体会Div＋CSS布局美化的优势，能够将所学知识举一反三。 （三）课堂小结 1. 教师活动 根据学生练习情况反馈总结，Div＋CSS 布局美化的一般步骤。 2. 学生活动 学生观察、思考，学生总结。 3. 设计意图 知识与操作技能的梳理与归纳。 【教案设计：孙梅娜（南京附中新城中学怡康街分校）】 学科网（北京）股份有限公司 $