人口福利基金会系统前台设计_第1页
人口福利基金会系统前台设计_第2页
人口福利基金会系统前台设计_第3页
人口福利基金会系统前台设计_第4页
人口福利基金会系统前台设计_第5页
已阅读5页，还剩9页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

PAGEword文档可自由复制编辑学院2013-2014学年第二学期结课设计（论文）学院（系）：软件学院专业：软件工程学生：指导老师：完成日期：2014年06月南阳理工学院学生结课设计（论文）人口福利基金会系统设计与实现DesignandImplementationofthePopulationWelfareFoundationSystem总计:课程设计（论文）14页表格：0个插图：4副人口福利基金会系统设计与实现软件工程【摘要】人口福利基金会系统是为了更好的争取国内外关心中国人口福利事业的团体和个人的支持与捐助，动员社会资源兴办有利于解决人口问题的社会公益项目和活动；关注人口与发展进程中的扶贫开发、人口素质以及伴随城市化、老龄化等重大社会问题带来的家庭及个人风险，增进人口福利与家庭幸福，为建设和谐社会做出贡献。【关键字】人口福利基金会；基金；幸福DesignandImplementationofthePopulationWelfareFoundationSystemSoftwareengineeringJonlyChen【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网站定位61.2网站前台建设要求61.2.1主要功能模块61.2.2整体版面要求61.2.3设计效果要求71.2.4设计技术要求71.3前台设计详细说明71.3.1首页整体效果71.3.2首页结构91.3.3其他页面及模块简介111.3.4设计效果与技术介绍121.4出现问题及解决方案121.5结束语：131.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、Div1.3前台设计详细说明：1.3.1首页整体效果首页（如上图）的亮点在于网页中间的图片及文字说明，以图片轮播的形式介绍了中国人口福利基金会得到文化及活动宣传，为本机构文化和活动奠定了宣传的基础。主要要技术在于插入图片的div，包括5张图片轮播，大大的吸引用户的眼球，还有添加了js特效来展现捐款人员以及金额的滚动效果，图片替换的效果使浏览增添了些许乐趣。值得一提的是网页下面的添加视频播放的效果（如下图）这个让浏览者通过视频更用事实了解到活动及基金用途。右边的设置选择播放可以让大家更好的选择播放画面。本首页另一个亮点就是运动js滚动效果（如下图），更好的展示了本机构的爱人人士及捐款金额，捐款日期。1.3.2首页结构<htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>中国人口福利基金会-首页</title><linkrel="stylesheet"charset="utf-8"type="text/css"href="style/css/tpxw.css"/><scripttype="text/javascript"src="style/js/jquery-1.7.1.min.js"></script><scripttype="text/javascript"src="style/js/bootstrap.js"></script><scripttype="text/javascript"src="style/js/mon.js"></script></head><body><divid="box">//最大的box<divid="box1">//页头<divclass="top"></div>//站内搜索<divclass="top0">//导航<divclass="top1"></div><divclass="top2"></div></div></div><divclass="content_left"><divid="box3"><divclass="bot">基金会项目<divid="bot01"></div><divid="bot02"></div></div><divclass="bot1"></div></div><divid="box4"><divclass="bot">专项基金<divid="bot01"></div><divid="bot02"></div></div><divclass="bot1"></div></div></div><divclass="clearmjje"><div><aclass="titletitle_mjje"href="">捐款金额</a></div><divid="box5"></div>//页尾部分（版本信息）</div><scripttype="text/javascript">functionsetMenuActive(index){varobj=$("#menuFrame").children().eq(index).addClass('active');}$(document).ready(function(){$("#word").click(function(){if($(this).val()==="站内搜索")$(this).val("");});$("#word").focus(function(){if($(this).val()==="站内搜索")$(this).val("");});$("#word").blur(function(){$("#buttSearch").attr("href","/search.aspx?text="+$("#word").val());if($(this).val()=="")$(this).val("站内搜素");});});</script></body></html>1.3.3其他页面及模块简介子网页多采用主页的结构特点，子页的布局与主页稍有不同的地方在于，子页在主要内容板块主要为左边分类标签，右边为主要的标签内容展示。其他模块里最值得一提的是注册登录模块（如下图），这个模块运用动态网页特点（有详细介绍）。更好的丰富了网站内容。1.3.4设计效果与技术介绍布局主要采用分栏的方式，以各个板块展示不同的内容信息。网站风格简单容易操作，导航简单，分栏的布局使条理清晰，清晰明了。让广大用户容易上手操作。1.4出现问题及解决方案用户通常会使用浏览器访问您的网站。各浏览器解译网站代码的方式略有不同，这意味着您的网站在不同浏览器中显示的效果会有所差异。一般情况下，您应避免依赖于浏览器特定的行为，例如在未指定内容类型或编码的情况下，希望浏览器可以正确检测到相应的内容类型或编码。此外，您还可以采取以下步骤来确保网站在不同的浏览器中都能正确显示。完成网站设计后，您应通过多个浏览器复查网站的外观和功能，确保将您独具匠心的设计完美呈现给所有访问者。早在网站开发阶段，您就应该进行这种测试。各种浏览器(甚至是同一浏览器的不同版本)对同一网站的呈现可能会有所不同。您可以使用诸如GoogleAnalytics(分析)这样的服务来了解访问者最常使用哪些浏览器访问您的网站。即使您编写的HTML无效，您的网站在某些浏览器中也可以正确显示，但尽管如此，您的网站可能不会在所有浏览器(或将来出现的浏览器)中都正确显示。要使您的网页在所有浏览器中显示的效果相同，最好的方法就是使用有效的HTML和CSS编写网页，然后在尽可能多的浏览器中测试这些网页显示的效果。有效、易解译的HTML可保证网页得以正确显示，而CSS可以将网页的外观和内容分离开来，使网页可以更快速地载入和呈现给访问者。您可以使用验证工具检查自己的网站，例如W3Consortium免费提供的在线HTML和CSS验证工具，还可以使用诸如HTMLTidy的工具快捷地清理您的代码。(尽管Google强烈推荐使用有效的HTML，但这并不影响Google抓取您的网站并将其编入索引的方式。)1.5结束语：本次课题的设计和实现，我们小组首先在以往的学习基础上，通过对相应资料的查阅和借鉴以及学习，了解基金会系统的基础上掌握了人口福利基金会网站系统的基本方法，然后参考课题要求，以及对课题要求的分析，为设计和实现打下了基础。由于能力的原因本次课题的设计还有很多不足的地方，一些功能的分析，设计和实现还有待进一步的提高和改善。1.6参考文献：[1][S/OL]/view/267151.htm?fr=aladdin[2]姜超[D].《长春理工大学》,2011年[3]蒲子明《ssh整合开发技术详解》，2009年[4]王水《软件工程素质导论》，

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论