重要資訊內容 重要資訊內容 重要資訊內容 重要資訊內容 重要資訊內容 重要資訊內容 重要資訊內容

2009年4月1日星期三

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

看过了Blogger 模板教学程---2.CSS外观解说再进一步了解Blogger 模板教學課程---3HTML內容架構
属性列表参考CSS属性列表
我們先來看基本的架構,這是在"展開小裝置範本"前,通常這就是最基本的狀態,在還沒有加入任何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就是這個區塊的名稱定義,而且要以
代表這個區塊的結束,一定要兩者並存,你可以看到上圖content-wrapper的結束< /div>是在sidebar-wrapper下方,才代表這個區塊的結束,如果沒有對對配合,少一個或是多一個,都會造成版面的錯亂,讓你無法儲存template,顯示錯誤訊息。

而這個區塊裡面,通常你會看到會裝一些基本的元素,標頭、文章、邊欄、頁尾等等,語法如下:

<b:section class='header' id='header'>

指的就是網頁元素,這就是區塊內的配置, 通常最後會搭配一個來結束語法,而在這裡面的
,這是網頁元素裡包裹的小裝置,比如上圖main-wrapper裡的widget就是這個網頁元素的小裝置,就是你的文章,或是一般我們加到邊欄(sidebar)的東西,比如最新文章或是最新回應等元件,這裡同樣也會需要相對應的結束語法,而這個widget 是可以拖曳的。
像上面footer-wrapper並沒有看到,但是我們展開小裝置範本後就會看到。

所以可以了解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,同樣的展開小裝置後才會看到結束語法,如。

其實這些相關語法在Blogger官方的說明裡面都有詳細的解說,

可以參考

版面配置的網頁元素標記((介紹section、widget用法)
以下兩篇較高階,建議有基礎後再來研究
版面配置的小裝置標記

版面配置資料標記

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

這篇大概到這裡完成,介紹基本架構,較詳細的細節可以到CSS教程,简单易懂,一看就会系列专辑再介紹了。



0 评论:

发表评论

  © 广告业务联系站长:wj9931@gmail.com 或 QQ42032058.