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