前端切图+网页排版的注意事项和经验分享

现在在学校里面，培训机构里面都有很多课程是前端切图这一方面的，简单来说就是学习div+css网页排版。有很多人经过这一轮的学习之后就发现自己对排版这一方面非常的熟悉甚至说自己的div+css的高手。其实真正说要懂得一个网页排版需要注意的一些问题是什么呢？是不是在电脑上面看到自己排版出来的页面就真的是一个成功的网页了吗？下面我说一下我自己在网页排版上面会注意的一些事情：

一、使用样式的种类和名字的规范

id和class应该如何使用

在我们使用div+css排版的时候，每一个div我们都会给他一个样式，而样式有两种一种是id一种是class。有时候无论我们使用哪一种作为标志都一样可以实现页面的css样式控制。但是为什么会出现id和class这两种呢？

其实在一个网页里面我们可以做一个比喻：body我们可以认为是一个学校，id我们可以认为是一个班级，class我们可以认为是一个人。那么在同一个学校里面，班级是不能重复的而我们每一个人的名字有可能是同名的。所以在一个网页里面，一个id只能出现一次，一个class可以出现多次。而id的权限比class的权限要高，所以我们可以把一些不需要复制重复的div使用id来表示把一些可以重复用到的样式使用class来表示。例如一个网页只有一个头部，中部，底部。所以这三个部分我们可以使用id。有一些博客中间部分有分为左右，这一些板块在我们网页里面一般是不需要重复的，所以我们使用id来为他定义，而每一个板块里面的内容有时候是可以重复使用的，所以我们使用class为他定义。

有时候会有人问，如果我们全部单独使用一个也可以实现功能，为什么我们不单纯使用id和class呢？这个是因为如果全部使用id的时候，我们网页的JS和PHP的函数调用都是使用到id的，如果我们在css样式就占用了那程序员会非常麻烦，如果全部使用class的时候可能会因为权限不够而在同一个层里面的没有标志的元素例如ul，li，a等的会收到外面一层的样式影响到这样导致要要多写比较多的代码。

id和class应该如何起名？

这个名字是可以随自己喜欢来起名，所以有一些人使用英文，拼音或者乱打几个字母。虽然说这样子是可以的，但是会导致自己和别人在后期的修改网站非常麻烦，就因找一个标签也要头晕了。 我个人起名字是按照层次来起，下面举个例子：

例如头部我使用了head这个名字，然后头部可以分为存放logo和存放导航条两部分。这两个部分我就会使用head_1、head_2来表示，然后在存放logo的部分有可能分为左右一边是logo一边是广告或者搜索栏，我就会起名为：head_1_left、head_1_right来表示。这样子的css代码有时候我们在修改也无需翻到html页面看，直接按照样式的名字就可以看出来了。

二、合理使用标签有助于网站的收录和SEO优化

我们举一个例子，有时候一个新闻内容板块的html里面，很多人都会直接在div中间写上文字，然后给这一个div进行样式的控制：<div>新闻内容</div>。虽然这样子是完全可以实现功能，但是在搜索引擎眼中并不认为这个就是一个正文内容而是代码之类的，所以我们在写这个的时候记住合理使用p标签，如上面的新闻内容应该写为：<div><p>新闻内容</p></div>。在我们合理使用标签的时候一方面可以让人感觉到你是用心来做这个网页的排版，更重要的是让这个网站后期的优化事半功倍。下面给大家总结一下自己感觉上要加的标签：

h1：一个网页的主题，在一个页面里面只能出现一个。权重仅次于网站标题，所以尽量单纯把自己网站的主关键词放在里面。如果关键词包在一个句子里面如这篇文章的标题，我们可以写成如下：

<p>说说彭健自己对</p>

<h1>网页排版</h1>

<p>的时候要注意的一些事情</p>。

h2-h3：在网页里面一般使用到h3就足够了，后面的h4-h6一般都不会再使用。这些两个标签我们需要合理安排，h2表示一个页面里面的栏目，h3表示在这个栏目里面的子栏目或者文章。

p：p标签为段落标签，我们也可以说他是内容标签。这个标签里面的才是真正的内容。

alt：搜索引擎是不会看图片的，我们必须要为他说明这个图片表示的是什么，所以我们注意在每一张图片上为他说明。

title：这个标签是用在a标签里面的，一般很少人使用。但是我们要兼顾搜索引擎的优化所以我们必须要注意给搜索引擎一个简单精准的说明，例如说一篇文章标题是“说说彭健自己对网站排版的时候要注意的一些事情”。然后我们的代码应该写成

<a title=”网页排版注意事项” href=”">说说彭健自己对网站排版的时候要注意的一些事情</a>。

把最精准简短能够说明这条标题的意思写下即可。

nane：这个标签相信没几个人会注意到。这个名字标签可以说是直接跟搜索引擎说话的标签。他也是用在a里面，他是告诉搜索引擎，进入这个超链接里面是什么东西。就如上面的标题我们可以写成：

<a name=”网页排版注意事项” title=”网页排版注意事项” href=”">说说彭健自己对网站排版的时候要注意的一些事情</a>。

strong：这个是重要标签，这个的样子跟b标签一样。很多做seo而不懂代码的人他们知道每一篇文章要把重要的关键词加粗，但是他们总是以为这个加粗是b标签。其实这个加粗是strong标签。我们可以帮我们网页的重要关键词加上这个标签，然后在css里面设置他跟普通的字一样，在正常浏览的时候并不会有什么影响，但是其实他已经优化了。

三、代码的层次感和规划让你代码看上去更加舒服

在我彭健自己写代码的时候是非常注意这一方面的事情，因为一个页面做出来可以给客户看得舒服也能给自己看得舒服。我自己比较喜欢使用同级换行，下级换行退格的方法。例如一个网页的头部可以分为上部分和导航条部分，然后上部分分为左右。我们可以和容易看出，上下部分这两个div是同级的，而左右的div是下级的，代码如下：

<div class="head_1">      

<div class="head_1_left"></div>      

<div class="head_1_right"></div>

</div>

<div class="head_2"></div>

至于规划这一方面就是css的代码放到css文件里面，js代码放到js代码里面，而不实用嵌入式和捆绑式的书写方法。

四、排版的时候要注意到后台的调用

我们在排版一个页面的时候，我们使用无数个样式一个一个规定每一个div或者li的样式都是可以的，效果看上去也是一样但是这样是成功的代码那？我们知道做出来的页面并非这样就放上网站上面运行，而是把页面做成模版加入后台调用标签进行调用。例如一个文章列表（ul）里面的非常多个文章题目（li）。我们知道每一个文章题目都是从后台调用出来的，所以这些li是需要循环使用，如果我们每一个li都有一个不同的class的话，相信这个循环调用是让程序员非常头痛的事情。所以在我们做这个的时候尽量使用统一样式。如果导航条的每个项目有一条竖线隔开的情况，我们一般把这条竖线放到每个li的左边，然后给第一个首页的li加一个样式把这条竖线去掉，因为这样就可以顺利让后面的栏目进行后台调用。而首页是每一个网站都需要的所以这个做成静态也没有关系。

而我们网页上面的图片也有两种，一个是样式图片一个是数据图片。样式图片指的是不需要变动的如导航条背景（我们平时在浏览器上无法保存下来的）他是存放在css里面的，数据图片是可以随时变动的，他是从后台调用出来的如商品缩略图（我们平时在浏览器上可以保存下来的）。在我们写代码的时候要明确分辨这些图片属于哪一种，这样才能更加专业的把一个页面排版出来。而关于logo这个有些人喜欢放在css里面有些人喜欢放在html里面，这个就根据自己需要了。

五、网页图片大小

我们做好一个网页有时有不同人做出来的大小都不一样，然而这个我们需要怎么解决呢？例如一个网页的导航条，如果是一个春色导航条，我们在排版上有3种做法。

1、把设计图上整整一块导航条切图下来做背景。

2、切一个像素进行平铺。

3、直接使用颜色做背景。

这三种做法效果都是一样，但最节省地方是第三种。所以我们可以明白到做一个网页能把效果做出来并且做得最小的才是最好的。所以我们要注意：能用颜色的用颜色，不能用颜色的用平铺的用平铺，最后才考虑用图片。

有时候一张图片并不是单纯一个地方用到而是多个地方用到，所以我们就要注意到，把这个图片应用到多个地方而不是每一个地方都要切一块图片。最后我们在切图的时候也要注意到一项，并不是一个图片大片切下来就可以，我们必须要精准切到最边，尽量把图片的大小缩小到最小。

编后语

上面的一些总结是笔者自己在网页的排版中一步一步总结出来的。当我们去做一个网页前端工程师的时候，你单纯懂得代码是可以，但是当我们要做一个兼顾网站运营的网页前端工程师的时候，我们还必须兼顾到程序员看到你的排版的感受和网站对搜索引擎优化的难易。希望大家看完这一片文章能够回复一两话算给彭健一个支持哦，写这么长文章不容易。想了解更多关于笔者在网站运营中得到的经验吗？