2008年8月25日 星期一

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語法細部介紹(下)

5 則留言:

  1. 您好,我想请问我的博客每个文章与文章的连结缺乏空间,看起来很乱,请问有什么建议?

    http://thepplway.blogspot.com/

    回覆刪除
  2. 換個你喜歡的模板,排版整齊的模板,我有介紹很多。

    回覆刪除
  3. 謝謝你, 最近才開始使用, 本來以為買版型會讓自己容易懂些, 買了二個版型後, 還是看不懂, 直到用 blogger 語法, 搜尋, 才開始發現網上就可學, 尤其是你的教學讓我慢慢有概念, 謝謝!

    回覆刪除
    回覆
    1. 我很久沒寫新文章了,Blogger版型也是一直在改變,很高興對您有幫助。

      刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能