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

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

咨询电话:13608843679
点击统计:110  发布时间: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开发

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

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

● 2017服装行业怎么跟互联网结合,服装行业互联网发展趋势分析
点击统计:56 发布时间:2018-11-01 04:21:19

       有经济学家预测:2015—2017年,是经济困难的冬天。在过去一年里,就服装行业而言,运动品牌、男装企业“关店潮”风波不断,市场呈现出一片萧瑟。然而2015年却也是传统服装零售企业改变大的一年,一系列互联网名词随之而起,“互联网+”、“互联网4.0”、“上门服务”等等。  在刚刚过去的上海CHIC展服装论坛上,企业家们对过去的2015年,也有自己的看法:  歌力思董事长夏国新表示,移动互联的来临,对企业组织发展产生了巨大影

● 怎么判断关键词是否堆砌
点击统计:56 发布时间:2018-10-30 10:18:17

 关键词堆砌(keyword stuffing) 在网页中大量堆砌关键词,希望提高关键词密度,提高网页针对关键词的相关度。关键词堆砌可以在很多地方,比如在用户可以看到的文字本身中,也可能是在标题标签Title Tag,关键词标签,说明标签中。随着搜索引擎算法的改进,关键词密度已经不是一个重要的因素。  什么是关键词堆砌:   关键字堆砌是黑帽seo方法中的一种,英文称Keword Stuffing,通过在网页中大量重复关键词,提高关键词的密度,达到提高关键词排名的效果。这类网页看起来更

● 近期对百度判罚问题一些汇总
点击统计:56 发布时间:2018-10-28 23:32:21

  Q:网站被镜像,是否会引起百度判罚?  A:被镜像站点不会被百度判罚;百度有策略识别并判罚镜像站点。  Q:有人给我的网站做大量垃圾外链&黑链,是否会引起百度判罚?  A:百度会自动过滤垃圾外链&黑链,一般不会有影响  Q:有人大量采集我的网站,是否会引起百度判罚我的网站?  A:不会,站点可使用链接提交工具时间提交网站数据,便于百度更快识别原创内容  Q:别人攻击我的网站,是否会引起百度判罚?  A:如果造成网站无法访问等影响用户的情况,会影响到在百度的展现  Q:安装36

● 如何精准的回去用户的点击行为,用户行为分析数据
点击统计:56 发布时间:2018-10-27 20:22:29

用户行为分析主要的是先确定目标对着满屏的数据,来做用户行为分析,是不是茫然不知所措?做用户行为分析先要确定你的目标。目标是降低成本(比如做渠道分析,优化渠道),增加收入(比如分析下单转化率、付款转化率、商品列表页跳出率),还是优化用户体验(比如注册流失率、页跳出率)?然后针对你的目的再去做用户行为分析,在此过程中,特别需要注意的是要对用户进行分类,可以根据性别、年龄、职业、收入等人口统计变量,或者行为操作习惯等。分类,分目的的去进行行为分析。在用户行为分析中,我关心的3件事1、用户从哪里来2、用

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

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

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

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

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

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

● 企业网站优化文章怎么写?易百讯提醒您这些问题要弄明白!点击统计:56 发布时间:2018-10-07 13:28:44

  在易百讯看来,企业网站的文章占据份量越来越重。易百讯分析认为,这是由两个原因导致的。  其一,百度等搜索技术引起的。谷歌搜索排名一直在追求接近自然排名,但是百度搜索技术“倾向性”较为明显,从百度出现之后,百度的算法就对网站文字较为看重。企业为了获得更好的搜索排名,相应地,较为看重企业网站上的文章。  其二,国人对资讯获取有较重的偏好。环视一下今天的互联网,内容产品均受到热捧,有着庞大的用户,如抖音、微信、直播、今日头条等等,包括百度和企业网站,为了跟上这一变化,加大了企业网站文章的

● 集团网站建设的时候要考虑哪些方面点击统计:56 发布时间:2018-10-04 03:09:22

  大型的集团在网络建站的时候通常会涉及到更多、更复杂的内容,在范围上更加的广泛,因此在定位的时候也容易出现偏差的情况,因此集团网站在建设的时候要有更加系统的规划,否则容易导致一些错误的产生,那么,集团网站建设包含哪些方面?  1、网站定位  对于一个大型集团来说在建站的时候一定要实现定位,这个是非常重要的,因为船大了不好掉头,如果最开始的时候没有做好定位的话在后期要是想改就不好处理了,在定位的时候需要确定好网站的主题风格、设计方向等等。  2、需求分析  我们在建设网站的时候都是需要
返回首页
返回首页
拨打电话
拨打电话
短信咨询
短信咨询