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

一.总体要求

 

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的一种方法。

时间: 2024-08-03 08:57:48

网页设计要求和页面代码精简优化的相关文章

基于jquery的页面代码的优化

高亮显示,选中的文字链接 显示效果如下 默认选择“通知公告”效果 通知公告 学院动态 行业动态 选择“学院动态”效果 通知公告 学院动态 行业动态 选择“行业动态”效果 通知公告 学院动态 行业动态 1)html如下 <span class="alxx_text01" id="select1_span">    <a href="#" id="select1">通知公告</a>   <

C#、.Net代码精简优化(空操作符(??)、as、string.IsNullOrEmpty() 、 string.IsNullOrWhiteSpace()、string.Equals()、System.IO.Path 的用法)

一.空操作符(??)在程序中经常会遇到对字符串或是对象判断null的操作,如果为null则给空值或是一个指定的值.通常我们会这样来处理: 1.string name = value; if (name == null) { name = string.Empty; } 2.使用三元操作符(? :)对上面对吗进行优化: string name = value == null ? string.Empty : value; 上面的两种方式 的代码不够简洁,?? 操作符来进行进一步优化,?? 操作符意

使用jquery的trigger方法优化页面代码

我们做页面级联的时候经常会用到ajax处理数据,会为下拉菜单编写change事件. //城市和区域联动 $("#City").change(function () { var cityValue = $("#City").val(); if (cityValue == -1) { return; } $.ajax({ url: "/BI/GetAreaInfo", type: "GET", data: { Id: cityVa

网站安全狗”响应内容保护“网页错误返回页面优化功能介绍

网站安全狗最新版本(主程序版本号:3.2.08157)在“资源保护”模块多了一个功能叫做:响应内容保护.如下图所示: <ignore_js_op> 该模块的主要功能是,当我们访问网站时,不合理的访问,或者网站自身的问题,会出现各种的错误返回页面.从安全的角度上讲,这就可以给攻击者提供判断的依据,为了防止这种情况,网站安全狗对网页错误的返回页面做了优化处理,并将此资源进行了回收利用,加入了百度推广的相关广告信息. <ignore_js_op> 该页面的推广信息为您搜索的相关类似信息.

关于前端代码性能优化问题

以下观点纯属个人看法: 对于一个刚接触前端不久的人来说,前端的代码质量是很重要的一部分,毕竟关系到性能问题.个人认为关于代码性能优化主要由这几方面:HTML.CSS.Javascript和HTTP,所以对这四个方面的优化能提高浏览器的性能.个人知识面有限,只有学到以下的知识,另外的还没涉及,不足之处还请体谅. 一. HTML 1.首先是对HTML5的充分熟悉和理解,理解标签的语义化,减少对标签的重定义. 2.命名的规范化,对id.class.name的规范命名有助于整体代码的构建,方便他人的理解

Html代码seo优化最佳布局实例讲解

搜索引擎对html代码是非常优化的,所以html的优化是做好推广的第一步.一个符合seo规则的代码大体如下界面所示. 1.<!–木庄网络博客–> 这个东西是些页面注释的,可以在这里加我的"木庄网络博客",但过多关键字可能被搜索引擎惩罚! 2.<html> 这个是代码开头 结尾时和</html>对应. 3.<head> 头标记结尾用</head> 4.<title>(木庄网络博客-勤记录 懂分享)</title

META标签之关键词、网页描述设置帮助SEO网站优化(转)

ASP.NET 4.0 Web Forms针对SEO改进措施中有一个是在Page类中加了2个新属性:MetaKeywords 和MetaDescription,它们使得在后台代码类中用编程的手法设置这些值更容易,也更干净. META标签之关键词.网页描述设置能改进所选择关键字的网页相关性,有利于引擎搜索优化工作.例如:<head runat="server"> <title>ASP.NET 4.0教程</title> <meta name=&q

在网页中插入背景音乐代码(html)hK3V

有两种分别用和标签当用插入背景音乐时可以设置宽度和高度为,隐藏播放器.二者的参数如下:■: 是用来插入背景音乐,但只适用于,其参数设定不多.如下 设定档案及路径,可以是相对或绝对.是否在音乐档下载完之后就自动播放.是,否内定.是否自动反复播放.表示重复两次,表示重复多次.■: 是用来插入各种多媒体,式可以是...等等,及新版的都支持.其参数设定较多.如下下 设定档案及路径,可以是相对或绝对.是否在音乐档下载完之后就自动播放.是,否内定.是否自动反复播放.表示重复两次,是,否.是否完全隐藏控制画面

在网页中插入背景音乐代码(html)

有两种 分别用<bgsound>和<embed></embed>标签,当用<embed>插入背景音乐时可以设置宽度和高度为0,隐藏播放器. 二者的参数如下: ■ <bgsound>: <bgsound> 是用来插入背景音乐,但只适用于 IE,其参数设定不多.如下 <bgsound src="your.mid"autostart=true loop=infinite> src="your.mid