网页设计要求和页面代码精简优化
一.总体要求
1. 网页整体采用div+css代码显示，最好不要用表格,切图切的越小越好。
2. 尽量不让CSS分散在HTML标记里，尽量封装到外部调用文件。
3. 尽量缩减页面大小，一般建议100KB以下，越小越好，但不能小于5KB,最好不超过150K。
4. 尽量少用无用的图片和flash,非用不可的话图片大小控制在30K以下。
GIF只限于256种颜色,适合显示质量要求不高或单一色块的图片,jpeg适合显示照片,从seo和UE来说,适合对图片按钮或网页结构上的图片使用GIF,因为jpeg加载时是逐行显示,GIF是先显示图片轮廓再逐渐清晰内容.
5. 尽量少用JS，JS代码全部用外部调用文件封装。
6. 超链接的title属性包含关键字,图片的alt包含关键字.
7. 404错误页面重新制作一个,引导用户继续浏览我们的网站.
8. 单个网页内超链接数目尽量不多于100个超链接.
9. 适当用加粗和heading标签,文字大小,来使页面层次清晰.
10. 版块的标题要包含关键字带链接.
二.代码精简优化
为了要减少服务器负荷,优化传输，加快网页打开速度,要求：减少空白区域，精简Css和Javascript. Markup优化
1) 尽可能的除去空白区域
一般而言，空白区域字符（空格、制表符、换行符等）都可以安全删除，但要避免修改pre, textarea, 及受CSS属性中white-space影响的标签。
2) 除去注释
除了在客户端给IE和doctype声明的条件注释外，几乎所有的注释都可以安全去除掉。
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,1和2同 , 3和4同 , 5和6同,我们可以用#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个数,整个网站只写5个DIV :分别是 头部 header、 中间main、 底部footer,这是3个,再把中间分开left right 分开左和右，然后DIV里全部用 DD DT DL UL LI 这些标签 那么我们就用了最少的DIV 来建设我们想要的站 ，但在美化上面肯定有限制。具体操作还得视情况而定.
PS:CSS优化
对CSS的优化主要有以下几个方面：
1．属性设置
例如对margin、padding属性设置时，原代码如下：
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的一种方法。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
