网站设计：网页宽度和高度设置参考建议

由于前几天博客改版更换系统，所以就想到这个网页宽度和高度设置问题，今天特别就这个问题查了一下，并且仔细看了下天缘博客的统计报表，还是有些新的发现，经过本文整理，思路才更加清晰，庆幸天缘的一直坚持是正确的。本文我们共同了解一下几个国内国外大型网站户的网页宽度和高度设置情况，然后结合天缘博客的访客用户分辨率统计，谈几点个人看法，希望对你有所帮助。

一、如何设置网页宽度

天缘看到有些网友是通过搜索”如何设置网页宽度“进来的，所以完善一下网页宽度的设置方法，现在设计网页一般都是使用div标签等作为整个页面的BOX，而很少使用table，所以就以天缘博客的首页宽度设置作为例子，大家只需要按照这个格式设置即可。下面的例子是典型的三段论，头中底，当然也可以采用一个BOX来包容其它三个部分进行宽度约束，宽度指定方式是使用CSS，只需要把下面分割线之间部分拷贝出去，然后存成一个test.html文件放到测试服务器上即可看到效果。

--------------------------------------------------------------------------------------------
<html>

<head>

body{margin:0;padding:0;background-color:#999;}

.divTop {width:960px;/*这里指定网页头部宽度*/height:130px; background-color:#FF0000;clear:both;}

.divMid {width:960px;/*这里指定网页中部宽度*/height:300px; background-color:#00FF00;clear:both;}

.divBottom {width:960px;/*这里指定网页底部宽度*/height:50px; background-color:#0000FF;clear:both;}
</style>

</head>

<body>

</body>

</html>

--------------------------------------------------------------------------------------------

二、网页宽度的设置参考

先看一下国内国外的几个知名网站的网页宽度设置：

编号	网站名	网页宽度	备注
1	网易	960px	均指首页，下同
2	新浪	950px
3	腾讯	910px
4	TOM	960px
5	凤凰网	950px
6	MICROSOFT	935px	国外网站
7	BBC	995px
8	AOL	978px
9	CNN	980px
10	Reuters	960px

从上表可以看出，几乎所有的大型网站都是采用比较保守的网页宽度设计，目前且都已不再考虑800*600分辨率的用户的全屏浏览问题，目前网页宽度设置的主流标准仍然是950/960/980像素宽度，最大980像素也大都是国外网站，可能老外比较富裕，显示器都比较好，国内落后一点：），天缘博客采用的是960px网页宽度。

天缘的观点，似乎950/960的宽度看其来会更舒服一点，虽然980px在1024*768上也不会出现水平滚动条，但毕竟占满屏幕太过（1024px屏幕-15px垂直滚动条=1009px，1009px-980px=29px，29/2大约一个汉字的宽度，所以980px几乎占满了水平分辨率为1024px的屏幕）。1024*768估计是大部分网站的终极关注用户，因为再宽的网页宽度除非特别需要，比如游戏页面、FLASH等等，内容性的网站将会像张报纸，如果分隔不好会严重影响阅读体验。

下表是天缘博客的自开博以来的访客计算机分辨率统计表，由于统计功能不大好用，无法抓图，只能手算了一下大概情况：

编号	分辨率	百分比	备注
1	1024×768	22.1%	17#普屏居多
2	1280×800	21.9%	14#/15#宽屏居多
3	1440×900	14.6%	宽屏居多
4	1280×1024	8.5%	普屏居多
5	1366×768	8.2%	宽屏居多
6	1680×1050	6.3%	宽屏居多
7	1920×1080	2.9%	宽屏居多
8	1600×900	1.5%	宽屏居多
9	1280×768	1.4%	宽屏居多
10	1152×864	1.4%	普屏居多

从上表可以看出：800*600分辨率用户的确已经很少，并且1024*768分辨率用户占有率也在呈现快速衰退趋势（需结合早前数据，表中未列出），1280×800和1440×900很快将成为主流，不过，虽然屏幕的分辨率已呈上升趋势，但是网页宽度设置确没有大的改变，估计以后再宽也宽不到哪里去，应该不可能跟进着屏幕宽度设计，让用户左右摆头阅读的。

三、网页高度的设置参考

再来看一下网页高度的设置问题，提到高度似乎全世界只有中文网页就像是老太太的裹脚布，一个比一个长，很多时候天缘都感觉自己的博客够长的，可要是跟网易、新浪比，真是小巫见大巫。下面的缩略图是天缘按照实际长度的5%缩比结果图，其中新浪的网页高度接近5200px......

虽然网页高度设置没有限制，而且如果设计的合理，也基本不会影响用户对首要内容的阅读，毕竟大部分用户只看第一面内容，但更多内容的载入无疑是对带宽的浪费，也不环保，我们的几大门户每天要排放多少吨（W？）二氧化碳，似乎也没人关心这个问题。依天缘的观点还是首页内容还是不要太长，尤其是个人网站、博客，首页文章列表不必太多，该说的话说完就可以了，真正的用户不会关心网页有多长，除非你是在研究他的网站，比如天缘。

更多文章：

网页图片宽度和高度自适应的方法汇总

网页语言ASP.NET、PHP、JSP的特性区别及选择建议

边栏改版：网站博客边栏是右侧好还是左侧好

宽屏液晶显示器尺寸及功耗介绍

选购向导：液晶面板的技术类型比较