任务6 “官堰村振兴网”生态振兴页面制作.pptx

任务情景

任务内容

任务描述

任务情景

“官堰村振兴网”的制作已经逐渐接近了尾声，很快就到了前端功能页面的最后一部分“生态振兴”了。

热爱拍摄生态素材的小郭同学对“生态振兴”模块任务满怀着兴趣与信心。

任务思考：

小郭分析开发必要条件，确定以下重点工作：

1、引入公有样式文件，保证页面风格一致。

2、生态振兴功能模块布局。

3、生态振兴子页面编写。

4、在生态振兴功能模块完成轮播图插件的引入。

任务内容

1、掌握transition过渡动画制作

2、掌握transform典型四种动画制作

3、掌握简单的插件使用方法

如右图所示，本任务需完成的文件开发

前导学习

素材准备

实施准备

前导学习

上一章学习了animation自定义动画的制作，小郭认为通过animation属性实现动画代码量比较多，不方便制作简单动画所以选择了更简单、更高效的transition和transform动画。

transform动画类型

前导学习

小郭与组员们讨论后，将“官堰村振兴网站”生态振兴分为3个步骤：

步骤1：编写HTML代码，实现生态振兴主功能模块和子页面模块，完成引入插件并调用方法。

步骤2：编写CSS代码，美化页面，确保插件样式完善。

步骤3：编写js脚本，实现跳转功能。

以上内容请参考教材“任务6“官堰村振兴网”生态振兴页面制作——前导知识”部分进行学习并完成练习

素材准备

步骤1：请在班群下载本书配套源码，找到“village”压缩包。

步骤2：解压“village”压缩包。

结构编写

样式编写

实施过程

特效编写

小郭与组员们讨论后，将“官堰村振兴网站”生态振兴分为3个步骤：

步骤1：编写HTML代码，实现生态振兴主功能模块和子页面模块，完成引入插件并调用方法。

步骤2：编写CSS代码，美化页面，确保插件样式完善。

思考

结构编写

步骤1：打开已解压的“village”项目包，保留“images”文件，保留“jquery-1.11.0.min.js”、“camroll_slider.min.js”、“jquery-form.js”、“public.js”、“son_public.css”、“style.css”六个文件，其他文件全部删除。

步骤2：在“html”目录处右键分别新建“ecological.html”、“ecological_son.html”。

结构编写

步骤3：“ecological.html”文件创建完毕后，请参考教材“任务6“官堰村振兴网”生态振兴页面制作——任务实施”中“步骤1”——”步骤1-7“完成练习。

步骤4：完成步骤3后，继续参考教材内容完成“ecological_son.html”文件的结构编写。

样式编写

步骤1：在“html”目录处右键分别新建“ecological.html”、“ecological_son.html”

步骤2：进行初始化样式的编辑——打开“ecological.css”文件，参考教材“任务6“官堰村振兴网”生态振兴页面制作——任务实施”中“步骤2-1”——”步骤2-5“完成练习。

样式编写

步骤3：随后，完成新闻页面基础样式编辑——打开“camroll_slider.css”文件，继续参考教材内容完成相应练习。

步骤4：进行初始化样式的编辑——打开“camroll_slider.css”文件，参考教材“任务6“官堰村振兴网”生态振兴页面制作——任务实施”中“步骤2-6”——”步骤2-10“完成练习。

特效编写

步骤1：在public.js文件代码末尾处，添加如下代码，获取查看更多按钮并绑定点击事件。

步骤2：随后，通过window.open()的方式打开“生态展示”页面，参考教材“任务6“官堰村振兴网”生态振兴页面制作”中“步骤3-1”完成练习（注意代码书顺序不能改变！）。

知识总结

技能总结

任务总结

职素总结

互相评价

总结类别

总结内容

知识

transition过渡动画

transform典型四种动画

简单的插件使用

技能

运用HTML构造网页框架，通过CSS网页布局。

CSS代码修改调整能力。

通过运用jquery实现轮播插件效果。

职素

沟通协作

迎难而上

互相评价

基础知识完成互相评价

页面效果完成互相评价

职素认知完成互相评价

任务名称：“官堰村振兴网”生态振兴页面制作

任务承接人：

交付日期：

项目要求

评价标准

成绩

HTML结构完整

（30分）

1.布局合理，引入文件无误（10分）

2.页面布局无明显错乱（20分）

CSS样式代码部分

（40分）

1.CSS选择器语法正确（15分）

2.CSS阴影样式完成（15分）

3.CSS代码有新尝试（10分）

Js功能完善

（30分）

1.轮播图插件使用成功。（10分）

2.跳转页面功能实现（20分