感觉还是页面太长，把首页收录的最新几篇正文收在一个区块中，按照时间线索（按天）把每天的文章收拢在一起，点击不同的日期，可以看相应日期的文章引用。这个小效果是用moofx这个基于prototype的轻量化javascript效果组件实现的。这个库提供了最常见的几个视觉效果的实现。实现的方法很简单。就像作者说的，不是要替代script.aculo.us这样比较全面的js视觉效果库，只是为喜欢简单的懒人（就是我这种人！）提供一个最最基本的可选方案。 本站标签部分的文字在ie中行距还是太靠近了，需要继续调整。另外也可以把把“最新文章”和“本站标签”也做成展开/收拢的效果。最新消息和标签聚合应该不同于文章区的带互斥效果的展开/收拢，而应该作为两个区块能够单独展开和收拢。如果用moofx实现上述需求是很容易的，只要在控制按钮部分加类似这样的代码:
<script type="text/javascript">
$("code1").style.height = $("code1").offsetHeight + "px"; //i'm automatically setting the height to avoid a flicker
$("code1").h = new fx.Height("code1");
$("code1").w = new fx.Width("code1");
$("code1").o = new fx.Opacity("code1");
</script>
<p>custom method: pass starting value and ending value.</p>
<a onclick="$('code2').h.custom(0, 42)" class="demo" title="Height Effect"></a>
<a onclick="$('code2').w.custom(0, 200)" class="demo" title="Width Effect"></a>
<a onclick="$('code2').o.custom(0, 0.4)" class="demo" title="Opacity Effect"></a><br/>
<div id="code2" class="wrapper">
<code class="long">
something.onclick = function(){<br />
effect<b>.custom</b>(x, xx);<br />
}
</code>
</div>
即可控制上述code1这个区块根据高度、宽度、透明度的消隐效果。不过我刚把这两块归并到了#newArticleBody这一个区块中。等下次再把他们分开加上这个效果吧。 最后谈谈我的Movable Type模版的修改方法。我用的工具。dreamweaver,topStyle, 各种浏览器。当然还需要有一个可用的MT平台来测试。 dw作为基本的界面预览，topstyle作为主要的css编辑工具。虽然dw也可以编辑css，但是经过几个版本的改进，我个人感觉还是差强人意，易用 性并不好。不过dw8总算可以比较准确的在design模式预览pure css的界面了。8之前的版本的话，干脆换成scite就 可以了。 那修改首页模版来说，首先建立一个新的测试用索引模版，把主索引模版和要用到的模块模版的内容全部抽取出来集合到新的测试用索引模版中。各个不同模块模版 都首尾注释好。然后用这个新测试模版去生成一个静态文件后，就可以把这个静态文件放在本地编辑/测试了。当然，需要用到的css文件也要拿回来。css引 用路径最好用相对路径。这样可以用最高效的方式不断测试布局。等改完满意后，即可把相应的内容用mt标签替换掉，还原成测试用索引模版就搞定了。 因为css的布局设计不同于其他软件开发，至今没有一个很理想的版本控制工具能够很高效的管理css layout开发。也许是我没找到这么个玩意儿，而它早就存在了！
mod_2005-11-19 01:58[technorati relative tag]
[相关内容]
由 tristones 发表于 2005年11月17日 下午11時27分