Blogger template模板教學課程---HTML內容架構

對於初入門者很多看到HTML四個字就頭大，感覺好像很深的電腦語言，其實在部落格裡使用html的語法並不困難，只要大概看懂基本架構、了解幾個關鍵字、關鍵語法的使用，大概都可以猜出問題在哪裡，而要怎樣做修改，通常配合你使用的Hacks說明，由於綸太郎常改版，所以自己修改模板累積的經驗來講解，有誤者歡迎留言更正。

我們先來看基本的架構，這是在"展開小裝置範本"前，通常這就是最基本的狀態，在還沒有加入任何widget小元件的原始模樣，如下圖，



大致分為out-wrapper(整個頁面)、header-wrapper(標頭區)、content-wrapper(主要內容區)、main-wrapper(主文區)、sidebar-wrapper(邊欄區)及footer-wrapper(頁尾區)六大部分，其中content-wrapper是包含了main及sidebar兩區塊，你想在哪個地方插入語法，記得在相對應的部分插入，而勾選展開小裝置範本之後，就會展開全部網站的html語法架構圖，有興趣的人可以慢慢研究。

初學者如果想認識這一塊，首先要知道的就是

<div id='content'>
程式碼
</div>
div就是division(部分)的簡寫，代表的就是一個區塊，而content就是這個區塊的名稱定義，而且要以</div>代表這個區塊的結束，一定要兩者並存，你可以看到上圖content-wrapper的結束</div>是在sidebar-wrapper下方，才代表這個區塊的結束，如果沒有對對配合，少一個或是多一個，都會造成版面的錯亂，讓你無法儲存template，顯示錯誤訊息。

而這個區塊裡面，通常你會看到會裝一些基本的元素，標頭、文章、邊欄、頁尾等等，語法如下：
<b:section class='header' id='header'>
指的就是網頁元素，這就是區塊內的配置， 通常最後會搭配一個</b:section>來結束語法，而在這裡面的
<b:widget>，這是網頁元素裡包裹的小裝置，比如上圖main-wrapper裡的widget就是這個網頁元素的小裝置，就是你的文章，或是一般我們加到邊欄（sidebar）的東西，比如最新文章或是最新回應等元件，這裡同樣也會需要相對應的結束語法</b:widget>，而這個widget是可以拖曳的。
像上面footer-wrapper並沒有看到</b:section>，但是我們展開小裝置範本後就會看到。

所以可以了解html語法是以層層包裹的型態為主，一直漸漸往外擴大，構成了一個網頁的產生，這個專有名稱稱為"巢狀結構"。

以標頭區舉例來說明，
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Google Maps (HEAD)' type='Header'/>
</b:section>
</div>
先以header-wrapper定義這個div的部份，然後裡面是放header這個網頁元素，裡面放的小裝置就是Header1，同樣的展開小裝置後才會看到結束語法，如</b:widget>。

其實這些相關語法在Blogger官方的說明裡面都有詳細的解說，
可以參考
版面配置的網頁元素標記(介紹section、widget用法)
以下兩篇較高階，建議有基礎後再來研究
版面配置的小裝置標記
版面配置資料標記

而綸太郎通常會修改這個地方，是因為下列幾項原因：
‧ 在每篇文章上放上書籤等收藏的貼紙連結
‧ 相關文章Hacks的使用
‧ 回應區，作者與網友回應顏色或字體的區別
‧ 拿掉原始模版裡的廣告或是貼紙連結
‧ 在展開文章後插入AdSense廣告碼
‧ 放上Google Analystic的程式碼(有人是以新增小工具完成，我是直接加在html裡)
‧ 加上自己設計的區塊

這篇大概到這裡完成，介紹基本架構，較詳細的細節下篇再介紹了。

延伸閱讀：
這裡有較專業的解說，大家可以參考看看
Abin's Tech Note: Template 的基本內容和結構
Blogger template模板教學課程---概說及基本結構
Blogger template模板教學課程---CSS外觀解說
blogger模版CSS語法細部介紹(上)
Blogger模版CSS語法細部介紹(下)