CSS結構配置圖

上圖說明，
‧ body（藍色）：整個網頁的主體，通常不用設寬度，只要設底色，但如果有用固定背景圖，則建議要設，控制網頁的展示。

‧ outer-wrapper（淺黃色）：網頁大小layout的範圍，如果你想設計1024*768大小的模板，在此就要定義width的大小(例如width:990px;)，如果你想依解析度大小彈性運用，這裡就要設百分比（如width:95%;）

‧ header-wrapper（紅棕色）：標題區塊的大小，這個網頁元素通常包含
#header這個元素及.description（網誌形容），較高階的這裡會放導覽條(menu_bar或header_menu)


通常很多人會放圖片，使用網頁元素裡的標頭編輯可以插入圖片，但綸太郎建議不要這樣做，因為有時會縮減你的原始圖片，所以還是利用修改css碼來放圖片比較能放到你想放的位置，也能控制圖片大小，語法為

background: #00ffff url("圖片網址") no-repeat;

如不能成功，試著改成

background-image: #00ffff url("圖片網址") no-repeat;

為什麼要加上#00ffff，這是標頭區的背景顏色（可自設），有時背景圖比較慢顯示或是叉燒包，至少還有背景顏色可看到，不會一片空白，或是跑出底色。
※ 如果你想將標題分成兩部份，像這篇如何將標題(頭)分兩欄，加入網頁元素的作法，那麼會有#header及#header-right兩個定義，兩者加起來就不能大於header-wrapper的寬度，否則元素會被推到下方去。

‧ content-wrapper（橘色），包含main-wrapper＋sidebar-wrapper， 寬度要設好，通常都要預留邊界的空間，很多時候sidebar往下掉，就是因為寬度不夠，譬如文章裡的圖片超過post的寬度，或是sidebar裡的元 件widget超過sidebar設的寬度，而這些都可以透過修改寬度來避免，或是利用overflow:hidden;來設定。

‧ main-wrapper（綠色），主文區（#main），包含
* 文章標題（.post h3）,通常會和日期（.date-header）擺一起
* 內容（.post）
* 文章相關資訊（.post-footer），如創作者(posted by)、發佈時間、意見及文章分類等，這部份很多人勾選了版面配置的網誌文章編輯，還是無法控制這些元素的出現或隱藏及移動位置，通常原因是出在你使用的模板不是官方設計的，所以更改後還是沒有效果，這時就要利用html裡面的語法來作調整，這以後再談。
* 意見區（comments）。
這裡可以加些讓文章內容格式更漂亮、更專業的元素，例如利用
‧ blockquote，引用他人文章的區塊設計。
‧ code，程式碼的外觀設計。
‧ 讓文字加上底線，顯示重要性。

‧ sidebar-wrapper（黃色），sidebar邊欄的配置，這裡可以放網頁元素，很多小工具widget的地方，有的模板會分兩欄或常看到的三欄式，或是綜合式（多欄）模板，這裡寬度控制更要留心，儘量讓你的widget寬度與邊線預留5px的空間。

‧ footer-wrapper（靛青色），頁尾，通常會放網站連結及版權宣告、模版設計來源，後台登入等資料



文章引用:Blogger template模板教學課程