心理网站的设计与制作毕业设计说明书
目 录
一、引言 2
（一） 开发背景 2
（二） 选题意义 2
二、需求分析 2
（一） 可行性分析 2
三、开发工具的选择 3
四、主体设计 3
（一） 功能结构图 3
（二） 网站LOGO设计 4
（三） 网页布局设计 4
1. 一级页面 4
2. 二级页面 4
3. 三级页面 5
4. 网站的布局 5
五、网站实现 5
（一）一级页面 5
(二)二级页面 7
（三） Javascript的特效 7
1. 图片的切换效果 7
2. ajax动态验证特效 8
（四） flash动画效果 17
总结 18
参考文献 19
致谢 20
心理网站的设计与制作
21世纪是科技的时代、是互联网飞速发展的时代。在现在的小康社会几乎家家户户都能够用上电脑，人们在家就可以买衣服，看电影，足不出户都可以了解到外面的世界，五彩缤纷的世界在这样一台小小的电脑上就可以显现出来。而人们不仅仅关注物质的需要，人们更加关注精神的需求，心理网站也顺应而生。我的课题主要是设计制作一个心理网站，利用Dreamweaver软件作为开发平台，采用HTML+CSS技术进行网站整体结构设计，用Photoshop软件进行素材的加工。我们这次课题的工作流程包括网站主题的定制、资料的收集与整理以及网站整体格局的布置，素材加工及网站整体美工设计，以及网站JS特效的实现，力求使整个网站更加的生动有趣，界面友好并与课题适应。本课题内容可以让人们更加方便的解决自己 *好棒文|www.hbsrm.com +Q: %3^5`1^9`1^6^0`7^2#
面临的一些心理问题。
一、引言
开发背景
在网络高速发展的时代，互联网是我们最常用的一种交流方式，一台电脑一个浏览器就可以了解整个世界。网络是我们这个时代的主流，为人们带来了方便，在这个更注重精神需求的时代，心理网站的出现有其必然性。随着社会的高速发展，我们在现实生活中面临的心理问题越来越多，这些心理问题直接对我们的身体健康产生不良影响，心理疾病的困扰远远大于生理疾病的困扰。在中国这样一个人口大国，职场竞争激烈，城市生活节奏快，不管是在生活中还是工作中，人们承受很多精神上面的压力，心理问题突显。同时，专家们也发现心理的变化影响人类的身体健康，不管是小孩、中年人还是老人，多会出现由心理问题引起的身体健康问题。百度上的相关资料显示：“目前我国13亿人口中各种精神和心理障碍患者最多可达1600多万，1.5亿的青少年中受情绪和压力困扰的就有3000万人。而来自国际心理治疗大会的数字同样表明，中国大概有1.9亿人在一生中需要接受专业的心理咨询或治疗。”人们心理咨询的需求越来越大，借助互联网的帮助，心理网站的发展空间越来越大，正走向更加广阔的舞台。
选题意义
人们在现实生活中面临很多心理问题，其中包括婚姻情感、家庭关系、人际关系、青少年的成长以及职场的压力等等。像心理网站这样的一个平台上可以为人们提供一些专业、实用的心理案例，知名专家的在线咨询，科学的心理测试，为用户提供一个互相交流的平台，在这里分享自己的经验，解答自己的困惑。这个心理辅导网站可以让更多的人们认识到心理健康的重要性并且更加方便的为人们提供帮助。
二、需求分析
可行性分析
心理网站只要浏览者简单的注册一个用户名，就可以直接登录，登录之后，可以在我们这个平台上了解想要咨询的心理问题。对于特别那些不想要暴露身份、较为内向、保守的浏览者，网站咨询、交流信息，为他们提供了方便、快捷的渠道。相较于传统的方式，网站咨询在一定程度上为浏览者克服心理上的恐惧，为他们保留了隐私，浏览者在匿名的方式可以放心地诉说自己存在的一些心理问题，不会担心被别人认出来，泄露自己的信息，采用这种方式来进行咨询，对于专家医生及时处理心理问题也提供了一个非常好的途径，相信通过网上咨询的方式来进行交流会成为未来网络时代的主流。
三、开发工具的选择
本网站选择HTML+CSS技术来实现网站布局，使用了EditPlus、Dreamweaver，以及Photoshop、Javascript、flash软件作为网站的开发工具。在Dreamweaver中运用HTML、DIV层、CSS样式、应用行为布局设计网站，使用photoshop工具来对网站中的素材进行美化，使其更加贴合网站的主题，而网站中使用Javascript做出一些简单的特效包括用户验证的效果，图片的切换等，再用Dreamweaver进行网站整体结构的布局，利用HTML+CSS样式进行编辑，使网站整体布局更加合理、简洁。同时在网站的局部利用表格嵌套来进行布局，使网站整体的布局更加规范。
四、主体设计
功能结构图
网站主要包括首页、销售心理、心理测试、交流平台、专家咨询、联系我们六个部分，每个页面有对应子页面，页面中设计了一些特效，和大量的图片，提供了视觉感受，具体的功能结构图的设计图4-1所示。
网站LOGO设计
心理网站的LOGO的设计，主要运用了Photoshop软件，在网站的LOGO图片中加入人、心和钥匙三个元素。他们结合的寓意：心理网站是为人们解答心灵问题的钥匙，一颗红心既代表爱心也代表人们心理问题更是代表健康，呼吁更多需要解答困惑的人们加入进来。LOGO具体图片如图4-2所示。
网页布局设计
网站利用DIV+CSS以及表格布局整体界面，使用HTML代码来设计网站，使心理网站的整体呈现出来。
1. 一级页面
首页布局图为网站的一级页面布局图，如图4-3。
logo
导航菜单
图片
推荐图书
心理问答
精彩文章
音乐欣赏
显示时间/滚动字幕
版权信息
2. 二级页面
网站的二级页面布局图，如图4-4。
logo
导航菜单
图片
用户登录
内容介绍
logo
导航
内容
4. 网站的布局
本网站使用Dreamweaver软件作为开发平台，在前期的设计和规划后，再进行网站整体内容的设计，这次网站采用DIV+CSS的方式进行布局，使用CSS样式给网站进行美化。
DIV+CSS的布局方式在现在的网站设计中，主要被用来实现网站中各种元素的定位，CSS是一种层叠样式表单，是用来表现HTML文件样式的一种计算机语言，DIV是用来控制网页中各个元素的属性，缩小代码占用的页面，提高浏览速度，减少宽带成本；同时改版的时间也可以得到缩短，更新时只需改动CSS的样式，就可以同时改动很多页面的风格格式，不用再一页一页的进行修改，这样就为我们节省了更多的时间，也为我们设计网站提供了方便。
一、引言 2
（一） 开发背景 2
（二） 选题意义 2
二、需求分析 2
（一） 可行性分析 2
三、开发工具的选择 3
四、主体设计 3
（一） 功能结构图 3
（二） 网站LOGO设计 4
（三） 网页布局设计 4
1. 一级页面 4
2. 二级页面 4
3. 三级页面 5
4. 网站的布局 5
五、网站实现 5
（一）一级页面 5
(二)二级页面 7
（三） Javascript的特效 7
1. 图片的切换效果 7
2. ajax动态验证特效 8
（四） flash动画效果 17
总结 18
参考文献 19
致谢 20
心理网站的设计与制作
21世纪是科技的时代、是互联网飞速发展的时代。在现在的小康社会几乎家家户户都能够用上电脑，人们在家就可以买衣服，看电影，足不出户都可以了解到外面的世界，五彩缤纷的世界在这样一台小小的电脑上就可以显现出来。而人们不仅仅关注物质的需要，人们更加关注精神的需求，心理网站也顺应而生。我的课题主要是设计制作一个心理网站，利用Dreamweaver软件作为开发平台，采用HTML+CSS技术进行网站整体结构设计，用Photoshop软件进行素材的加工。我们这次课题的工作流程包括网站主题的定制、资料的收集与整理以及网站整体格局的布置，素材加工及网站整体美工设计，以及网站JS特效的实现，力求使整个网站更加的生动有趣，界面友好并与课题适应。本课题内容可以让人们更加方便的解决自己 *好棒文|www.hbsrm.com +Q: %3^5`1^9`1^6^0`7^2#
面临的一些心理问题。
一、引言
开发背景
在网络高速发展的时代，互联网是我们最常用的一种交流方式，一台电脑一个浏览器就可以了解整个世界。网络是我们这个时代的主流，为人们带来了方便，在这个更注重精神需求的时代，心理网站的出现有其必然性。随着社会的高速发展，我们在现实生活中面临的心理问题越来越多，这些心理问题直接对我们的身体健康产生不良影响，心理疾病的困扰远远大于生理疾病的困扰。在中国这样一个人口大国，职场竞争激烈，城市生活节奏快，不管是在生活中还是工作中，人们承受很多精神上面的压力，心理问题突显。同时，专家们也发现心理的变化影响人类的身体健康，不管是小孩、中年人还是老人，多会出现由心理问题引起的身体健康问题。百度上的相关资料显示：“目前我国13亿人口中各种精神和心理障碍患者最多可达1600多万，1.5亿的青少年中受情绪和压力困扰的就有3000万人。而来自国际心理治疗大会的数字同样表明，中国大概有1.9亿人在一生中需要接受专业的心理咨询或治疗。”人们心理咨询的需求越来越大，借助互联网的帮助，心理网站的发展空间越来越大，正走向更加广阔的舞台。
选题意义
人们在现实生活中面临很多心理问题，其中包括婚姻情感、家庭关系、人际关系、青少年的成长以及职场的压力等等。像心理网站这样的一个平台上可以为人们提供一些专业、实用的心理案例，知名专家的在线咨询，科学的心理测试，为用户提供一个互相交流的平台，在这里分享自己的经验，解答自己的困惑。这个心理辅导网站可以让更多的人们认识到心理健康的重要性并且更加方便的为人们提供帮助。
二、需求分析
可行性分析
心理网站只要浏览者简单的注册一个用户名，就可以直接登录，登录之后，可以在我们这个平台上了解想要咨询的心理问题。对于特别那些不想要暴露身份、较为内向、保守的浏览者，网站咨询、交流信息，为他们提供了方便、快捷的渠道。相较于传统的方式，网站咨询在一定程度上为浏览者克服心理上的恐惧，为他们保留了隐私，浏览者在匿名的方式可以放心地诉说自己存在的一些心理问题，不会担心被别人认出来，泄露自己的信息，采用这种方式来进行咨询，对于专家医生及时处理心理问题也提供了一个非常好的途径，相信通过网上咨询的方式来进行交流会成为未来网络时代的主流。
三、开发工具的选择
本网站选择HTML+CSS技术来实现网站布局，使用了EditPlus、Dreamweaver，以及Photoshop、Javascript、flash软件作为网站的开发工具。在Dreamweaver中运用HTML、DIV层、CSS样式、应用行为布局设计网站，使用photoshop工具来对网站中的素材进行美化，使其更加贴合网站的主题，而网站中使用Javascript做出一些简单的特效包括用户验证的效果，图片的切换等，再用Dreamweaver进行网站整体结构的布局，利用HTML+CSS样式进行编辑，使网站整体布局更加合理、简洁。同时在网站的局部利用表格嵌套来进行布局，使网站整体的布局更加规范。
四、主体设计
功能结构图
网站主要包括首页、销售心理、心理测试、交流平台、专家咨询、联系我们六个部分，每个页面有对应子页面，页面中设计了一些特效，和大量的图片，提供了视觉感受，具体的功能结构图的设计图4-1所示。
网站LOGO设计
心理网站的LOGO的设计，主要运用了Photoshop软件，在网站的LOGO图片中加入人、心和钥匙三个元素。他们结合的寓意：心理网站是为人们解答心灵问题的钥匙，一颗红心既代表爱心也代表人们心理问题更是代表健康，呼吁更多需要解答困惑的人们加入进来。LOGO具体图片如图4-2所示。
网页布局设计
网站利用DIV+CSS以及表格布局整体界面，使用HTML代码来设计网站，使心理网站的整体呈现出来。
1. 一级页面
首页布局图为网站的一级页面布局图，如图4-3。
logo
导航菜单
图片
推荐图书
心理问答
精彩文章
音乐欣赏
显示时间/滚动字幕
版权信息
2. 二级页面
网站的二级页面布局图，如图4-4。
logo
导航菜单
图片
用户登录
内容介绍
logo
导航
内容
4. 网站的布局
本网站使用Dreamweaver软件作为开发平台，在前期的设计和规划后，再进行网站整体内容的设计，这次网站采用DIV+CSS的方式进行布局，使用CSS样式给网站进行美化。
DIV+CSS的布局方式在现在的网站设计中，主要被用来实现网站中各种元素的定位，CSS是一种层叠样式表单，是用来表现HTML文件样式的一种计算机语言，DIV是用来控制网页中各个元素的属性，缩小代码占用的页面，提高浏览速度，减少宽带成本；同时改版的时间也可以得到缩短，更新时只需改动CSS的样式，就可以同时改动很多页面的风格格式，不用再一页一页的进行修改，这样就为我们节省了更多的时间，也为我们设计网站提供了方便。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1868.html
