谈WEB标准下的网页重构思想

superadmin

上大学的时候，一直认为自己网页学的还挺NB,无论怎么说，好歹俺家师傅课上课下也教过我们Dreamweaver的使用方法，虽然还不能以此为炫耀的资本，但也好让那些专研理论的师友、以及外行的领导好生羡慕，虽然构图、设计不是我的强项，但是我总是会搜到适合我的模板，然后，打开PHOTOSHOP，大手笔，反正是照着原图切空白，有空地处就挖个切片，最后储存成WEB所需格式，OK，接下来的任务就是用DW去增加文字内容了，看，又一幅作品即将诞生……

瞧见么呦，这就是一位网页制作大师的大学作品生产过程哟，哎，可怜的点点水准，也叫网页制作，也叫网页设计？

好在，走出校门之后我终于得到了期盼已久的鄙视，痛定思痛，反复掂量着如何走高手之路，于是乎在数月的积累与学习中，终于偶有心得，便写来于大家分享，虽然此篇实非本人成熟佳作，但也初含近来学习成果，希望于您有所启发。

首先来说，WEB标准不是说某一个标准，而是一系列标准的集合。结构化标准语言XHTML、XML，表现标准CSS，行为标准W3C DOM等，这些标准大部分由W3C组织起草和发布，用于解决WEB设计的统一布局方式。

使用xhtml布局的优点在于，全部的布局设定全部转由CSS（层级样式表）来完成，而CSS的特性就是一次下载随便使用，这样来说，html页面就得到了不少的解脱。另外，WEB标准的使用可以使文件下载与显示速更快，减少更多的代码而使网页容易维护，同这也使得网页变得对搜索引擎更为友好。说到xhtml，就不能不提W3C组织，html标准就是其制定的，但是更为值得讽刺的是，不管Mozilla也好，IE也罢，它们都是W3C的初始成员之一，但是基于此两者的两个浏览器派别确各有自己的标签、属性和解析方式，微软总是喜欢以自己的方式去统一别人，而Mozilla却又号称自己浏览器更安全，所以至今两者尚未完全统一。

虽然，至今为止，也许有的设计师可能仍然忙于针对不同的浏览器设计不同的兼容页面，但是WEB标准的提出就给我们解决兼容性问题提供了一个广阔的前景，使得我们的设计师们也即拥有了我们的选择权力，因为我们只考虑符合WEB标准，这样来说，显然使得那不兼容WEB标准的浏览器发展就处于劣势之中，所以这也使MS不得不宣布IE7会更接近W3C标准。

这样，渐进统一软件标准，可以说是WEB标准的一次重大胜利。

OK，也许听了这么多叙述，你还并不知道这和你的设计与制作有什么关系，下面的几个结论就现阶段各个浏览器尚未完全统一之时你做网页需要注意什么问题，笔者总结了近来工作中的一些结论：

1.一般的网站，一般的要求下，如果要设计出让两种浏览器（不包括Opera）显示都很好的网页，依然还是要使用table布局 。（如果你是制作高手的话，请别相信这句话，还有像我这样的话也可以另当别论，因为我有的是时间和方法去考虑）

2.如果使用居中布局，一定要记得，左右边距要设成auto。否则Mozilla系的浏览器会不认账。

3.过渡和严格标准是有差别的，特别是在Mozilla系列的浏览器中，不过使用严格标准可以让自己的xhtml布局能力得到很大的提高。

4.一个好的网页重构未必要通过W3C的验证，当然，如果能通过W3C的验证还能保证重构的美观效果，那么你已经是一个高手了（目前我只能确保其中一个）。

6.IE系和Mozilla系的盒模型是有差距的，导致相差2px,可以使用!important来解决，这个属性IE不认识，而Firefox可以识别，所以在它之前可以被IE使用，在其之后代码可以使Firefox去识别它。

事实上IE5和IE6之间也是有不一样的，例如width:30px;margim:0 10px 0 10px,IE5解释为div的宽度为280px,而IE6解释为320px。在这里可以使用!important; width/**/;这样的代码来重定义。

7.XHTML1.1是不支持脚本引用中的language属性的，也就是说引用脚本时用language去指定描述语言，XHTML1.1是无法解释的，因此这里需要用type属性指定，例如：type=text/JavaScript。

8.Cursor属性,可以使用pointer使同时在IE和FF中显示游标形状，而使用hand仅仅只有IE可识别。

9.设置padding后，在FF中DIV会增加height和width的值，但是IE中确不会产生，故可用前文所述方法使用!important多设置一行属性。

10.DIV设置margin-left, margin-right为auto时，在FF中已经默认为居中，而在IE中却不可以。

11.在FF中链接增加边框和背景色，需要设置display: block,同时设置float: left,并且保证不换行。

12.请记住这样一些你应该常用的布局标签：<div>、<span>、<ul>、<li>、<h1>、<h2>、<p>而不是这样一些标签<table>、<tr>、<td>。W3C标准没有说不可以使用表格，但是却建议表格作回归其原始化，那就是量化数据输出，而不用于布局。

记住这一十二条结论，虽然它不是最完全、最有效的总结，但是它都是最重要、最常用的技巧，如果你是刚入门的网页制作者，特别是对WEB标准刚有所了解的设计师，那么相信他会对你的制作有所帮助的。

暂且写到这，以后若有更为全面的总结与技巧发现，请您继续关注，作者将持续更新。