v Blogger template模板教學課程---HTML內容架構 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...