人口福利基金会系统前台设计.docx

人口福利基金会系统前台设计.docx

《人口福利基金会系统前台设计.docx》由会员分享，可在线阅读，更多相关《人口福利基金会系统前台设计.docx（12页珍藏版）》请在冰豆网上搜索。

人口福利基金会系统前台设计

学院

2013-2014学年第二学期结课设计（论文）

学院（系）：

软件学院

专业：

软件工程

学生：

指导老师：

完成日期：

2014年06月

南阳理工学院学生结课设计（论文）

人口福利基金会系统

设计与实现

DesignandImplementationofthe

PopulationWelfareFoundationSystem

总计:

课程设计（论文）14页

表格：

0个

插图：

4副

人口福利基金会系统设计与实现

软件工程

【摘要】人口福利基金会系统是为了更好的争取国内外关心中国人口福利事业的团体和个人的支持与捐助，动员社会资源兴办有利于解决人口问题的社会公益项目和活动；关注人口与发展进程中的扶贫开发、人口素质以及伴随城市化、老龄化等重大社会问题带来的家庭及个人风险，增进人口福利与家庭幸福，为建设和谐社会做出贡献。

【关键字】人口福利基金会；基金；幸福

DesignandImplementationofthePopulation

WelfareFoundationSystem

SoftwareengineeringJonlyChen

【Abstract】Populationwelfarefoundation systemisbetterinorderto gainthesupport anddonor organizationsandindividuals athomeandabroad about Chinesepopulation welfare, mobilizesocialresourcestosetup tosolvethe populationproblem andsocialandpublicwelfare projectsandactivities; ontheprocess ofpopulationanddevelopment inthe povertyreliefanddevelopment, bringthepopulationqualityand withthe city, theaging etc. majorsocialissuesof familyandpersonalrisk, promoting populationwelfare andfamilyhappiness, andmakecontributionstotheconstructionof harmonioussociety.

【keywords】Populationwelfare；foundation ；Happiness

目录

1.1网站定位------------------------------------------------------------------6

1.2网站前台建设要求------------------------------------------------------6

1.2.1主要功能模块-----------------------------------------------------6

1.2.2整体版面要求-----------------------------------------------------6

1.2.3设计效果要求-----------------------------------------------------7

1.2.4设计技术要求-----------------------------------------------------7

1.3前台设计详细说明------------------------------------------------------7

1.3.1首页整体效果-------------------------------------------------7

1.3.2首页结构---------------------------------------------------------9

1.3.3其他页面及模块简介----------------------------------------11

1.3.4设计效果与技术介绍----------------------------------------12

1.4出现问题及解决方案-----------------------------------------------12

1.5结束语：

--------------------------------------------------------------13

1.6参考文献：

-----------------------------------------------------------13

网站前台建设及说明：

1.1网站定位

本网站为国家事业机构类的网站。

1.2网站前台建设要求

1.2.1主要功能模块

主页：

首页是浏览者打开网站的第一个页面，清晰明了的方式展示本机构用途和机构特色。

需要机构新闻的简单介绍，都要在第一时间呈现给观看者，且需要充分展现网站的亮点，以吸引浏览者。

新闻动态模块：

新闻动态模块是为了更快让大家了解中国公益基金会的新闻动态，这样有助于本基金会的信息公开化和丰富了本基金会的内容。

公益项目模块：

公益项目模块能快速的让浏览者查询所需内容，为浏览者提供好的入口，方便浏览者直接了解各个基金项目，以及更快提供自己的爱心。

专题活动模块：

专题活动模块是介绍中国公益基金会所做过的公益活动，以及可以提供和大家互动。

爱心榜模块：

这个模块是让浏览者清晰明了看到大家的爱心，以及鼓励这些爱心人士。

其他模块：

我要捐赠、加入我们、信息披露、我要提问、关于我们等模块为大家提供方便，以及介绍了中国基金会。

注册登录模块：

这个模块是为中国基金会提供了会员制，方便工作人员查询爱心人士信息，以及更好的统计信息。

1.2.2整体版面要求

整个页面布局运用分栏的方式呈现，采用绝对定位和浮动定位。

绝对定位的优势在于，我们可以丝毫不差地精确控制任何元素的位置—这里面没有什么需要猜测或者运气的成分。

由于应用了绝对定位的元素被不留痕迹地从常规文档流中完全移除，所以它也不会为其他元素带来任何的影响。

浮动的本意是要将插入到文章中的图片向左或者向右浮动，使图片下方的文字自动环绕在它的周围，使图片的左边或者右边不会出现一大块的留白。

1.2.3设计效果要求

本设计主要是以一个平静的，在任何充满压力的环境里，只要搭配出一些灰蓝或淡蓝的明色色彩组合，就会制造出平静恬静的效果，背景的淡绿和导航的黑白搭配，给人以安心的感觉，因为它看起来诚实、直接。

带着明色的寒色可保持安宁、平和的感觉。

补色和这些强调平静的色彩在明暗度方面方面一定要类似，这点很重要，因为色彩很鲜明会制造不必要的警紧张，本设计主要体现清爽的感觉。

特效方面，主要采用js和css的方式进行呈现。

让网站的一些展示动起来，让网站更有生机，展现不用的呈现方式，让爱心人士在视觉上产生冲击感，对这些方面的内容产生兴趣。

有一个更多的了解。

1.2.4设计技术要求

开发环境：

个人pc机

制作软件：

AdobeDreamweaverCS4、AdobePhotoshopCS5

制作技术：

html、javascript、css、Div

1.3前台设计详细说明：

1.3.1首页整体效果

首页（如上图）的亮点在于网页中间的图片及文字说明，以图片轮播的形式介绍了中国人口福利基金会得到文化及活动宣传，为本机构文化和活动奠定了宣传的基础。

主要要技术在于插入图片的div，包括5张图片轮播，大大的吸引用户的眼球，还有添加了js特效来展现捐款人员以及金额的滚动效果，图片替换的效果使浏览增添了些许乐趣。

值得一提的是网页下面的添加视频播放的效果（如下图）这个让浏览者通过视频更用事实了解到活动及基金用途。

右边的设置选择播放可以让大家更好的选择播放画面。

本首页另一个亮点就是运动js滚动效果（如下图），更好的展示了本机构的爱人人士及捐款金额，捐款日期。

1.3.2首页结构

//www.w3.org/1999/xhtml">

//最大的box

//页头