不懂代码，缺乏专业知识，同时又不满足于上淘宝购买建站系统？本文教你如何速成建站，如何将喜欢的html前端模版整合后台变成一套完整的网站程序！如果你熟练掌握这些技巧，一天时间就可以搭建一个成熟的网站。

一、前后端整合的意义

那你一定会问，这有什么意义？直接买现成的完整网站模版不香吗？意义有三条：

1、你可以通过整合模版来赚钱

通常素材网站只会提供两种网页设计素材供用户下载，一种是PDS设计稿（ps画的网页UI原型图），第二种是html页面源代码（纯前端，没有后台）。我们在网络上找到的大多数模版建站系统都是别人将前端和后台进行整合后作为完整源代码下载的。这也是一门不错的赚钱路径，业余兼职，你肯花时间还是可以获得不错的收入的，关键是成本几乎为零。

2、帮客户实现设计效果

如果你懂PS，你可以自己通过设计图片来呈现网页效果，然后花钱请人将PSD做成html代码页面，至于花费多少就要看运气了，我曾经找到过的最便宜的前端制作服务，一个页面仅收80块RMB。

网站中有大量的页面是可以重复利用的，以企业网站举例：首页、关于我们页、新闻列表页、产品列表也、新闻内容页、产品类容页、联系我们页这几个通用页面可以满足大部分的需求，细数下来其实只有7个页面，而你们看到一个网站有几十个页面通常都是这几个页面复用的结果。

3、更丰富的模版素材来源

不论是你准备帮别人建设网站，还是准备自己搭建一个网站，购买完整模版源代码前端界面都不一定能让你或者你的客户满意，那么通过素材网站搜寻更丰富的前端模版就很有必要了。

想要节省时间成本，你可以把前端模版素材建立一个素材库，在有需要的情况下自己或者让客户在素材库中挑选，找到合适的前端界面就拿来做后端整合，就算前端不算百分之百满意，也能做一些细节上的样式调整，基本上能满足80%的常规需求了。

特别说明：其实现在有很多网站的前端都不一定是自己设计的，有些会使用开源的前端框架进行简单的修改后使用，有些可能直接套用合适并且好看的前端模版跟自家的系统做整合，不要以为专业工程师干不出来，有些公司能干出直接抓取成熟网站的页面，进行一定的修改后整合到自家系统。

二、如何选择合适的后台框架

既然要自己做前后端整合，那么肯定不能买那些存在安全风险的成品源代码来使用了，所以在选择上尽可能选择开源的后台框架是最好的。

目前市面上最成熟的用于内容系统的框架有有帝国CMS、织梦CMS、ThinkCMF、WordPress、FastAdmin等，由于框架太多，可以说成百上千，这里笔者仅挑选一些相对简单好用并且笔者熟知的！

其中WordPress首先排除，至少对小白来讲，WordPress的前端模版制作难度太高！剩下的几种开源后台代码中笔者最常用的是ThinkCMF，最简单的是织梦CMS，FastAdmin也不错，各有优劣，后续的细节讲解中均以这三套后台代码作实操演练。

注：由于不同代码的函数和变量都有所区别，所以本文仅讲解逻辑和方法，代码上只会做简单解释便于小白可以快速理解。

三、前端代码的素材来源

后台找到合适的了，前端如何找到合适的呢？这里笔者仅举几个我自己常用的方式，小白可以效仿：

1、素材网站

通过百度搜索“html模版”可以找到很多前端模版的素材下载网站，也有一些不错的前端开源框架，不过开源框架的利用方面对小白来说还是有点难度，笔者最常用的素材网站就是《17素材网》，需要充值付费才能下载，但是费用不高。

2、通过淘宝购买

淘宝购买的素材有点参差不齐，因为对前端网页来说最重要的是浏览器兼容性，有些早期的前端代码在目前新的浏览器框架技术下访问时会有错位或素材显示不到位的情况，但是也有优点，那就是你甚至于可以花几块钱买到上千套前端模版，当然了这类型的模版质量未必很好，不过选择空间大。

如果你想挑一些比较新潮优质的模版的话也可以看那些单个模版卖几十上百块的，一般可以跟卖家要演示网址进行体验。

3、自己设计

自己设计有两种方式，一种是如果你有PS的平面设计能力就自己画个设想中的网页页面图，然后在淘宝、猪八戒威客网这一类的平台找前端工程师帮你实现成页面，费用从80-300元一个页面的价格都有，看你自己的谈价能力了！

第二种方式不知道windows电脑是否可以实现，笔者用了苹果的系统之后才发现有很多简易的前端页面设计软件，例如笔者所用的“hype4”，它就可以自己自由的在一个画布上进行各种元素、图片、内容的布局设计，然后直接导出为html页面。

注：hype4设计有个缺陷，由于是非代码设计，有些前端效果或功能是做不出来的，基本上你只能把它当成一个适配网页的ppt，而且为了方便整合后端，尽量不要使用动画特效，不然你做后端整合的时候会非常痛苦。优势同样明显，通过它设计前端页面可以同时绘制电脑端、平板端、手机端三端不同的呈现和显示效果。

四、小结

由于内容篇幅较多，所以笔者将全部内容拆分成三个部分来进行，本文为《上》篇，主要讲解整合前端模版的意义、后台代码的来源、前端代码的来源这三个部分，让小白形成第一步的印象。

你还需要知道如何在本地部署和查看前后端，本地部署服务器环境的教程笔者的个人主页已经有了，可以直接去翻我过去的文章。而html前端页面是不需要特殊的环境支持的，你在获取到html前端模版之后只需要打开名称为index.html的文件即可直接预览到前端的效果。

通篇教程都是针对不懂技术的小白建站而做，所以不会涉及到太专业的代码知识，大佬们也不需要以误人子弟的名义来指责，因为非技术人员的需求跟专业从业者的需求在学习路径和方法上本身就存在差异。小白不需要太多的专业知识，只需要能现学现用的实用知识能满足临时的使用需求即可。

后续会编写《中》篇会讲解一些基础概念，例如必须修改的标签、什么是循环、什么是变量、如何调用开源后台的现成函数以及如何判断要修改的文件有哪些。《下》篇会进行实操演练以及如何将整合好的网站上传到网络上供用户访问，同时会附带对内容网站以外的其它网站类型的前后端整合进行简单的解说。全文的讲解中会穿插少量的SEO推广所可能涉及到的代码知识。