初中信息技术《博客布局与美化——div+css》教学设计

布局与美化博客页面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+CSSCSS 如何控制 Div 块实例分析（母亲节博客模板）1、网页结构分析2、设计视图与代码的对应演示操作：插入 Div 块学生观察学生思考学生观察让学生理解基本概念并掌握基本方法布置任务一：博客页面整体布局分解任务：插入 top、nav、content Div块练习反馈分解任务：插入 left、right Div 块布置任务二：放入网页内容引用外部样式表局部样式自主修改任务二反馈学生模仿操作练习学生探究操作练习学生自主探究学生互助在实践中体会概念与方法让学生能够学会将代码与设计视图对应起来，并能够进行 CSS 样式修改任务驱动机动：拓展思考启发：1、如何将博客左右对调变换布局，需要设置 CSS 方框属性中的哪些参数2、可否设置 padding 值调节变幻布局后的文本位置学生自主探究学生讨论学生操作练习进阶提高进一步体会Div+CSS 布局美化的优势，能够将所学知识举一反三课堂小结根据学生练习情况反馈总结Div+CSS 布局美化的一般步骤学生观察、思考学生总结知识与操作技能的梳理与归纳 教学反思本节课各教学环节学生完成情况基本良好。第二个任务以及“我的博客我做主”拓展思考部分，由于课堂时间有限，留给学生讨论思考和练习的时间没能太多，若是时间再充分些,学生学习效果会更好些。另外，本节课的任务具有连贯性,比如代码复制正确后,样式的链接才会看到完整的效果,一般来说, 大多数学生这里都能顺利完成,但也有基础薄弱的学生会有一些具有个性化的问题产生