P2P借贷系统页面设计与制作毕业论文.doc
1、 ZHEJIANG WATER CONSERVANCY AND HYDROPOWER COLLEGE 毕业设计（论文） 题 目： P2P借贷系统页面设计与制作 系 （部）： 计信系 专业班级： 应用10-2 姓 名： 刘秋香 学 号： 201090185 指导教师： 王慕明 （校外） 指导教师： 周志敏
2、 （校内） 迄止时间：2013年3月 15日～ 2013 年 4 月 20日 2013年 4月 15 日 浙江水利水电专科学校毕业论文 P2P借贷系统页面设计与制作 作者：刘秋香 指导教师：周志敏 摘要 p2p网络借贷平台，是p2p借贷与网络借贷相结合的金融服务网站。p2p借贷是peer to peer lending的缩写，peer是个人的意思，正式的中文翻译为“人人贷”。网络借贷指的是借贷过程中，资料与资金、合同、手续等全部通过网络实现，它是随着互联网的发展和民间借贷的兴起而发展起来的一种新的金融模式，这也是未来金融服务的发展趋势。 作为一个依
3、靠web为载体的行业，其网站的完善与否、美观程度、是否方便客户使用等等都关系到这个平台的正常运作。目前已有多家P2P借贷平台在线上运转，所谓是百家齐鸣、万花争艳了，但平台与平台直接进行对比，却发现各家系统质量参差不齐。集各家之所长，避各家之所短，这是我这次设计的宗旨。 页面制作上主要采用了photoshopCS5和dreamweaverCS6两个软件，方法上运用HTML和CSS以及javascript与jquery来进行编辑。用photoshopCS5制作借贷平台最终设计稿，再对psd的设计稿进行切片处理，再使用div和CSS进行网页的布局和样式的编写，用浮动或是定位来排版，在页面动态效果的
4、处理上使用javascript脚本语言或是jquery的组件来实现动画效果。 关键词 P2P；借贷平台；切片；CSS；javascript；jquery Abstract P2p lending platform, is the combination of p2p lending borrowing and the network financial service website. Peer-to-peer lending is peer to peer lending, the meaning of peer is a person, a fo
5、rmal Chinese translation for "borrowed" to everyone. Network lending refers to borrowing process, materials and procedures of capital, contracts, etc. All through the network, it is with the development of the Internet and the rise of private lending and developed a kind of new financial model, whic
6、h is also the future development trend of financial services. As a industry rely on the web as a carrier, whether the extent of the site is perfect or not, beautiful, convenient customer use and so on are all related to the normal operation of the platform. There are several P2P lending platform in
7、 the online operation, what is the hundred flowers, flowers bloom, but platform compared with platform directly, only to find that each system quality is uneven. Set each of the director, from each of the short, this is I this design principle. Page production is mainly adopted photoshopCS5 and dre
8、amweaverCS6 two software, methods using HTML and CSS, and javascript and jquery to edit. Made borrowing photoshopCS5 platform final design draft, then to slice the PSD design draft, then using div and CSS page layout and style of writing, with a float or positioning to typography, dynamic effects on
9、 the processing of the page using javascript scripting language or jquery components to achieve animation effects. Keywords Peer-to-peer (P2P); Lending platform; Slice; CSS; Javascript; jquery 目录 摘要 1 Abstract 2 目录 3 引言 4 1 设计稿 5 1.1 首页 5 1.1.1首页功能定位 5 1.1.2 首页布局 5 1.1.3首页模块详细分解
10、 6 1.1.4首页成型 7 1.2 我要投资页面 8 1.2.1 我要投资页面功能定位 8 1.2.2 我要投资页面布局 8 1.2.2 我要投资成型 8 1.3 我要贷款页面 10 1.3.1我要贷款功能定位 10 1.3.2我要贷款页面布局 10 1.3.2我要贷款页面成型 11 1.4 个人中心页面 11 1.4.1个人中心页面功能定位 11 1.4.2个人中心页面布局 12 1.4.3个人中心页面定型 13 1.5 咨询服务页面 14 1.6 社区论坛页面 15 1.7 政策法规页面 15 2 设计图制作 16 3 切片处理 20 3.1切片 2
11、0 3.2切片保存 21 4 代码编写 24 4.1 静态HTML编写 24 4.2 css样式编写 25 4.3 JS动态效果编写 27 4.4 转换成动态页面 28 结论 31 参考文献 31 引言 P2P其中P是英文peer的意思。主要是指个人通过第三方平台在收取一定费用的前提下向其他个人提供小额借贷的金融模式。P2P小额借贷是一种将非常小额度的资金聚集起来借贷给有资金需求人群的一种商业模型。它的社会价值主要体现在满足个人资金需求、发展个人信用体系和提高社会闲散资金利用率三个方面，由2006年“诺贝尔和平奖”得主穆罕默德·尤努斯教授（孟加拉国）首创。客户对象主要有
12、两方面，一是将资金借出的客户即投资者，另一个是需要贷款的客户即借款者。P2P借贷平台一方面满足需要贷款的客户发布借款标，一方面满足投资的用户赚钱利息，两者缺一不可。在制作网页的同时要充分考虑到网站的功能，并对其进行美化。由于我在杭州融都商务科技有限公司从事前端工作，该公司主要从事P2P借贷系统制作，故而我提出了P2P借贷系统网页的设计与制作这一课题。2013年将会是借贷行业重新洗牌的一年，优胜劣汰是自然界的至上法则，竞争会无情的淘汰经营不善的、管理不佳的、功能落后的公司，留下那些在前进的浪潮中不断完善不断创新不断突破的公司，为2014年新的发展奠定基石。 在这样一个大前提下，我的课题显得格外
13、有意义。我在分析现有平台的基础上，结合各个平台的优势，组合成一个能进行二次开发的基础版借贷系统网站，利用PS与Dreamweaver，结合自己掌握的知识，通过div+css布局，再加一些js效果进行页面的效果扩充，同时要进行IE6兼容，虽然现在可能很少有人用IE6，但是不能否认的是，用IE6的人中也有可能是我们的客户，要兼顾到我们每个客户的感受。 我在自己本地上配置了apache，使得本机变成了一个测试机，这样方便我测试网站的功能看到整站的效果。另外，由于本人是前端，后台系统代码部分均是由融都公司提供，他们的系统是比较完善与成熟的。 1 设计稿 1.1 首页 1.1.1首页功能定
14、位 网站首页担负着网站“形象大使”的责任，从首页就基本能窥探出网站的定位和服务对象。由于网站功能定位的差异化，决定了不同类型网站首页肩负“职责”和“表现形式”的差异性，即首页功能、表达形式、传递信息内容、设计风格、页面布局。例如：电子商务网站（b2b/b2c/c2c）定位基于产品销售，电子商务网站的用户最关心的是产品的相关情况（功能情况、质量情况、购买/销售情况..），有效的组织产品信息、合理呈现的产品分类目录是电子商务脊梁骨，基于电子商务网站的定位，电子商务网站首页功能重点是目录导航功能，即网站首页要尽量向用户展示所销售产品及服务的分类目录；同时还要向用户传递信息，刺激用户产生购买行为，如
15、促销打折信息、新品上市、热销商品、最新成交等等；企业网站作为企业进行网络营销的“根据地”，它的作用不仅在于产品的展示和推广，更重要的是要使客户建立起对企业和产品信心，企业网站首页要尽可能的体现专业性和可信度，首页功能就是要让用户对企业和产品建立信任，首页要有企业介绍信息、资质证明、产品详尽信息等的入口，在细节方面，还要注意企业联系地址是否完整、是否有固定电话、网站是否经过备案……句话：企业网站首页必须肩负起建立用户信任的职责； 网贷平台的首页必须兼具电子商务网站首页与企业型网站首页的功能，网站首页要尽量向用户展示所销售产品同时要有企业介绍信息、资质证明、产品详尽信息等的入口，要用户对企业和
16、产品建立信任。 1.1.2 首页布局 在首页布局上，我采取的是传统的网页布局模式： 头部 广告图banner 登陆框 标列表 公告、新闻、成功案例模块 脚部 图1-1首页布局示意图 1.1.3首页模块详细分解 a. 头部： 吊顶 登陆快捷键 LOGO 服务电话 一级导航 二级导航 图1-2头部布局示意图 b. 中间内容
17、部分： 广告图banner 登陆模块 新闻公告模块1 正在招标的借款模块 新闻公告模块2 。。。。。。。 图1-3中间内容布局示意图 c. 脚部： 合作伙伴 底部链接 公司地址&备案号&联系方式 图1-4脚部布局示意图 1.1.4首页成型 根据以上布局图
18、设计出最终的首页效果图： 图1-5首页最终效果图 1.2 我要投资页面 1.2.1 我要投资页面功能定位 我要投资页面是网站用户作为投资者进行投资的主要场所。网贷平台有很多标种类，主要有抵押标、担保标、净值标、流转标、秒标等，在我要投资页面中我设置了包括搜索按钮跟标列表两部分，满足了用户投资的个性化选择和多元化投资需求。 1.2.2 我要投资页面布局 由于是模板化制作，整站的头部文件与脚部文件都是共用的，在下面的介绍中我就将不再详细阐述这两部分。如下图： 头部 搜索栏 全部标列表 底部 图1-6我要投资
19、页面布局示意图 1.2.2 我要投资成型 根据以上布局图设计出最终的首页效果图： 图1-7我要投资页面最终效果图 1.3 我要贷款页面 1.3.1我要贷款功能定位 同我要投资页面相对的是我要贷款页面，这是网站满足用户发布借款的场所。用户可以自行选择发布的标种，可以自己设置利率值。同时应该配有相应的标种介绍，让新手也可以了解清楚平台的标种。除此之外可以再根据页面效果增加一些宣传图，让页面丰富些。 1.3.2我要贷款页面布局 根据对我要贷款页面的功能定位，我做出如下图所示的我要贷款页面布局： 头部 宣传图 标种介绍&发标按钮模块
20、 底部 图1-8我要贷款页面布局示意图 1.3.2我要贷款页面成型 图1-9我要贷款页面效果图 1.4 个人中心页面 1.4.1个人中心页面功能定位 个人中心页面是网站显示用户个人信息的页面，是网站非常重要的一个页面，用户可以在这里看到自己所有在该网站的行为，包括投了什么标、发了什么标、信用程度如何、是否加入了VIP、银行卡信息等。用户想要提现与充值也必须在此页面下进行。故而此页面的列表信息需非常详细，没一个功能都需要一个相应的链接接口相对应，操作方面上也必须简单方便化，不必将就复杂花哨的动态效果。同样的，广告也是不需要出现的。 1.4.
21、2个人中心页面布局 根据个人中心页面的功能定位，个人中心的页面布局趋向于展示型，故而我设计了一个左右中的布局：左侧做成一个从上到下的导航，包括了所有个人信息的链接；中间为信息的展示区域；右侧为一些网站的公告与新闻，比重较小。如下图所示： 头部 左 侧 导 航 信 息 展 示 模 块 公告栏 客服栏 底部 图1-10个人中心页面布局示意图 1.4.3个人中心页面定型 根据图1-10个人中心布局示意图，我设计了如下图所示的个人中心页面完成图：
22、 图1-11个人中心页面效果图 1.5 咨询服务页面 网贷对于很多用户来说还是很陌生的行业，可能来到我的网站的人都不知道我的网站是做什么的，能给他带来什么利益，咨询服务页面的设立一部分是为这些人解疑答惑。同时咨询服务页面包括了很多子页面，如新闻报道、网站公告、政策法规、下载中心、关于我们等，可以作为一个展示网站形象、服务网站所有新老用户的平台。考虑到美观效果，可以增加一个广告栏，饱满网站形象。 根据图1-12咨询服务页面布局示意图，我做出下图所示资讯页面完成稿： 图1-12 咨询服务页面效果图 1.6 社区论坛页面 社区论坛是方面网站用户相互交流和网站与用户沟通的平台，是一
23、个很重要的信息交流场所。论坛有多种作用，如分享个人观点、发布资料、讨论互动、公布信息、提高会员归属感等，一个好的论坛是网站的精髓所在。 论坛用的是Discuz模板，Crossday Discuz! Board（简称 Discuz!）是北京康盛新创科技有限责任公司推出的一套通用的社区论坛软件系统。自2001年6月面世以来，Discuz!已拥有11年以上的应用历史和200多万网站用户案例，是全球成熟度最高、覆盖率最大的论坛软件系统之一。 图1-14论坛定型图 1.7 政策法规页面 政策法规页面是为了让投资者了解网贷行业在我国的规范，我国对P2P借贷的法律规定，减少投资者对网贷行业的
24、风险估计值，让用户明白网贷的合法性。同时也是体现了该网贷平台会严格遵守法律不会损坏投资者利益的态度，让投资者更放心。 在政策法规页面的布局上，我采用了咨询服务的模板即左侧导航右侧内容的布局形式，形成了整站统一的风格，简洁方面。参见图1-12咨询服务页面布局示意图。 图1-15政策法规定型图 2 设计图制作 以首页为例，我将页面的主色调定为蓝色（R:3 G:60 B:136），浅蓝色（R:0 G：162 B:233）作为辅色。 首先，我新建了一个1380x2050像素的画布，利用视图里的参考线，在画布中间限定一个980像素的区域，这个就是后续进行首页设计的区域。 图2-1
25、新建参考线示意图 新建一个图层填充为浅灰色到白色渐变作为底色，打开事先准备好的底纹图，点击编辑里的定义图案，取名为图案底纹按确定，然后再打开丰银凯利的设计页面，按编辑中的填充选项，选择我们保存过的自定图案，按确定按钮，整个页面的底就完成了，后续可以通过透明度来调整底图的深浅。 图2-2背景示意图&图2-3背景图片填充示意图 接下来开根据事先用参考线划分好的区域，进行头部和导航的设计。高度在26像素左右，长度为1380像素，利用矩形工具，拉出一个26x1380像素的长方形至于顶部，双击图层进行图层样式的选择，做出立体效果，选择渐变叠加调出合适的渐变色。按确定即可。在设计区域能，打入文
。中间的部分是属于头部的代码，是主题内容部分。 HTML的编写主要
©2010-2026 宁波自信网络信息技术有限公司 版权所有
客服电话：0574-28810668 投诉电话：18658249818
浙ICP备2021020529号-1 | 浙B2-20240490
关注我们 ：
