第二单元任务四.docVIP

第二单元 添加首页内容 任务四 创建与应用CSS美化网页 一、提出任务 1．任务目标．．教学难点 课时. 教学环境 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”，修改样式中的边框属性。分别将该样式应用在页面中的图片与水平线上，预览页面，分析样式设置的结果。 复习时教师按照学生回答演示操作，指出其中的问题。 力求通过任务导入，吸引学生学习欲望。 学生分组讨论并尝试操作。 学生分组讨论实现方法，并比较与之前所使用方法的不同。 教师作为引导者和组织者，学生分组上机操作，完成相应任务并进行评价。 学生总结之前任务中的方法或按教材中的操作步骤完成。 学生分组讨论并通过尝试操作得出结论。 4