Archives
语义化CSS设计
现在的CSS样式渲染越来越多，有许多网站都是为了重构而重构，自以为只要把以前的设计图用无表格的DIV来从新做一遍就算是重构了就web2.0了，其实是大错特错的，重构的真谛到底是什么？(Reconstruction)不是上述的那么简单的。
重构是在设计之初的UE阶段就开始进行详细的设计，一直到界面呈现设计，再到代码实现，贯穿整个WEB产品设计阶段。如果在上游阶段不考虑，那么所谓的重构就没有任何意义。
可以拿网易的新闻首页做个例子，网易在门户网站中率先应用了重构的概念，并大胆地应用到产品设计中，并且基本吻合了重构的基本原则。可以看出在前期设计的时候考虑了重构的结构化，模块化，语义化等。但是在设计中还是可以看出没有完全摆脱国内门户网站的特点，个人认为这个“特点”也是弱点，就是所谓的“版式新颖多样”，总要追求“和某某网站要有区别”，通俗点说就是“花屁股”。回到网易新闻，还是之前所说，大的方向很正确，但是毁在了那个“特点”，代价就是语义化的丧失。
这里的语义化就是指各种标签都做自己该做的事，例如标题类的文字就是用<H1>类标记，它本身的意义就是做标题；强调文字<em>标记；日程表等表格类元素就是<table>的本职工作，<table>一开始就不是用来做网页布局的。<p>就是做文字段落的。
语义化的丧失的主要体现就是无数层的DIV，为了达到效果，不惜使用无数的没有任何语义的标记或者是胡乱使用其他语义标记，冗长的样式表。网易新闻的样式表冗长（78K）的原因就是，它要为每个不同的呈现区域都写单独的样式（花屁股的代价），这不但不会用户对你的页面有好感（每个板块都有个性，难以形成统一的浏览习惯），并且使用户觉得凌乱无从下手，找不到自己需要的信息。
一些国外的新闻站点做的就很结构化，并且更美观，例如:MSNBC YAHOO news
另一方面，页面的可读性是和页面的长度成反比的，结构化做的好的站点有哪个页面超过10屏的，而国内的许多门户动则十几屏，页面打印出来能有一人多高，真是可笑，页面长的好处是什么，不言而喻广告位多，这使我想起了《大使记》里面的一句经典台词：“谁他妈给钱多，我他妈，我他妈就让谁干。”
BBC的改版方式
通常网站改版都是由网站自己进行设计，而BBC大胆采用由用户来决定如何改版，使得改版更加有意义，不是说你改完来让大家来接受，而是由大家的意志来进行改版。BBC称之为“重起”计划。
http://open.bbc.co.uk/reboot/
在xhtml1.0标准下的浮动广告
由于xhtml1.0
将原来的文档对象
document.body
从新定义成了document.documentElement
所以之前通常的脚本的用法document.body.scrollTop就失去了意义
附通过验证的浮动脚本,支持firefox：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>floater XHTML compatible </title>
<meta http-equiv=“Content-type” content=“text/html; charset=gb2312″ />
<style type=“text/css”>
<!–
body{background-color: #fff;margin:5px;}
#rightFloat{position: absolute;width:80px;height:80px;line-height:80px;top:0px;left:578px;visibility: visible;z-index: 1;background:#f0f;}
–>
</style>
</head>
<body onload=“myload()”>
<center>
<div id=“rightFloat”>floater</div>
<script language=“javascript” type=“text/javascript”>
//<![CDATA[
/*
browser detection lite,for full version please visit http://www.fscommand.com.cn/blog/index.php/archives/54/
*/
var ua = navigator.userAgent.toLowerCase();
var isGecko = (ua.indexOf(‘gecko’) != -1 && ua.indexOf(’safari’) == -1);
var isOpera = (ua.indexOf(‘opera’) != -1);
var isSafari = (ua.indexOf(’safari’) != […]
