十一月 08, 2006

template reboot

很久之前就打算重写模板和css,但是一直都犯懒,一年多来只对原先的模板进行过几个小打小闹的修改。这次趁着blogger beta重新开放ftp发布,终于搞定了新模板。

虽然准备了nvu,不过从头到尾都没有用上,pspad用的很顺手,同时因为整体设计都是抄别人的关系,所以速度很快,用了三天总共八个小时左右。

星期一第一天,花了一个小时时间写了个标准的blogger beta模板,死命往里面塞class,基本确保页面上每一个元素都能单独控制。然后接下来的三四个小时纠缠于布局之中,整体框架搭起来没什么问题,但是原模板的下面三栏是用table进行的布局,我在把它们改成div+css的过程中出了一点麻烦,具体也就是mainbox在firefox下不能自动延伸的问题,第二天用了固定高度终于把这个问题糊弄过去了。解决布局问题之后,细节的修饰就很简单,字体样式什么的基本照搬原blog,只是为了适应宽度的变化而把字体调大了一号。第三天基本都只在微调。

背景图片用的是透明png,所以不支持这种图片显示的比如ie6之类浏览起来会很丑---同时顶部图片我用gimp修饰过,颜色看起来会和下面差很多。虽然ie7支持这个特性,但是这个模板的大部分调试都在firefox下面进行,所以还是推荐firefox 浏览。

几个体会
  • 工欲善其事必先利其器,没有pspad,firefox的view source chart插件的话,效率至少下降一半。
  • 要养成良好的css编写习惯,把布局框架和样式分开,然后各个部分的样式分段书写能让css可读性大大提高,修改起来也方便的很。
  • 没有设定全局margin0和padding0会造成了不小的麻烦,布局时候许多奇怪的毛病来自于此。
  • 每个地方的font都挨个用px定义效率很低,指定全局size之后用em调整相对大小会好些。

接下来的工作,
  • 完善整个页面的字体相对大小
  • 调整一些细微处的样式,比如comment和description那里
  • 替换header图片。
  • 为中间栏添加合适的内容。
  • 修改原先的css以适合新模板,实现双主题


关于模板b的一些说明
about  theme b

http://farm1.static.flickr.com/167/379116180_6ceba37d1c_m.jpg
这个模板基于Valter NepomucenoBlack Minimalism 修改而来,以gpl 发布。
this theme is modified from Valter Nepomuceno' s Black Minimalism ,and published under General Public License .

要修改的部分:css和背景图片的url,menubar。
you may edit the url of css and background picture,then menubar.

下载
download
发表评论