Blogger模板教学课程——1概说及基本结构

Blogger模板教学课程——1概说及基本结构

Blogger的博客有着自定义最自由的好处，别家博客都没法比，可是对于普遍网友，又没办法实现“自由”原因就是代码不是人人都懂，那怎么办呢？

去学吧网上的很多课程都太多内容，不容易吸收，没有针对性，怎么能快速了解代码，并且很快的用上呢？

好了，这里有专门给普通网友们看的学习代码文章，通俗易懂，文章短小，针对性强，一看就会。
下面给大家介绍吧。

首先介绍Blogger博客官方模板用的代码语言css

我们进入Blogger的后台

在一般模板中主要分两大主体，
1， css，代表网页的外观，例如字形大小，颜色，外框，图片设定等。
2， html，代表网页的结构与内容，包括版面的排版设定（例如首页最上横幅在最上方，那就先写横幅框代码，同样若最好写，那横幅就出现在首页最下方了）在blogger的使用里，是使用xhtml，比html更严谨且简洁，也是最新版本。


整个版本可以分成

.网页文件宣告（最上方到＜ｈｅａｄ＞ 之间）
.外观css设定及网站文件资讯（ ＜ｈｅａｄ＞到＜／ｈｅａｄ＞）
.内容结构html语法（＜ｂｏｄｙ＞到＜／ｂｏｄｙ＞）

如下图：





在模板最上方的文件宣告，功能是告诉浏览器你使用的xhtml版本及参考的文件来源

接下来的head是文件的标题，说明网站或是文件的相关讯息，告诉浏览器你的网站名称，文章标题，作者，使用的关键字，外部链接等讯息，另外网址出現的小icon也是在此定义。


/* Variable definitions，这部份就是字型及顏色、大小的设定，如果沒有这部份，那么版面配置里的字型与顏色也無法作用，常有人問为什么我改了字型与顏色，都沒有产生变化，那就是因为该元素沒有在此定义。


从body{ 到 ＜/head＞ ，这就是CSS外觀設計，這裡就是大家最頭痛的地方，怎樣讓你的版面更美，更賞心悅目，是要經過一次又一次的測試，調整顏色、距離、文字大小，設計特別的圖案顯示，都在這裡完成。


從＜body＞到＜/body＞，則是HTML內容結構設計，讓每個網頁元素的排列組合符合你的要求，比如兩欄變三欄，除了多了邊欄（sidebar）的定義css，在html也是要加上相關的語法才能完成。

好了，先到这吧。