应muyu的邀请，我把colorbird重构了，报酬是一顿夜宵。
到我写这篇文章的时候，muyu还没完成与内容系统的结合。这是放在我自己服务器上的效果页面：
http://www.63net.net/colorbird/index.htm
http://www.63net.net/colorbird/channel.htm
http://www.63net.net/colorbird/article.htm
colorbird现在用的是内容管理系统是“随易”，据muyu说的，该系统非常灵活，让我不要考虑后期的结合问题。我需要做的只是3个页面，首页、栏目页和文章正文页。
设计都是现成的东西了，甚至图片都不需要重新做，直接用就可以。其间大概花了一周多的业余时间，本来还可以更快些，碰到一些小问题，拖了点。
导航条很简单，把列表横排，居右。开始的时候偷懒没用图片，在全部页面完成后我改成了图片。
关键词那部分麻烦点。主要是3列的长度不一样，3行的颜色要交替。第一行的结构代码：
<div class="keyword">
<div class="keyword-len-1">
<h3>平面：</h3>
<ul>
<li class="first-li"><a href="#">海报</a></li>
<li><a href="#">访谈</a></li>
<li><a href="#">印前</a></li>
<li><a href="#">平面设计</a></li>
<li><a href="#">广告</a></li>
<li><a href="#">地产</a></li>
</ul>
</div>
<div class="keyword-len-2">
<h3>影像：</h3>
<ul>
<li class="first-li"><a href="#">摄影</a></li>
<li><a href="#">电影</a></li>
<li><a href="#">DV</a></li>
</ul>
</div>
<div class="keyword-len-3">
<h3>网络：</h3>
<ul>
<li class="first-li"><a href="#">网页设计</a></li>
<li><a href="#">网络新闻</a></li>
<li><a href="#">酷站</a></li>
</ul>
</div>
</div>
这是一行关键词，之所以用3行实现而不是用3列实现是因为能方便添加背景色，用3列实现需要精确给出宽度才能使背景色块100%显示，否则可能会有间隙或者撑开DIV。
并且，定位也更容易解决一些。
在页面设计中，我给第一个li定义了class，因为关键词与关键词之间用“-”来间隔，一般的做法是“-”做成文本直接放在内容中，但是严格来说“-”属于表现范畴，
用背景图来实现更恰当。因此我给每个li定义了背景图，居左，无重复。因为第一个li是不需要背景图的，所以我要另外给它定义背景为空，OK了。
但是后来muyu用我做的页面写模板的时候告诉我，关键字都是重数据库中读的，模板不能这样输出：即第一个li有class而其他的li没有。我做页面的时候认为这些都是
静态的，毕竟只有首页有，而且不经常变化，静态的效率应该会更好。动态就动态吧，办法是有的。把每一组列表的第一个li用DOM操作加上class就可以了。因为我这里
有9个li需要加，就循环9次。
var i;
var n=10;
for (i=1;i<n;i++)
var obj = document.getElementById("group"+i).firstChild.className = "first-li";
保存成JS文件，让首页调用。结构代码也需要做相应的调整，给ul赋ID，从group1到group9一共9个，第一个li里的class去掉。这样第一行就变成：
<div class="keyword">
<div class="keyword-len-1">
<h3>平面：</h3>
<ul id="group1">
<li><a href="#">海报</a></li>
<li><a href="#">访谈</a></li>
<li><a href="#">印前</a></li>
<li><a href="#">平面设计</a></li>
<li><a href="#">广告</a></li>
<li><a href="#">地产</a></li>
</ul>
</div>
<div class="keyword-len-2">
<h3>影像：</h3>
<ul id="group2">
<li><a href="#">摄影</a></li>
<li><a href="#">电影</a></li>
<li><a href="#">DV</a></li>
</ul>
</div>
<div class="keyword-len-3">
<h3>网络：</h3>
<ul id="group3">
<li><a href="#">网页设计</a></li>
<li><a href="#">网络新闻</a></li>
<li><a href="#">酷站</a></li>
</ul>
</div>
</div>
调用的时候需要注意，JS代码要在最后才执行，否则会提示找不到对象。调用的时候这样写
<script src="li.js" language="javascript" defer></script>
终于搞定了，但是muyu说太麻烦，干脆不要“-”了，晕啊~随他了，不过我觉得加上更美观。
还有一个费了很大精力的东西，就是底部的链接，就像这样：
关于我们 | 站长Blog | 七色鸟论坛 | 隐私条款 | ENGLISH READER | Blog服务
原来的版本是居中显示的，为了真实还原，我打算也居中显示，这下原来隐藏着的问题暴露出来了。在测试浏览器兼容性的过程中，我发现IE5不支持内联对象的盒模型
，我给li或者a设置的padding不起作用，链接都紧贴到一起了，很难看。如果float:left 或者 float:right 则可以。我在经典发了帖子问了这个问题，似乎没有解决方
法，郁闷，只能居左了，还好不是太难看。我是不会把“|”用文本直接写在内容里的，虽然方便。
主要就是这两个大问题了，其他的问题通过找资料基本上都解决了。之前我把公司网站重构了，积累了一些经验，后来尝试做63的模板，未完成。接了colorbird的模板
做，算是第一次给别人做符合标准的模板了。做完后校验，发现原来忘记写上的alt，修改后就通过了，呵呵。
注释和命名规则很重要，我打算今后制定一个命名规则，否则过几天可能自己都忘了是什么意思了。
由于做的很仓促，还有一些地方可以优化的，不管了，只要页面能正常显示，在使用的过程中再慢慢完善吧。
Trackback: http://tb.donews.net/TrackBack.aspx?PostId=428133