sina.com.cn是我们中国人很熟悉的一个门户网站,它的网页设计很有自己的特色和风格,我们不妨对它进行一番剖析,从中可以吸取不少的东东.
1.艺术设计部分
评价角度：视觉舒适性和实用性
评价内容：首页布局
要对新浪这样一个背负着种种名声的著名门户网站作一个评价，着实是不太容易。
我们努力放下对新浪的种种认识上的影响，仅仅从审美和实用角度来谈一下目前的新浪主页吧。
毋庸置疑，新浪是典型的实用主义风格占了主导地位，从页面上的分割上可以很明确地感到这一点。
除了左侧的要目提示和顶端的导航条使用了新浪的标志性黄色以外，其他的板块就没有使用很抢眼的色彩，整体风格明朗化，给人实在的感觉。甚至在图片处理上也尽量简化，以保持浏览速度：除了边角修饰的小图片外，其他点缀的小图片小到仅仅维持你可以看清楚的地步。（除去非网站本身内容图片，图片载入量仅仅14K。唯一可能影响你浏览速度的，可能就是页面中那些面积不俗的广告了。新浪沿用了传统媒体的一个词“通栏广告”）
虽然这个页面是为800*600的分辨率做的，可是实际显示时，在浏览器底端还是出现了左右滚动条，可能和那些浮动的广告动画有关
为了保持刷新，右侧的要点新闻栏目做了一定限制，以致于出现了下面好像归属不明的栏目框。（有些挑剔了）
好了，我们来仔细研究一下色彩方面的问题，这是我觉得目前这个首页唯一值得大推敲的地方。（其它部分受太多功能限制，已经没有多少手脚可动了）
首先看看现在使用的色彩表：
■ #ffffff white
■ #eeeeee
■ #cccccc
■ #c2c2c3
■ #939598
■ #aa9f8b
■ #848285
■ #808080 gray
■ #5d5d5d
■ #000000 black
■ #00007f
■ #000084 darkblue
■ #0000ff blue
■ #65038e
■ #A30909
■ #B60000
■ #ff0000 red
■ #FBFCD5
■ #fefa01
■ #FEFA01
■ #ffcf5b
■ #ffcf60
■ #FFBD29
很显然，这个色彩表是精心策划过的：完整的灰度层次，黄色主色调分布，第一辅助色红和第二辅助色兰，还包括中间的一个补色深紫。尤其漂亮的是灰色系列中有一个黄灰色，其实是由灰度条和主色混合出的。个别灰色还在兰色成分上动了手脚。
这么好的一个调色板，自然不会产生出太糟糕的画面。但是，如果我们苛刻一点，整个页面色彩分布还是可以有些改进。
2.用户界面部分
评价角度：普通用户
评价内容：用户界面
点击www.sina.com.cn,你马上会被扑面而来的广告闪花了眼，甚至是有越来越严重的趋势，可这不妨碍我们来的目的，我要看新闻，是的，这就是新浪，一个以经营信息为主的网站，下面我们来分析一下新浪的用户界面吧。
1、清晰的导航栏
这是个信息量巨大的网站，如何使它们有条不紊的摆放在用户面前，显然新浪在这方面下足了功夫。把众多信息通过合理的安排，分门别类，且有侧重点之分，无论浏览网页的是什么人，都能很容易在这页面找到他感兴趣的元素，他们的版面格局非常清晰，一目了然。
2、信息多元化
新浪最成功的信息无疑就是新闻这块，最新消息的版面约占据一个视屏的近三分之一。点进去24小时滚动新闻更把他们的优势体现得淋漓尽致。
整个版面除了信息还是信息，把最新最快最流行的事物摆在你面前，让你有选择性的了解当今社会发生什么事？流行什么？以及商家现在进行什么样的竞争？从每小段的文字背后你都可以点开一片天去。
3、良好的双向交流
一个好的门户网站不仅要耐看实用还要有亲和力，具有人性化的一面。新浪这方面也做了不少尝试，首先论坛和聊天室是少不了的，并为用户提供免费邮箱，当然现在也推出了收费的邮箱，这也是必然的发展趋势。让人充分感到言论自由的是在哪呢？体现在每则新闻下面都有发表评论这设置。你有什么想法及念头都可以一吐为快，想必有不少人乐于此道。
4、快速搜索
搜索引擎也是新浪的重头戏，他们把新浪搜索位置放在用户最佳的视觉角度。让你不能无视它的存在。希望你能多多的使用他找到你所需的资料。我也曾顺手搜索了一些资料，有点不经意的搜索，一般来讲速度还行，但感觉这已不是他们的强项了，也许和网站经营者最初的用意有点背道而弛。
5、网站的连贯性
新浪的的整体把握比较好，一个网页转换到另一个网页，没什么很跳跃式的反差，感觉舒服。统一的标识是必不可少的，版面也很清晰，容易识别。
6、广告
我不知道新浪的广告可不可以算新浪的一种特色。人们对广告有种下意识的拒绝和反感，我也不例外，也无从考证他们的广告收入占赢利的多大比重？但是可以看得出绝对不是小数。他们这方面倒也用心良苦，除了采用固定的广告位，和浮动的广告图标方式甚至采用整屏显示广告然后自动伸缩，略带强制性的，这点我比较反感。不过可以看出现在广告的形式、制作、及创意的水准越来越高。有时看着可爱的小图标我也会忍不住点一两下，不过总的来说我还是讨厌广告。
综合阐述：新浪从设计的角度讲，看似直白，但是非常的合理，给用户最直接的信息，开门见山似的表白是他的设计原则，在这原则上潜移默化地灌入了他们的标识和整体的形象加深了用户的印象，黄色的基调和具有亲和力标志深入人心。丰富的信息、强大的交互功能、人性化的设计理念是新浪成为国内顶级门户站点坚实基础。凡上网者极少有不知新浪网的，从这点上看，新浪网在用户角度可以说是个成功的典范。
这就是我眼中的新浪。一个能帮助你找到所需的信息及带给你信息的网站。
3.代码部分
剖析角度：代码设计
剖析对象：Sina.com.cn首页
1，HTML部分
这部分比较简单，主要是为了保证下载的速度，sina不是采用一个大的表格嵌套，而是采用大表化小，
在纵向分成了7部分。
1.1，通用圆角
2，CSS部分
可以提一提的是一个常识问题，就是A:link,A:visited,A:active,A:hover，这个定义顺序是正确的。
另外可以定义不同的连接效果，A.a01:link，A.a01:visited ，A.a01:active ，A.a01:hover等等
3，javascri pt部分
3.1，层的相对定位
<STYLE>
#chang2down {
LEFT: 0px; POSITION: relative; TOP: 0px
}
#chang2down1 {
HEIGHT: 180px;
LEFT: 100px;
POSITION: absolute;
TOP: 0px;
VISIBILITY: hidden;
WIDTH: 100px;
zindex: 0
}
</STYLE>
...
<DIV id=chang2down>
<DIV id=chang2down1>
<A href="###" onmouseout=chang2out(); onmouseover=chang2over(); target=_blank>
<IMG border=0 height=160 src="mtbig.gif" width=160>
</A>
</DIV>
</DIV>
...
<SCRIPT>
ns4=(document.layers)?true:false;
ie4=(document.all)?true:false;
var chang2time=0;
function chang2over()
{
if(ns4){
document.chang2down.document.chang2down1.visibility="show";
}else if(ie4)
{
chang2down1.style.top=-55;
chang2down1.style.visibility="visible";
}
chang2time=setTimeout("chang2out()",3000);
}
function chang2out()
{
clearTimeout(chang2time);
if(ns4){
document.chang2down.document.chang2down1.visibility="hide";
}else if(ie4) chang2down1.style.visibility="hidden";
}
</SCRIPT>
3.2，左右定位广告
这种跟随滚动的广告，应用比较普遍，Sina照顾了IE和Netscape两种浏览器，主要的兼容特性分析如下：
检测浏览器类型document.ns = navigator.appName == "Netscape"
window.screen.width取得屏幕分辨率
Netscape中:
<layer id=xx></layer>
pageX,pageY分别是层的左、上坐标
pageYOffset是浏览器的纵向滚动量
pageXOffset是浏览器的水平方向滚动量
window.innerHeight就是浏览器窗口的高度
window.innerWidth就是浏览器窗口的宽度
IE中:
<div id=xx></div>
style.left,style.top分别是层的左、上坐标
document.body.scrollTop是浏览器的纵向滚动量
document.body.scrollLeft是浏览器的水平方向滚动量
document.body.offsetHeight就是浏览器窗口的高度
document.body.offsetWidth就是浏览器窗口的宽度
3.3，表单分之提交
<script>
function myset(num){
document.login.mynum.value=num;
if(document.login.mynum.value==2){
document.login.u.name="user";
document.login.psw.name="pass";
if(document.login.psw.value!=""){
document.login.action="http://vip.sina.com/cgi-bin/login.cgi";
document.login.submit();
}
if(document.login.psw.value==""){
window.location="http://vip.sina.com/";
}
}
}
function log_submit(){
if(document.login.mynum.value==1){
if(document.login.psw.value!=""){
document.login.action="http://mail.sina.com.cn/cgi-bin/login.cgi";
document.login.submit();
return true;
}
if(document.login.psw.value==""){
window.location="http://mail.sina.com.cn";
return false;
}
}
return false;
}
</script>
3.4，新开窗口，只开一次，表单提交到新窗口
<script>
var newWindow = null
function windowOpener(loadpos)
{
if (! newWindow || newWindow.closed)
{
newWindow = window.open(loadpos,"surveywin","toolbar,resizable,scrollbars,dependent,width=400,height=280");
}else
{
newWindow.focus();
}
}
</script>
<FORM action=http://survey.sina.com.cn/cgi-bin/internal/top/vote method=post onsubmit="windowOpener('')" target=surveywin>
.....【投票】....<br>
<INPUT name=answer type=radio value=1>能<BR>
<INPUT name=answer type=radio value=2>不能<BR>
<INPUT name=answer type=radio value=3>说不清<BR>
<INPUT name=id type=hidden value=382>
<INPUT name=inv_type type=hidden value=1>
<INPUT type=submit value=提交>
<INPUT onclick="windowOpener('http://survey.sina.com.cn/internal/top/html/382_r.html')" type=button value=查看>
</FORM>
=============================
不足之处：代码都是想到写到，css没有采用外联，还分成了两个部分书写，java script也是很分散，不便于维护，
其实一个很好的代码书写格式也是一个很好的素养。
=============================
以上这些是个从事网页设计多年的高手对新浪网的分析结论,很有参考价值和学习价值.
作为一个门户网站，应该同时考虑三方面：一、下载速度；二、易读性；三、美观。
新浪的第一个特点：很整齐。从横向来看，无论你拖到那一屏，都可以看到整齐的表格（有些地方为了对齐，宁愿让上面的部分留空）。这样做的好处，一来美观，二来可以使整个页面由数个大表格上下排列而成。浏览器读取标识是需要读完整一对标识的，所以为什么有些门户网站打开很慢的原因，在于它整个页面是由一个大表格构成，这对Netsacpe来说，简直是个灾难。
新浪的第二个特点：还是整齐。这个整齐是指内容上的标题。读者可以发觉，新浪的新闻或推荐的标题文字数是整齐的，相差最多是几个字，不会出现大差距，更不会出现换行现象。这方面对编辑的要求很严格。新浪首页基本是程序生成的，所以，要页面的美观，不仅仅是设计师、程序员的事，还要编辑的配合。
新浪的第三个特点：易读性。导航版块很清晰，而且邮箱等内容置于顶上，横向排列。这是经过几次改版后进化的。重要的东西，必须在第一屏内能看见，必须在第一时间内下载出来。
新浪的第四个特点：广告位开拓得很多。广告收入是门户网站的生存的一部份来源。所以广告一定要要做的，而且要做得显眼，而读者又不反感。我曾经研究开发过广告形式，我半年前就统计分析过，468*60的banner点击率是最低的，所以一些门户网站在首页就抛弃了这种广告，或拆分或扩大以flash来实现，而新浪也抛弃了该广告，用弹出式广告和更大尺寸的flash形式广告。这样，使页面看起来更生动美观，而且广告收入会翻倍。
至于色彩等，每个大公司都有一套自己的CI，都有自己的形象顾问公司，这个就没什么好说的了。
