第三章 “主题网站设计与制作” 第2节 制作网站 应用DIV+CSS布局网页　教案　 2022—2023学年苏科版初中信息技术八年级

课 题 第2节制作网站4应用Div+CSS技术布局网页 备课时间 上课时间 主备人 复备人 编 号 教材分析 本节课是江苏科学技术出版社出版《初中信息技术》八年级教材第三章第2节网页制作中的内容。在此之前，学生已经基本掌握运用框架和表格布局网页的技术，本节是除了表格和框架之外的人们最多的网页定位技术。 学情分析 八年级学生已经掌握了Dreamweaver网页设计的相关知识，学生学习热情较高，喜欢团队合作的探究学习方式，但学生自主创新能力不足，学习代码编写有一定困难，因此本课重点讲解如何使用DIV+CSS布局网页的知识内容。 教学目标 知识与技能： （1）学会DIV+CSS网页布局方式 （2）掌握DIV+CSS布局的定位方法 过程与方法： （1）能熟练使用CSS对网页中对象的位置精确排版； （2）灵活应用DIV+CSS进行网页布局。 情感态度与价值观：培养学生团队合作意识；高学生责任感和信息素养 教学重点 DIV+CSS网页布局方式、方法。 教学难点 灵活使用DIV+CSS布局定位。 教学方法 讲授法、自主学习法、任务驱动法 教学过程 教师活动 学生活动 复备栏 创设情境 导入新课 展示flash动画 深夜加班的程序员由于之前使用表格布局的网页，导致网页后期修改困难，而无法按时完成老板交给的任务，陷入崩溃状态。如何寻求新的布局方法来解决这个问题呢？引入本次课的教学内容，用DIV+CSS布局网页。 【设计意图】通过flash动画情景引入本次课的教学内容，可以激发学生的学习兴趣，让学生能带着期望带着学习热情进入到内容的学习。 、 学生观看flash动画 思考问题 教学过程 教师活动 学生活动 复备栏 使用DIV标签布局网页 在网站制作中，除了可以使用表格和框架布局网页外，如今人们更多地采用DIV+CSS技术来实现各种定位，这样能更高效地对页面进行布局、排版，似的页面体积变小，浏览速度变快。 DIV+CSS是网站标准中的常用术语之一，通常是为了说明它与HTML语言中表格定位方式的区别。 DIV标签是HTML中的一个元素，用来为HTML文档内大块的内容提供结构和背景的元素。其实标签和结束标签之间的所有内容都是属于这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格化这个块来进行控制。 任务一：完成教材中DIV布局网页任务 学生了解什么是Div标签 学生自主学习，完成任务 用CSS美化网页 CSS是英语Cascading style sheeets(层叠样式表单）的缩写，它是一种定义Web元素显示的样式，其中层叠是指对同意元素的不同属性可以添加多种样式。 CSS主要是对页面的布局、字体、颜色、背景和其他效果进行精准的控制，从而对网页的外观进行布局。使用CSS后，只需要进行一些简单的修改，就可以改变同一页面的不同部分或多个页面的外观和格式。 CSS样式分为外部样式和内部样式两种类型。 任务二：完成教材中实践学习，新建外部CSS样式表文件。 注意：若不新建CSS文件，直接选择新建CSS规则，这样建立的是内部CSS样式，样式命令会包含在该网页文件中。 建立CSS规则分为类、ID、标签和复合内容几种类型。 “类”选项：用于创建自定义CSS样式类，可以应用到页面的任何元素上。 “ID”选项：用于创建包含特定ID属性的标签格式。 “标签”选项：用于重新定义特定HTML标签的默认格式。 “复合内容”选项：用于定义同时影响两个或多个标签、类或ID的复合规则。 任务三：完成教材中实践学习，为包含特定ID属性的DIV标签创建CSS规则，为特定HTML标签创建CSS规则。应用CSS样式表。 学生了解CSS相关知识 学生自主学习，完成任务 综合练习 使用表格、框架和DIV+CSS布局网页，请你对比它们的异同以及各自的优势。 完成练习并回答问题。 课堂小结 通过本节课的学习，我们知道了现在主流的网站均采用Div+CSS方法进行布局，在今后的课程中，我们要进一步加深学习，以便做出更加出色的网站。 梳理本课知识点 课后反思 3 学科网（北京）股份有限公司 $