2005年06月28日
樂多CSS的結構概念
這是樂多css的結構概念，有了這個概念後對於修改css就會很大的幫助
在網站製作學習誌中有一篇相當好的文章樂多Blog排版入門
，我就是在這篇文章中了解了樂多的頁面結構
現在為了讓大家更了解這其中的關係，我們捨棄語法教學，
以更白話的方式來和大家分享這個結構概念
（在這我們以法鼓文化02為例子，以下圖層圖是引用於網站製作學習誌，特此感謝致意）
首先我們把樂多的css當做一個圖層，由許多層次所重疊起來的一個圖區
★第一層也是最底層就是 BODY 也就是背景所在
★往上一層也就是第二層 container
你可以把當做一張畫布，接下去所有的東西都只能在這畫布的範圍內呈現，也就是說他的大小可以設定，如果你想設計成一個左右為８００螢幕像素可以看完的效果，那就必須設在８００以內，如果畫布愈大，當然可以在左右方向放的東西也就愈多，相對的閱讀者也必須將螢幕像素放大才能一次觀看全貌
★有了基本畫布，我們要開始放東西了
我們再把畫布分成四個區塊，也就是banner ，content 和 link及footer
這就是第三層
← banner 橫標
← content 內文區
← links 連結區
← footer 就是頁面最下
而整個的結構圖就如同下方所示↓
註：這裏沒有標示出 BODY，而在圖的週圍白色就是 BODY所在
這四個區塊是相連在一起放在畫布上的，因此，如果banner變高，那內文和連結區及footer 就會整個往下；
相反的，banner 縮小，整個文字區自然會往上移，就如同我現在的版面設計一樣
如果content設定過大，而 links沒有適當的縮小，那畫面中的 links 就會往下掉
★如今我們已經知道這些圖層的關係
接下來就是為這四個可以放東西的區塊把(基本上是三個）放一些細節
例如：
在banner 裏有整個blog的標題和說明文
在content 放置日期，文章標題，內文，追加文和一排回應，引用的顯示和內容
在 links 則是有日期，邊欄標題，邊欄內容，和rss等東西
排列的關係如下：
如此一來，一個完整的blog就會產生出來
有了這個基本型和關係概念後，要修改一些小細節就顯得容易多了
只要打開樂多的css 找到區塊的起點，接下來的就是一些放置物的設定，只要修改所需的部份，就會成就不一樣的blog了
再以目前偶的blog(拼貼人生)為例．．
不知是否有人注意到，上面的圖層關係中content有部份和 links重疊，
那是我們在閱讀全文時，整個文章會佔據視窗的原因，
也就是說．．content 的可視寬度其實是和 container 的內容區寬度一樣為 100%，虛線部份才是 #content 的內容區。
倘若想拼貼人生現在的設定一樣，在閱讀全文時仍保有一個空白，那就必需content區變小，如此結構圖就會變成如下：
★現在已經有些許了解圖層關係，接下來在操作時我們要發揮一下想像力
其實這些層次在上面是用各種色塊來表示，但實際上它都是”透明的”
就好像是幾張透明的塑膠袋（或是透明片）重疊在一起一樣
如果沒有顏色的填充或是圖片的放置，基本上它都是透明的
如此解說．．就可以比較了解我的blog的放置
現在開始說明：
★我的BODY放的圖是↓
注意一下：底圖靠左方有一條直線
顯示出來的效果是↓
★接下來是第二層container 是↓，我這張圖其實不大，也就是因為不大它無法完全覆蓋住BODY的底圖
顯示出來的效果↓
注意一下：只有圖片的部份是不透明的，其餘的圖層區還是透明，因此底圖才會顯示出來，在頁面上也會看到那條線的存在，所以它實際的container應該是↓
灰色是圖片，其餘白色部份是透明的
我故意讓它圖的大小蓋住左邊線條的一小部份，也就是因為放在第二層，所以在閱讀文章時不會隨著links消失而不見
第三層的設定：
★我的banner 是沒有放圖，只有blogtitle，我將它設定成只有20px的高度，因此只能放下blogtitle，也就是 私房心事の拼貼人生 這幾個字
★內文和連結區，也因為我只有文字，沒有另外做色塊的區隔，因此，他們很自然的也是透明（很像透明的幻燈片，上面只有些文字）↓
內文區和連結區
當然，如果我的文章內有圖，也就會蓋過底圖，那些漂亮的紋路也就會被遮住
另外links的位置，我有稍微往下降，形成左上方有一個小小的空白區，那是用來顯示container上的圖，如果沒有向下移動，那就變成邊欄文字壓在圖上，
當然你也可以故意做成這樣的效果，讓字壓在圖上，只要不影響閱讀這樣子也會變成另一美感
★★ 最後你可以想像一下
把 body＋container＋(banner＋content＋links+footer) =完整的blog
也就是把這三張透明片加起來就是你的版面設定
＋＋=
完整的blog
至於詳細的小細節修改內容，我建議參考
:: Mr. 戀上 Miss. ::的css教學
引用URL
建議可以把一些有用到的背景圖加上框線，像這樣：
比較容易讓讀者看到。
參考看看 ^^
TO jaceju：
謝謝你的提議，我己將文中的圖改過
再次感謝你的分享 ^^
因為我都是用文字，不過我已經盡量附註說明白了
我想有這篇教學，茉妍會更了解吧 ^_^
TO 喵 ：
我相信她慢慢地就能了這其中的關係．
其實我會這麼快就上手，多虧了妳和許多先進的教學整理
偶是孔夫子面前賣文章，有不對的地方，千萬要告訴偶喔
再次向您們說 謝謝～
不過我喜歡用css主要是因為更換樣式設計真的很方便,以前我還喜歡設定捲軸色彩以及濾鏡效果...完配色遊戲真的很有趣唷!
TO dos ：
看著一堆東西．．慢慢的組起來，真的很有成就感
可是遇到想不通的地方，就有些 ＆＾％＆＾％＾＆！！
唉～我的邊欄，原來要設計成下拉式開同一視窗．可是在網頁測試上就很ok，為什麼來到這裡就一定會變成另開呢?
不知dos是否有空可以幫偶一把．．．
我己增填在本文中，
就是有關透明層次的那一部份
轉眼就要12am了,呼~~基本上,我花一個晚上的時間先消化區塊的辨別,明晚再繼續~~(畢竟要將這些區塊記熟本身就很不容易~~尤其對我這個英文實在不怎麼樣的人來説~~)
再次謝謝姊姊~~:) 晚安安~~
to 默言 ：
辛苦妳了～好好休息吧
一切慢慢來，千萬別給自己太大的壓力
放輕鬆妳會看得更清潵
我有好幾天都在試著改版面，
不過就是不滿意，
要不然就是有些地方改的不好！
看了妹仔寫的這個，
就比較好了解囉！
謝謝你的這篇教學文呢！
我可以好好的來研究一下了。
TO 依戀魚 ：
從樂園晃到了生活,又到了食譜區...
我發現魚的品味真的很不錯
清淡簡潔,很有一貫的風格
嗯！加上圖片說明，我果然立刻明白過來了！
呵呵，看樣子連姊姊也知道我沒有看到圖片只以文字解讀根本就是有看沒懂的樣子...^^b真是糟糕！不知道以後會不會變得很依賴圖片解析？？？(：汗)
TO 默言：
依賴圖片解析是很正常的，因為我也是如此
偶把一堆的教學網址留在我的最愛中，在修改遇到瓶頸時，就會打開來查看，就好像查字典一樣．．．
工具書不是生活必需，但一旦要使用時，他就是最好的救火隊
我還是那句話：善用妳的工具書
那個CSS我還在努力踹門中..........
不過,我已經確實..我還沒搞定底圖的Size問題...
Ｖ__Ｖ唉。。。。。。。。。。。。。。（可嘆啊）
TO 默言:
去看過了，也到妳家回言了
說真的，我認為這次改的還不錯，我不太明白妳所謂的SIZE是有什麼問題
如果妳要放全版，那就必需把妳URL前的#FFFFFF拿掉，把圖做為７８０．
試著把妳的不滿意處清楚的告訴偶們，才能為妳想到解決之道
成了姊姊..成了..成了..
感謝姊姊的指教~~~
好開心喔~~^o^~~
(嗯...還不盡滿意...回家再努力~~呵呵~~謝謝妳)
to 茉妍：
偶們就說嘛～改版面會改上癮的．．．^O^ ^O^
加油吧．．祝妳早日成功
TO 小宓：
妳．．確定妳可以看得懂嗎??偶很懷疑．．．
還是快告訴偶，妳想要什麼風格或放什麼圖比較快．．
等妳決定後，我就會動手了．．．做好了再教妳使用．
作網頁碰到垃圾碼是很常有的現象,你不妨單獨實驗看看那個是什麼東西~
置於你說的邊欄...我不太了解你的意思呢!是只有你的會這樣還是其他人也會?
to dos ：
呵呵...妳誤會了
＆＾％＆＾％＾＆．．．不是怪碼，是偶的爛心情
所謂的邊欄指的是我左手邊的一些連結目錄
我之前也是單獨試過，就是ok，才會放上．．．
不過．．妳好像說到問題所在
”單獨”．．
分開是單一個程式沒錯，合在一起後就不是只有一個下拉式選單
是不是我在上一個下拉式選單有做一些指令上的設定，而他會沿用到下一個選單
我想．．．我應該明瞭如何做了，．．我會再找時間試一下
謝謝妳的提醒
但不讓下面的版面跟著往中間移呢??
不知道要從哪裡調整...
麻煩回答一下嚕! 謝謝*
to 梨ㄦ：
在樂多版面設計中，選自我設定
在css中找到一段banner 的設定，在裏面加上一行向中對齊的指令TEXT-ALIGN: center;
就可以了
例如：
#banner {
WIDTH: 739px;
HEIGHT: 180px;
TEXT-ALIGN: center;
background-image: url(http://blog.roodo.com/joyce001004/3305ca64.jpg);
background-repeat: no-repeat;
}
希望對妳有幫助
我只是做個文章分類修改
整個LINK就不見了
能否幫我看看是那個出了問題呢><
http://blog.roodo.com/robinhood
to 小步：
在樂多的編器中，有些html指令是無法預覽和修改的
也就是說，有些指令在新增文時，只能接直貼好送出，但一旦用預覽或再次修改文章時，那些指令就會變成不完整．．．然後就會變成你所看到的，網頁不完整
所以，你可以把那篇文章刪除，重新直接發表，或是到編輯文章中把已改變的html改回來再送出，但記得要直接送出喔，不要用預覽功能
試試看唄～
一段時間不見
妳的blog經營得有聲有色
每次來都花了我很多時間啊!
呵呵…
妳css語法的分享都讓我心動不已
不過，我現在太忙了
只好慢慢學習囉!
先謝過妹仔姐姐!
to Stacy：
謝謝妳的稱讚．．．
自從妳到了荷蘭後，我最期待就是異國的風情分享
妳果真沒使我失望，看著那些照片，我心都驚嘆不已，實在是美不勝收
希望妳在他鄉的日子，能天天都快樂
to Kuma ：
恭喜您
很高興我的筆記對您有幫助
我真的好希望能理解css原理
看完本篇 雖然不能立即上手
（因為我資質弩頓）
但我相信來回試個幾次 一定能進步
謝謝好心的～妹子姊姊（我也可以這樣叫你嗎）
to emma ：
我在css學習中也算是個半吊子，只是就因為是半吊子，所以明白初學者的一些問題
相信只要妳有心一定會明白樂多的基本結構
致於稱謂，就只是稱謂而已，很多人都是如此叫，我不會在意的
歡迎妳有空常來～
真的很感謝你用這麼清楚的比喻 (畫布)
(還詳細說明為什麼link會掉下去)
讓我了解了blog的版面
真的太感謝你了 >
to 橘子 ：
不用客氣， ^_^#
我只是整理出一些學習上的小小心得罷了
希望能對妳有所幫助才是
歡迎妳有空常來坐坐
#container {
MARGIN: 0px auto 0px;
WIDTH: 740px;
TEXT-ALIGN: left;
我不想要有線(即邊框)限制了我裡面的上下左右?或是教我如何調整邊框的左右大小?謝謝!!
to pattychanw :
你所提供的那一段語法中,並沒有線框的設定
而且通常那些框線(要視框線範圍有多大)都是設定在.date或 title或blogbody中
線的語法是border 開始
border-style: solid; 指線的形狀..實線或是虛線
border-width: 1px 指線的大小
border-color: #ffffff;指線的顏色
請問，
您直接在訪客留言下，以格主的身份回覆該留言，要怎麼做。我只會用另一則留言來回覆. 謝謝
你好!
我的Blog一直有個CSS問題，使用IE卻是正常，火狐卻跑位，我改了半天不知啥原因，能到我http://blog.roodo.com/rush_go看看如何解決嗎?
![[Syndicate this site]](http://cdn.rimg.tw/images/blog/rss.gif "Syndicate RSS feed"){kind=small}
![[Syndicate this site]](http://cdn.rimg.tw/images/blog/atom.gif "Syndicate ATOM feed"){kind=small}
