云南网站建设 TEL:13608843679 专业的系统开发 您的不二之选 
实战 专业 快速 高效 

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

咨询电话:13608843679
点击统计:127  发布时间:2019-03-01 02:47:23

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


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


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


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


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


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


网站切图需要了解哪些技巧.png



  规范一,文件规范。


  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优化


网站切图需要了解哪些技巧.png



  我们举一个例子,有时候一个新闻内容板块的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里面设置他跟普通的字一样,在正常浏览的时候并不会有什么影响,但是其实他已经优化了。


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

关键词: 网站制作 seo

信息推荐

云南网站建设,云南商城开发,云南微信开发,云南APP开发,昆明网站建设,昆明商城开发,昆明微信开发,昆明APP开发

● 怎么减少网页加载时间-深圳网站建设分享
点击统计:65 发布时间:2018-11-03 16:48:04

       我们曾对用户进行调查,结果显示,网站页面加载时间每延长1秒,就会减少11%的页面浏览量,降低16%的客户满意度,降低7%的转化率。亚马逊也通过调查证实,网页打开的速度每提高100毫秒,能为网站增多1%的收益。类似的证实还有很多,网页打开的速度直接关系到网站的收益,已毋庸置疑。   这就是为什么今天的企业和个人尽其所能来减少网页加载时间的原因。时间就是金钱,对于网站来说,是以微秒来计算的。网页加载时间的大幅加快,也

● 网站常见的bug有哪些,常见的网站BUG
点击统计:65 发布时间:2018-11-03 11:18:02

常见的网站BUG主要为非法登录、SQL注入(这个现在少了),多用户同时登录,多地点登录,信息同步,文件、图片以及音视频的上传下载、乱码、浏览器版本支持、高访问量、网络不通畅时的脚本不能加载等问题,下面则是一些BUG的具体分析:1 页面部分(1)页面清单是否完整(是否已经将所需要的页面全部都列出来了)(2)页面是否显示(在不同分辨率下页面是否存在,有些在1024*768下,就出现查询按钮不可见,在不同浏览器版本中页面是是否显示)(3)页面在窗口中的显示是否正确、美观(在调整浏览器窗口大小时,屏幕刷

● 如何打造高质量页面,如何提升页面权重
点击统计:65 发布时间:2018-10-27 14:58:16

    一个优秀的网站,一般都有好的排名,而要想有好的排名,必须要能提供满足用户需求的高质量的页面。所以,我们在优化网站的时候,打造一个高质理的页面,是重中之重。      在讲如何打造高质理的页面之前,先讲一下哪些是低质量,搜索引擎不喜欢抓取的页面。低质理的页一般表现在以下几个方面。1.采集过来的内容,没有经过加工,直接复制过来的。这样的内容,是不能获得好的排名的。2.伪原创,这些虽然在原有的基础上有所改动,但是还

● 小公司有必要开发自己的微信小程序吗?
点击统计:65 发布时间:2018-10-26 07:12:07

微信小程序是基于Html5+微信原生能力的产品形态,无需下载安装,用户扫一扫或者搜一搜就可以打开应用程序,不占用手机内存,用完可以随时关闭。微信小程序自身的优势:1、微信小程序的页面设计是基于web的,微信不仅提供了微信小程序的开发文档,还提供了更详尽的设计规范、布局时会用到的控件,极大的方便了用户的使用体验。2、微信小程序有更强的缓存能力。微信小程序是微信中的native程序,具有缓存能力,微信小程序的缓存能力,不仅会提高用户的体验,同时也可以加快程序加载运行速度,用户在网速不佳、没有网络的时

● 微信点餐系统开发,给食客更好的用餐服务体验
点击统计:65 发布时间:2018-10-25 21:11:05

微信点餐系统开发是一款基于O2O理念微信开发的外卖点餐系统,拥有用户网上订餐、菜单管理、订单流程管理等功能,同时还有实时短信通知,快捷无线打印,WAP手机版,简单微信点餐等模块,能够轻松帮用户实现开通网上订餐、扩展餐厅业务的愿望。1、微信开发订餐对食客的好处有哪些? 不用排队等候,方便快捷; 可以享受微信订餐折扣; 随时随地订餐,减少等待时间; 体验全新订餐模式; 享受个性化服务。 2、微信点餐系统开发对餐厅的好处有哪些? 节

● 不一样的建站公司为什么建站价格会差很多点击统计:65 发布时间:2018-10-17 13:23:38

  不少客户朋友反映一个问题,那就是为什么不同的网站建设公司报价为什么会差么多,同样要求对方做一个企业营销型网站,一个建站公司报价为5000元,而另一个建站公司报价在10000元以上,那么,到底是什么原因造成了建站价格差距这么大呢?  1、模板建站和定制建站  一些建站公司报的价格很低,不排除是模板建站,因为这种价格是非常低,比较适合一些资金不充足的企业,如果客户一直在强调钱的事情,建站公司会以为客户是比较缺钱,因此报出来了模板建站费用。而客户表现出来对钱不是特别关心,而是关注建站公司

● 建一个网站需要多少钱?点击统计:65 发布时间:2018-10-17 08:25:36

  建网站必然要涉及的一个问题就是价格,很多人都不知道建一个网站究竟需要多少钱,尤其是目前网上提供的网站建设价格高低不一,没有统一价格不说,甚至还有很多要价非常高,其相差数倍的报价,也让很多人感到咂舌。那么,到底建一个网站需要多少钱呢?下面,小编根据多年经验为大家做一个价格参考。  一、经济型网站的建站价格  这类网站往往套用的是原有的模板,一个星期就能建好,速度非常快,所以价格比较低,只要把网站的内容改成你想要的就行,价格一般在五百到两千左右,不是固定的,根据个人的需求以及功能多少来

● 怎么自己制作网页 步骤是什么点击统计:65 发布时间:2018-10-12 23:11:34

  现在在网上自己制作网页,比起以前来说已经是相当轻松了,不仅能够借助各种工具,如果遇到任何困难也可以网上求助,那么自己制作网站的基本步骤是怎样的呢?  一、主题确立  既然是想自己制作一个网站,那么在开始之前心中应该就对网站内容的主题有一个大概的方向。确立网站主题比较重要的,网站主题的选取决定着网页制作的内容方向的把握,主题只要是感兴趣的就行。确定核心的网站主题有利于网站建设,把握一个方向,将其做深做透做精。  二、素材收集  现在互联网普及程度高,网络是现代人信息的主要来源,几乎人

● 如何做好学校网站建设方案 需从这些方面出发点击统计:65 发布时间:2018-10-08 09:27:08

  在这个信息大爆炸的时代,网站建设已经成为了各个行业进行形象展示、报道公布、业务发展的重要途径。毕竟没有谁愿意与时代脱节,这是传统纸媒无法取代的。所以说,学校网站建设方案刻不容缓!  一、明确学校网站的职能与建设意义  学校网站是学校对外的一个平台,就好比我们人类的脸庞一样的重要,只有建立好自己学校的独特风格,才有可能吸引更多的生源,从而获得更大的教育发展。所以,这也是学校网站建设方案里的第一要素。与此同时,学校网站建设更多的是为师生提供交流互动的机会,突破传统课堂的制约。即使天南地

● 哪些原因导致企业网站下线或关闭?点击统计:65 发布时间:2018-10-08 04:26:22

  有网站上线,就有网站下线。只是,无论是用户还是建站公司,对网站上线关注较多,对网站下线关注较少而已。  在深圳建站公司易百讯看来,跟踪企业网站,并且探寻企业网站下线的原因,对建站和运营网站都是有益的,可以指导后续的建站工作和网站运营工作。  易百讯对企业网站下线的原因,进行了一番总结。在易百讯看来,八成的企业网站下线,是因为如下几大原因。  企业倒闭或者撤销的原因  根据相关数据,我国小微企业的平均寿命不超过三年,民营企业的平均寿命不超过七年。企业组织是企业网站的基础,如果企业不存
返回首页
返回首页
拨打电话
拨打电话
短信咨询
短信咨询