文档章节

网页设计要求和页面代码精简优化

daniel-john
 daniel-john
发布于 2014/10/09 13:48
字数 1682
阅读 198
收藏 18
点赞 0
评论 0

.总体要求

 

1.  网页整体采用div+css代码显示,最好不要用表格,切图切的越小越好。

2.  尽量不让CSS分散在HTML标记里,尽量封装到外部调用文件。

3.  尽量缩减页面大小,一般建议100KB以下,越小越好,但不能小于5KB,最好不超过150K

4.  尽量少用无用的图片和flash,非用不可的话图片大小控制在30K以下。

GIF只限于256种颜色,适合显示质量要求不高或单一色块的图片,jpeg适合显示照片,seoUE来说,适合对图片按钮或网页结构上的图片使用GIF,因为jpeg加载时是逐行显示,GIF是先显示图片轮廓再逐渐清晰内容.

5.  尽量少用JSJS代码全部用外部调用文件封装。

6.  超链接的title属性包含关键字,图片的alt包含关键字.

7.  404错误页面重新制作一个,引导用户继续浏览我们的网站.

8.  单个网页内超链接数目尽量不多于100个超链接.

9.  适当用加粗和heading标签,文字大小,来使页面层次清晰.

10. 版块的标题要包含关键字带链接.

 

.代码精简优化

 

为了要减少服务器负荷,优化传输,加快网页打开速度,要求:减少空白区域,精简CssJavascript. Markup优化

1) 尽可能的除去空白区域

一般而言,空白区域字符(空格、制表符、换行符等)都可以安全删除,但要避免修改pre, textarea, 及受CSS属性中white-space影响的标签。

2) 除去注释

除了在客户端给IEdoctype声明的条件注释外,几乎所有的注释都可以安全去除掉。

3) 使用最短格式的颜色表示

使用颜色时,不要一股脑的使用十六进制或全颜色名称(full color name),要尽可能根据实际情况使用最短格式的颜色表示。比如,一个为#ff0000 的颜色属性可以直接用red

4) 除去无用的标签

有些‘垃圾’markup,比如使用了多次的重复标签或者某些编辑器里用作广告的meta标签,都可以安全地被删除。

5) 除去CSS中的空白区域

相比起(X)HTML来,CSS对于空白区域没有那么敏感,所以除去空白区域便可以极大地减少CSS文件和style样式表区域的大小。

6) 除去CSS注释

如同除去markup代码中的注释一样,由于CSS中的注释对普通的最终用户来说并没有什么实用价值,所以也应该被除去。不过,如果考虑到较低级的浏览器,则在CSS中的style标签中的屏蔽注释信息不可以被除去。

7) 使用最短格式来表示颜色值

HTML一样,CSS颜色也可以用词语或十六进制格式表示。注意,在CSS中这样做的效果会稍微明显一些。主要是因为CSS中支持3位的十六进制色值,例如对白色#ffffff,12 , 34 , 56,我们可以用#fff 来表示。

 

8) CSS的规则进行合并、减少或删除

CSS中的诸如字体大小、字体重量等规则往往可以使用一种单属性字体的速记注释方式来表示。使用得当的话,这个技巧可以让您把如下的规则:

p {font-size: 48px;

   font-family: Arial;

line-height: 64px;

   font-weight: bold;}

改写成下面简短的形式:

 p{font:bold 48px/64px Arial;}

在利用网页设计软件制作网页的时候,经常产生一些默认属性的代码。比如说,左对齐,不添加左对齐,默认也是左对齐,添加了多此一举。

9)清除空格,空语句

空格字符是网页中最常见的垃圾代码,这里说的空格不是"&nbsp,而是在编写的时候直接敲上去的空格。每个空格相当于一个字符,空格很多的话也会占用不少字符。

a.每行代码开始前的空格代码

b.空白行

c.每行结束时的空格代码

空语句是指标签之间没有任何内容的语句。清理这些语句是针对删除后不影响页面正常显示的标签,如<p></p>,<td></td>就不能删除,否则会出现混乱。

10). 一般在首页链接中会出现target="_blank"标签,最好在HEAD中设置<base target="_blank" />,然后把页面中链接的所有target="_blank"去掉.

11). 链接里最好不要写class="",如果一定要定义则在链接的外面,<p class=""><a href="http://blog.163.com/seo_luofeng/blog/xx.htm">内容</p>这种方式来定义,最优化的<a href="http://blog.163.com/seo_luofeng/blog/xx.htm">内容</a>,

12). 面中尽量少用<span>标签,如果要用,用在不重要的位置,比如<span>2010-7-19</span>

13). seo最佳div个数,整个网站只写5DIV :分别是 头部 header 中间main 底部footer,这是3,再把中间分开left right 分开左和右,然后DIV里全部用 DD DT DL UL LI 这些标签 那么我们就用了最少的DIV 来建设我们想要的站 ,但在美化上面肯定有限制。具体操作还得视情况而定.

PS:CSS优化

CSS的优化主要有以下几个方面:

 1.属性设置

 

例如对marginpadding属性设置时,原代码如下:

 

margin:0px 0px 0px 0px

 

优化后的代码如下:

 

margin: 0px;

 

本例中要实现的效果是将对象的外边界设置为0px,两个代码实现效果是一样的

2.使用分组选择器

 

定义选择器样式时,经常会遇到不同选择器内容相同或类似的情况,代码如下:

 

h1 {

                font-size: 18px;

                color: #0000FF;

                text-align: left;

}

h2 {

                font-size: 18px;

                color: #0000FF;

                text-align: left;

}

可以使用分组选择器的方式,将样式相同的选择器放置在一个分组中定义,代码如下:

 

h1,h2 {

                font-size: 18px;

                color: #0000FF;

                text-align: left;

}

3.使用类选择器

 

类选择器的好处是在样式中定义一次后,在HTML代码中,定义可重复应用。所以,

在应用CSS进行网页布局时,除了基本的布局必须用id选择器定义外,其他部分的

样式定义尽量使用类选择器定义,这也是优化CSS的一种方法。


本文转载自:http://blog.163.com/seo_luofeng/blog/static/176575024201011229282895/?suggestedreading&wumii

共有 人打赏支持
daniel-john
粉丝 17
博文 132
码字总数 56017
作品 0
其他
程序员
用DIV+CSS的网页布局对SEO的好处

DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS...

oecp
2011/06/02
0
1
网站优化怎么做?老鸟实战经验交给你

  网站优化怎么做?老鸟实战经验交给你   网站收录,索引量一直不大,排名靠后,有些原创文章也不收录,您是否想过网站本身的优化存在很大问题?中国网页设计根据多年实战经验分享网站优...

时间财富网
2016/11/25
14
1
摘自Smashing Magazine:SVG图编辑、转换和优化的工具与资源

摘要:SVG图的优势在于其能灵活地适应各种大小,同时又能保持图像洁净清晰。这种图片对响应式网页设计来说是完美的,因为用户可以放大图片而不损失图像质量,从无障碍浏览为中心的视点来看是...

众成翻译
2017/12/14
0
0
前端性能优化和规范

Web性能涉及的范围太广,但一般web开发者在程序上线以后很多都曾遇到过性能的问题。普遍表现为页面速度开始急剧变慢,正常访问时间变的很长,或则干脆给你抛出异常错误页面。这里会涉及到很多...

吞吞吐吐的
2017/09/20
0
0
前端性能优化:细说JavaScript的加载与执行

本文主要是从性能优化的角度来探讨JavaScript在加载与执行过程中的优化思路与实践方法,既是细说,文中在涉及原理性的地方,不免会多说几句,还望各位读者保持耐心,仔细理解,请相信,您的耐...

小白师兄
06/19
0
0
【原创】响应式设计之移动端调试工具

背景 2013年是网页设计响应式的一年。所谓响应式网页设计,是由Ethan Marcotte在2010年提出的名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。简单来说就是同一张网页自动适应不同...

Mr.Zheng
2013/07/02
0
0
说走就走的性能优化之旅

雅虎规则 熟悉网站优化的开发者应该都知道,只要提到网页性能优化,就绕不开雅虎军规。优化规则&&原文,仔细阅读这些规则,可以总结到3个方面: Http层面上的优化 减少http请求数,http请求c...

乖小鬼YQ
2017/11/29
0
0
知道吗?9个搜索引擎优化(SEO)最佳实践

  作为网页设计师,搜索引擎优化重要吗?我们知道,网站设计是把屏幕上平淡无奇变成令人愉快的美感,更直观地辨认信息。这也是人与人之间在沟通想法,这样的方式一直在演变。穴居人拥有洞穴...

秋天风景
2014/09/17
0
0
自适应网页设计的方法(手机端良好的访问体验)

昨天中午Google进行了一次在线讲座,讲述自适应网页设计的概念和方法,维护同一个网页代码,即可使网站在多种浏览设备(从桌面电脑显示器到智能手机或其他移动产品设备)上具有更好的阅读体验...

DanielYue
06/29
0
0
自适应网站设计对百度友好的关键

自适应网站设计对百度友好的关键:添加applicable-device标签 现在很多网站都使用了自适应网页设计(Response-Web-Design),以满足庞大的移动端用户群的需要。但是在技术上设计了自适应的网...

English0523
2016/05/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

防火墙实例

3、一个包过滤防火墙实例 环境:redhat9 加载了string time等模块 eth0 接外网──ppp0 eth1 接内网──192.168.0.0/24 #!/bin/sh modprobe ipt_MASQUERADE modprobe ip_conntrack_ftp modp...

李超小牛子
2分钟前
0
0
TensorFlow 作用域与操作符的受限范围

variable_scope 影响变量和操作符 name_scope 只影响操作符 with tf.name_scope(""),使用空字符串将作用域返回到顶层 tf.variable_scope("") 相当于添加一个空层 import tensorflow as tf...

阿豪boy
12分钟前
0
0
Java面试基础篇——第六篇:常见Map类的区别

常见的map类有: HashMap, ConcurrentHashMap (Jdk1.8) , LinkedHashMap, TreeMap, Hashtable。 其中我们最常用的莫过于HashMap, 和并发情况下使用的ConcurrentHashMap了,它们的主要区别就在...

developlee的潇洒人生
14分钟前
0
0
崛起于Springboot2.X之前端模版freemaker(23)

1、配置文件 spring: freemarker: allow-request-override: false cache: true check-template-location: true charset: UTF-8 content-type: text/html ......

木九天
30分钟前
1
0
spring-boot:run启动时,指定spring.profiles.active

Maven启动指定Profile通过-P,如mvn spring-boot:run -Ptest,但这是Maven的Profile。 如果要指定spring-boot的spring.profiles.active,则必须使用mvn spring-boot:run -Drun.profiles=test......

夜黑人模糊灬
32分钟前
0
0
大数据分析挖掘技术学习:Python文本分类

引言 文本分类作为自然语言处理任务之一,被广泛应用于解决各种商业领域的问题。文本分类的目的是将 文本/文档 自动地归类为一种或多种预定义的类别。常见的文本分类应用如下: • 理解社交媒...

加米谷大数据
37分钟前
0
0
istio-0.8 指标监控,prometheus,grafana

配置: https://istio.io/docs/tasks/telemetry/metrics-logs/ https://istio.io/docs/tasks/telemetry/tcp-metrics/ envoy拦截请求>上报mixer>对接prometheus>grafana 效果截图: promethe......

xiaomin0322
38分钟前
0
0
公众号推荐

阿里技术 书籍:《不止代码》

courtzjl
41分钟前
0
0
关于改进工作效率

1.给不同的业务线建立需求群,所有的数据需求都在群里面提。 2.对于特别难搞定的事情,到对应的技术哪去做,有问题随时沟通。 3.定期给工作总结形成方法论。 4.学习新的技术,尝试用新的方法...

Avner
48分钟前
0
0
关于thinkphp 框架开启路径重写,无法获取Authorization Header

今天遇到在thinkphp框架中获取不到header头里边的 Authorization ,后来在.htaccess里面加多一项解决,记录下: <IfModule mod_rewrite.c> Options +FollowSymlinks -Multiviews Rewrite......

殘留回憶
52分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部