个人资源分享网站的制作与实际应用

摘  要：因为移动设备在生活中的崛起，社交软件、即时通讯软件正在疯狂的在我们生活中出现，如同春雨过后的竹笋。然而在社交软件出现的同时，一件非常重要的事情就出现了。我们需要更多个性化的头像，在这些各种社交软件中展现出自己漂亮而完美的一面，现在的社交软件越来越多，人们对于头像的要求也越来越多，人们需要有一个平台可以去寻找自己喜欢的，有特色有个性的头像。

中国，作为一个动漫产业已经处于飞速发展的阶段的国家。动漫，在我国已经非常的受欢迎并且将更加受欢迎，利用动漫为主题，给需要为社交软件收集图片资源的人，制作一个针对性非常强的动漫图片资源分享网站，是非常有前景的。

本范文将详细讲解，如何针对用户与市场需求进行调查。选择一个合适的网站——个人的动漫图片资源分享网站。然后如何使用Adobe Dreamweaver、Adobe Photoshop、jQuery制作一个非常美观的网站前台，包括对网站前台总体的设计，使用Photoshop对网站图片的制作，总体的颜色调整等，用Dreamweaver对网站各个框架的设计，网站各个栏目页等子页面的设计，并且利用CSS，js设置网页的样式与效果，然后利用科汛CMS制作一个网站后台，使用标签智能化网站，最后进行SEO优化。

本文也包括了对网站需求的社会调查、界面布局分析、界面设计、UI样式设计与分析，交互体验分析与修改，细节调整，网站后台管理与使用、网站运行测试等各项制作过程细节。到最后完成网站的过程。

关键词：社交头像  个人网站建立  Dreamweaver  PhotoShop  java script  科汛CMS

目 录

1 项目概述 1

1.1 项目前言与前景 1

1.2 项目的市场调查与决定 1

1.3 目的 2

1.4 项目进度计划 2

1.5 开发环境介绍 3

1.5.1 Dreamweaver+Photoshop+java script+jQuery 3

1.5.2 科汛CMS 4

1.5.3 Rational Rose(建模工具) 4

1.6 系统软硬件要求 4

1.6.1 系统开发环境的硬件配置 4

2 需求说明 6

2.1 功能要求 6

2.2 可行性分析 6

2.3 安全性分析 6

2.4 界面设计 6

2.5 网站功能示意图 7

3 系统详细设计 8

3.1 页面详情图 8

3.2 网页系统详情 8

3.2.1 首页 8

3.2.2 栏目页 9

3.2.3 详情页 9

3.2.4 留言页 9

3.3 管理作品 10

3.3.1 添加文章信息 10

3.3.2 修改或删除作品 10

3.3.3 留言的查看与审核 10

3.4 管理员个人信息管理 10

3.4.1 修改资料 10

3.4.2 添加管理员 10

4 网站开发过程及实现 12

4.1 前端总体开发设计 12

4.1.1 网站总体设计与定位 12

4.1.2 网站的注重点 12

4.1.3 网站雏形与框架优化 12

4.1.4 内部测试与优化 13

4.2 前端UI的设计 13

4.2.1 UI的风格 13

4.2.2 颜色配置 14

4.3 网站的前端制作 14

4.3.1 通过Photo建立网站简略的模板模型 14

4.3.2 在DW中进行网页的框架搭建 16

4.3.3 建立站点 16

4.3.4 首页前台DIV的CSS与JS详解 17

4.3.5 栏目页前台DIV的CSS与JS详解 23

4.3.6 内容页前台DIV的CSS与JS详解 27

4.4 网站的后台制作 28

4.4.1 科汛CMS中的后台页面修改 28

4.4.2 科汛CMS中后台文章增删改查 39

4.4.3 科汛CMS中后台留言的管理 41

5 测试 43

5.1 各测试及其结果 43

5.1.1 页面按钮与链接的测试 43

5.1.2 文章的增删改查 43

5.1.3 首页图片的显示 43

5.1.4 留言系统 43

6 SEO优化 44

7 总结 45

致谢 46

参考文献 47