Blogger 模板教学程---2.CSS外观解说

看过了Blogger模板教学课程——1概说及基本结构多少了解了，现在进一步了解
Blogger 模板教学程---2.CSS外观解说

看过模板基本结构的介绍后应该有些了解了，但还是有些抽象，这里用实际的图示展现各个板块的组成和所起到的作用




首先我們大概來看整個網頁的CSS結構配置圖，如下：






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

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

‧ header-wrapper（紅色）：標題區塊的大小，這個網頁元素通常包含
#header這個元素及.description（網誌形容）

通常很多人會放圖片，使用網頁元素裡的標頭編輯可以插入圖片，但綸太郎建議不要這樣做，因為有時會縮減你的原始圖片，所以還是利用修改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，程式碼的外觀設計。
‧ 讓文字加上底線，顯示重要性。
這些透過Google查詢都可以取得相關的教學文章。

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

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


這裡常看到的定義h1、h2、h3，這些通常用來定義元素的標題大小，從h1~h6都有，常見的是，
#header h1，網站標題
.post h3，文章標題
h2.date-header，每篇文章日期的格式
.sidebar h2 ，邊欄的標題，例如最新文章、最新回應
#comments h4，意見，文章下方顯示幾則意見的文字格式。
大部分模板都是如此定義，但也有少數有自己獨特定義的型態。

另外CSS裡的元素定義名稱，每個模版都不盡相同，須靠自己判斷，尋找類似意思的名稱即可，以上為CSS外觀的結構大綱說明，細節部份等下篇Blogger 模板教學課程---3HTML內容架構再談了。