闪客帝国的WEB标准网站重构访谈

高大勇
　　网名：边城浪子
　　著名FLASH门户闪客帝国创始人
　　闪客帝国副总经理

　 李超
　　网名：Allan
　　闪客帝国网站运营总监
　　闪客帝国网站技术总监

　　话题背景：2004年10月15日，闪客帝国[http://www.flashempire.com]根据网页标准对自己的网站进行了网站重构，从而成为了首个采用采用WEB标准的大型国内网站，引起业界一阵轰动。三天后，国内权威的程序员网站CSDN[http: //www.csdn.net]也正式推出了采用WEB标准技术从构的新版网站。

　　而在国外，Bloger,ESPN,MACROMEDIA,MP3.COM等，都已经采用采用WEB标准的网站进行了重构。那么究竟什么是WEB标准，他究竟有什么魅力引得国内外那么多的网站对他推崇倍至呢？我们带着这些疑问，对闪客帝国的两位核心技术人员进行了专访。

　　访谈：边城浪子&Allan：采用WEB标准进行网站重构

　　网易学院： 请问你们是怎么想到要用XHTML+CSS2.0技术对闪客帝国进行重新构建的呢？

　　边城浪子： 这次改版已经酝酿了很长时间。在这期间，我们了解了很多的关于W3C标准的知识，闪客帝国的前身就是一个专注于技术的网站，我们觉得在这方面不应该落后。当然也考虑到浏览器友好以及维护的方便，所以，经过谨慎考虑，我们决定采用Web标准来开发下一个版本的闪客帝国。

　　Allan：最开始其实是通过一套来自出版社的未出版的书稿《网站重构》，当时出版社要求给这本书写些文章，后来仔细拜读了一下，发现WEB标准的确是有过人之处，又正逢闪客帝国准备第5次改版，于是开始考虑是否应该用WEB标准来做呢？

　　网易学院： 大概是什么时候开始计划重新构建的？

　　边城浪子： 是在改版正式开始之前。闪客帝国给飞思的《网站重构》写了一点书评。后来就想到，为什么我们这次不马上付诸实践呢？

　　网易学院： 应该说在中国用XHTML+css技术来构建网站还不是很成熟，特别是没有一个这样的后台程序支持，要重构，意味着一整套发布系统都要作出调整，甚至重新编写，是什么让你们下决心花这么大的代价来对闪客帝国进行重构呢？

　　边城浪子： 网站重构是今后很多网站要面临的问题，标准化永远不会是个错误，我们知道我们早晚会走这一步。所以，长痛不如短痛，所以，我们就下定决心了。

　　网易学院： 在重构过程中其他技术人员是什么态度？他们支持重构么？刚开始的时候，他们对于XHTML+CSS2.0技术掌握是什么程度？

　　Allan： 闪客帝国永远是一个求新求变的组织，无论是在论坛网站上还是公司，大家都是非常喜欢新技术的。个人认为XHTML+CSS2.0来说技术难度并不大，所以所有人都能很快进入角色。

　　网易学院： 我们了解到，在网站重构的过程中，遇到的技术问题是不少的，你们是怎么解决这些技术问题的呢？

　　边城浪子： 我们互相交流，不断测试，并且订阅了不少CSS邮件列表。更多的时候是查询google，还有就是参考人家已经做好的站点，比如：macromedia.com。

　　网易学院： 能列举一些BUG的解决办法么？

　　Allan：在使用的过程中，XHTML+CSS2.0式的页面结构在Mozilla下几乎没有出现过任何BUG，主要是在IE5和IE5.5中。因为这二种浏览器对标准支持得不是很好，因此出现不少问题，我总结以下主要有以下几点

　　盒模形问题 http://allan.flashempire.net/blog/archi ... 8/152.aspx
　　IE6捉迷藏BUG http://www.positioniseverything.net/exp ... kaboo.html
　　DIV互嵌的各种问题
　　http://allan.flashempire.net/blog/archive/2004/09/28/152.aspx
　　UL标签使用CSS控制在各种浏览器下表现不同的问题主要通过针对不同浏览器使用不同的CSS来解决，关于分别对待的方法参见Hide方法　　　　http://www.w3development.de/css/hide_css_from_browsers/summary
　　IE5下DIV套A的一个不知名BUG http://allan.flashempire.net/blog/archi ... 0/189.aspx
　　网易学院：采用XHTML+CSS重构后有什么明显的变化(优势)

　　Allan：（1）网站页面文件体积小了许多，可能就CSS大了一点。但很多界面共用，所以相对来说非常小。整个网站的页面平均只有以前的2/3。
　　（2）浏览器解析也比较快，虽然当时感觉DIV多层嵌套也需要嵌套解析，但是还是比表格布局的要快。
　　（3）再一个就是调整还算方便，一般一种类型的风格通过改CSS就能全面改动.
　　（４）还有一个明显的变化是写程序更方便了，由于XHTML担当的角色只有组织内容，因此程序员不需要拿CSS，只需要拿XHTML页面就能直接套程序，不分担心各种表格循环中需要判断

不错，很多经验分享，谢谢

好帖，学习。

长见识了，支持，呵。

唉，刚刚检测了一下，已经无法通过XHTML验证了。
    * Line 162, character 151:

... ="120" height="80" alt="
                                 ^

      Error: 986036 is not a character number in the document character set
    * Line 162, character 158:

... height="80" alt="
                                 ^

      Error: end tag for img omitted; end tags are required in XML for non-empty elements; empty elements require an end tag or the start tag must end with />
    * Line 162, character 65:

... "/theater/play.php?id=7473" ><img src="theater/flash/2004-12 ...
                                 ^

      start tag was here
    * Line 163, character 63:

... ay.php?id=7473"  title=" ...
                                 ^

      Error: 986036 is not a character number in the document character set
    * Line 163, character 80:

... title="
                                 ^

      Error: 986036 is not a character number in the document character set
    * Line 401, character 72:

... 2; ...
                                 ^

      Error: 203573 is not a character number in the document character set
    * Line 562, character 119:

...  > ...
                                 ^

      Error: 1034659 is not a character number in the document character set
    * Line 562, character 135:

      Error: 1034913 is not a character number in the document character set
    * Line 564, character 129:

... >
                                 ^

      Error: 743792 is not a character number in the document character set
    * Line 850, character 41:

... tp://www.tinaflash.com">
                                 ^

      Error: 224251 is not a character number in the document character set
    * Line 985, character 131:

... "88" height="31" border="0" /></a></center>
                                 ^

      Error: required attribute alt not specified

而且在ff中还出现了文字错位。
css也没能通过测试