blogger template就是这样出来的 (4)

这将是一篇纯header talk文章.
我个人认为,
要鉴定你的blog美不美,
人家第一个看的就是你的header.
所以header一定要美!
完美的美~

首先,
你的content wrapper有多大,
你的header就得那么大,
其实header的图片不一定要100%和content wrapper一样大,
但是绝对不能大过content wrapper.

我在第一篇的教学当中,
告诉了大家header的基本条件.
其实一个完美的header只要和整个背景配搭得到,
而且visitors能够清楚地get到你要表达的信息,
加上不会眼花缭乱,
就是100分的perfect header了.

先找/* Header的code先吧~

由于嘉俽用的是minima template,
我用的是denim style,
所以header方面有一点不一样.
因此我就写两种吧~

---------------------------------------

这是for嘉俽的:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #ffffff;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid #ffffff;
text-align: center;
color:#FF6FCF;
}


我可以了解到,
嘉俽非常不喜欢header的border.
所以她被逼让所有border都变成白色,
让它们半隐形.

红色的部分是border.
只要把它删掉就行了.

橙色
这是宽度,
让它跟content wrapper一样宽就对了.
这样你的header就能在中间了~
因为你的header会自动找到中间的部分的,
看蓝色的部分就明白了~

然后如果你的header image比较小,
但是你很想让header image后面有颜色(白色),
就在橙色部分的下面打:
background: #FFFFFF;

---------------------------------------

这是for用denim-style template的人的:
#header-wrapper {
margin:0;
padding: 0;
background: $headerBgColor
text-align: $startSide;
}

#header {
width: 860px;
margin: 0 auto;
background: $headerBgColor;
border: 1px dotted $borderColor;
border-bottom: none;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

header wrapper是header旁边的空位.
你可以让它隐形.
删掉他的background就可以了.
如果你要放图片,
可以用百年不变的background原理:

background: #"颜色code" url(图片地址) repeat position-x position-y fixed;
颜色可以去找RGB color code chart或者使用photoscape的color picker查询.
图片url可以从图片上载网如photobucket,imageshack等等拿到.
repeat是重复,repeat-y是直线重复,repeat-x是横线重复,不用重复就不要打repeat.
position-x有right,left和center.
position-y有top,bottom何center.
fixed:你scroll到哪里图片都不会动,scroll:会跟着你的scroll变动方向.

header的宽度就在橙色的部分那里调整.
其他的都大同小异,
有问题再问我吧~

---------------------------------------

这是for大家的.

找图片的话,
我个人非常推荐wallcoo.com;
要找software的话,
我个人非常推荐photoscape和Paint.Net;
要找字体的话,
我个人非常推荐Dafont.com.

要找其他东西的话,
可以问google,bing或baidu.
要不然也可以留comment问我~