前言：
眼前朋友们对“html左边导航右边内容”大致比较注重，看官们都需要剖析一些“html左边导航右边内容”的相关知识。那么小编同时在网上搜集了一些对于“html左边导航右边内容””的相关资讯，希望咱们能喜欢，各位老铁们一起来了解一下吧！不懂代码，缺乏专业知识，同时又不满足于上淘宝购买建站系统？本文教你如何速成建站，如何将喜欢的html前端模版整合后台变成一套完整的网站程序！如果你熟练掌握这些技巧，一天可以搭建一个成熟的网站。
本文的（上）章中对前后端整合的意义、如何选择后端框架、前端代码的素材来源进行了介绍而本文演示用前端则是笔者从素材网站随便下载的一个前端页面。
一、概念·复用页面
首先在开始之前我们需要知道一个概念，那就是复用（重复利用）。作为小白，如何用最少的工作量做出最多的页面效果是一场考验。
同一套模版有两种复用方式，第一种是改变模块位置或复制模块的使用！要知道，同一套模版的样式代码是通用的，你不会写代码？没关系，我们可以这样玩！
从上图中我们可以看到，左边是个小方块，右边是个大方块，我想要让它们调转方向，我只需要将右边方块的代码放到左边，左边方块的代码放到右边，我也可以选择将这一组方块复制一份，放到下面，这就有三种变化了！
从上图的代码层面看，左边的小方块就是我截图中的红色方框内的代码！那么你是否注意到，截图中的代码有很多div组成的树形结构？这是我们必须理解的一个概念，我们可以叫它盒子。与此同时，我们要知道另外一个概念，前端代码中一个<div>标签必须以另外一个</div>标签作为结尾，而它们中间的内容就相当于创建了一个盒子容器，可以作为一个独立组件来使用。
注：截图中不是使用的代码编辑器，而是所有浏览器都具备的功能，它叫”开发者模式”，通过开发者模式我们可以预览一个网页的前端代码，可以定位到我们想要的元素在代码中的具体位置。作为小白，如果你无法从一堆代码中找到你想要调整或者要修改的元素在代码中的所在位置，不妨通过浏览器打开前端页面，然后利用开发者模式来查找。
除了上面讲到的对页面元素的复用以外，还有另外一种复用，那就是重复页面！例如下面这张图中我们可以看到有很多个.html页面，这就是一个完整的模版里面包含的页面。
其中index.html通常是主页面，about.html通常是关于我们页面，这些英文名词几乎通用，是否有注意到截图中有一个叫product3.html是产品页面，这个模版比较丰富，包含三种不同的产品展示页面，而3就是代表第三种！它是这样的：
关键问题在于，这个页面只能做产品列表展示吗？这就是想象力空间了，我们是不是还可以用它做新闻列表页面？或者利用它做个人博客的列表页？页面本身是不具备使用空间限定的，所以在这套模版中，这个页面虽然叫产品展示页，但它并不是只能做产品展示。如果你喜欢，还可以同时用它当作产品展示页和新闻列表页。
上述就是第二种复用，同样一个页面，我们将它作为什么样的用途，它就可以是什么页面，并不局限于模版给我们的限定！
二、概念·注释拆分
正儿八经的开发者虽然都会有做注释的习惯，但是很少有人会像我这样利用注释来拆分代码，由于很多优秀的前端都是国外的，所以在找到喜欢的前端模版时，为了方便自己后期做整合，不得不先用注释代码来分清楚各段落结构的用途。
注：注释是开发过程当中植入一些不发生作用的内容用于开发者自己识别自己写的代码是干嘛用的一种手段，通常在html语言中我们会用<!—这样的开头加—>这样的符号结尾作为一个注释段落。
我如果在代码中这样写：“<!—这是一个注释内容—>”，这段内容在代码编辑器中会变成绿色，它不会在代码中生效，不会显示在前端页面，如果你不看代码就不会知道有这样的一段内容在里面，这样的注释可以让我们自由的做一些代码备注，便于自己对代码的阅读。
从上图中可以看到有一段注释是Header，英文翻译可以理解成头部，其实模版中一般都带有这样的注释，但是像我这样英文不好的童鞋，我喜欢改成这样：
然后在这段代码的末尾我还会加上<!—顶部导航菜单结束—>的注释，之所以喜欢这么干，是因为在整合后端框架的时候，往往这一段要单独拿出来使用，甚至于要单独复制到后端代码的某个页面当中去使用。
三、前端·头部信息
一般来讲，所有的前端html页面都会有头部信息，会包含网站的名称、关键词、网站描述以及css网站样式和js调用。
上图中<head></head>标签中间的内容区域均为头部信息，其中<titel></titel>标签为网站标题，在前后端整合时会需要用一个网站名称的标量替换里面的内容，替换变量后，我们就可以在后台直接修改网站名称了，而不需要通过代码修改。
上图中的截图就是样式调用区，整个页面的所有样式元素均从这个区域调用，少了这一段，网站就缺少了基本的样式支撑.
如果我把样式都这样注释掉或者干脆删除掉，原本漂亮美观的网站就会变成下面这张图这样：
为什么要特别提到样式这个板块呢？因为样式文件是存储在你本地或者服务器上的，而网页要调用样式文件需要通过路径来读取，所以在前后端整合的时候我们需要将相关的文件、文件夹、素材全部放到后端源代码的系统目录里面去，并修改调用路径才可以生效，相关目录结构会在后面讲到。
上图中红色方框圈住的就是样式文件的调取路径，小白可能会问路径为什么是“plugins/OwlCarousel2-2.2.1/owl.carousel.css”这样体现的？这里就需要做一个解释了。
html页面通常是从页面的根目录直接调取的，比如你为一个前端页面建立了一个叫index的文件夹，然后把index.html文件放入到index文件夹中，那么index就是根目录，当你双击打开index.html并且通过浏览器访问这个页面时，系统会自动从index这个根目录中调取index.html所需要所有图片、css、js等相关元素。
上图中，第一个方框就是根目录的文件夹名称，第二个方框是不是很眼熟？没错，就是“plugins/OwlCarousel2-2.2.1/owl.carousel.css”路径中的第一个文件夹plugins，稍微懂电脑的人都知道这是本地文件夹路径吧？如果连这个都不懂那就停止阅读吧，再小白的教程也拯救不了你了！
再来看“plugins/OwlCarousel2-2.2.1/owl.carousel.css”路径中的最后一个，没错就是上图截图中的文件了！截图中左边框中的就是在本地电脑所在的位置（注：windows电脑自行理解），右边框中的就是css样式文件。这样看就好理解多了吧！
注1：最后的一节的实操演示教程中会说明如何将后端的变量和函数进行对应位置的替换来达到整合的目的。
注2: 头部信息、导航菜单、底部信息这三个模块由于通用性问题，在前后端整合的时候需要单独拆分出来，在后端系统的前端模版库中需要作为公共内容被整个网站直接调用，所以在整理一个新的前端模版时候，建议做好注释拆分，这样在前后端整合的时候可以直接复制粘贴，不需要费力的去阅读代码了。
四、前端·导航菜单
导航可以说是前后端整合过程当中最重要的一个环节，因为它是一个通用的动态内容，前后端整合的目的是为了让网站内容的更新和使用更方便，而导航菜单通常是要在后台进行增加的，并且可能存在多级菜单的循环。
上图中就是演示前端的导航菜单，代码截图并不完整，因为代码非常多，而这些代码实际实现的导航效果是下图这样的：
这是一个两级菜单，横排的是第一级，竖着的是第二级，从代码上看下图截图中的上面一个框是一级菜单的代码，第二个框是二级菜单的代码，二级菜单必然归属于某一个一级菜单。
从截图中可以看到，菜单是一级一级框下来的，<header></header>标签是整个导航栏。
<nav></nav>标签是整个菜单栏，如下图红色方框区域：
<li></li>标签是一级菜单，<ul></ul>是二级菜单，如下图红色方框区域：
这里要注意层级结构，如果无法理解，则翻到上面看我画了一个框套另外一个框的那张截图。如果你看懂了会不会觉得很简单？其实前端代码对小白来讲还是很好理解的。
注：通常由于语法习惯问题，上述的标签未必能套用到所有的前端模版，但是你理解了逻辑之后，就算看不懂代码，边改边预览效果也能大概理解了。
在理解了结构之后，我们需要知道几个比较通用的必然要修改的地方，请看下面的截图：
一般来讲，一个菜单我们要替换两个部分，一个是超链接也就是图中的href="product.html”部分，双引号内就是我们希望跳转的连接地址，另外一个就是菜单名称了。当然菜单的整合过程实际上更复杂，因为我们要通过循环的方式来实现菜单功能，关于循环功能会在最后一节的实操演示中来做代码展示及对比。
五、前端·底部信息
我们会在网站的最底端进行版权的声明、备案信息展示、关键页面指引、logo展示、联系方式或留言模块的展示等。
上图就是网站的底部信息模块，而它在代码中的体现是这样的：
注意截图中的<footer></footer>标签的应用，这个标签就是底部信息区域了！跟之前讲的一样，需要一个开头和一个结尾，而<footer>表示开头，</footer>表示结尾。需要注意的是，底部信息除了展示信息的区域以外，有些前端代码会将公共调用文件放在底下：
和头部信息的css调用一样，它也是调用关键性的通用文件，同样的在整合前后端模版时都需要进行文件路径的修改！这里只为小白理解大概的前端结构，不做过多的赘述，具体的如何修改会出现在最后的实操演练当中。
六、前端·内容区域
接下来到了我们最重要的内容区域了，由于代码较长就不截图了，通常来说，从导航菜单到底部信息中间部分的内容全部为内容区域。在前后端整合的时候内容区域会涉及到两种修改，一种是静态修改，一种动态修改！
上图中标题部分如果你是需要经常更换或者想在后台直接可以修改的话，那就要做动态修改，如果你不需要长期更换，那么做静态修改就可以了！所谓的静态修改就是直接在前端代码中改个文字就可以了，就是下图区域：
但是标题下面必然有一些只适合做动态修改的内容，比如说想直接调取后台发布的文章、案例之类的，那么就需要做动态修改了，如下图部分：
它的代码是如下图这样：
可以看到我在图中画了很多方框，小方框都是后端整合后需要插入动态变量或函数的地方，这里就要特别提出循环概念了。我们可以看到这段代码下面有很多个<!-- Product -->注释，截图中的大方块就表示一个内容区域，如果是在静态页面上，每一个内容区域都要用代码体现出来。
但是如果我们整合了后端，那么就是一个动态内容了，系统只需要识别一个内容标签就可以自动进行批量循环，所以代码结构应该是这样的：
聪明的童鞋也许已经注意到跟之前那张截图相比，这张截图的代码变少了，没错，在整理前端的过程当中，我会尽量的将准备循环的内容只保留一个，多余的部分删除掉，这样可以让代码更简洁，只保留在前后端整合中需要用到的部分即可。
七、后端·文件结构
在把前端的代码解刨后是不是会发现其实也不是那么难懂，那么为什么要这样做拆分呢？这个就涉及到后端的结构目录问题了！以FastAdmin这套后端开源代码的官网插件为例：
如果仔细回忆前面前端模版代码，再来对比这个系统的html目录是不是感觉到差异了？没错，前面解释的所有前端的头部、导航、底部都被拆分成不同的html文件了，其中footer.html是底部公共文件，底部信息专门放在这个代码文件中供其它所有页面调用，honor.html是头部信息，道理相同。header.html是导航菜单，道理依然相同！
index.html就是主页面的内容区域了！为什么要这样划分呢？因为所有的页面只有内容区域是每个页面都不相同的，而头部、导航、底部是每个页面都相同的，所以在动态的系统当中它们变成了公共页面，这样当我们需要对这些公共的内容进行修改操作的时候就不需要把所有的页面代码都修改一遍，而只需要修改公共文件即可。
我们再来看看头部信息的代码，是不是看不见路径了？那是因为它被截图中这个变量所替代了，所以其实相关的素材我们只需要存储到它对应的目录当中，然后在用它的变量替代前半部分的路径就可以了！实际的整合操作最后一章节来介绍！
《如何把喜欢的前端模版加上后台程序？小白速成课，不懂代码玩建站（中）》篇幅有点过长了就到这里！本章主要让大家对前端代码的各部分结构有所了解，并且初步理解前后端整合可能会要涉及到的元素。
想要介绍中截图的这套前端模版用来了解前端代码的的可以在下方留言！下一章将会上演示操作，请关注我，了解更多小白就能看懂的网络知识，有疑问的请留言说明我会尽量解答，也能给我后期发问做个参考，感谢支持！
标签： #html左边导航右边内容
