Yahoo的WEB标准里程（上）

来源：网易学院    发表于2005-1-19 10:08:19

　　首先我们来看一下什么是WEB标准：

　　WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。（摘自：网页设计师 www.w3cn.org）

　　通过网易教授Allan的特稿：国外门户开始向WEB标准靠近。为我们拉开了门户网站向WEB标准转变的序幕。在Yahoo全球众多网站中，除Yahoo英文（www.Yahoo.com）已经改为WEB标准外，我们更可以很欣慰的看到，我们亚洲的网站也以大的步伐在向这一网站规范统一的模式靠近——Yahoo韩国。

　　虽然仍采用"<！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd ">"但是整体结构已经采用DIV+CSS实施布局规划了。

　　全新的Yahoo韩国基于WEB标准开发，在保留韩国独有的清新的颜色，与大方的风格外，由于采用WEB标准更是使其在页面加载速度上要更胜一筹。以前有很多朋友讨论过"WEB标准与网页美观"的问题，以为只有结构简单、颜色单一的网站才能使用WEB标准来制作。以上的Yahoo韩国就是最好的教程，你也可以制作出很漂亮的网站，当然同时它也符合WEB标准。

　　采用WEB标准之后，整体代码都有了明显的减少，Yahoo韩国首页纯代码有58K，而Yahoo中国的代码则有87K，如再加上图片广告的下载，页面加载速度恐怕会更慢了。这个是Yahoo的经典页头设计，看看在标准中我们怎样来完成它：

　　Presentation：

<style type="text/css">
#mh{margin：0 auto 12px；width：780px；}#mh img{border：none；}
</style>

　　Structure：

<div><img src="http://img.yahoo.co.kr/home/img/m7v9.gif" width="780" height="52" alt="야후! 코리아" usemap="#m"></div>
<map id="m" name="m">
<area shape="rect" coords="74,0,126,51" href=r/i/ga alt="게임">
<area shape="rect" coords="145,0,197,51" href=r/i/fi alt="금융정보">
<area shape="rect" coords="217,0,269,51" href=r/i/ma alt="메일">
<area shape="rect" coords="512,0,564,51" href=r/i/ki alt="꾸러기">
<area shape="rect" coords="583,0,635,51" href=r/i/mu alt="뮤직">
<area shape="rect" coords="652,0,704,51" href=r/i/bg alt="블로그">
<area shape="rect" coords="716,0,783,28" href=r/i/ho alt="고객센터"></map>

　　除此之外，你还可以看到它简洁易读的代码，这为维护人员提供了很大的方便，看看这个简洁的导航菜单：

<div id="ser">
<p class="et"><img src="http://img.yahoo.co.kr/home/img/ipoll_2.gif"> 설문조사 - <A href=http://kr.rd.yahoo.com/home-props-top/?http://kr.surveys.yahoo.com/retail_shopping_home_nov04 >인터넷 쇼핑 좋아하세요?</a></p>
<p class="ys"><a href="http://kr.rd.yahoo.com/home-props/?http://kr.yahoo.com/sethome.html">야후!를 시작페이지로</a></p>
<h2>야후! 서비스</h2>
<ul class="a">
<li><a href="r/p/ne">뉴스</a>
<li><a href="r/p/sp">스포츠</a>
<li><a href="r/p/we">날씨</a>
<li><a href="r/p/po">포토</a>
</ul>
<ul class="b">
<li><a href="r/p/fi">금융정보</a>
<li><a href="r/p/re">부동산</a>
<li><a href="r/p/bi">창업</a>
<li><a href="r/p/jo">취업</a>
</ul>
<ul class="c">
<li><a href="r/p/sh">쇼핑</a>
<li><a href="r/p/so">소호쇼핑</a>
<li><a href="r/p/gr">공동구매</a>
<li><a href="r/p/lo">로또</a>
</ul>
<ul class="d">
<li><a href="r/p/tr">여행</a>
<li><a href="r/p/at">자동차</a>
<li><a href="r/p/fo">운세</a>
<li><a href="r/p/yp">전화번호</a>
</ul>
<ul class="e">
<li><a href="r/p/ga">게임</a>
<li><a href="r/p/br">VOD</a>
<li><a href="r/p/no">N2O</a>
<li><a href="r/p/cm">만화</a>
</ul>
<ul class="f">
<li><a href="r/p/mi">메일</a>
<li><a href="r/p/ch">채팅</a>
<li><a href="r/p/bl">블로그</a>
<li><a href="r/p/cl">클럽</a>
</ul>
<ul class="g">
<li><a href="r/p/ki">꾸러기</a>
<li><a href="r/p/ed">교육</a>
<li><a href="r/p/ju">대입</a>
<li><a href="r/p/en">백과사전</a>
</ul>
<ul class="h">
<li><a href="r/p/mb"><b>모바일</b></a>
<li><a href="r/p/sms">문자SMS</a>
<li><a href="r/p/pr">폰리뷰</a>
<li><a href="r/p/dc"><img src="http://img.yahoo.co.kr/home/img/bAll.gif" alt="전체보기" class="all"></a>
</ul>
</div>

　　是不是越来越被WEB标准带来的这种简洁的建站思想、简单易读的代码、较高的代码可重复利用律、和它较高的加载速度所吸引呢？

　　先别急，以下是Yahoo全球的部分网站展示，从中你会体会出WEB标准与传统建站的不同。做下对比，更多的是感受网站界面的变化，运用WEB标准的网页是不是结构更紧凑，布局也更合理了呢？好了，不说了，大家慢慢欣赏吧。

　　下一页