第8课 使用CSS与Div设置网页样式与布局（1）（教案）-《网页制作三合一案例教程》同步教学（航空工业出版社）

课题 第8课 使用CSS与Div设置网页样式与布局（1） 课时 2课时（90 min） 教学目标 知识目标： （1）了解什么是Web标准，以及Web标准的构成 （2）认识Div，掌握创建和选择Div的方法 （3）认识CSS，掌握添加CSS的方式，了解CSS的基本语法和选择器类型 技能目标： （1）掌握在网页中应用Div的方法 （2）能够通过使用CSS修改网页样式 素质目标： 对待学习，要知其所然，还要知其所以然 教学重难点 教学重点：Div和CSS的使用 教学难点：CSS选择器类型 教学方法 问答法、讨论法、讲授法、练习法 教学用具 电脑、投影仪、多媒体课件、教材 教学设计 第1节课：课前任务→ 考勤（2 min）→  问题导入（3 min）→传授新知（30 min）→课堂实训（10 min） 第2节课：问题导入（3 min）→ 传授新知（27 min）→ 课堂实训（10 min）→ 课堂小结（3 min）→ 作业布置（2 min） 教学过程 主要教学内容及步骤 设计意图 第一节课 课前任务 【教师】让学生上网查询在网页制作领域，什么是Web标准 【学生】按照要求完成课前任务 通过课前任务，让学生明确我们要制作出符合Web标准的网站 考勤 （2 min） 【教师】使用文旌课堂APP进行签到 【学生】班干部报请假人员及原因 培养学生的组织纪律性，掌握学生的出勤情况 问题导入 （3min） 【教师】提出以下问题，并随机邀请学生进行回答 上个项目我们在网页当中使用了表格布局，那么还有没有其他方式实现网页的布局？ 【学生】聆听、思考、回答 【教师】总结学生的回答，导入本节课内容：认识Div 通过网页表格布局方式，引出使用“Div＋CSS”布局网页，激发学生学习兴趣 传授新知 （30 min） 【教师】讲解新知，介绍认识Div 任务一 认识Div 一、任务说明 Div全称Division，意为“区分”，它是用来定义网页内容中逻辑区域的标签。可以通过手动插入Div标签，并对它们应用CSS样式来创建网页布局。 二、预备知识 （一）认识Web标准 在介绍Div之前，首先来认识一下Web标准。Web标准可以从结构、表现和行为三方面来衡量。这些标准大部分由W3C（万维网联盟，World Wide Web Consortium）起草和发布，也有一些是其他标准组织制定的。可以说符合Web标准的网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。 1．结构 结构技术用于对网页中用到的信息（文本、图像、动画等）进行分类和整理，目前用于结构化设计的Web标准技术主要是XHTML语言。 2．表现 表现技术用于对已被结构化的信息进行显示上的控制，包括位置、颜色、字体、大小等形式控制。目前用于表现设计的Web标准技术就是CSS。W3C创建CSS的目的是用CSS来控制整个网页的布局，与XHTML所实现的结构完全分离。简单来说就是表现与内容完全分离，使站点的维护更加容易。这也正是Div＋CSS布局的一大特点。 3．行为 DOM（Document Object Model）：文档对象模型，相当于浏览器与内容结构之间的一个接口，它定义了访问和处理HTML文档的标准方法，把网页和脚本以及其他编程语言联系了起来。 ECMAScript：由ECMA（European Computer Manufacturers Association）制定的标准脚本语言（JavaScript），用于实现网页对象的交互操作 【提示】 采用Web标准制作网页的好处是，网页更容易维护和更新，访问速度更快，更容易被搜索引擎检索到。 （二）Div简介 Div相当于一个容器，由起始标签<Div>和结束标签</Div>之间的所有内容构成。在它里面可以内嵌表格（table）、文本（text）等XHTML代码。其中所包含的元素特性由Div标签的属性来控制，或使用样式表块来控制。 【课堂问答】 【教师】随机邀请学生回答以下问题 请同学们思考，XHTML代码中可作为容器的标签有很多，为什么要选择Div呢？ 【学生】聆听、思考、回答 【教师】总结学生的回答 因为Div不仅可作为容器，它还有一个别的标签没有的优点，那就是它不带有任何原始属性。 例如，P标签为段落属性，使用它作为容器就会导致放入P标签的内容与前后段落之间出现一个空行的间隔，而用Div就不会出现这种情况，图5-1下图（详见教材）所示为使用P标签作为容器的效果，图5-1上图（详见教材）为使用Div作为容器的效果。可以很明显地看出，P标签中的内容与上下行之间产生一个空行的间距。 （三）创建Div Div标签与表格、图像等网页对象的插入