清明假期前后几天，抽时间做了博客的新模板，同时将博客后台程序由ECMS 6.5升级到了最新的6.6版本。赞叹帝国开发者WC的给力之余，也感觉自己拿ECMS只仅仅做个博客简直就是大材小用了。

设计阶段：

博客模板在配色上借鉴了一个国外的配色网站的模板，具体网址找不到了。当初看到那个网站的界面感觉配色非常好，简洁清淡且功能区划分明确。

这次的模板不同于以往。以往做自己的博客模板都是结构代码随写随寻思样式，基本上是coding+designing并行。而这次是PSD设计图先行，待设计图就位后才开始后续工作。

设计PSD图的时候采用了黄金分割+栅格的技巧，大量运用参考线来找对齐。后续又进行了微调，直至自己感觉满意为止。非设计出身，拍砖请留情啊 : p

点击这里前去115网盘下载设计图PSD文件

编码阶段

这次博客新模版的制作，尝试的选择了HTML5和大部分CSS2.1+小部分CSS3的组合。虽然技术上实现IE6同其他浏览器浏览器体验相同不是困难事，但这次还是在兼容性方面决定不兼容IE6浏览器：IE6的用户访问博客会默认显示一份未加样式的纯结构页面。并在网页顶部标题下显示一条加粗的提示句：

<!--[if IE 6]>
    童鞋请注意：本博客自新改版后，将不再温馨对待IE6用户。如果您是IE6用户，请选用更安全、功能更好的现代浏览器。
<![endif]-->

这次新模版的布局上，有意的采用了几种不同的布局方式。顶部的导航采用的是最常见的浮动方法；页面中左侧主体内容部分和右侧的侧边栏采用的是定位的方法；页脚部分的“专题列表”区域，针对IE7采用的是利用IE的一个经典BUG实现的“display:inline-block + vertical-align:text-top;”方法的布局；而针对非IE7的标准浏览器则应用了“display:table-cell”的方式来实现同样效果。看上去似乎很找罪受，但个人觉得布局的方式应该尽可能的多尝试，知其优劣，形成自己的理解，毕竟浮动并不是为了布局而生，就像table元素也不是为了布局而生一样。这块应该近期会形成一篇博客，阐述下自己的一些整理和理解性文字。

做前台的时候还无聊了一把，单独弄了一张“纯洁版”首页：没用到一个ID和CLASS选择器的首页。但这只是自身无聊的东西，实际中还是不建议如此的吹毛求疵，因为过多层级的选择器组合对渲染效率并无益处。博客实际中应用的首页也不是这个“纯洁”版本。

另外新模板在写结构的时候也留意了HTML5大纲的生成，做到大纲结构合理、层级清晰：

html5检测结果：

 点击这里在本站下载新博客的模板文件 （注：压缩包中的CSS文件已经做了压缩）

跨平台考虑

这次的页面除了兼容PC端主流现代浏览器之外，还考虑到了手机等移动设备用户的浏览需求。虽然自己明知道用手机来浏览我博客的用户可能一年也不会有1个，但还是做了这方面的尝试。运用的相关技术是CSS3的“Media Queries”，实现的效果是当终端浏览器尺寸横向上小于480像素时，会为其提供一个适合手机端浏览的网页：

但遗憾的是，我本身的手机非常老旧几乎不支持上网。手头也没有可以用来开发测试的手机，唯一的工具就是这个模拟手机屏幕分辨率的ProtoFluid。在这里面一切都好，但一次借朋友的M9上网一看又不一样，一问才知道M9的分辨率早就大于480了。只怪自己没这方面的经验，把问题想简单了。所以手机端的模板还要重新来做。查找了些资料（资料来源：http://blog.owncsser.com/），暂时弄出下面的表格，留作后用。

触摸屏

IOS 机型及分辨率

屏幕	型号	说明
320*480	iPhone 3 / iPod Touch
640*960	iPhone 4 / iPod touch 4
1024*768	iPad1、2

Android 机型及常见分辨率

屏幕	型号	说明
240*320		QVGA - 120 dpi
320*480		HVGA - 160 dpi
480*800		WVGA800 - 240 dpi
480*854		WVGA800 - 240 dpi
360*480	Nokia 系列	Nokia 尺寸比较特殊

S60 v5 机型及常见分辨率

屏幕	型号	说明
320*640	N97mini(港行)
360*640

普通屏

S60 v3 机型及常见分辨率

屏幕	型号	说明
240*320
240*480
640*480

S40机型及常见分辨率

屏幕	型号	说明
240*320

 性能优化

 这次重新制作博客专门针对Page Speed和YSlow进行了前端性能优化，GTmetrix中测试得分如下：

其中Page Speed是30项检测，YSlow(2)是23项检测。如果采用YSlow的small site or blog（小型网站或博客，15项）的检测，得分是100满分：

这次在提升博客页面加载速度上做了特殊处理。除了按照上面2个性能检测给出的建议优化外，还养成了每篇博文的配图先经由PunyPNG压缩一遍的习惯。

事实也证明新版博客较之旧版的页面，性能上有了大幅提升，加载速度快了近一倍。