资源简介

任务四 创建与应用CSS美化网页
一、提出任务
1．任务目标
使用CSS美化网页。
2．解决的问题
本任务通过为对首页进行美化，学习应用CSS样式。
3．本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：在网页中输入文本内容、插入图像及水平线。
二、教学目标
1. 知识目标
⑴ 了解CSS样式的作用与特点。
⑵ 掌握使用CSS设置文本样式。
⑶ 掌握使用CSS设置背景样式。
⑷ 掌握使用CSS设置列表样式。
⑸ 掌握使用CSS设置水平线样式。
2. 能力目标
能够使用CSS样式面板进行样式的设置，区分使用“类”样式与“标签”样式。通过帮助或搜索引擎等查询学习过程中出现的的概念和定义，掌握获得相关信息的方法。
3. 情感目标
正确看待自己，合理评价他人。
三、教学分析与准备
1. 教学重点
⑴ CSS样式的设置。
⑵ “类”样式与“标签”样式的区别。
2．教学难点
“类”样式与“标签”样式的区别。
3. 教学方法
提出任务并带领学生进行分析，通过分析形成解决问题的思路，通过提醒化解解决问题过程中遇到的问题，通过举一反三拓展对知识点的认识与理解。
4. 课时安排
4课时。
5. 教学环境
多媒体网络教室。
四、教学过程（组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2学时。）
教学环节及手段 教学内容 备注
组织课堂 复习知识 任务流程 导入任务 分析任务 完成任务 知识总结 举一反三 任务目标 启发思路 分组完成任务 学生自评或互评 教师点评总结 任务目标 启发思路 分组完成任务 学生自评或互评 教师点评总结 布置作业 集中学生注意力，准备上课。 通过提问复习上节课所学内容，并了解学生对上节课知识点的掌握情况。 1．网页中文本样式是如何设置的？ 2．其他网页元素的样式是如何设置的？是否也可以使用“属性”面板来完成？ 在之前的任务中使用属性面板来设置并应用文本样式，可以简化文本属性的设置过程。其特点主要表现为：样式可以一次设置多次应用，可以同步修改已应用的样式。即丰富了文本的外观、美化了页面同时也使文本属性的修改变得简单快捷。 思考：是否可以用同样方法设置其它网页元素的样式？ 提出任务：使用CSS美化网页。 使用属性面板设置文本样式是CSS应用的一种特例，其他网页元素可以使用属性面板应用已定义好的CSS样式，但不能通过属性面板完成样式的定义，本任务将学习CSS样式定义的一般方法。 1．创建与应用CSS文本样式。 使用CSS面板创建文本样式“title3”，并将新样式应用到“青春寄语”部分的标题文本上。讨论这种方法与之前学习的设置方法有什么不同。 知识讲解： ⑴ CSS样式的三种类型 在使用“CSS样式”面板定义新的样式的时候，在弹出的对话框中要进行样式类型的选择，其中包含了“类”、“标签”和“高级”三种类型，三种类型分别具有如下特点。 “类”样式：“类”样式是最为灵活的一种类型的样式，它可以任意定义名称并且应用到网页中的各种对象上。但是这种类型的样式在定义之后需要选择对象并应用后才会生效。 “标签”样式：“标签”样式的定义是建立在HTML语言基础上的，可以针对网页中的各种标签进行定义，所以用这种类型的样式定义的名称仅限于固定的标签名称，并且在样式定义后，直接被应用到页面中相应的标签对象中。 “高级”样式：这种样式仅用于定义超级链接的4种状态，所以可定义的样式名称也只有相应的4种，分别是：“a:link”用于定义超级链接初始状态；“a:visited”用于定义已经访问过的超级链接状态；“a:hover”用于定义鼠标经过超级链接对象时的状态；“a:active”用于定义超级链接的活动状态。 ⑵ CSS样式可定义参数。 “类型”选项：用于定义常规的文本属性，包括“字体”、“大小”、“颜色”等选项。 “背景”选项：用于定义背景属性，可设置“背景颜色”、“背景图像”、背景图像的“水平位置”等选项。 “区块”选项：用于定义文本的间距与对齐方式等属性。 “方框”选项：用于定义表格、框架等对象的属性。 “边框”选项：用于定义各种对象的边框属性，表格、框架、水平线的边框样式都可以使用这一选项进行定义。 “列表”选项：用于定义文本列表的属性。 “定位”选项：用于定义层对象的属性。 “扩展”选项：用于定义光标、图像等内容的视觉效果的扩展属性。 2．创建与应用页面背景样式。 文本样式的设置使用的是三种CSS样式中的第一种类型，即“类”样式。其特点为：样式的定义与应用过程是分离的，所有定义好的“类”样式都需要选择相应对象进行应用。 观察以下操作，比较“标签”样式与“类”样式的区别。 单击“CSS样式”面板上的“新建CSS规则”按钮，弹出“新建CSS规则”对话框，在当前文档中新建一个命名为“body”的“标签”样式。 完成相应设置并浏览网页。 思考并讨论：“类”样式与“标签”样式的区别。 3．完成其他样式的设置 ⑴ 定义“标签”样式“li”。 ⑵ 定义“类”样式“line”并应用到页面中的水平线上。 思考：作为“类”样式的“line”是否只能应用于水平线？如果将一张图片应用了该样式，会有什么结果，为什么？ 通过本任务学习了样式设置方法及“类”样式与“标签”样式的区别。 1．新建网页“practice2-9.html”，插入3条水平线，定义3种“类”样式“l1”、“l2”、“l3”。定义过程中修改样式中的边框属性，使其拥有不同的效果，分别应用在各条水平线上，预览页面。 三种“类”样式分别定义与应用，体现了“类”样式的使用特点。 每组4名同学，组长安排成员完成某一样式的相关操作。 组织不同组的同学互相评论对方完成任务的优缺点。 对正确完成的小组提出表扬，不正确的进行指正，或请其他组同学更正错误。 2．将本单元素材“举一反三”文件夹中的网页“practice2-11.html”拷贝到D盘根目录下，定义“标签”样式“p”，设置文本大小与颜色，保存后预览页面观察效果，之后定义“类”样式“p1”，设置不同的文本大小与颜色，并应用于页面中所插入的文本，浏览页面观察效果，总结“类”样式与“标签”样式的区别。 注意区分两种样式分别为“标签”样式和“类”样式，观察在两种样式共存的情况下，那种样式优先。 把不同层次的学生分在一组中，鼓励同学积极讨论完成任务的方法。 组织同学自评或互评。 教师对每组同学完成任务情况进行总结，对完成任务的表扬，对没有完成任务的鼓励，并帮助他们分析没有完成的原因。 新建网页“practice2-10.html”，插入本单元素材“举一反三”文件夹中的“jyfs3.jpg”和一条水平线，定义“类”样式“line1”，修改样式中的边框属性。分别将该样式应用在页面中的图片与水平线上，预览页面，分析样式设置的结果。 复习时教师按照学生回答演示操作，指出其中的问题。 力求通过任务导入，吸引学生学习欲望。 学生分组讨论并尝试操作。 学生分组讨论实现方法，并比较与之前所使用方法的不同。 教师作为引导者和组织者，学生分组上机操作，完成相应任务并进行评价。 学生总结之前任务中的方法或按教材中的操作步骤完成。 学生分组讨论并通过尝试操作得出结论。

展开更多......

收起↑