layout篇
上一集我讲到blog背景图片的几种模式，这次我就写背景前面的CSS layout。
css layout有很多种，常见的有2 column，3 column等等。
基本上重要的几个部分就是container，header，content(body)，Sidebar，可能还有footer等等。当然一个完整的layout就不只这些，body里面它可能可以在分成2个coloum或者更多。sidebar也可以分成几个部分等等。


上图我就用比较简单的layout来讲解layout之间的连贯性，上面这个是最简单的2 column layout，很多人都会想改变他的宽度，但是因为参数太多，所以就随便改一个参数，改到layout跑到完。
从上图我们可以看到container是一个大容器，这个容器包含全部的部件，如果你把容器加大而里面的实物没有加大的话，你的所有部件就会移去左边，而右边就会留出一些空位，这样看起来就会怪怪的。
在如果，你把里面的部件加大了，容器却没有加大的话，他就会挤掉其他部件，然后那些部件就会跑去下面了。有时候可能你部件大过容器还可以呈现出来，但是可能你的screen resolution看来是完美，但是别人的screen resolution看的时候就会跑型了。

我们来看看coding部分，例子
<div id="'container'">
<div id="'header'">
</div>
<div id="'content'">
</div>
<div id="'sidebar'">
</div>
</div>
这个code就是模拟上面图片的layout写出来的，<div>是开头，</div>是结尾，有开始就要有结束。这个就好象我们学数学的braket一样(container(header)(content)(sidebar))，这个 “(” 就是开，而 “)” 这个就是关，道理是一样的。container包含了header，content还有sidebar。

那么我们要怎样改宽度呢？从上面的code我们了解到最大的容器叫container(可能你的template叫其他名字)，那么我们就去找类似下面的code～
#container {
width:900px;
}
只要改那个width的数字就可以了，但是要注意的是，请把数字改在1020以下，因为目前还是很多人用1024*768的screen resolution，扣除 scroll bar就差不多这个数字了。除了数字，你也可以放%，比如90%，80%，那么这个container就会依照screen resolution来自动调整宽度，如果是改container里面部件宽度的话，100%代表跟container一样大小。

例子
container : 100%
header : 100 % <<-header放100%，其他东西就会跑到下面去了。 那么header就高高在上了。 content : 70 % sidebar : 30% 这样改法是有坏处的，如果游览者的screen resolution太大，那么你的content就会拉到很大，banner也可能跑位，他们resolution太小的话，你的部件会全部一个一个跑到下面去，很难控制。但是那些大网站如yahoo之类的都用%的，但是他们会自己detect你的screen resolution然后呈现不同的东西给你，那个就复杂很多。不推荐用%，尽量用px。 所以要改template宽度，首先要研究他的layout是怎样排，然后就跟着排法把相关的参数一起改到完。例子如果把container改1000px，那么就要改header 1000px，content+sidebar 1000px，还有其他相关的也要改。当然不会那么简单的，所以先在其他blog testing，然后看效果，把IE/Firefox拉大拉小看它会不会跑位，confirm好了过后才apply进去主要部落格。 下一篇可能会讲关于换背景的 目录
http://gfishdiary.blogspot.com/2009/06/blogger-template.html