p2p借贷系统页面设计与制作本科学位论文

《p2p借贷系统页面设计与制作本科学位论文》由会员分享，可在线阅读，更多相关《p2p借贷系统页面设计与制作本科学位论文（34页珍藏版）》请在装配图网上搜索。

1、 ZHEJIANG WATER CONSERVANCY AND HYDROPOWER COLLEGE毕业设计（论文）题目： P2P借贷系统页面设计与制作 系 （部）： 计信系 专业班级： 应用10-2 姓 名： 刘秋香 学 号： 201090185 指导教师： 王慕明 （校外）指导教师： 周志敏 （校内）迄止时间：2013年3月 15日 2013 年 4 月 20日 2013年 4月 15 日浙江水利水电专科学校毕业论文P2P借贷系统页面设计与制作作者：刘秋香指导教师：周志敏摘要p2p网络借贷平台，是p2p借贷与网络借贷相结合的金融服务网站。p2p借贷是peer to peer lending

2、的缩写，peer是个人的意思，正式的中文翻译为“人人贷”。网络借贷指的是借贷过程中，资料与资金、合同、手续等全部通过网络实现，它是随着互联网的发展和民间借贷的兴起而发展起来的一种新的金融模式，这也是未来金融服务的发展趋势。作为一个依靠web为载体的行业，其网站的完善与否、美观程度、是否方便客户使用等等都关系到这个平台的正常运作。目前已有多家P2P借贷平台在线上运转，所谓是百家齐鸣、万花争艳了，但平台与平台直接进行对比，却发现各家系统质量参差不齐。集各家之所长，避各家之所短，这是我这次设计的宗旨。页面制作上主要采用了photoshopCS5和dreamweaverCS6两个软件，方法上运用HTM

3、L和CSS以及javascript与jquery来进行编辑。用photoshopCS5制作借贷平台最终设计稿，再对psd的设计稿进行切片处理，再使用div和CSS进行网页的布局和样式的编写，用浮动或是定位来排版，在页面动态效果的处理上使用javascript脚本语言或是jquery的组件来实现动画效果。关键词P2P；借贷平台；切片；CSS；javascript；jqueryAbstractP2p lending platform, is the combination of p2p lending borrowing and the network financial service webs

4、ite. Peer-to-peer lending is peer to peer lending, the meaning of peer is a person, a formal 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 Inte

5、rnet and the rise of private lending and developed a kind of new financial model, which 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 relate

6、d to the normal operation of the platform. There are several P2P lending platform in 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

7、 is I this design principle.Page production is mainly adopted photoshopCS5 and dreamweaverCS6 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 a

8、nd style of writing, with a float or positioning to typography, dynamic effects on the processing of the page using javascript scripting language or jquery components to achieve animation effects.KeywordsPeer-to-peer (P2P); Lending platform; Slice; CSS; Javascript; jquery 目录摘要1Abstract2目录3引言41 设计稿51

9、.1 首页51.1.1首页功能定位51.1.2 首页布局51.1.3首页模块详细分解61.1.4首页成型71.2 我要投资页面81.2.1 我要投资页面功能定位81.2.2 我要投资页面布局81.2.2 我要投资成型81.3 我要贷款页面101.3.1我要贷款功能定位101.3.2我要贷款页面布局101.3.2我要贷款页面成型111.4 个人中心页面111.4.1个人中心页面功能定位111.4.2个人中心页面布局121.4.3个人中心页面定型131.5 咨询服务页面141.6 社区论坛页面151.7 政策法规页面152 设计图制作163 切片处理203.1切片203.2切片保存214 代码编写

10、244.1 静态HTML编写244.2 css样式编写254.3 JS动态效果编写274.4 转换成动态页面28结论31参考文献31引言P2P其中P是英文peer的意思。主要是指个人通过第三方平台在收取一定费用的前提下向其他个人提供小额借贷的金融模式。P2P小额借贷是一种将非常小额度的资金聚集起来借贷给有资金需求人群的一种商业模型。它的社会价值主要体现在满足个人资金需求、发展个人信用体系和提高社会闲散资金利用率三个方面，由2006年“诺贝尔和平奖”得主穆罕默德尤努斯教授（孟加拉国）首创。客户对象主要有两方面，一是将资金借出的客户即投资者，另一个是需要贷款的客户即借款者。P2P借贷平台一方面满足

11、需要贷款的客户发布借款标，一方面满足投资的用户赚钱利息，两者缺一不可。在制作网页的同时要充分考虑到网站的功能，并对其进行美化。由于我在杭州融都商务科技有限公司从事前端工作，该公司主要从事P2P借贷系统制作，故而我提出了P2P借贷系统网页的设计与制作这一课题。2013年将会是借贷行业重新洗牌的一年，优胜劣汰是自然界的至上法则，竞争会无情的淘汰经营不善的、管理不佳的、功能落后的公司，留下那些在前进的浪潮中不断完善不断创新不断突破的公司，为2014年新的发展奠定基石。在这样一个大前提下，我的课题显得格外有意义。我在分析现有平台的基础上，结合各个平台的优势，组合成一个能进行二次开发的基础版借贷系统网站

12、，利用PS与Dreamweaver，结合自己掌握的知识，通过div+css布局，再加一些js效果进行页面的效果扩充，同时要进行IE6兼容，虽然现在可能很少有人用IE6，但是不能否认的是，用IE6的人中也有可能是我们的客户，要兼顾到我们每个客户的感受。我在自己本地上配置了apache，使得本机变成了一个测试机，这样方便我测试网站的功能看到整站的效果。另外，由于本人是前端，后台系统代码部分均是由融都公司提供，他们的系统是比较完善与成熟的。1 设计稿1.1 首页1.1.1首页功能定位网站首页担负着网站“形象大使”的责任，从首页就基本能窥探出网站的定位和服务对象。由于网站功能定位的差异化，决定了不同类

13、型网站首页肩负“职责”和“表现形式”的差异性，即首页功能、表达形式、传递信息内容、设计风格、页面布局。例如：电子商务网站（b2b/b2c/c2c）定位基于产品销售，电子商务网站的用户最关心的是产品的相关情况（功能情况、质量情况、购买/销售情况.），有效的组织产品信息、合理呈现的产品分类目录是电子商务脊梁骨，基于电子商务网站的定位，电子商务网站首页功能重点是目录导航功能，即网站首页要尽量向用户展示所销售产品及服务的分类目录；同时还要向用户传递信息，刺激用户产生购买行为，如：促销打折信息、新品上市、热销商品、最新成交等等；企业网站作为企业进行网络营销的“根据地”，它的作用不仅在于产品的展示和推广，

14、更重要的是要使客户建立起对企业和产品信心，企业网站首页要尽可能的体现专业性和可信度，首页功能就是要让用户对企业和产品建立信任，首页要有企业介绍信息、资质证明、产品详尽信息等的入口，在细节方面，还要注意企业联系地址是否完整、是否有固定电话、网站是否经过备案句话：企业网站首页必须肩负起建立用户信任的职责；网贷平台的首页必须兼具电子商务网站首页与企业型网站首页的功能，网站首页要尽量向用户展示所销售产品同时要有企业介绍信息、资质证明、产品详尽信息等的入口，要用户对企业和产品建立信任。1.1.2 首页布局在首页布局上，我采取的是传统的网页布局模式：头部广告图banner登陆框标列表公告、新闻、成功案例模

15、块脚部图1-1首页布局示意图1.1.3首页模块详细分解a. 头部： 吊顶 登陆快捷键 LOGO 服务电话一级导航二级导航图1-2头部布局示意图b. 中间内容部分： 广告图banner 登陆模块 新闻公告模块1 正在招标的借款模块 新闻公告模块2。图1-3中间内容布局示意图c. 脚部：合作伙伴底部链接 公司地址&备案号&联系方式图1-4脚部布局示意图1.1.4首页成型根据以上布局图设计出最终的首页效果图：图1-5首页最终效果图1.2 我要投资页面1.2.1 我要投资页面功能定位我要投资页面是网站用户作为投资者进行投资的主要场所。网贷平台有很多标种类，主要有抵押标、担保标、净值标、流转标、秒标等，

16、在我要投资页面中我设置了包括搜索按钮跟标列表两部分，满足了用户投资的个性化选择和多元化投资需求。1.2.2 我要投资页面布局由于是模板化制作，整站的头部文件与脚部文件都是共用的，在下面的介绍中我就将不再详细阐述这两部分。如下图：头部搜索栏全部标列表底部图1-6我要投资页面布局示意图1.2.2 我要投资成型根据以上布局图设计出最终的首页效果图：图1-7我要投资页面最终效果图1.3 我要贷款页面1.3.1我要贷款功能定位同我要投资页面相对的是我要贷款页面，这是网站满足用户发布借款的场所。用户可以自行选择发布的标种，可以自己设置利率值。同时应该配有相应的标种介绍，让新手也可以了解清楚平台的标种。除此

17、之外可以再根据页面效果增加一些宣传图，让页面丰富些。1.3.2我要贷款页面布局根据对我要贷款页面的功能定位，我做出如下图所示的我要贷款页面布局：头部宣传图标种介绍&发标按钮模块底部图1-8我要贷款页面布局示意图1.3.2我要贷款页面成型图1-9我要贷款页面效果图1.4 个人中心页面1.4.1个人中心页面功能定位个人中心页面是网站显示用户个人信息的页面，是网站非常重要的一个页面，用户可以在这里看到自己所有在该网站的行为，包括投了什么标、发了什么标、信用程度如何、是否加入了VIP、银行卡信息等。用户想要提现与充值也必须在此页面下进行。故而此页面的列表信息需非常详细，没一个功能都需要一个相应的链接接

18、口相对应，操作方面上也必须简单方便化，不必将就复杂花哨的动态效果。同样的，广告也是不需要出现的。1.4.2个人中心页面布局根据个人中心页面的功能定位，个人中心的页面布局趋向于展示型，故而我设计了一个左右中的布局：左侧做成一个从上到下的导航，包括了所有个人信息的链接；中间为信息的展示区域；右侧为一些网站的公告与新闻，比重较小。如下图所示：头部左侧导航信息展示模块公告栏客服栏底部图1-10个人中心页面布局示意图1.4.3个人中心页面定型根据图1-10个人中心布局示意图，我设计了如下图所示的个人中心页面完成图：图1-11个人中心页面效果图1.5 咨询服务页面网贷对于很多用户来说还是很陌生的行业，可能

19、来到我的网站的人都不知道我的网站是做什么的，能给他带来什么利益，咨询服务页面的设立一部分是为这些人解疑答惑。同时咨询服务页面包括了很多子页面，如新闻报道、网站公告、政策法规、下载中心、关于我们等，可以作为一个展示网站形象、服务网站所有新老用户的平台。考虑到美观效果，可以增加一个广告栏，饱满网站形象。根据图1-12咨询服务页面布局示意图，我做出下图所示资讯页面完成稿：图1-12 咨询服务页面效果图1.6 社区论坛页面社区论坛是方面网站用户相互交流和网站与用户沟通的平台，是一个很重要的信息交流场所。论坛有多种作用，如分享个人观点、发布资料、讨论互动、公布信息、提高会员归属感等，一个好的论坛是网站的

20、精髓所在。论坛用的是Discuz模板，Crossday Discuz! Board（简称 Discuz!）是北京康盛新创科技有限责任公司推出的一套通用的社区论坛软件系统。自2001年6月面世以来，Discuz!已拥有11年以上的应用历史和200多万网站用户案例，是全球成熟度最高、覆盖率最大的论坛软件系统之一。图1-14论坛定型图1.7 政策法规页面政策法规页面是为了让投资者了解网贷行业在我国的规范，我国对P2P借贷的法律规定，减少投资者对网贷行业的风险估计值，让用户明白网贷的合法性。同时也是体现了该网贷平台会严格遵守法律不会损坏投资者利益的态度，让投资者更放心。在政策法规页面的布局上，我采用了

21、咨询服务的模板即左侧导航右侧内容的布局形式，形成了整站统一的风格，简洁方面。参见图1-12咨询服务页面布局示意图。图1-15政策法规定型图2 设计图制作 以首页为例，我将页面的主色调定为蓝色（R:3 G:60 B:136），浅蓝色（R:0 G：162 B:233）作为辅色。 首先，我新建了一个1380x2050像素的画布，利用视图里的参考线，在画布中间限定一个980像素的区域，这个就是后续进行首页设计的区域。图2-1新建参考线示意图新建一个图层填充为浅灰色到白色渐变作为底色，打开事先准备好的底纹图，点击编辑里的定义图案，取名为图案底纹按确定，然后再打开丰银凯利的设计页面，按编辑中的填充选项，选

22、择我们保存过的自定图案，按确定按钮，整个页面的底就完成了，后续可以通过透明度来调整底图的深浅。 图2-2背景示意图&图2-3背景图片填充示意图接下来开根据事先用参考线划分好的区域，进行头部和导航的设计。高度在26像素左右，长度为1380像素，利用矩形工具，拉出一个26x1380像素的长方形至于顶部，双击图层进行图层样式的选择，做出立体效果，选择渐变叠加调出合适的渐变色。按确定即可。在设计区域能，打入文字，按照需求拖入新浪微博的图标，加上一些小细节。图2-4吊顶制作 图2-5吊顶制作过程示意图导航部分的制作，利用矩形工具，拉一个合适高度在35像素左右的矩形，图层样式选择渐变叠加， 再新建一个图层

23、利用羽化工具做出分割的效果，根据导航内容适当的复制分割效果图层，然后将导航文字内容填上，文字大小在18左右，宋体或者微软雅黑，效果选择无。图2-6 导航制作根据导航的切换效果，利用矩形工具，拉一个大小合适的框，双击图层，图层样式进行选择，内阴影和颜色填充为白色，在导航图层下新建一个矩形工具图层，拉一个矩形作为二级导航，图层样式选择颜色渐变，描边，然后打入文字，字体大小为12，宋体，效果无。图2-7 导航文字制作下面进行数据统计模块的设计，拉一个739x32像素的矩形，双击图层，选择图层样式。打入文字，拉一个小矩形，图层样式设置，做出凹进的效果，再打入数据。图2-8 数据统计模块设计图层示意图我

24、按照模块与模块间距不小于10像素的原则，在数据统计条下方，发出一个740x256像素的矩形，然后拖入一张图片，右击图片图层创建剪贴蒙版。再在广告图，上做出一个小长方形，作为切换效果展示，广告图模块这部分完成了。 图2-9广告图示意图&图2-10 广告图图层示意图 在广告图下方拉出一个矩形，效果描边，颜色填充为白色，置入准备好的按钮和图标，填上文字，告示部分完成。 图2-11 公告模块示意图正在招标模块，先拉一个大小合适的矩形作为整个底板，然后填充为白色，按照参考线的分区，利用矩形工具拉出一个矩形，图层样式选择，渐变和描边，然后再用钢笔工具，做出一个不规则图形，填充颜色，渐变效果，再复制一层，填

25、充灰色，颜色透明度调低，置于蓝色图层后面，作为阴影。图2-12正在招标标题栏制作再新建一个矩形，图层效果选择渐变和描边，将文字排版排好，利用矩形工具做出头像。拖入事先准备好的图标。将这部分图层放在一个组里，复制，移动重复几次，一个列表就完成了。图2-13 标详情模块接下来右侧部分，根据现有的图标和素材，拷贝移动图层，更换里面的内容即可。注意模块与模块之间的间距不小于10像素。图2-14 右侧新闻排行榜模块效果图底部，我们可以建立几个不同灰色的图层，进行编排，拖入小图标，打入文字，将客户的logo去色置入，加入可信网站等图标和客户信息即可。图2-15 脚部模块效果图后续可以再进行小细节的调整，基

26、本上一个首页就完成了。做一个首页一定要事先规划好，兼顾功能与美感之间的平衡，做到整体和局部的统一和呼应。3 切片处理3.1切片静态页面的切片过程是利用PhotoShop软件中的切片工具进行切片处理的。打开PhotoShop cs5，将需要切图处理的静态页面拖入PhotoShop cs5中，按C快速选择切片工具。拉出选择框选出需要的图片，若是选择的图片上面有文字图层，而且改文字只是普通的文字，则应该隐藏该图层，此时我们选中的是纯图片。如果静态页面图层过多，你不知道该文字图层是哪一个，你可以按V选中移动键，再在状态栏中选中自动选择（图层）选项，此时你再点图片上的文字，右侧就会自动选中当前选择的图层

27、，点击图层边上的小眼睛就能隐藏当前图层。需要注意的是，有些文字需要隐藏，但有些文字是不需要的，比如LOGO图片上的文字、广告图上的文字等，这些都是美工设计好的文字，不需要隐藏。以首页为例如下图所示：图3-1切片示意图3.2切片保存切好需要的图片之后，需要按Shift+Ctrl+Alt+S来输出图片，或者从文件存储为Web和设备所用格式，在弹出的框中选中切出的图片即可，同时需要注意的是切换各个图片的格式，有.png、.gif、.jpg三种格式。如下图所示：图3-2切片保存示意图存储时选择静态页面所在的位置。打开该文件夹，会发现所有图片都保存在一个名为images的文件夹里。切静态页面时可以引用此

28、文件夹中的图片，但是我们还需要放到服务器上，以动态形式呈现。在服务器端前台页面基本放在soonmes文件夹里，而图片则可以放在soonmes下的images或者media下的bg文件夹，由于个人习惯，我会讲新增加的图片放到soonmes下的media下的bg文件夹里，这样与css和JS都在同一根目录下，方面管理。如下图所示：图3-3服务器端目录示意图（1）图3-4服务器端目录示意图（2）4 代码编写4.1 静态HTML编写HTML即超文本标记语言是用于描述网页文档的一种标记语言，超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认，即。中

29、间的部分是属于头部的代码，是主题内容部分。HTML的编写主要是以div+css的方式编写代码，再用JS添加动态效果。以首页为例，按照图1-1首页布局示意图，以div为布局元素，我为每个模块添加了一个div块并各自命名好，如果有左右布局的，就用float_left或者float_right来左右浮动，float_left和float_right均已在sytle.css文件中命名为左浮或右浮。若是块与块之间需要间隙，则以margin值来控制。照这样的规则，我做了如下所示的布局控制：融都P2P借贷系统 PHP版演示-民间借贷信息平台-p2p网贷|网络借贷|P2P网上借贷|借贷平台|投资理财|人人贷|

30、信用贷款|小额贷款|抵押 将以上代码保存为index.html文件保存至网站文件夹根目录中。4.2 css样式编写样式的编写是采用外链css文件的方式，在根目录中新建一个文件夹，命名为css，在Dwreamweaver cs5中新建一个css文件，将其保存至刚刚新建的css文件夹，再在index.html的中添加引用改css文件的代码，如：，这样就能在style.css中写入样式控制index.html文件了。文件的归类保存相当重要，一个网站的页面有上百个，文件归类可以为后期维护带来很多的好处，同时也让网站显得有条有理，蜘蛛爬起来也不会产生不友好、不信任感。整站式css代码编写时，需要定义一些

31、全局样式，如.float_left float: left;、.float_right float: right;这两个样式将贯穿整个网站布局，很方便得实习布局。如下图所示：图4-1 css全局样式部分代码示意图全局样式定义后就是各个模块的css样式，为了后期维护方便，应该每个模块之间保持间距并对相应的模块进行注释。如下图所示：图4-2 css样式一览图4.3 JS动态效果编写JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。Javascript库，指得是可以方

32、便应用到现有开发体系中的、现成的代码资源。库不仅为大部分日常的DOM脚本编程工作提供了快捷的解决方案，而且也提供了许多独特的工具。jQuery就是javascript库中的新成员，提供css和xpath选择符查找元素、ajax、动画效果等，在案例中，我大多使用jQuery编写效果。以首页为例，首页中有一个图片轮播的效果，此效果是较为简单并且实用性极强的，网上也有很多此类插件，我选择了“jquery.flashSlider-1.0.js”这个插件。引用插件的一个缺点就是DOM结构需要跟插件控制的一样，根据此插件我做了如下所示的DOM结构： 然后在header.html中引用此jQuery库，此外

33、还需要引用一个名为index.js空文件，此文件中写的是网站中一些小的JS效果，如TAB切换等。引用完成后还需要初始化这个轮播插件，在index.html这个轮播的DOM结构下写入这样一段话：literal$(document).ready(function() $(#slide).flashSlider(); );/literal这样JS效果就完成了。图4-3 JS文件代码示意图4.4 转换成动态页面用同样的方法将小布局设置好、细节内容优化好，页面也就出来了。静态页面切好后需要放到服务器端。这时，就要切割页面了。我们模板是共用头文件与脚文件的，故而需要分离出与中的文件，分别放入两个名为hea

34、der.html和footer.html文件中，如下图：图4-1 header.html源代码示意图图4-2 footer.html源代码示意图还是以首页为例，源代码中以中的内容保存依旧在index.html文件中，index.html中在首尾增加“include file=header.html、include file=footer.html”两句代码，将header.html和footer.html文件包含进去。同时html中的图片链接需要全部替换，前面已经说过，网页图片会放在soonmes/media/bg文件夹下，而html文件则放在soonmes文件夹下，故而在html中的图片引用

35、路径修改为:$tempdir/media/bg/，css引用路径为：$tempdir/media/css/，js文件引用路径为：$tempdir/media/js/，css文件中图片的引用路径修改为：./bg/。结论此次的毕业设计是对P2P网络借贷页面设计和制作的一个过程缩影，从设计稿的图像处理到代码的编辑以及最后上传至服务器端，是每个网页发布到网站上都必须经过的路程。我设计制作的P2P借贷平台是以实用性为主，美观性兼顾的网贷平台基础版，网贷平台的主要的功能基本都已经涵盖其中，同时也留下了很多能自由添加修改的模块，为二次开发留下了很多空间。这次P2P借贷平台的设计和制作，是我实习期间对网贷平台

36、页面的一个总的介绍。前端工作地位略显尴尬，有人说它是美工，有人说它是程序员，但无论哪一种，身为前端工作者的我都觉得是片面的，前端是一个很宽广的职业，既要自己切图，又要自己做些图片，为了网页效果的美观，还要自己敲JS代码。我每天都在切各种网贷平台的页面，公司每周都有一个新的平台要上线，这样的速度昭示着网贷行业如早上的朝阳，蓄势等待喷薄而出。我这个小小的设计，这篇小小的论文，也为将来网贷发展贡献了自己的一份绵薄之力。不积跬步何以至千里，本设计能够顺利的完成，也归功于各位任课老师的认真负责，使我能够很好的掌握和运用专业知识，并在设计中得以体现。正是有了他们的悉心帮助和支持，才使我的毕业论文工作顺利完

37、成，在此周志敏老师表示由衷的谢意。参考文献1 吴雪程序天下Javascript北京：电子工业出版社， 20082 单东林，张晓菲等 锋利的jQuery北京：人民邮电出版社. 20093 赵辉. HTML+CSS网页设计指南. 北京：清华大学出版社. 20104 于鹏. 网页设计语言编程（HTML/CSS）. 北京：电子出版社. 20035 （美）费拉纳提. JavaScript权威指南(第5版) . 李强. 北京：机械工业出版社. 2007-8-16 （美）Nicholas C.Zakas. javascript高级程序设计(第3版). 曹力. 北京：人民邮电出版社. 2012年3月7 何丽. 精通DIVCSS网页样式与布局. 北京：清华大学出版社. 2011-48 (英)韦尔曼. jQuery用户界面库学习指南. 张伟超. 北京：人民邮电出版社. 2009-10-19 基思. JavaScript DOM编程艺术(第2版). 北京：人民邮电出版社. 2011-4-110 （美）麦克法兰德. JavaScript实战手册. 李强. 北京：机械工业出版社. 2009-5-131