无限空间网站设计与实现

摘  要：无限空间网站使许多人都可以保留下来自己最想保留下来的东西如照片、视频、甚至是音频，而且我希望这个让人储存的空间是没有让用户感到限制性的。在浏览自己的个人首页时，又具有个人博客的美观性，让用户的体验良好，网站的互动性也较强，对个人隐私的保护也比较到位，给用户有一个安全的感觉。

网站开发采用了Div + CSS开发技术和java script，有网站首页、相册夹页面、视频集页面、音乐箱页面、分享页面、关于我们等页面，界面设计以灰黑色为主，给人一种空间化的感觉。网站版块多以方块形状作为基础设计，紧贴网站主题。布局清爽大方，符合交互要求。

关键词：Div + CSS 无限空间网站 java script

目 录

1 引言1

1.1 无限空间网站的开发背景1

1.2 无限空间网站的意义与设计目的1

2 开发工具及环境介绍2

2.1 无限空间网站的开发环境2

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

2.2.1 Adobe Photoshop 20192

2.2.2 Adobe Dreamweaver 20193

2.2.3 Adobe Illustrator 20193

2.2.4 sublime text4

2.2.5 Visual Studio Code4

2.2.6 WampServer5

2.2.7 Microsoft Office Word 20165

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

2.3.1 DIV+CSS6

2.3.2 java script6

2.3.3 jQuery7

3 项目概述8

3.1 项目概述8

3.2 项目风险9

3.3 项目进度计划10

4 项目需求分析11

4.1 业务分析11

4.1.1 业务组织结构11

4.1.2 业务工作角色分析11

4.2 概要设计12

4.2.1 网站结构图12

4.2.2 网站概要设计说明13

4.3 现行研究存在的问题及解决办法17

5 网站实现18

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

5.1.1 首页18

5.1.2 前端登录界面23

5.1.3 内容页27

5.2 说明29

5.2.1 项目文件命名规范29

5.2.2 项目文件结构说明29

5.3 测试30

5.4 测试例子及其结果32

6 总结与展望33

致谢34

参考文献35