馬戲團模版大剖析(-)整體架構

| | 評論(30)

各位同學,很抱歉到現在才推出馬戲團模版教學課程。自馬戲團成立以來,除了團員不斷關切之外,還有許多團友來信詢問馬戲團的三欄式模版是怎麼作到的。因俗務纏身,一直沒時間好好講清楚。其實呢,敝駝獸對CSS的研究不算精,這套模板也是到處參考拼湊,外加個人的創見,還記得在設計模版的那幾天,我看著窗外溫哥華的整齊街道,海鷗在傍晚那酒紅色的天空飛翔(以下刪去三千字)。於是這套馬戲團模版就成形了。

相信大家已經等不及了,我們直切重點。手上還沒有馬戲團預設模版的人,請到這裡來領取。

本節課程目標-讀完本文後,你應該要會:

  1. 正確地掛上招牌
  2. 更改各區塊的底色
  3. 更改各區塊的高度或寬度

這是三欄式的模版,用在主索引頁:
threecol.gif

這是二欄式的模版,用在Category Archive(類別彙整)、Date-Based Archive(分月彙整)和Individual Entry Archive(單篇文章):
twocol.gif

整體是俄羅斯娃娃式的一個包一個的巢狀架構。在較外層的地方,主要是設定這一區塊的大小和位置,較裡層的地方,則設定這一區塊的顏色、字體、邊線等等格式。

我們一個個來看,請翻出你的馬戲團式樣表(stylesheet)。

1. body區塊

body {
margin:2px 0px 20px 0px;

/* 四週的留邊,上2點;右0點;下20點;左0點*/
background:#FFF;
/* 底色是純白 */
}

2. container區塊
#container {
line-height: 140%;

/* 每行文字的高度是字大小的140% */
margin-right: auto;
/* 此區塊的右留邊, 設為自動調整 */
margin-left: auto;
/* 此區塊的左留邊, 設為自動調整 */
text-align: left;
/* 文字靠左排 */
padding: 0px;
/* 區塊內的留邊, 設為0點 */
width: 800px;
/* 寬度設為800點 */
background-color: #FFFFFF;
/* 底色為全白色, 設為#FFF也是相同的效果 */
border: 1px dotted #FFFF99;
/* 邊線設為1點, 點點狀, 顏色為米黃 */
}
:那條米黃邊線顏色很淡,幾乎看不見,你可能會覺得有點莫名其妙,這條邊線要用來幹嘛。其實呢,它是有道理的--因為我忘了把這行刪掉(XD)。如果你不喜歡這個米黃的邊線,可以自行把它拿掉,這是今天的作業(咳)。

3. banner區塊
這個區塊是招牌哦,很重要,請注意研究清楚。
#banner {
font-family: 'Trebuchet MS', Verdana, sans-serif;

/* 字體的設定,這裡只設定了英文的字體 */
color: #FFFFFF;
/* 字的顏色為全白 */
background-color: #8B0000;
/* 底色是酒紅色 */
text-align: left;
/* 文字靠左排 */
padding: 15px;
/* 區塊內的留邊, 設為15點 */
border-top: 2px solid #000;
/* 上邊線粗2點, 實線, 黑色 */
border-bottom: 2px solid #000;
/* 下邊線粗2點, 實線, 黑色 */
height: 39px;
/* 整個招牌的高度是39點 */
}

:如果的你的招牌是一個圖檔的話,請注意,要把padding改成0點,上下邊線的設定也拿掉,高度也要和你的圖檔高度一樣,否則會有很奇怪的結果。這在IE上可能不明顯,但若用Firefox看就明顯是歪掉的招牌,甚至會蓋到下面的文章。關於掛招牌的方法,請參閱這篇

4. left 與right 區塊
#left {
float: left;

/* 這個區塊向左浮動(不懂是什麼意思的話,就不要改它) */
background-color: #F5F5DC;
/* 底色是黃灰色 */
width: 200px;
/* 寬200點 */
overflow: hidden;
/* 要是這個區塊裡的字或圖案寬度超過區塊的寬,那就讓超過的部份看不見 */
}

5. center區塊
#center {
float: left;

/* 這個區塊向左浮動*/
width: 400px;
/* 寬400點 */
overflow: hidden;
/* 要是這個區塊裡的字或圖案寬度超過區塊的寬,那就讓超過的部份看不見 */
}

6. centerfor2col區塊
同center區塊,差別只有寬度為600點。

7. 調整寬度
如果你要調整左右邊欄(left, right)和中間欄(center)的寬度,千萬記得,它們的寬度總和必須要等於container的寬度。

在上面三欄的例子中,左右欄為200點、中間欄為400點,加在一起,剛好等於container的800點。

而二欄的例子中,主文欄(centerfor2col)是600點,右欄是200點,加在一起,真巧,也等於container的800點。

數學很奇妙吧,呵呵。

今天課程到這裡為止,下次我們再分別討論招牌、左右欄和中間欄的細部格式設定。

分類

評論(30)

娟 said:

我的MT裡面出現了三行字不懂是什麼意思,可以為我解答一下嗎?
Version 2.64 Copyright © 2001-2003 Six Apart. All Rights Reserved.
MT::App::CMS=HASH(0x8dcf09c) Use of uninitialized value in join or string at (eval 10) line 2.
MT::App::CMS=HASH(0x8dcf09c) Use of uninitialized value in join or string at (eval 11) line 2.

bingo said:

請教各位高手一下
我在識著套用"馬戲團"提供的模版後
有出現亂碼的情形....請問我該怎麼做
修改呢?

綠豆殼 said:

啊啊~我的問題已經解決了,
參考了『當我們BLOG在一起』裡面的教學文章,
我發現只要在CSS當中,右欄的部份加上
position: absolute;
right:0px;
這兩行就可以逼欄位去貼在右邊了:)

綠豆殼 said:

我是潛水員,偷偷地(?)在這邊觀摩MT初心技很久了,不過我最近在改版面的時候碰到問題了.....所以鼓起勇氣浮出水面請較一下:)

原因是我想把自己的BLOG改成不管在何種螢幕解析度下都能愉快觀賞的彈性版面,所以在CSS當中就把各欄的寬度改成百分比了,不過我發現用IE觀看的時候,首頁的右欄會跑到中欄的底下,用firefox瀏覽卻不會有這個問題。而在彙整的頁面下,右欄則沒有移位的問題。請問一下到底該怎麼改比較適當呢?

難道要把右欄寬度改回200px?

ROXYTOM said:

報告:
我把container區塊的"border: 1px dotted #FFFF99;"拿掉會有問題
瀏覽器視窗放大或縮小到某些尺寸時 右邊欄會掉到下面去
我以前是把色碼設為#fff
但昨晚拿掉這一行之後就出事了
百思不得其解
還請大師開示...mOm

小普拉 said:

那條米黃邊線顏色很淡,幾乎看不見,你可能會覺得有點莫名其妙,這條邊線要用來幹嘛。其實呢,它是有道理的--因為我忘了把這行刪掉(XD)。如果你不喜歡這個米黃的邊線,可以自行把它拿掉,這是今天的作業(咳)。

↑↑↑駝獸真是用心良苦,小普拉到今天才看到這米黃邊線,眼睛快脫窗了。

駝獸 said:

Is:
感謝指正, 已修改好了 ^__^

小普:
決定正式開張時說一聲哦。

小普拉 said:

當我看到這篇文章中的這一段:

我看著窗外溫哥華的整齊街道,海鷗在傍晚那酒紅色的天空飛翔(以下刪去三千字)>>>>>

我就知道我那歷經滄桑的網海浮沈歲月可以暫告終結了……
感謝溫哥華海鷗在那傍晚飛過團長和駝獸師的窗外…..
小普拉的新窩裝修好之後將於近日開張。

ls said:

请问margin坐标顺序是:
如 "body {margin:2px 0px 20px 0px;/* 四週的留邊,上2點;左0點;下20點;右0點*/..."
的上,左,下,右;
还是"...它的顶边距宽10px、右边距宽5px、底边距宽3px、没有左边距...margin: 10px 5px 3px 0;"
的上,右,下,左 (via: http://plod.popoever.com/archives/000325.html)?

hussard said:

太神奇了
太神奇了
太神奇了
駝獸真是大好人啊啊啊啊啊~~~

駝獸 said:

凱爾:
是滴, 該空格的地方都要空格.

凱爾 said:

謝謝師父*啾*

所以是不是以後為了讓電腦能夠辨識,
最好中間都要留空格呢?

駝獸 said:

凱爾:
你的問題出在這:
你原來的邊框設定是
border:1px solid#003355;

solid和#003355之間沒有空格, mozilla看得懂, IE看不懂, 所以在IE那邊框就出不來啦.
已幫你改好了,

至於時鐘在mozilla上看不到, 我也不知道為什麼,抱歉啦..:P

凱爾 said:

可是師父,為什麼馬戲團總舵的邊欄邊框,我用IE就看得到呢?
又,我用mozilla之後,我右邊欄底下的小時鐘就不見了.....

幫幫我啦....
*撒嬌*

工頭 said:

來到馬戲團之後真是頓覺輕鬆,以前在老地方都不太敢亂玩。不過玩著玩著好像出了問題。因為加裝一大堆javascript啊,結果明明某文章多了一篇迴響,可是首頁秀不出來。明明模版改了、也全部重建了,blog還是「條」在以前的樣子。嗚呼...

Yoshigi said:

駝獸,
哎呀,果然是師父.這才讓我搞明白了,原來如此呀!!謝謝駝獸提醒呀!!馬戲團果然是好地方阿m(_ _)m

駝獸 said:

yoshigi:
你的類別名沒顯示出來的問題, 事實上是這樣--在MT中, 類別名最好不要用中文.
"類別名"要用英文,"類別描述"才用中文.
否則MT 產生類別彙整時, 可能會發生混亂.
馬戲團模版在類別彙整的地方只顯示類別描述,而不顯示類別名. 如果你沒有設定"類別描述", 那就會是一片空白啦.

詳細類別設定法請參考這篇

Yoshigi said:

下午看見馬戲團教學的模板,歷經下午的一番磨難,終於搞定了三欄版面了呀,趕版真是大不易,駝獸敎的真細心,有個地方我下午改的時候發現一個問題,就是分類彙整時的問題,無法顯示出分類的項目名稱,這個問題以前好像也在馬戲團看到教學,改成就沒問題了,若駝獸有空記得將模版裡面的這個項目改過來囉。下午差點因為弄不定這個大哭一場。。。

駝獸是大好人,改版完脫帽致敬。

駝獸 said:

小貓,
有駝獸在, 放心改版吧!!

小貓 said:

凱洛

你這樣說,萬一我還是不會,那我不就從貓變成狗了?
還有啊,satie有一次做前世今生,人家說她是外星人,那...這...嗯哼...

不過我在心裡還是很相信駝獸的,尤其我相信,當我把場面搞到無法收拾的時候,一定會有救星的..嗯,就這麼做吧!!

凱洛 said:

我師有言:
我不隨便跟人家打賭的,要賭就要有十足的把握~~

所以小貓請相信駝獸
他說簡單,就是簡單

(外星人與狗不列入本次考試範圍...)

小貓 said:

凱洛,

你果然了解我...."動手"只是一時衝動說說罷了
其實,我還沒有點進去看,只是看到駝獸說的
"讀完本文後,你應該要會:
正確地掛上招牌
更改各區塊的底色
更改各區塊的高度或寬度 "

就想說,嗯,如果他敢這麼說,表示就真的很簡單....如果真的沒有很簡單,就表示他說謊(haha)

但是但是....我其實沒有點進去的勇氣......(默默離開)


駝獸 said:

那三千字都是喃喃自語啦, 大約是溫哥華的天氣、餐館與好脾氣的大狗之類...^^|||

tacchang said:

所以這是MT專用囉........
我變節了,我要去學WP(不是LP).....XD

凱洛 said:

小貓妳確定你要”動手”嗎

我怕屆時還是得駝獸出手搶救。。。。(以前我跟凱爾玩垮了整個版就是這樣請師父暗渡陳倉。。。)

(後手一星期時間駝獸應該會忙著四處當救火小隊長吧!!XD)

凱洛 said:

嗯嗯
頑劣學生我今天剛看到課本就馬上頑劣地舉手跟駝獸老師說"報告老師太難看不懂"
結果忠厚的駝師信以為真說"真的阿?!我以為寫的很簡單了......*思索貌*"

小的罪該萬死~~~

小貓 said:

耶耶耶!!!我也想看看那三千字!!!^^

還有啊,這個教學看起來好像很好玩,我應該也可以動手做做,嗯,好,拼了

anion said:

請問
我可不可以拜讀「海鷗在傍晚那酒紅色的天空飛翔」之後的那三千字 ?

啪啦夫 said:

強者!!!
太厲害了...

ROXYTOM said:

最喜歡上駝獸老師的課了
風趣幽默 三不五時來個冷笑話
枯燥的課堂時間咻~一下就過去囉...*O*

關於此日記

此日記由 bluecircus 發表於 2004年10月20日 18:56

此Blog上的上一篇日記歡迎工頭

此Blog上的下一篇日記馬戲團一歲囉!!

首頁歸檔頁可以看到最新的日記和所有日記。

Powered by Movable Type 4.23-zh-tw

團員照片

bluecircus on
www.flickr.com