任务3 “党史学习教育网”首页制作.pptxVIP

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

任务情景“党史学习教育网”需求分析和原型设计已经设计完成，下一步是根据原型UI完成“党史学习教育网”首页开发任务。这项任务交给小茹来完成！任务思考：小茹同学拿到原型设计图（如右图），明确首页开发任务的重点：1.通过运用div+css技术实现首页功能模块布局；2.运用CSS技术完成各功能模块的样式编写。

任务内容1、掌握开发前必要知识（HTML+CSS基础）、JavaScript基础2、完成HMTL页面文件结构（首页与链接页面）3、完成CSS基础样式和美化（首页与链接页面）4、实现轮播图效果如右图所示，本任务需完成的文件开发

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

前导学习通过技术实现项目，需要完成对DHTML的理解，它是指HTML+CSS+JavaScript的综合运用，最终实现页面功能的过程。

前导学习跟随小茹完成本任务的开发，需要掌握的技术如下：1、HTML常用标签（文本、图片、超链接）2、CSS基础（语法、盒模型、常用选择器）3、JavaScript基础（基础语法、数组对象、DOM简单操作、setTimeout（）函数）以上内容请参考教材“任务3“党史学习教育网”首页制作——前导知识”部分进行学习并完成练习

素材准备步骤1：请下载本书配套源码，找到“code”压缩包。步骤2：解压“code”压缩包，将其中名为“images”文件。步骤3：将“images”文件保存至本地即可。

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

小茹通过思考，认为本节任务需要完成2个页面的开发，同时获取了新闻页面的原型图：首页开发（index.html）首页新闻页面开发（personage.html）思考

结构编写步骤1：打开已解压的“code”项目包，保留“images”文件，保留“jQuery.md5.js”、“jquery-1.9.0.min.js”、“jquery-form.js”三个jquery文件，其他文件全部删除。步骤2：在“html”目录处右键分别新建“index.html”、“personage.html”。

结构编写步骤3：“index.html”文件创建完毕后，请参考教材“任务3“党史学习教育网”首页制作——任务实施”中“步骤1-1”——”步骤1-9“完成练习。步骤4：完成步骤3后，继续参考教材内容完成“personage.html”文件的结构编写。

样式编写步骤1：进行初始化样式的编辑——打开“init.css”文件，参考教材“任务3“党史学习教育网”首页制作——任务实施”中“步骤2-1”——”步骤2-5“完成练习。步骤2：随后，完成新闻页面基础样式编辑——打开“introduce.css”文件，继续参考教材内容完成相应练习。

样式编写步骤3：完成公共模块样式编辑——打开“public.css”文件，参考教材“任务3“党史学习教育网”首页制作——任务实施”中“步骤2-6”——”步骤2-12“完成练习。步骤4：随后，完成首页样式编辑——打开“index.css”文件，参考教材“任务3“党史学习教育网”首页制作——任务实施”中“步骤2-12”——”步骤2-25“完成练习。

特效编写步骤1：完成首页轮播图特效制作，在js文件夹下，新建“animation.js”。步骤2：随后，完成首页样式编辑——打开“index.css”文件，参考教材“任务3“党史学习教育网”首页制作——任务实施”中“步骤3-1”——”步骤3-7“完成练习（注意代码书顺序不能改变！）。

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

任务总结总结类别总结内容知识HTML：文本标签、列表标签CSS：语法、选择器、盒模型JavaScript：基础语法、数组、DOM简单操作、setTimeout（）函数技能DIV+CSS布局（传统网页布局）代码逻辑训练职素沟通协作独立思考迎难而上互相评价基础知识完成互相评价页面效果完成互相评价职素认知完成互相评价

任务评价任务名称：“党史学习教育网”首页制作任务承接人：交付日期：项目要求评价标准成绩HTML结构完整（30分）1.页面布局合理，代码有缩进，且类名有意义（10分）2.页面效果无明显错乱（20分）CSS样式代码部分（40分）1.CSS选择器使用正确，代码有缩进（15分）2.CSS样式功能完成（15分）3.CSS代码有新尝试（10分）图文功能完善（30分）1.逻辑清晰，页面内容模块区分合适。（10分）2.轮播图功能实现，无bug（20分）总分评价人评价级别（√）备注个人□优秀□良好□合格□不合格老师□优秀□良好□合格□不合格