中国青年志愿者网站前端制作

中国青年志愿者网站前端制作

摘  要：中国青年志愿者网是共青工作和志愿者工作信息化建设的重要载体和平台,在加大青年志愿者品牌宣传力度、服务主体工作、组织、服务和凝聚广大青年志愿者等方面起着重大作用，给予很多青年人提供了报名成为志愿者的机会，既能丰富一些人的业余生活，又可以让有需要的人得到帮助，让正能量充满整个国家。

网站开发采用了div+css、jQuery、js、html5+css3开发技术，有网站首页、登录页、注册页、志愿组织页、志愿项目页、志愿文化页、志愿阵地页、志愿人才页、志愿发布页、志愿服务交流页、志愿社区页，界面设计以浅灰色色为主，紧贴网站主题。布局清爽大方，符合交互要求。

关键词：div+css 中国青年志愿者网站 js jQuery html5+css3

目 录

1. 引言 1

1.1 中国青年志愿者网站的开发背景 1

1.2 中国青年志愿者网站的意义与设计目的 1

2. 开发工具及环境介绍 2

2.1 中国青年志愿者网站的开发环境 2

2.2 本项目应用的主要开发工具 2

2.2.1 Adobe Photoshop CS4 2

2.2.2 火狐浏览器 3

2.2.3 HBuilder 3

2.2.4 谷歌浏览器 4

2.2.5 Dreamweaver CS5 4

2.3 本项目应用的主要开发技术 5

2.3.1 Html5 语言 5

2.3.2 DIV+CSS 5

2.3.3 CSS3 6

2.3.4 js语言 6

2.3.5 jQuery语言 7

3. 项目概述 8

3.1 项目概述 8

3.2 项目风险 8

3.3 项目进度计划 9

4. 项目需求分析 11

4.1 概要设计 11

4.1.1 网站结构图 11

4.1.2 网站概要设计说明 11

4.2 现行研究存在的问题及解决办法 12

5. 网站实现 13

5.1 网站前台界面设计与布局 13

5.1.1 首页 13

5.1.2 登录页 15

5.1.3 注册页 15

5.1.4 志愿组织页，志愿组织内容页 16

5.1.5 志愿文化页 18

5.1.6 志愿人才页、志愿人才内容页 19

5.1.7 志愿项目页 20

5.1.8 志愿项目内容页 24

5.2 网页动态效果实现 26

5.2.1 图片轮播 26

5.2.2 内容切换 28

5.2.3 滚动元素 29

5.2.4 animate.css 29

5.3 说明 30

5.3.1 项目文件命名方式 30

5.3.2 项目文件结构说明 30

6. 测试 31

6.1 测试例子及其结果 31

6.1.1 页面效果测试 31

7. 总结与展望 32

致谢 33

参考文献 34