情如春水　愁似秋月

構成一個佈景主題的四大要素：

• 頁　　首
• 頁　　尾
• 文章內容
• 側 邊 欄

　　這四個要素我們可以把它想像成四個區塊，然後利用 html 標籤來套用這四個區塊。當然啦，每個寫網頁的人都會帶有其寫作的習慣，所以下面所要談及的只是簡單易學的一個初步版面架構。無論是兩欄或三欄或者更多欄，不外乎都是這四種區塊在做排列組合。

　　講到排版不外乎就是使用 div 與 table 標籤來達成；對於初學者而言使用 table 標籤比較容易，不過相對的其樣式的選擇就不如 div 。如果您有一些基礎就可使用 div 標籤或是兩者混搭。所以，在這邊我們將要對這兩種方式稍微簡單的談一下：

• table
• div(或 div 與 table 混搭)

一、table 方式

　　

　　在上圖中，紅色框線表示一個 table 表格。其中分為上、中、下三個 tr 標籤，而中間 tr 的部分又可分為兩個 td 儲存格。這兩個框線分別為黑色(顯示文章內容)與綠色(側邊欄)的 td 儲存格其樣式設定一定要將其內容設定為「垂直置上」否則它預設的是「垂直置中」。

二、div(或 div 與 table 混搭) 方式

　　

　　在上圖中，主要分為框線為藍色、紅色與咖啡色三個區塊。而紅色框線的區塊又可分為黑色框線與綠色框線兩個區塊，而「混搭」就是將這兩個區塊從原本使用 div 標籤的方式改為使用 table 標籤。也就是說紅色框線的區塊(父元素)其底下的兩個 div 轉變為使用 td 。