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

布局与美化博客页面 ——Div+CSS 教材分析 本着与时俱进的信息技术教学研究理念，初中阶段第一次尝试用dreamweaver软件替代frontpage进行网页教学。“Div +CSS”这部分内容在原苏教版的教材中没有涉及。对比原来教材中的“用表格布局网页”，用“Div+CSS”布局美化网页具有很多优势，应用将更加广泛。在“表格布局”和“框架布局”之后，让学生了解“Div+CSS” ， 更符合新时代的要求。 学情分析 学生之前学习过用DreamweaverCS4 新建站点创建网页、表格布局网页，对CSS样式表有所了解，但要达到灵活运用还需不断巩固练习,强化学习。Div+CSS内容涉及代码,内容比较抽象，学生不易接受，适宜用多节课时让学生巩固、提高学习。本节课时间相对较少，不能求全、细，否则容易让学生觉得枯燥，注意力不集中。所以整节课定位在让学生体验div+css的优势和特点，尽量精简、精炼，可视化操作和代码理解相结合。 教学目标 知识与技能: 理解Div+CSS。学会创建Div,并用Div+CSS的方式布局整个网页。灵活运用CSS样式，修改美化网页。 过程与方法: 学生通过布局博客网页，体会Div+CSS布局的优势，了解Div+CSS整体布局的方法 。 情感态度与价值观:通过网页的布局与美化，提高学生的审美情趣。 行为与创新:通过对博客网页布局的“变幻”，能够将知识举一反三。 课时安排 ：一课时 教学重点与难点 教学重点： 插入Div标签块 CSS方框属性设置 教学难点： 对CSS方框属性的理解 教学方法与手段 多媒体广播教学 讲授、演示、任务驱动、自主探究、同学互助 课前准备 ：DreamweaverCS4 课件 素材 教学过程 教学环节 教师活动 学生活动 设计意图 课题引入 博客的换肤是如何实现的？ 简单演示博客换肤。对比提问。 引出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 布局美化的一般步骤 学生观察、思考 学生总结 知识与操作技能的梳理与归纳 教学反思 本节课各教学环节学生完成情况基本良好。第二个任务以及“我的博客我做主”拓展思考部分，由于课堂时间有限，留给学生讨论思考和练习的时间没能太多，若是时间再充分些,学生学习效果会更好些。另外，本节课的任务具有连贯性,比如代码复制正确后,样式的链接才会看到完整的效果,一般来说,大多数学生这里都能顺利完成,但也有基础薄弱的学生会有一些具有个性化的问题产生,本节课是以教师帮助和学生互助的方式来尽量关注的到每一个学生。对于一些“学困生”在面对具有连贯性的操作任务时，如何让其跟上“大部队”，是值得思考得问题。