初中信息技术《博客布局与美化divcss》教学设计

布局与美化博客页面

——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 布局美化的一般步骤 学生观察、思知识与操作技能的梳理与归考 纳 学生总结 ? 教学反思

本节课各教学环节学生完成情况基本良好。第二个任务以及“我的博客我做主”拓展思考部分，由于课堂时间有限，留给学生讨论思考和练习的时间没能太多，若是时间再充分些,学生学习效果会更好些。另外，本节课的任务具有连贯

性,比如代码复制正确后,样式的链接才会看到完整的效果,一般来说,大多数学生这里都能顺利完成,但也有基础薄弱的学生会有一些具有个性化的问题产生,本节课是以教师帮助和学生互助的方式来尽量关注的到每一个学生。对于一些“学困生”在面对具有连贯性的操作任务时，如何让其跟上“大部队”，是值得思考得问题。

本文来源：https://www.bwwdw.com/article/1x9d.html