Blogger template模板教學課程---CSS外觀解說

加入共享書籤：

看過了模版基本結構的介紹，接下來先談比較重要的外觀設計，一個好的CSS設計不僅讓你的網頁更有吸引力，符合網頁標準技術的設計更能讓你的網頁在不同瀏覽器中運作正常，不會跑來跑去，我想很多人都有這經驗，逛到許多網站發現整個結構錯亂，邊欄跑到下方或是延伸到遙遠的右方（這以無名最嚴重），或是整個畫面一片空白，還要反白才能看清楚文章在寫些什麼(Yahoo有案例)，或是層層疊疊，文字都堆在一起，綸太郎都忍不住罵聲「這是什麼鬼啊！」，這就是沒有做好CSS外觀設計的失敗，如果你一直堅守在某個瀏覽器（不論IE或是FF），而不肯自己作改變，設計或修改模板來適合大部份瀏覽者的需要，我想這篇文章你也可以省略，不用浪費時間看了。

首先我們大概來看整個網頁的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，程式碼的外觀設計。
‧ 讓文字加上底線，顯示重要性。
這些透過Google查詢都可以取得相關的教學文章。

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

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


可參考Blogger 新手基本技巧問答（四）說明，也有人會利用這區塊分成三欄來放網頁元素，這是比較高階的用法。

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

另外CSS裡的元素定義名稱，每個模版都不盡相同，須靠自己判斷，尋找類似意思的名稱即可，以上為CSS外觀的結構大綱說明，細節部份等下篇再談了。
延伸閱讀：
Blogger template模板教學課程---概說及基本結構
Blogger template模板教學課程---HTML內容架構
blogger模版CSS語法細部介紹(上)
Blogger模版CSS語法細部介紹(下)