任务3 “官堰村振兴网”首页制作.pptx

任务情景

任务内容

任务描述

任务情景

小郭完成了“官堰村振兴网”的项目准备阶段，紧接着是小茹按照UI设计原型进行“官堰村振兴网”首页功能模块的开发。

这项任务交给小茹来完成！

任务思考：

小茹分析开发首页的要点：

1.通过运用div+css技术实现首页功能模块布局

2.完成布局后运用JavaScript实现页面特效展示

任务内容

熟练使用盒模型样式

熟练使用CSS选择器

熟练JavaScript基础知识

掌握box-shadow盒子阴影使用

熟练标签切换的使用方法

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

前导学习

素材准备

实施准备

前导学习

把它们以导航栏的形式展示在首页。接着，通过JavaScript技术设计“新闻切换”效果展示首页新闻，最后把官堰村的景色以图片排列的形式展示出来。

前导学习

跟随小茹完成本次任务，需要掌握的技术如下：

熟练运用HTML+CSS技术快速完成布局

JavaScript基本DOM操作

JavaScript事件运用

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

素材准备

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

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

结构编写

样式编写

实施过程

小茹与组员们讨论后，将“官堰村振兴网站”首页制作分为3个步骤：

编写HTML代码内容。

编写CSS代码，实现首页的美化。

编写js脚本，实现“新闻切换”+“回到顶部”效果。

思考

结构编写

步骤1：编写HTML代码内容“index.html，init.css，编辑public.css文件，编辑style.css文件，编辑index.css文件，编辑show_pic.css文件，编写js脚本

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

结构编写

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

步骤4：完成步骤3后，编写CSS代码，实现首页的美化。请参考教材“任务三“官堰村振兴网”首页制作——任务实施”中“步骤2-1”——”步骤2-16”完成练习。

样式编写

步骤1：完成属于动画的样式，编辑style.css文件。，参考教材“任务三“官堰村振兴网”首页制作”首页制作——任务实施”中“步骤2-17”——”步骤2-19”完成练习。

步骤2：完成淡赏官堰的样式，编辑show_pic.css文件，继续参考教材内容完成相应练习。

样式编写

步骤3：编写js脚本，实现“loading动画”效果、新闻切换、回到顶部效果。参考教材“任务三“官堰村振兴网”首页制作——任务实施”中“步骤3-1”——”步骤3-4”完成练习。

知识总结

技能总结

任务总结

职素总结

互相评价

总结类别

总结内容

知识

HTML:index.html

CSS:public.css,style.css,index.css,show_pic.css

JavaScript：Javascript获取元素,Javascript事件机制

技能

熟练运用HTML+CSS技术快速完成布局

JavaScript基本DOM操作

JavaScript事件运用

职素

团结协作

刻苦勤奋

坚持不懈

互相评价

基础知识完成互相评价

页面效果完成互相评价

职素认知完成互相评价

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

任务承接人：交付日期：

项目要求

评价标准

成绩

首页HTML+CSS功能

（40分）

1.完成HTML页面结构的编写，结构无异常（10分）

2.分别完成5个css样式编写，布局正常（30分）

首页JavaScript特效（30分）

1.完成新闻切换效果（20分）

2.完成loading动画效果（10分）

二级菜单（30分）

1.菜单布局正常。（10分）

2.悬停时子菜单。（20分）

总分

评价人

评价级别（√）

备注

个人

□优秀□良好□合格□不合格

老师

□优秀□良好□合格□不合格