5. 底部区域
底部和侧边栏一样，也可以添加不同的小工具，只是工具将显示在博客底部，不受侧边约束，横向空间比较大。这部分一般都是添加一些备案信息。比如到“Creative Commons” 里弄点代码回来，添加一个“HTML/JavaScript”，表明自己的博客遵循某一款“创作共同”协议：一般都是允许非商业类转载，但须署名不可删改之类吧。协议有好几种，只是公示性的，凭自觉，没什么约束力。我的博客下方也是添加了一个“HTML/JavaScript”，只不过没什么协议，只有一行字“版权所无，爱转不转”。意思是我写着玩的这点玩艺儿没什么价值，所以没啥版权，喜欢转的随便转，也不用署我名，亦不用注明出处。
Blogspot有好几万小工具，无聊的时候可以挑挑看，有什么适合添加在自己博客上的。只是大多是英文工具，日文的也有一些。我刚刚就添加了一款“useless knowledge”，无用的知识，每次打开博客，都会显示一些稀奇古怪的奇闻异事，而且都是英语，每天看几个增加单词量，寓教于乐。
四 修改HTML
今天主要是说“布局”里的最后一项，“修改HTML”。点击它之后，你能看到一大坨的HTML代码，这些代码就是你的整个博客界面。（那个“扩展窗口小部件”不用选，只需看代码，别的不用动。）想要美化博客，就必须着手更改或者调整这些代码。我只能以我自己的模板为例，我的模板是Bowman创建的“Harbor”模板（就是左上角有红色钟楼的那款），在它的基础上，我做了一些修改。主要修改了以下三项：
1. 更换了页眉的背景图片。
2. 去掉了博客的背景图片。
3. 更改了侧边栏的尺寸，更改了正文栏的尺寸。（或者说，调整了左右两部分的比例。）
还有些零碎就不说了，重点说这三个。会了这三项就能举三反九，而且可以个性化自己的页面。尤其是更改左右区域的比例，一般侧边栏太宽会显得博客不够轻盈，尾大不掉，一定要把它改窄才舒服。由于不同的模板有着不同的代码，因此我只能杀鸡儆猴授人以渔了。
我的页眉是一张云彩的图片，这张图片来自我非常喜欢的动画片宫崎骏的《红猪》。
程序有程序头和程序体，头就是head，体就是body。一般来说头上都是一些定义代码，总揽全局，调用函数，一般不要动。功能性的代码都在程序体上，“body {”后面的东西就是程序体。你可以耐心加细心一行一行往下看这些HTML代码，很快就能找到body。
body的里面，一开始应该是定义背景图片，你将看到类似于
的一些代码，看名字里的rocks以及下图中right、bottom的字样，能猜到应该是博客背景右下角的那块岩石图片。如果背景图片不止一个，这样的句子也不止一个（若你选的模板根本没有背景图片，也许就没有这种句子），你可以把.jpg的那个网址直接删掉，再保存模板，刷新博客，看看哪个图片没有了，就知道该语句是对应哪个背景图片的了。知道了后，你可以删除这个图片，也可以从网上找张图片换掉它。
我的模板里，图片被我删了
接着往下看，应该能看到
/* Page Structure
----------------------------------------------- */
这表明以下的代码属于控制“页面结构”的部分。我这个模板里，有wrap1到wrap4，里面都有background及其图片网址，我把前三个里面的图片都删了，把wrap4里的网址改成了那张《红猪》里的云彩（这张图片被我用fireworks修饰过了，然后上传到picasa上，以得到图片地址）。从下图看，后面还有no-repeat 50% 0px的字样。no-repeat望文生义，表示即使图片小于浏览器，也不会复制自身以变大。50%应该就是按照图片原大小的50%来显示，0px我忘了，不过我记得px是像素。再往下，pedding：0px。好象是这张图片距离页面顶部0像素，当然想要和顶部留点缝的话（不去除导航条的时候），也可以改成10px或者更大。下一行是宽度100%。能看得出来，我也是一知半解，盲人摸象，白子秀才念半边。两年前，我就是在似懂非懂的情况下，一边瞎猜，一边乱试，几经波折，屡遭磨难，才搞出了如今这个博客界面。
接着往下看，开始调整侧边栏和正文的宽度和比例。如图。
紧接着wrap4，是out-wrapper，里面有个max-width 890px等等，这部分没有改动，我现在也忘了这是干嘛用的了。继续往下。
看到main-wrapper，这就是正文部分了。宽度占71%（原模板为64%），float为右边。
再往下的main里，margin（留白边），0表示不留；pedding-top、pedding-right，指的是正文部分距离页面顶端和页面右边的距离。（调整这些距离，可以美化界面，如与侧边栏对齐等。）
siderbar-wrapper就是侧边栏了，比例为23%（原模板为32%）。这位看官说了，71+23不等于100啊。是，还有6我留给了左右两板块之间的空隙。如果侧边栏和正文间没有足够的空隙，页面难看不说，还会有bug（比如“布局”的“页面元素”界面就会乱套）。
这样，左右比例的调整就结束了，简单吧。我印象中还改了某几个px值，可惜年深日久，已经想不起来了。总之，一句话：不断地瞎改，改完保存，刷新博客看效果（或者预览，更方便），反过来再改。改得一塌糊涂了也没事，可以“清除编辑”，回到原版。这就是我，一个实证主义文盲的行事风格。
你可以在“备份/回复模板”里将改动后模板下载到自己的电脑里，就跟写word，写几行保存一下一样，既是最后改坏了，还能从电脑里调出以往保存过的模板。
布局到此结束，下次终于可以说说“发帖”了。
备注：为了写教程，我注册了个新blogspot博客。关于模板代码，我发现新博里用$startSide和$endSide代替left和right。如新博客的main-wrapper里，float：$endSide。不影响使用，我也不知道为啥。
没有评论:
发表评论