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

2009年4月1日星期三

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內容架構再談了。


0 评论:

发表评论

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