文档章节

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

daniel-john
 daniel-john
发布于 2014/10/09 13:48
字数 1682
阅读 203
收藏 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
自适应网站设计对百度友好的关键

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

English0523
2016/05/06
0
0
【原创】响应式设计之移动端调试工具

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

Mr.Zheng
2013/07/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Confluence 6 快捷键

快捷键图标。 官方的下载地址为:https://atlassianblog.wpengine.com/wp-content/uploads/2018/01/keyboard-shortcuts-infographics.pdf...

honeymose
今天
3
0
Apache限定目录解析PHP,限制user_agent,PHP相关的配置

Apache限定目录解析PHP 配置前访问upload/index.php [root@test-a ~]# curl -x192.168.77.139:80 'www.test.com/upload/index.php'This is upload diretory 配置,/usr/local/apache2.4/......

野雪球
今天
4
0
java.util.Concurrent.Exchanger源码

类图 源码: package java.util.concurrent;import java.util.concurrent.atomic.AtomicInteger;import java.util.concurrent.atomic.AtomicReference;import java.util.concurrent......

狼王黄师傅
今天
6
0
Kubernetes里的secret最基本的用法

Secret解决了密码、token、密钥等敏感数据的配置问题,使用Secret可以避免把这些敏感数据以明文的形式暴露到镜像或者Pod Spec中。 Secret可以以Volume或者环境变量的方式使用。 使用如下命令...

JerryWang_SAP
昨天
5
0
2018-11-20学习笔记

1. python数据类型: 给变量赋值什么样的值,变量就是什么样的类型 给变量赋值整数,变量就是整数类型 给变量赋值字符串,变量就是字符串类型 123 和“123”一样吗? 在python中 单引号 与双...

laoba
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部