任务5 “党史学习教育网”功能完善.pptxVIP

任务情景任务内容任务描述

任务情景“党史学习教育网”的注册登录功能已经完成，接下来就是其他功能的完善了。这里所说的功能完善，即完成除首页开发与注册登录功能之外的所有子页面。任务思考：帆凯同学参考原型设计蓝图，明确了“党史学习教育网”功能完善任务包括：1.“红色资料”-纪念馆与画展宣传功能开发2.“新闻要论”-要闻要论功能开发

任务内容1、了解CSS权重问题2、掌握CSS各类标签默认样式3、学会运用transition动画4、根据需求，灵活运用CSS样式如右图所示，本任务需完成的文件开发

前导学习素材准备实施准备

前导学习在网页中，我们经常遇到这样的情形,当鼠标悬停在某些文字上时，文字的颜色或背景会改变。这是如何实现的呢？让我们一起来学习伪类选择器的相关知识吧。伪类选择器是指对同一个HTML元素的不同状态添加不同样式。换句话说，对于同一个标签，根据其不同的状态，有不同的样式。这就叫做“伪类”，伪类语法要用冒号来表示。

前导学习跟随帆凯完成本任务的开发，需要掌握的技术如下：1.各个子页面样式编写2.CSS定位灵活运用3.transition动画以上内容请参考教材“任务5“党史学习教育网”功能完善——前导知识”部分进行学习并完成练习

素材准备请在班群下载与本书配套的源码素材

结构编写样式编写实施过程

帆凯通过思考，认为本节任务需要完成3个页面的开发，同时获取了新闻页面的原型图：1.分析子页面与首页布局的异同之处2.设计个性页面时需添加的新样式3.运用CSS3属性时考虑浏览器兼容性思考

结构编写步骤1：在html文件夹中，新建文件“red-1.html”“news.html”“news_son.html”和“red-2.html”；在CSS文件夹下，新建文件“red-1.css”“news.css”“news_son.css”和“red-2.css”。步骤2：文件创建完毕后，请参考教材“任务5“党史学习教育网”功能完善——任务实施”中“步骤1-1-1”——“步骤1-1-7”完成编写red-1.html代码练习。

结构编写步骤3：完成编写red-1.html代码练习后，请参考教材“任务5“党史学习教育网”功能完善——任务实施”中“步骤1-3-1”——“步骤1-3-2”完成编写red-2.html代码练习。步骤4：请参考教材“任务5“党史学习教育网”功能完善——任务实施”中“步骤2-1”——“步骤2-1-2”完成编写news.html代码练习。步骤5：请参考教材“任务5“党史学习教育网”功能完善——任务实施”中“步骤2-3”完成编写news_son.html代码练习。

样式编写步骤1：文件创建完毕后，请参考教材“任务5“党史学习教育网”功能完善——任务实施”中“步骤1-2-1”——“步骤1-2-5”完成编写red-1.css代码练习。

样式编写步骤2：完成red-1.css代码后，请参考教材“任务5“党史学习教育网”功能完善——任务实施”中“步骤1-4-1”——“步骤1-4-6”完成编写red-2.css代码练习。步骤3：完成red-2.css代码后，请参考教材“任务5“党史学习教育网”功能完善——任务实施”中“步骤2-2-1”——“步骤2-2-5”完成编写news.css代码练习。步骤4：完成news.css代码后，请参考教材“任务5“党史学习教育网”功能完善——任务实施”中“步骤2-4-1”——“步骤2-4-2”完成编写news_son.css代码练习。

知识总结技能总结任务总结职素总结互相评价

任务总结总结类别总结内容知识了解CSS权重问题掌握CSS各类标签默认样式学会运用transition动画根据需求，灵活运用CSS样式技能CSS定位灵活运用、transition动画代码逻辑训练职素沟通协作迎难而上互相评价基础知识完成互相评价CSS页面效果完成互相评价职素认知完成互相评价

任务评价任务名称：“党史学习教育网”功能完善任务承接人：交付日期：项目要求评价标准成绩HTML要求（40分）1.子页面数量达标（10分）2.HTML结构明了，缩进清晰（20分）3.HTML引入文件准确，未出现错误（10分）?CSS样式（70分）1.CSS代码遵循“由大到小”原则，代码简洁（20分）2.CSS代码语法正确，选择器书写无误（20分）3.CSS代码动画效果无缺陷（30分）?总分?评价人评价级别（√）备注个人□优秀□良好□合格□不合格?老师□优秀□良好□合格□不合格?