掌握网站切图规范需要了解哪些技巧

会写网页的人有很多，但并不是每个人都是优秀的前端工程师。想要成为一名优秀的前端工程师，必须具备网站的用户体验的优化，其中包括网页打设计和实现。

作为UI设计师，过完稿和开发对接时，需要标注设计稿和切图，把标注切图文件给到开发。这个时候就犯难了，那么多尺寸怎么切图呢?

网页切图如何进行?专业网站制作切图规范都有哪些?

在网站制作中我们经常会听到定稿后我们就好进行切图了，那么切图到底是一个什么样子的工作，让我们专业的前端工程师告诉您。

切图是网站制作过程中的一个专业术语、是前端工程师必备的一个基础技能，切图是将设计文稿转化为HTML的过程。

在网站制作的过程中，网页切图是指讲设计好的pSD文稿转化成html的工作，利用p+CSS将设计文稿以网页的形式表现出来，网页切图的切指的是将设计文稿中的图片根据布局的需要，利用photoshop的切片工具将图像在文稿中分离出来，配合p+CSS完成静态页面的制作。

规范一，文件规范。

1、html,css,js,images均归档至系统开发目录中。

2、Html文件命名为英文命名，后缀为.htm。同时将对应界面放入同一目录中，如果命名稿为中文，就需要重新命名与htm同文件。以便后端添加和功能查找。

3、CSS，js命名也是如此。

id和class应该如何起名？

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

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

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

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

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里面设置他跟普通的字一样，在正常浏览的时候并不会有什么影响，但是其实他已经优化了。

上面的一些总结是笔者自己在网页的排版中一步一步总结出来的。当我们去做一个网页前端工程师的时候，你单纯懂得代码是可以，但是当我们要做一个兼顾网站运营的网页前端工程师的时候，我们还必须兼顾到程序员看到你的排版的感受和网站对搜索引擎优化的难易。

本文名称：掌握网站切图规范需要了解哪些技巧
网站链接：/news44/181394.html

成都网站建设公司_创新互联，为您提供小程序开发、营销型网站建设、虚拟主机、网站设计公司、企业网站制作、网站制作

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联