经过一年多，Purple Heart 终于 reborn 了

Updates:

1. Redesign every pages
2. Upgrade to WordPress 2.6
3. Add “tag cloud” page tamplate

其实这次的升级是一时兴起，用了周末两天加今天就算是完工了。可能是最近过剩的精力需要发泄，又想写 blog 了。其实一直以来，做了那么多的 WordPress Theme，也就是对 Purple Heart 比较满意。对 HTML、CSS、Usability 日益精熟，似乎不表现在自己的站点上总说不过去。我想这个 theme 我会用很久，毕竟，它经过了一年看起来还是那么特别，这本身就好似一个奇迹。

这周作为测试，顺便整理一下整个 blog ——包括800多篇文章……没事找事就此开始……

大脑正常以后，灵感也比平时多了些。用了几天时间，完成了这个PSD的 wordpress 主题效果图，感觉上基本还不错。明眼人或许一眼就看出这次的样式和之前的 purple heart 实在是太像。说起来风凝这次也没打算在左中右或者上中下上面盘桓，只是想在正文以外的东西布局上花点心思。这次将很多平日里横着或者竖着的东东交错着叠在了一起，感觉还不错。目前暂时没有确定的就是 RSS 放置的位置，打算等 XHTML+CSS 完成以后再定夺。

鉴于这次设计稿算是风凝玩 wordpress theme 以来最细致的一次，也欢迎大家多替意见。名字“若拙”，只是取这次设计有太多“雷同”之意；英文写作“raja”，也算是声明这里是夜摩罗/风凝的住所——玩双重人格？这主意不错

折腾了近半个月现在的blog皮肤——目前代号“eros”——没有任何进展。庞大的背景花纹载入过慢问题我头疼了很久，最后也没有找到更好的解决方法。原先基于 eros 样式开发的新 gallery 倒是引出了风凝进军AJAX的新热情。或许我本身也不擅长架构三栏的blog，总是弄得 sidebar 信息过剩强了正文的风头。近来也厌倦了顶头一条下面几列的模式，打算挑战一下以前没有尝试过的风格。

或许我就是一个慢热的人，某个灵感闪过，然后过上个把星期，才能把已经不知道飘到了哪里的灵感揪回来为我所用。目前的首页本身是一个很意外的收获，而直到前天，我才真正开始计划将这个意外收获好好利用。经过3天的折腾，最终有了现在的页面——Underbrush——

很朴素的页面，几乎朴素到了2002年的页面风格。纯粹的两栏结构，看起来几乎将所有的经历都花在了头部图片的设计上——实际上花时间最多的是色彩的选择和搭配，以及类似列表风格之类不太显眼的部分。某个瞬间我都要觉得自己的品味太老土了……

我想我不会半路放弃这个设计，并且会尽量在这个周末完成相应的 wordpress theme。除非在制作 wordpress theme 途中突然觉得令人作呕，我想我还是会坚持下来的。

Blog 模板换了有一段时间了，一直没有宣传是因为还不够完善，想慢工出细活。今天早上突然灵感乍现，连PS做图带制作成CSS+XHTML，一共花了4个小时。结果就是现在的首页的样子了。

近来在公司一直用1440*900的分辨率，作图什么的比以前爽了很多，页面什么的似乎也更加喜欢那种横跨整个页面的横条了。不过相比起以前的大红大绿，这次风凝选择了比较纤细的颜色，并且加入了同色系的浓淡对比。因为是要配合blog的感觉，基本上还是很素雅的，没有出格设计。

剩下的任务就是完善wp主题了。目前的版本号是0.5。等到0.9的时候，我就可以考虑放出下载了 ^^ 不过不知道会不会有人下了去，哈哈哈…

有阵子电脑不在宿舍，要上网什么的就要借用宿舍mm的电脑。她不是Fx用户，电脑里装的是Maxthon。打开Maxthon，一个start页面出现在我眼前——素净的页面空荡荡，只有一个空空如也的标签栏。我以为这是嵌入浏览器的另一个浏览器，搞不好还是有无界之类的特殊功能。怀着有点兴奋的心情点了15分钟，我失望地发现这不过是一个用来订阅RSS的页面——虽然后来知道它还有很多其他功能，但是我的确只发现了订阅ESS这一个功能。这一次经历给我留下了很深的印象：我用过的浏览器数量也不少，上过的站点也不少，但是这样一头雾水、设想和现实差距之大的确是第一次。

后来全面接触了“可用性设计”，每次想到的第一个都是那个神秘的start页面。难以言说的页面设计，让人不知如何下手。折腾了半天，却是不需要的功能。对我个人而言，这个就是完全失败的设计。当然了，也不能排除有人在这个start发现了很多有趣的东西，或者某个人正缺的就是RSS阅读器，或许只有我这么笨不知道这个页面该怎么用。我只是就我的体验说一下而已，无他。

相应的，我会想起iGoogle。ig未登录的时候就会有一些简单的模块加载，并且会提示登录以后可以自定义页面；登录以后也会有明显的提示告诉用户怎么添加模块。用ig的感觉不错，感觉一切都在自己的控制之下，不像用Maxthon的start，感觉像是在进行智力测试或者小白鼠在迷宫里找奶酪。

或许我应该重新思考 web design 这个不怎么新鲜的词。web design 并不是单纯的 Homepage design，web design 是一个完整的、完善的、整体的规划——对于站点的用途与功能的规划。设计也不纯粹是界面的东西，设计应当是设计师利用现有资源来实现客户需求的过程，在满足客户需求的基础上可以为客户多想一步，但是实现需求才是根本。如果基本需求都不能实现，只是将功夫下在花里胡哨的特效与骇人的界面设计上，纯粹是本末倒置。

架构、可用性，这才是站点最基本的东西。有了完善的架构保证功能的实现，有了出色的可用性设计保证了用户体验，界面的设计才能得到基本保证——当然也可以说基本的条框，如同在画框中绘画一般。或许 web 2.0 的简洁设计就是因为有了如上的保证才能得到一致好评：将用户注意力集中到出色的功能与体验上，去掉不必要的干扰视线的繁复设计，贯彻以简洁的风格。

当然，作为一个设计爱好者，我会喜欢设计繁复华丽的网站——这样的站点也多是设计/艺术类的站点或者就是设计师本人的blog。或许也就是这个原因才能去弄设计吧，不然就真的成了纯粹的“美工”了。正如《Don’t Make Me Think》中的那句话，不存在所谓的“普通用户”，每个用户都是特别的，独一无二的。可用性设计也不应是为了去追求“满足普通用户的用户体验”，而应该立志去实现“能让用户顺利使用网站提供的功能，并有一次良好的体验”。

说回Maxthon的start。我想这个start或许需要重新设计才能让我这样笨的人一拿到就知道该怎么用。如果觉得大段的文字说明过于无趣，至少可以提供一个demo让大家瞻仰学习。但就一根光秃秃的标签栏就想标榜自己的“简洁设计”，未免过于自欺欺人。可用性设计是因为有人用才会存在可用的问题，单凭自己的想象在那里yy别人使用时候的感觉就敢说自己是搞用户体验的，只能说是可笑。要是Maxthon哪天突然开窍了，决定找几个人来做一下实际的可用性测试，估计老板会发现眼前看到的实际情况和自己坐在老板桌后面偷笑想象的图景相去甚远。

———————
从6月2号毕业设计实验部分全部被推翻重来到今天，这段时间我除了去了趟北京，几乎100%的时间都投到了毕设设计实验和论文完成上面。这期间没有学习什么关于web抑或design的新东西，旧东西也多是在肚子里翻捡一下。今天跟猪猪说起Maxthon的事情，无意说到了start，便突然有了上面这些想法。

现在很多的想法都没有能够实施，而且自己也知道很多的想法会有些片面和幼稚。因为起步比较晚，基础的薄弱是我无法回避的一关。或许等我工作上半年以后，会有很多新的想法出现，也会有很多曾经的想法被推翻。现在的我只是更加地期待能尽早走上工作岗位，去体验那所谓的社会化大生产带来的冲击。

If you are a big Mac fan, you will love this CSS dock menu that I designed. It is using Jquery Javascript library and Fisheye component from Interface and some of my icons. It comes with two dock styles – top and bottom. This CSS dock menu is perfert to add on to my iTheme. Here I will show you how to implement it to your web page.

N.Design Studio 又一力作，近乎完美的将 MAC 的 Dock 栏搬到了网页上。使用的是纯 CSS 和 JS 技术，不含防腐剂，味道还很好吃。

看看在线Demo，然后研究一下如何将这个东东放在自己的网页上。

据作者测试，这个东东兼容 IE 6, IE 7, Opera 9, Firefox 2, and Safari 2, 可惜，在 Safari 1 上有点小问题。

昨天有点累，放出压缩包之后直接上床了，但是脑子还是不得空闲，一直琢磨该怎么完善这个主题。今天早上迷迷糊糊醒来打算翘实验，完善一下这个目前为止自己做的东西中我最喜欢的 WordPerss 主题。

如果要追究“版本号”的话，这次的 update 应该是 1.1。改进如下——

1. 修正部分图片，不会再在灰色背景下露怯。
2. 修正了分类浏览的时候只能显示首页的两篇文章而不能显示同分类的文章的问题。
3. 首页只显示2篇文章，不受后台选项干扰——后台选项可以控制搜索结果和分类文章的显示数量。如果希望调整首页显示数目，修改 index.php 里面的 query_posts('showposts=2') 中的数字即可。
4. 修正部分XHTML，通过W3C XHTML验证。
5. 修正少量CSS，以便阅读。

可能还有一些bug没有发现，希望大家继续指教 ^^

新版本这里下载

Author: Fuiun/风凝
Download

紫色代表伤痕。“紫色的心”，就是一颗伤痕累累的心。

OK，酸完了，说正题。这个五一长假其实我有很多正事（不带引号）要做，但是不知道为什么全部投在了 DIV+CSS 上面。整整4天，几乎除了吃饭睡觉就是在和代码较劲。中间受到过不少挫折，好几次差点放弃。还好，跟自己憋了口气，硬是做了出来。现在坐在椅子上静静看着成品，只觉得内心很平静，没有任何狂喜。

这次写CSS，基本上在Firefox里面制作完成后放到 IE6 和 IE7 里测试，除了导航栏有些错位，其他部分一次通过。这次的bug在 IE6 和 IE7 一同出现，传统的 hack 已经很难奏效。最后搜索到一个 !important 在 IE 7.0 的 hack 方法，终于解决。虽然看上去有点 dirty，所幸只有一处。开心的是以后遇到同样的问题就不用再像丈二和尚摸不到头脑了。

除了这个 hack，更多的感慨来自于对于“次序”的理解。以前对于CSS中次序问题的理解仅限於几个伪类。这次在做 Purple Heart 的时候无序列表一直都有莫名的错位，以致顶部的导航栏足足耗费了我一天的时间。后来参考了 为何使用表格排版是不明智的 才发觉 list-style 和 display 的次序不能颠倒。对于这些书本上没提到的东西，或许只能在实践中自己不断的发现、解决，才是终极解决之道吧。

这次的theme自己比较满意，所以放出下载。不管是喜欢，还是有问题，一并笑纳。

Sea Flower 给人借去了，所以抽点时间做个新的首页。

最近一直在看JavaScript的教程，但是进步很慢。羡慕人家页面上竖着放的一排小标签做导航很久了，但是因为技术不到家，不会用JS脚本生成，只好用CSS来达到相同视觉效果。唉……不知道什么时候能真正不必再眼馋人家的东西……

那排竖着放置的小标签使用了图片替换技术——添加一个空白的 span 标签，然后通过 position 定位覆盖住下面的文字链接。HTML代码如下——

• Home
• Blog
• Gallery
• KDr2
• About

貌似我所有的导航标签的HTML部分都长这个样子……不过想想也对，CSS才是控制视觉效果的部分么，哦呵呵呵……下面是相应的CSS——

ul#nav {
position: relative;
top: 0;
left: -29px;
float: left;
}
#nav li {
display: block;
width: 24px;
height: 50px;
margin: 5px 0;
position: relative;
overflow: hidden;
}
#home a span {
background: url(“../images/home.gif”) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
#blog a span {
background: url(“../images/blog.gif”) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
#gallery a span {
background: url(“../images/gallery.gif”) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
#KDr2 a span {
background: url(“../images/KDr2.gif”) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
#about a span {
background: url(“../images/about.gif”) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
#home a:hover span, #blog a:hover span, #gallery a:hover span, #KDr2 a:hover span, #about a:hover span {
background-position: -24px 0;
}

小标签们的背景图都是这个样子，

这样做的好处是可以减少不必要的加载时间，鼠标移动到标签上的时候不会出现闪烁。

这样做当然是有点麻烦，但是从可用性角度去讲，这样可以使无法加载CSS或者图片的人也能没有任何障碍的访问网页。不信的可以去掉页面的CSS看看，一样知道我要表达的东西是什么。

至于为什么要叫这次的首页为 Opera，不是要给那个浏览器做广告。只是前阵子听Vitas的 Opera #2 次数比较多，很喜欢，于是就借用一下咯……

另外，5月了，毕业设计到了要冲刺的时候，可能很长时间都不会更换首页和blog皮肤。有好的想法的话，我愿意把它们都藏在心里，而不是跟毕业设计争时间……

呃…看到这个标题和预览图，请不要误会风凝又在做炒冷饭的VS了——这个是正在做的blog模板的截图，还没有完成，但是大致的样子已经出来了。

我承认，这个主题是受到了 iTheme 这个主题的刺激——说真的，那个主题除了sidebar能用鼠标点住了拽拽，没有什么特别到位的感觉……嗯……估计是当年 MAC port 做多了，看到这样的一个blog theme还真不好恭维，憋了几天，终于决定自己下手。

谁知道开工了才知道郁闷——定位定得我好辛苦……图片什么的倒是有些素材不用太难，可是把它们攒到一起怎么就这么麻烦呢……顶上为了能做出跟mac任务栏一样的按钮效果，我还尝试了传说中的“滑动门”技术……反正这个周末就是天天觉得很ft……

还好大致的样子已经出来，剩下要操心的就是 sidebar 的部分了——像是分类什么的，还真不知道要怎么处理比较好。现在征集一下创意，如果采纳，作者一栏一定写下阁下的大名……

根据目前的blog主题搭配的新首页——像不像精装书的内页啊？哦呵呵呵呵呵呵……

这次本来是打算尝试一下图像替换技术的——IFR 和 sIFR。可是不知道为什么最后想了一圈不打算用了——可能是怕Flash装载太慢。结果演变为对于 span 标签特别用法的学习。发觉 span 标签的确是个好东西，以前一直以为就只是用来做内签样式用的，没想到还可以玩出很多华丽丽的招数，看来学习这个东西不能光照着书本来，有时候也是要适当发挥的——《HTML与XHTML权威指南》的作者，原谅偶……

这次的 span 标签用在了那个目录样子的导航栏上——将罗马数字很好的右对齐了一下。如果看看源代码就会知道，其实 span 标签和罗马数字都是在左端先写好再用CSS定位过去的。

名字为什么要叫 Sea Flower？因为有花还有蓝色，所以想起了“海中花”这个词，于是就起了这个有点俗气的名字。嘿嘿嘿……

做这个页面的间隙看完了《天上天下》的漫画（1~11的单行本）。感觉……除了翻译上有些勉强、画面十分劲爆外，故事还是一如既往的“主角在不断的磨砺中一点点变强”的少年向风格。感谢苍天，看了11卷单行本我居然还能在今天之内做完这个叶子……

现在首页、blog、gallery的风格都统一啦，看着舒服舒服。只是下次更换样式的话就要一次做好3分皮肤，明摆着就是自掘坟墓么 ，555……

设计的人是我，制作的人是我，拥有的人是我，开心的人是我是我还是我。

首先，我承认这个标题有剽窃某知名站点之大号的嫌疑，不过对于现在的网页制作来说，却是一句大实话。不管是以前用 table 还是现在用 DIV+CSS，搞不定定位，基本上就是空谈。

关于定位，前提是要有一个良好的CSS书写习惯。看了不少别人的代码和一些教程之后自己也有了不少的领悟。最基本的，我觉得对于那种唯一的或者是整体布局方面的div用id比用class要好，因为id是一次性的，且比较醒目，而class可以反复使用，适合作为文字排版等重复劳动。

昨天突然灵感乍现，做了现在的首页——源代码随便观赏，只是可能有些过短，对于部分人来说可能会有些刺眼。在定位问题上，我用了从《CSS Mastery》启发来的小技巧——将用作基准的图片（我的首页里就是中间的那个名片）放进某#字头类的background里面，然后写上

position: relative;

接着再将相对于基准定位的图片（首页名片右边的小标签）放入另一个#字头类的background，写上

position: absolute;

然后记得在写 HTML 的时候将后一个嵌套进前一个里面，这样后一个图片就会相对于前一个图片的位置进行绝对定位了。我折腾了不到一个下午，结果如下

在Fx、IE6、IE7里面测试都合格，几乎是一次成功。

定位除了基本的居中对齐、浮动对齐，其实对于一些需要特别效果的页面，position 的效果会出其不意——因为position 相对/绝对定位的图片上与其他元素没有其他瓜葛，做部分修改的时候可以不会对整体布局伤筋动骨，是居家旅行、杀人灭口，常备良药。

最近差不多是以一天一个静态页面的速度在熟悉着CSS，感觉已经差不多了，可以尝试写一下类似于网易首页那样的杀人叶子了…

现在正是“三九四九，冻死小狗”的季节，但是猫的心中早已经充满了快乐——排除看”PHP Programming”时候的郁闷，猫绝大多数时候是很开心的。这几天换来换去一天换4次模板，越来越不爽，于是乎…决定，还是自己动手丰衣足食！

经过了一个下午的劳动，成果就是上图——也就是现在小窝的样子，嘿嘿，很粉嫩是不是啊？猫也是第一次尝试这样的风格啦…什么？缩略图和链接的图片不一样？唉…何必较这个真…

这个模板的名字定为“A New Tree”，因为banner使用的那个图的名字就是这个。目前一切都处于满意状态，happy~

看了3天的《HTML与XHTML权威指南》外加昨天晚上看的《CSS权威指南》，最近的时间基本都贡献给了 HTML 和 CSS。干看自然不过瘾，和猪猪讨论外加在梦里切磋（汗自己一个），终于用纯 div 和 CSS 做出了一个静态页面，并且已经堂而皇之地挂到了网上。

首页面左起第二个柠檬就是为这个部分预留的位置——下定了些许的决心，想要把这个地方填满。直接点的地址就是 http://miss-understood.net/works/ 。终于现在那里不在是500，而有了真正的模样。也给了我继续下去的最大鼓励。

猪猪说静态页面要更新就要全部手动，除非做成动态，只更新数据库就好——唉…就算我昨天下载好了 O’Reilly 的 “PHP Programming” 啄木鸟书，也不需要这么快就上手吧……

小猫猫要继续努力！

冬天有些冷，房间里没了暖气。在电子书与《猫和老鼠》的包围下，有了暖意。