文档章节

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

daniel-john
 daniel-john
发布于 2014/10/09 13:48
字数 1682
阅读 199
收藏 18

.总体要求

 

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
【原创】响应式设计之移动端调试工具

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

Mr.Zheng
2013/07/02
0
0
前端性能优化和规范

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

吞吞吐吐的
2017/09/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Bash常用内置变量介绍

Bash常用内置变量介绍 Bash中有很多内置变量,这些变量不仅影响Bash的相关行为,也大大的方便了用户的常见操作。**Bash内置变量大体上包括两类,一类是传统Shell所具备的,另一类就是Bash所特...

小陶小陶
21分钟前
0
0
05-《深度拆解Java虚拟机》之JVM是如何执行方法调用的?(下)

一、问题引入 我们知道,设计模式大量使用了虚方法来实现多态。但是虚方法的性能效率并不高,所以作者就想在此基础上写篇文章,评估每一种设计模式因为虚方法调用而造成的性能开销,并且在文...

飞鱼说编程
41分钟前
2
0
nginx统一入口 多服务出口

nginx配置多ip和端口统一调用入口log_format中$upstream_addr 标识打印转发的url地址配置upstream和locationhttp {include mime.types;default_type application/octet-stream...

GoldenVein
43分钟前
1
0
阿里P9架构师谈:高并发网站的监控系统选型、比较、核心监控指标

在高并发分布式环境下,对于访问量大的业务、接口等,需要及时的监控网站的健康程度,防止网站出现访问缓慢,甚至在特殊情况出现应用服务器雪崩等场景,在高并发场景下网站无法正常访问的情况...

我是你大哥
45分钟前
2
0
华为HiAI 助力苏宁易购,让你尽享完美视觉购物体验!

还在感慨商品照片与实物存在差距,又要退货? 还在抱怨被忽视的图片小细节,影响了生活品质? 想要“买买买”, 又担心海量的商品图片耗光你的流量? 就在近期 搭载HiAI能力的苏宁易购新版上线...

华为终端开放实验室
46分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部