抑郁症是世界第四大疾病，但我国对抑郁症的医疗防治还处在识别率低的局面，同时，抑郁症的发病已开始出现低龄化趋势。根据该现象，进行相关的调查研究，发现国内对抑郁症的相关知识科普工作做的不够到位。借此，建设一个对国人有吸引力的关于抑郁症的网站是件有必要的事情。主要内容包括一、对网站进行规划，明确网站的定位和目的；二、对网页进行UI设计，进行交互设计确定网站的功能和页面的框架结构，进行视觉设计优化网页布局，此网站将使用pencil软件和Photoshop软件将设计思路绘制成草图；三、用前后端语言创建网站，主要采用html5、css3、JavaScript等前端语言搭建网站框架，采用php语言创建动态网页。此网站将风格定位为卡通风，以莫兰迪色为点缀色，希望借此淡化抑郁症这一话题的沉重感，也让用户有眼前一亮的感觉，让用户更愿意停留在网站上查阅信息。该文章将会重点阐述网站的规划、网站的设计思路以及设计功能，还会叙述动态网页和交互动效的具体实现的方法。最后对此次毕业设计进行总结与思考。
Key Words: Web design; Depression; HTML5; CSS3; PHP目 录
1.引言 1
1.1课题研究背景 1
1.2课题研究目的 2
1.3课题研究意义 2
2.网站的可行性分析 3
2.1技术可行性分析 3
2.2操作可行性分析 3
3.网站的规划和设计 4
3.1网站的规划 4
3.1.1 网站的定位 4
3.1.2 网站的目标 4
3.2网站的设计 4
3.2.1 网站的交互设计 4
3.2.2 网站的视觉设计 5
3.2.2.1 色彩搭配.5
3.2.2.2 排版布局.6
3.2.2.3 细节设计.13
4.网站的开发与实现 16
4.1 实现用户界面 16
4.1.1 重要功能实现代码说明 16
4.1.2 重要动效代码说明 22
4.2 实现登录界面 26
4.2.1 重要功能实现代码说明 26
4.2.2  *景先生毕设|www.jxszl.com +Q: *351916072* 
重要动效代码说明 31
4.3 实现管理员界面 32
4.3.1 重要功能实现代码说明 32
5.网站的特点和功能分析 33
5.1 网站的特点 33
5.2 网站的功能 33
6.总结与思考 34
参考文献 35
致谢 36
1.引言
1.1课题研究背景
抑郁症是世界第四大疾病，预计到2020年将成为第二大；但我国对抑郁症的医疗防治还处在识别率低的局面，地级市以上的医院对其识别率不足20%，只有不到10%的患者接受了相关的药物治疗；而且，同时，抑郁症的发病（和自杀事件）已开始出现低龄（大学，乃至中小学生群体）化趋势。
由于抑郁症普及度低所导致的高自杀率，完全可以通过加大普及力度来减少这些自杀事件的发生。而当今时代，是一个网络信息化飞速发展的时代，互联网的广泛普及，不光便利了信息的发布和传输，也加深了人与人之间的联系。人们逐渐习惯了通过互联网进行聊天、购物、获取信息，网络已经成为人们生活中必不可少的内容。在这种情况下，通过互联网进行抑郁症知识的普及，可以达到一个事半功倍的效果。而最直接的，浏览量和传播范围都具有保障的就属网站。
网站是人们发布信息与传递信息的重要渠道。在因特网的早期，网站还只能保存单纯的文本。经过几年的发展，使得图像、声音、动画、视频，甚至3D技术可以通过因特网得到呈现。网站也慢慢地发展成我们现在看到的图文并茂的样子，通过动态网页技术，用户也可以与其他用户或者网站管理者进行交流，也有一些网站提供电子邮件服务或在线交流服务。再结合UI设计、网页设计，网站变得更加多样，也更能吸引用户常驻。
但是根据笔者私下的调查，发现我国国内的抑郁症公益平台较少，相关的一些网站设计较为单调，对信息的分类也较为杂乱，给用户的体验感较差。在这种情况下，利用互联网建立一个专属于“抑郁症”的网站，并对网站的布局进行优化升级，是件很有必要的事情，并且对缓解国内忽视精神性疾病的现状有着重要意义。
开发一个抑郁症公益网站，简单的静态网页已经不能满足用户的需求。用户在使用的过程中，可能需要一些私密的留言。根据这总需求，对信息的保密就涉及到了动态网页的开发。所谓动态网页，就是用户不仅仅可以浏览网页，还可以与服务器进行交互。举个例子，你登陆淘宝的时候，需要输入账号名和密码，这个时候就需要服务器对你的账号和密码进行验证通过才行。这些都需要进行web前端开发。而现在前端的开发，通过html、css、JavaScript就可以实现很多功能，信息的保密php也能过完全胜任。再结合UI界面的设计，网站也变得更加多样起来。
1.2课题研究目的
中国人有一种含蓄的品质，长久以来受到的文化熏陶导致人们更愿意把情感压抑在内心深处，强撑着装作自己没事。如果你关注抑郁症，你会发现每当有人因抑郁症自杀的时候，都会有很多人阐述自己的抑郁症，阐述他们不敢表达自我，不敢面对自己，不敢和自己的抑郁症作斗争。再加上在传统观念里，很多人会以抑郁症为耻，羞于启齿，讳疾忌医。因为身边总会有各种异样的眼光，总会有人冷嘲热讽，甚至很多时候连最亲近的家人、朋友都无法理解，认为这是一种矫揉造作。灰暗的世界和闭塞的倾诉渠道，只会加重抑郁症患者的病情，最终走向不可挽回的那一步。
于是我想到创建一个公益平台，给抑郁症患者提供一个倾诉的渠道，同样也给那些想帮助抑郁症患者的人们提供一个帮助的途径。当然，这个平台更主要的还是宣传“抑郁症”这种精神疾病，私以为，只有解决了国人对于抑郁症的蒙昧，才能从根本上降低抑郁症的患病几率。虽然，很多患有抑郁症的人无法完全根治，但是在社会大环境的关爱，医生、亲人的抚慰下，我们可以把复发率降到最低。在大家的努力下，社会整体的患病率也可以降到最低。
1.3课题研究意义
Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。如今的网页不只是承载单一的文字和图片，各种媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。开设此次课题是希望借助前端开发来加强全社会的人民对抑郁症的关注力度。有利于抑郁症患者的治疗，同时也有利于加强社会公众的医疗防治意识，进而在一定程度上降低抑郁症的患病几率。
2.网站开发的可行性分析
2.1技术可行性分析
整个抑郁症公益平台可以通过UI设计进行规划，运用web前端技术html、css3、JavaScript、jQuery、php进行构建。
针对平台的需求可以把网站分为前台和后台。前台主要是面向用户的界面，后台主要是面向管理员的界面。根据使用对象的不同，网站设计和网站功能的侧重点也有所不同。
对于前台，主要体现在UI设计上。这个设计包括界面的交互设计和界面的视觉设计。可以通过绘制草图来实现。本次选用工具为Photoshop软件和Pencil软件进行草图绘制。

原文链接：http://www.jxszl.com/jsj/qrs/82919.html