昨天, 偶然又逛到dodo在donews的blog那里, dodo改版真是快, 我记得是上次来的时候这个blog还只有两个skin, 昨天就有6个skin了, 今天再去反顾一下, 有7个skin了, 更新的真是非常快.

    介绍一下dodo, 借用keso一篇blog提到的:

dodo是做网站UI设计的，Donews、365key都是他的设计，他还是《网站重构》的译者之一...
很多年来，dodo一直在追踪最新的Web技术，研究标准...

    dodo很喜欢lighty skin, 他设计的7个skin都是基于lighty完成的. 因为这个skin完全用div排版, 非常容易改变布局, 比如lighty中blog主要内容是排版在右边的, dodo通过对div的设置而放到了左边. 我现在这个skin, 是模拟dodo的满园春色skin, 差不多一样, 有一点优化. 满园春色这个skin, 仅适用于对.text程序的lighty skin的美化, 而我这个blog是基于pebble, 效果可以模拟, css则没法重用.

    pebble的功能很强大, 不过可定制的程度比较低. 页面的头部是用div排版的, 而页面主体部分却是用一个大的table来布局, 很多style都是不同用途的元素在共用, 比如一个itembody的style, 广泛用于页面的各个列表部分, 不好个别地定制.

    这里说一下, 我是一开始用editplus进行编辑, 后来看一个个的嵌套太烦琐, 而且好些css定义也记不住, 改用visual studio 2005 β 2, 真是强大啊, 比visual studio 2003明显上升了一个层次. 智能提示依旧不算, html页面在design mode还可看到嵌套层次, 在source mode可折叠代码, 于是在这么强大的工具帮助下, 一番折腾后大功告成.

页面样式效果截图

    改版过程中有如下问题值得一记:

• 页头的排版, 挤挤掖掖, 一点点的微调, 可算是把搜索框安置好了. 调整页头几乎花了一半的时间.
• 不知道是什么原因, 页面会有一个框, 总是去不掉, 而且这个框的背景和页面的背景会偏移一部分. 浏览页面的时候, 一般情况下这个框充满浏览器窗口, 但如果浏览器出现横向滚动栏, 向右拖动滚动条时, 这个框就会出现, 一开始这个框是浮在页头那个位置的, 没办法解决, 整成充满窗口大小已经是我的能力极限了, 呵呵.
• 也是最影响效果的, 就是长的字母数字串没有强制换行, 一个在右侧显示的回复:"http://www.flickr.com/photos/jianshuo/16026116/in/photostream/", 把排版完全撑开了, 在firefox里, 是导致页面往右边撑出一块, 在IE里, 就是页面往左边挤着, 经过google, 通过在需要强制换行的内容所在style里加上如下代码解决问题:
  
  overflow-x:hidden;
  table-layout: fixed;
  word-break: break-all;
  word-wrap:break-word;
  
  加上以上代码后, 在IE里浏览是没有问题的, 然而因为word-break和word-wrap并不是标准的css2.0特性, 不受firefox支持(IE5.5以上, 在未来的css3.0中会成为标准), 在firefox里还是撑着的. "overflow-x:hidden;" 这句的意思是说隐藏横向溢出部分, 据说在firefox里还是有效的, 可是没有用, 也不知为什么, 对于凡事不求甚解的我来说, 这意味着结果.

    罗里罗嗦一大堆, 说到最后还是什么实际内容都没说, 因为整个操作过程本来就没什么可说的, 这个效果并没有自己的创意, 根本夸不出口, 改容易, 微调可考验人了.

    也不是不共享这个skin的css, 而是, 一方面, 现在的skin, 用IE看是没有问题的, 用firefox的话前台看好点,后台还是排版比较乱, 并不完善, 拿不出手. 另一方面, 这个skin只适用于pebble程序, 别的程序拿来改的话, 有dodo的开山之作在前... 至于pebble用户使用, 直接看我页面的theme.css好了. 真是想要或者进一步想改, 我也可以帮点小忙解决些疑问. 唉, 最近心态忙的很( 一般来说心态忙比实际忙会更要忙 ), 改个skin, 也好换个心情 :P

    最后, 一定要再次感谢dodo. dodo是当初我开始学习web标准时就关注的极优秀的设计师, 从他这里我学到了很多东西. btw, dodo现在提供的所有skin, 我最喜欢这个skin, 其次就是我的眼里只有你这个skin了. 满园春色这个skin全部的华丽所在, 是这张背景图,据dodo说, 背景图是从css禅园找来的, css禅园是个我常去的好地方, 我怎么没注意到这图?