电脑技术学习

[原创]Yahoo的WEB标准里程

dn001

首先我们来看一下什么是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>