改造BlogSpot模版

前不久发现我的blog上终于出现了可以转到beta版blog的通知，高兴~顺便想换套模版，可是blogger里面提供的似乎没有什么创意，刚好看到月光博客上推荐了一堆提供blogspot模版的站点，找了一下，找到这个模版lonely。

换上试试……可是没想到马上出了问题——预览的时候一切正常，一保存发布，打开页面却发现都是乱码，布局也都乱了。怎么回事呢？难道换个非官方模版都这么难？静下心想想：出现乱码无非是编码除了问题，看了一下浏览器使用的编码，果然是西方字符集iso-8859-1。哦~对了，这个模版是从外国的网站上下的……他们用的默认字符集自然不会是中文。搜了一下资料，控制字符集的是meta标签里面的charset，果然那里的值是iso-8859-1，改成UTF-8，保存。再看，呵呵，大功告成！

改完编码，顺便往下看了看模版的代码……怎么满眼都是tr、td的标记？看来这个模版是使用表格来进行布局的。虽然说现在这个样子不管在FF还是Opera下看都没有问题，但是做为一个FF的忠实用户，在无数次遇到用表格进行排版的网页在FF下变得一糟后，在心理上总会对用表格布局的网页有一种抵触情绪……于是，一时冲动之下，我决定把这个模版换掉——是不现实的。想想自己怎么也是CS出身的，自然是秉着自己动手丰衣足食的原则来对这个模版进行大改造啦~惟一的问题就是：我好象既不太会html语言也不会CSS……不过，哼哼，就凭着我们平时抄实验报告的功底（Ctrl+C & Ctrl+V 大法），还怕搞不定这个小小的模版？

既然下定决心，就开始吧~先到网页设计师的网站上找了几篇入门级的CSS教程，研究一下……哦，原来是如此如此，这般这般……好像并不太复杂，动手吧！

先分析一下网页的结构，典型的顶行三列式。不过我发现这个模版顶部的图片分为两个部分——左边是那张草的图片，右边则由一个宽度为1px的图片作为单元格背景平铺而成。

图片如下:

网页结构示意图如下：

那么，我这么设计对应的CSS布局：

在head部分定义如下： #header{ width:100%; height: 150px; margin: 0px; padding: 0px; text-align: right; background: url("右边的背景图片地址") #FFFFFF repeat-x right top; } #header_left{ width:449px; height: 150px; margin: 0px; padding: 0px; float: left; background: url("左边小草图片地址") #FFFFFF no-repeat left top; } 在body部分： <div id="header"> <div id="header_left"></div> <h1><a href="<$BlogURL$>"><$BlogTitle$></a></h1> <h2><$BlogDescription$> </div> </p>

header层的宽度为100%自适应宽度，背景为1px宽的图片，在x轴上重复；header_left层嵌套在header层之中，浮在左侧，背景为小草的图片。

注意，在CSS中，有一种思维习惯：所有辅助图片都用背景来实现。既类似类似logo，标题图片，列表前缀图片都必须采用背景方式或者其他CSS方式显示。这样做的原因有2点：

• 将表现与结构彻底相分离，用CSS控制所有的外观表现，便于改版。
• 使页面更具有易用性，更有亲和力。例如：盲人使用屏幕阅读机，用背景技术实现的图片就不会被朗读出来。

然后是下面的三列，布局的实现如下：

#left { position: absolute; left: 0px; top: 200px; margin: 0px; padding: 10px; border: 0px; background: #FFF; width: 190px; /* ie5win fudge begins */ z-index: 1; } #middle { position: relative; margin: 0px 240px 0px 200px; padding: 10px; border: 0px ; background: #FFF; z-index: 13; } #right { position: absolute; right: 0px; top: 200px; margin: 0px; padding: 10px; border: 0px ; background: #FFF; width: 230px; /* ie5win fudge begins */ z-index: 1; }

比较麻烦的是中间那一列的内容。查看原模版的代码，可以看到有很多blogger的模版标记。虽然blogger的帮助里面有详细的解释，但是我的意见是：反正现在只是要换一下模版的形式，没有必要深究……那么，就开始Ctrl+C & Ctrl+V大功吧~然后把里面的<tr>之类的东西换掉就好……别忘了那一对<Blogger></Blogger>的标记，如果没有这对标记的话blogger模版标记是不会起作用的。

奋战两天，终于把模版改完了，登录Blogger，修改模版……呵呵~大功告成！再用Opera打开看看，正常！下一个，Maxthon……嗯？正文的字体变得这么诡异？怎么回事？这个网页变成Firefox and Opera Only了？已经头昏脑胀了，先睡觉……第二天起来仔细检查，终于发现有一个<h2>的标记没有封闭，少了一个</h2>，所以正文所有的字体都变成和h2一样的了……不过FF和Opera居然在这种状况下还能正常显示，真是好同志……

写了这么多字，好累……先到这里吧~