手把手教你建立个人网站-葵花宝典高阶篇01

哈喽亲爱哒小伙伴们，我们的建站教程要开始进入高潮部分啦，这一期要开始深入的讲解前端的各种知识了，各位小伙伴们你们准备好了吗？

天空飘来五个字儿~~~代码不是事儿~~~

哈喽亲爱哒小伙伴们，我们的建站教程要开始进入高潮部分啦，这一期要开始深入的讲解前端的各种知识了，各位小伙伴们你们准备好了吗？（其实也就是打开DW和PS而已。。。呵呵呵）

话说上一篇有问小伙伴们，关于这一篇内容会很多要不要做成视频教程的事情，大家果然木有辜负我的期望。。。。。。。。。。。一个回复的都木有啊有木有啊！！！

好吧，那就继续以文章的形式来发表吧，太长的话就分章节，以免小伙伴们看晕了。嘿嘿嘿，主要也是一次写那么多我自己也晕啊嘿嘿嘿嘿嘿。

上一篇呢咱们讲了神速一刀切，嘛，有小伙伴吐槽说好低级的代码。嘛嘛，低级功法果然是不行的吗？你看你看，被吐槽了有木有，所以啊童鞋们同志们，人生不能那么容易满足啊。就像我上一篇最后说的一样，太容易满足容易被江湖淘汰哟。

嘿嘿，啥话也不说了，为了造福广大江湖盆友们，我这就将高级功法掏出来。

首先呢，咱们得忘记上一篇的过程，那么低级的功法不自废掉怎么学习高级功法对不对。

那么，现在呢，咱们手中有一张之前个人网站的设计图，表告诉我你还木有，神马？还真木有？那还不赶紧看看前面的教程设计去。

前端重构要遵循的江湖铁则

一、关于网页打开速度

哟西，设计图有了，作为一个修习高级功法的有为青年，在切图前，我们首先要思考---为什么会有高阶篇功法，到底有什么不同？

这就要牵扯到前端的存在感了，如果前端重构都像咱们上一篇中那样随随便便就能完成工作的话，那么老板们给前端开那么高工资一定是脑抽。

网页最重要的一点是什么？哎卧槽要是直播多好，现在可以揪出一位童鞋来给大家乐呵乐呵。

嗯，说起最重要的一点，那肯定得是打开时间。在前人的研究下，我们有很多重要定律可以参考，就比如五秒法则--- 消费者研究表明，消费者对任何一种商业信息传播的关注兴趣取决于五秒钟的时间（无论是电视广告、报纸新闻还是网络信息）， 如果你不能在五秒钟的时间之内让消费者对你的信息产生兴趣， 消费者的下一个关注点可能就会落在你的竞争对手身上。

所以，网页的打开时间一定要快，这是你的第一关，用户的去留全在你的努力。那么，该怎么让网页打开快呢？

很简单呀，让网页文件体积变小呀，在同等网速下，50k的网页肯定比500K的快十倍啊有木有。

那么切图首先重要的一点出来了，我们得尽量用代码来实现设计图中的效果，像上篇那样一大张一大张切图肯定是不行的，一张图就几十上百K，不合理啊不科学啊不人道啊！

二、关于那些猥琐的搜索引擎爬虫们

大家一定知道或者看到过SEO这个词吧，SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指通过对网站内部调整优化及站外优化，使网站满足搜索引擎收录排名需求，在搜索引擎中提高关键词排名，从而把精准用户带到网站，获得免费流量，产生直接销售或品牌推广。

也就是说，如果你不是做网站只想给自己看的话，你就得在乎这个。那么，怎么做好SEO呢？

SEO总体来讲实际上是分为两个大部分，关键字优化和网站优化，关键词优化是有专门的人员做的不属于前端的范畴，网站优化这部分就是设计和前端重构需要做到的了。

网站优化要做到的基本上有以下这些：META标签优化、内部链接的优化、建立网站地图、每个网页最多距离首页四次点击就能到达等等。

接下来解释一下小标题里那些猥琐的爬虫们，搜索引擎的工作原理类似于这样。一个巨大的母体生出无数的小蜘蛛，这些小蜘蛛就在广阔无际的互联网里每天到处乱爬，找到新的地方后小蜘蛛会仔细的爬遍这个地方的每一寸，然后把了解到的所有信息反馈给母体，这时候母体会对这个地方的信息进行筛选，看不懂的扔掉，无用的扔掉，剩下看得懂的留下然后加入记忆中并且给这个信息一个序号。然后每天很多人来问母体这个地方在哪那个地方在哪，当然，很多人的问题很模糊，这时候母体就会把记忆中与提问关键字相关的信息提取出来按照序号排列在提问者面前让他自行选择。这就是搜索引擎大概的原理了，大家随便理解下就好了，以便知道我们后面写代码的时候为什么那样写。话说这么长一段真是写晕了，不知道你看晕没，呵呵呵。。。呵呵呵呵。。。

三、扩展性和可维护性

你不会想你的网站只有一个页面吧，展示下自我作品想不想，或者把联系方式弄上去想不想，或者更奇妙的是加个自己的博客功能上去肿么样？呐，当你某天这么想的时候，打开你很早前写好的页面，卧槽什么鬼？这里是干嘛的？这段代码是实现什么的？

这就是网页代码的扩展性和可维护性存在的必要性。

模块化，文件夹分级，CSS文件管理，JS文件，图片文件，等等有很多细节需要考虑到。在好的规划下，网站增加版块不需要在重复的地方重新写代码造成混乱，比如头部比如幻灯片代码。在你想更新或者修改之前页面的时候你也能够快速的找到目标位置，在不打乱页面内容和功能的前提下达到自己的目标。

以上的三点，请大家务必了解并在设计和重构的时候牢记。嘛，当然可能有些没有底子的童鞋现在其实还懵逼着呢，不过不要紧，回头练习完再来看看就行了。骚年们，任重而道远啊~~~

开始撸代码

好的，介绍完这些麻烦事儿，咱们正式开始写代码大业，拿出之前的设计图，打开你的DW开始重构吧。

一、建立文件夹

看到这里可能会有小伙伴说，你在逗我么，不就是右键新建文件夹吗你还放在这里说，你是在欺骗大家的感情吗？

嘿嘿，骚年莫激动，网站的文件可不能乱七八糟一堆全放在一个文件夹内，至少要有这几个文件夹，images、css、js，这三个文件夹与网页文件同级存放，然后你建立的css文件js文件和切图等都要分别放在里面。

好的，现在我们打开DW，新建一个HTML文件，在title标签里写上你网站的名字，然后保存，文件名index.html，首页一般都用这个名称来命名，属于程序默认识别的首页名字。注意，不是title之间的那个名字哦，再次申明，title之间的是你的网页的名字，保存成文件的名字是文件名。

然后在网页文件同级的位置建立images、css、js三个文件夹。

二、全局重置和外部样式库

看这个名字大家估计能猜到点，这里呢，我们要通过css来重置标签属性。为什么要重置呢？事实上html标签都拥有固定的属性，比如h1是一级标题，h2是二级标题，b是字体加粗之类的，在写网页之前，我们要把这些默认的属性全部清除掉，以防属性冲突之类的事情。

接上一步，重新打开网页文件index.html，这次我们要用外部样式表，一般都是用外部样式表，这样可以保证网页文件的体积和整洁性，艾玛我又想到内联样式内部样式外部样式的加载顺序优先级这些事情，就放在最底下当做补充说明吧，还有meta标签的keyword等等，知识点太多了真是。

在DW里面，新建-CSS，我们得到了一个和新建HTML不一样的窗口，这个就是CSS的书写窗口。点保存，把这个文件保存在刚才建立的CSS文件夹里，命名为global.css，意思是全局的，其实这个命名是有深意的，牵扯到css的模块化，这里我们先不细讲。

然后我们回到网页文件，在头部上次我们写内部样式的位置加入如下代码

就是link打头那一段，这样就链接到刚才建立的css文件了，现在开始你在css文件里写的css属性可以被随时调用了。

下面回到正题，css的全局重置，打开css文件，在里面输入这一段

实际上这一大段不用自己琢磨，各大网站已经基本上形成了完备的标准，随便找个大网站复制过 来就行了，自己写是不可能写的，这辈子不可能写的，前端大神又当不了，就是复制黏贴这种东西，才能维持的了生活这样子。

另外要注意一点，灰色的那部分字是注释，要养成良好的习惯哟~

好了，前面的准备基本上这样了，下一期咱们继续开始详细的代码编写，小伙伴们回见啦~~

------------------------------------------------------------

以下是补充说明

内联样式：内联样式是使用style属性添加到元素的样式。

This is a paragraph.

就是说直接添加到HTML元素的哟

内部（嵌入）样式：

当单个文档需要特殊的样式时，就应该使用嵌入样式表。你可以使用

外部样式：

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用

标签链接到样式表。

标签在（文档的）头部：

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("/images/back40.gif");}

不要在属性值与单位之间留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。

优先级：

内联样式>内部样式>外部样式

也就是说，如果当前标签在多个样式表出现相同属性（比如color）而属性冲突时，浏览器会按照这个优先级来展示样式。

关于meta标签

元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部，不包含任何内容。

标签的属性定义了与文档相关联的名称/值对。

name 属性

name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的

名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。

"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。

类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：