把單篇文章的頁面做成兩欄式

| | 評論(11)

小黛的問題:怎樣在單篇文章中搞成兩欄格式?

答:(本回答僅適用於MT預設版面,馬戲團團員的模版已經是兩欄式)
這要提到一點MT版面的CSS「解剖學」。不過呢,我們大家都是麻瓜,對於大體解剖這回事是有點恐懼的,所以我們在這裡只解剖一隻小青蛙,當然,有些人解剖青蛙也會暈倒,那不妨請隔壁比較膽大的同學代為操刀。

借用ipa的說法:"MT的版面是個大拼花地板",各個部份都放在一個「容器」裡,然後容器裡面又可以有容器,好像俄羅斯套娃娃一樣。容器的蓋子是<div id=”…”>或<div class=”…”>,容器的底是</div>。容器裡的文字、顏色、大小、位置等等該長什麼樣子的格式資訊,是在式樣表(stylesheet)中指定。(以上若有謬誤,煩請高手指教

所以我們若要換版面,一個方法是改放到另一個容器裡,另一個方法是改式樣表。
而在MT的主頁上,文章內容是放在名為「content」的容器裡;在單篇文章的模版裡,文章內容是放在名為「container」的容器裡。而左欄或右欄是放在名為「links」的容器裡。

回到主題,如何把單篇文章的頁面改成兩欄式呢?最簡單的方法是換容器。

0. 強烈建議把你要改動的模板先複製,另外存檔,若不小心搞到不可收拾,可以重新貼回去。

1. 在單篇文章的模板(Individual Entry Archive)中找到<div id="container">,把它改成<div id="content">,先儲存起來

2.事情還沒完,你要再指定左欄或右欄要放什麼東西,你可以直接把主頁面模版中的邊欄整個搬過來。到主索引模版,找到<div id="links"> ,把以下的部份複製起來,一直到對應的</div>為止。中間當然還有很多<div class="…">…</div> ,你要一個一個對好,若丟頭漏腳,可能會產生版面混亂。

3. 回到單篇彙整模版,把剛才從主索引模版複製來的部份貼到單篇模版適當的位置。這個「適當的位置」,一般來說,可能會是在最下頭,</body></html>的上面。

4. 儲存->重建

馬戲團的團員若有興趣研究,你的版面結構是這樣:
左欄的容器:left
右欄的容器:right
三欄式的主文欄:center
兩欄式的主文欄:centerfor2col

分類

評論(11)

anpanman said:

我想問在無名有個布景主題是蔡健雅,如何更改banner中的4個小icon,thanks!

Josk CaT said:

您好 ^^ 我想請問一下關於將單篇文章彙整改成兩欄式的問題....

我目前已經改了一些...但是問題來了....

我有將我的右邊的區塊弄出來了...

但是資訊方塊列的部份依然是在最下方的說 @@

我使用的是 MT 3.2 ...

不知道該如何做才能讓側邊資訊方塊列回到他原本的地方呢!?

以下是我的站點 http://catseyes.catsgo.com/

希望團長或者是其他的能手們能幫我看看問題出在哪了 ^^ 非常感謝!!

駝獸 said:

瑄:
請留下你的網址, 要看看才能幫你解決問題..:)

瑄 said:

可以請問嗎
我試著照上面的教法 試圖在單篇文章的地方
改成兩欄式的

可是我做出來的東西 就是應該在右邊的整條連結彙整等
都在網頁的最下方ㄝ..

是我最後的 "3. 回到單篇彙整模版,把剛才從主索引模版複製來的部份貼到單篇模版適當的位置。這個「適當的位置」,一般來說,可能會是在最下頭,的上面。" 這個步驟錯了嗎

還是我應該在容器前面 加上 left 或right的東西嗎?
有人可以告訴我嗎 謝謝

凱洛 said:

是阿
團長是團長
冷J是冷J
話說回來我冷師江湖名號還真多
冷J 駝獸 御前護法小冷子 冷伯特.....................
一冷天下無難事阿

jeph said:

其實回答問題的不是團長, 而是團長的駝獸, 請特別注意, 千萬要分清楚, 這樣才是尊重團長, 也是尊重駝獸.
關於改三欄式的問題, 相信我, 這是大工程, 非得把你的樣式表給大卸八塊不能作到, 而且不小心還會作出IE看好好的,用Mozilla看卻支離破碎的版面.
等我哪天比較有勇氣了再來寫如何改三欄式.

EL said:

團長你好,你解釋的很清楚,我照著做也成功了,真是太感謝了。T_T
我還有一個問題,如果要將index模版改成像憂鬱馬戲團一樣,是三欄式的,又要怎麼改呢?
先謝謝你撥空回答喔~~

jeph said:

感謝fay 提供的方法. 你的網誌做得很sexy..;)

Fay said:

抱歉剛剛有漏文:
<div id="Layer1" style="position:absolute; width:42%; height:95%; z-index:1; top: 1.5%; left: 20%;" class="entry"> 主文內容 </div>

<div id="Layer3" style="position:absolute; width:18%; height:40%; z-index:2; left: 62%; top: 1.5%;" class="navbar"> 瀏覽列內容 </div>

Fay said:

我使用的是BLOGSKINS上的模組,再修改過後的樣子。我也是弄了這個站以後才開始學會CSS的部份語法的。
基本上,我每個頁面分為主文部份和右方的瀏覽列。
這樣兩欄式的作法,我是採用將整個頁面分割的方式做成的。

以下語法是把我的主文部份設定在Style裡設定的範圍內。


主文內容

然後,我把瀏覽列用另一個div圍起來,放在另一個範圍內。
瀏覽列內容

其中我用Class指定我想這個區塊內容顯示的樣式。

你注意到了嗎?兩個區塊的最左和最上起始點不同,就會被放在不同的地方了.
當然有其他的作法,不過我還不知道.

小黛在妳想要的仙女棒一文中,有一個連結有教CSS的基本語法,我是先從那裡看起的。http://www.9w2u.com/htmlbook/css01.asp

凱洛 said:

隨著成員越來越多
師父的功力也越來越強
真可怕

關於此日記

此日記由 bluecircus 發表於 2003年11月29日 05:42

此Blog上的上一篇日記如何將文章內加入底圖

此Blog上的下一篇日記歡迎RainbowChild

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

Powered by Movable Type 4.23-zh-tw

團員照片

bluecircus on
www.flickr.com