從程式碼中我們已整理出含有CSS樣式的所有HTML標籤,而這些標籤看起來很多,但本質上不外是下面這幾種而已。
<DIV>(容器區塊)、<Span>(容器區塊)、<Table>(表格)、<P>(段落)、<Input>(輸入欄位)、<a>(文字)、<h4>(標題文字)。

Grey模板中最多的HTML標籤應該是<DIV>(容器區塊,Container Tag),這標籤透過Class選擇器或ID選擇器去選擇個別樣式的屬性,容器區塊所涵蓋的範圍很大,這標籤裡就如同容器一樣可以容納其他HTML標籤元素。一個容器裡面還可以裝另一個容器,但是第二個容器裡面的屬性如果沒有重新定義的話,就會繼承(Inherit)上一層容器的屬性。不知道大家有沒有看過俄羅斯娃娃,最外面的一個大娃娃裡面包了一個中娃娃,中娃娃裡面包了小娃娃,整個Grey模板的部落版面基本上就像這樣,因此我們必須知道容器的上下隸屬關係,才能有效控制我們的部落格版面。
從網頁原始碼中,我們可以得知Grey模板的容器區塊約略是這樣的從屬關係:


由這圖示可以知道,Container是第一層的容器,Container中間有4個地位平行的容器,依序是Top、Topmenu、Main以及pagefooter。而這4個第二層容器中,Top容器之中又有BlogHeader以及BlogDescr這2個第三層容器,Main容器裡面又包含了Siderbar-l、Content以及Siderbar-r這3個第三層容器,而pagefooter這容器裡面含有Bottommenu以及Bottom這2個第三層容器。在第三層容器中,由於Siderbar-l以及Siderbar-r的容器所含的第四層容器是相同的,為了簡化圖示,所以我在圖示上只以Siderbar-r為例。Siderbar-r容器裡除了我們可以到後台拖曳的欄位外,我們是可以自己新增欄位(Sideblock)的,而每個欄位會有欄位名稱(Sidetitle),也會有欄位內容(Sidebody),分別以這三個容器呈現。

最後,容器裡面可以放什麼呢?文字、圖片、表格、影音等元素或物件外,凡所有站方可以容忍你放的,都可以讓我們自己嘗試去置入囉!!由於可以置放這些物件,所以當然也可以設定與這些元素或物件有關的樣式屬性值,等下回我們再來談談區塊裡的基本屬性值。

克里斯 發表在 痞客邦 PIXNET 留言(4) 人氣()


留言列表 (4)

發表留言
  • repeat
  • 真高興有人願意跳出來寫grey的教學耶^O^

    俄羅斯娃娃那個例子舉的真好 :p
  • 謝謝,有人鼓勵,才有繼續寫作的動機。有任何不足的地方,也請大家指教囉!!

    克里斯 於 2007/07/25 23:45 回覆

  • Rubymon
  • 給你拍拍手

    真得要給你拍拍手~~~
    連我這種電腦白癡都覺得自己好像有點給他瞭解了!!!
    希望你能夠繼續寫!!!
    加油~~~
    ps.你們家小比真的很帥氣喔!
  • 謝謝你的股利(鼓勵),我想我會繼續寫的,也感謝你對我們家小比的稱讚,但是我不會轉告他的,以免他驕傲....哈!!

    克里斯 於 2007/07/27 14:28 回覆

  • busymom
  • Thank you Chris, 我改了Top 的高度, 不知道現在從Fire Fox 看起來如何?

    有些人會把很簡單的東西描述得很複雜, 有些人卻能過把很難的東西, 用很平易近人的方式, 表達出來 and precisely.
    You are the one. Thank you so much for your contribution.
  • 現在用FireFox看整個版面都很正常了,圖片的顯示完全"到位"。BTW, thanks for your appreciation and encouragement. I will try to post more css article to share with everybody.

    克里斯 於 2007/07/27 18:19 回覆

  • europaexplorer
  • 版主你好
    我最近在嘗試改版
    可是遇到問題
    我的文章區塊希望是在600寬度
    可是我的第二側欄與文章區塊之間的空格太大
    不知道該如何改進?
    能否麻煩你建議一下?
    謝謝
【 X 關閉 】

【PIXNET 痞客邦】國外旅遊調查
您是我們挑選到的讀者!

填完問卷將有機會獲得心動好禮哦(注意:關閉此視窗將不再出現)

立即填寫取消