石头札记

在css-p layout设计阶段，为了检验区块是否正确定位，我们一般会临时给区块div设定类似:

 border: 1px solid red和backgroud-color:#193071;

这样的的属性。这样的技巧能够让你一目了然的发现layout定位上存在的问题。在发布阶段或者不需要的时候，把border width设定为0px即可.

btw:什么是CSS-P: css-p即为Table-Less Layouts或者positioning attributes of CSS。随便你怎么叫，反正就是无表格定位的CSS技术拉。在术语满天飞的年代，又多了一个P......boooooo....

本文档改编自http://www.meyerweb.com/eric/css/edge/popups/demo.html .原文较长。我简化了一下，并且把rollover img的效果合并在一个文档中。只用来说明用纯css实现rollover的效果（见左侧的导航条）。原文是用了popups的字眼。我所理解的popup一般表示弹出框，跟此处的效果不符，故改成rollover来表述。
btw:这种实现的方法其实用在很多地方。

演示页面

google desktop的sidebar我倒是一直在用，主要就是当便签和css reader用。挺方便的，不过UI部分字体显示的确糟糕，特别是中文。稳定性也不是很好。 虽然google以搜索起家，但是发展到他现在的规模，不让他创新，那他只有快点玩完了。我想google也没想要这些东西都成功吧。首先让别人知道他是一个有活力的公司，不是守旧吃老本的。不断保持高关注度，这本身就是一个巨大的成功了。 而且，这些看似东一榔头西一棒的东西，都还是围绕着搜索这个主轴发展的。别跟我说微软的每一个产品都那么的成功。 这就跟戏班一样，大拿就这么几个，但也少不得插科打诨的丑角。更何况，保不定那天丑小鸭也真的飞上了天。 看了这篇文章就想说几句，本来想直接回复的，突然想到有个有年头没用了的trackback功能，那就拿出来让他热热身吧。

感觉还是页面太长，把首页收录的最新几篇正文收在一个区块中，按照时间线索（按天）把每天的文章收拢在一起，点击不同的日期，可以看相应日期的文章引用。这个小效果是用moofx这个基于prototype的轻量化javascript效果组件实现的。这个库提供了最常见的几个视觉效果的实现。实现的方法很简单。就像作者说的，不是要替代script.aculo.us这样比较全面的js视觉效果库，只是为喜欢简单的懒人（就是我这种人！）提供一个最最基本的可选方案。 本站标签部分的文字在ie中行距还是太靠近了，需要继续调整。另外也可以把把“最新文章”和“本站标签”也做成展开/收拢的效果。最新消息和标签聚合应该不同于文章区的带互斥效果的展开/收拢，而应该作为两个区块能够单独展开和收拢。如果用moofx实现上述需求是很容易的，只要在控制按钮部分加类似这样的代码:

即可控制上述code1这个区块根据高度、宽度、透明度的消隐效果。不过我刚把这两块归并到了#newArticleBody这一个区块中。等下次再把他们分开加上这个效果吧。 最后谈谈我的Movable Type模版的修改方法。我用的工具。dreamweaver,topStyle, 各种浏览器。当然还需要有一个可用的MT平台来测试。 dw作为基本的界面预览，topstyle作为主要的css编辑工具。虽然dw也可以编辑css，但是经过几个版本的改进，我个人感觉还是差强人意，易用 性并不好。不过dw8总算可以比较准确的在design模式预览pure css的界面了。8之前的版本的话，干脆换成scite就 可以了。 那修改首页模版来说，首先建立一个新的测试用索引模版，把主索引模版和要用到的模块模版的内容全部抽取出来集合到新的测试用索引模版中。各个不同模块模版 都首尾注释好。然后用这个新测试模版去生成一个静态文件后，就可以把这个静态文件放在本地编辑/测试了。当然，需要用到的css文件也要拿回来。css引 用路径最好用相对路径。这样可以用最高效的方式不断测试布局。等改完满意后，即可把相应的内容用mt标签替换掉，还原成测试用索引模版就搞定了。 因为css的布局设计不同于其他软件开发，至今没有一个很理想的版本控制工具能够很高效的管理css layout开发。也许是我没找到这么个玩意儿，而它早就存在了！

自己的blog用了很久了，终于修改了一下，把老的有table混排的布局用纯样式表重新改写了一次。虽然css本身的语法都非常简单，但是因为要兼容各种不同的浏览器firefox,safari,ie等等，所耗费的调整时间会成倍的增加。而且同一个浏览器的不同版本也会有不少差异。这些问题，导致不但要求你有良好的语法书写习惯，而且还要掌握大量的小技巧来尽可能的调和浏览器兼容问题。使自己的布局，能够在不同浏览器上，有基本相同的外观。 而且，要写出完全能够通过w3c css validator和W3C Markup Validation的检测的css+xhtml布局，要费不少的力气。我的首页因为聚合了lilina的rss服务，加上用了不少mozilla专用的css tag和后台cgi生成的代码会自动增加一组p标签，导致标签对不匹配，需要手动调整代码。因此，要通过这两个校验太费时了。 至少ajax的升温，导致写符合规范的css和xhtml的要求会变得很平常。为了css开发过程中兼容性的问题，一段时间的知识储备是很必要的。 链接是我blog用的css，还比较乱，应该还可以去掉一些tag和重复的属性。 正文部分所列源码为本站索引页用的源码。

给自己的blog增加了一个tag cloud的功能。原先用过一个taglite，但是发现功能比较简单。就选了这个插件。另外还有车东用的一个tags插件:mtrelatedentries。但是，在我的MT2.64下面，聚合出来的是按时间顺序发布的文章。不知道是不是版本太老的缘故。这个tagwire已经有现成的做成tag cloud的样例，我也乐得偷懒直接拿来用了。我把tag的link指向到我的del.icio.us中。因此我想到如果有一个小插件能够实现我如下需求会更棒。
即，能够在mt发布文章的时候，根据keyword中的tag，把文章自动post到自己的del.icio.us的blog专用账号(账号作为blog文章索引的专用账号),建立一个自己个人内容的tag索引。

因此，即可以建立blog的tag cloud。可以跟自己收集用的tag cloud还有del.icio.us的del.icio.us/tag & popular tag相比较。形成更有意义的tag cloud集。如果能够继续顺藤摸瓜，去digg别人的数据，形成tag cloud tree的话，也许会更加好玩。

mod 2005-11-18
因为考虑上述需求:关于发布新文章的时候，让mt自动根据关键字字段把文章Post到自己的del.icio.us。找了一下CPAN，有一个叫Net::Delicious 的模块应该就可以很方便的做到。可惜不会perl，不过perl的确是个好东西。有空得学习学习了。以下是他的示例代码，的确是很方便的事情，根本不需要你去了解del.icio.us的API

  

use Net::Delicious;

  use Log::Dispatch::Screen;


  my $del = Net::Delicious->new({user=>"foo",

                                 pswd=>"bar"});

  foreach my $p ($del->recent_posts()) {

      print $p->description()."\n";

  } 

装了以后，首先firefox启动速度快了很多。原来要一会儿才能开启firefox，现在几乎能够即时启动。缓存数据的效果也不错。如果嫌firefox速度慢的可以试试看。这是sf上面的一个open source小项目，希望对你有帮助。
项目和下载地址