第一步:在表格第一列的上面兩個儲存格中按下並拖曳滑鼠,此時可以選取兩個儲存格。接著點選屬性範本中的「Merges selected cells using spans」按鈕,這樣就把選取的兩格合併成一個儲存格。依照這個方法再將表格第一行右邊的兩個儲存格合併為一個儲存格。
小提示:選取一個儲存格之後點選屬性面板中的「Splits cell into rows or columns」按鈕可以把儲存格拆分為多個行或列。
步驟二:將表格第一列的三個儲存格全部選中,再將屬性範本中的背景顏色(Bg)一項設定為“#FFFF00”,這樣表格第一列中的儲存格背景全部變為黃色。
第三步:在表格中輸入對應的文本,為了美觀可以在屬性面板中進行居中設定。
第四步:為了使表格產生立體效果,可以將整個表格選中,然後在屬性面板中設定表格邊框的寬度(Border)為7,並且將邊框顏色(Border color)設為藍色即可。
小提示:通常選取整張表格比較困難,在此提供四種常用的方法:1. 把滑鼠移到表格右邊界外側,按下滑鼠之後往左拖拽,這樣可以快速選取整個表格。 2. 執行“Modify→Table→Insert Table”命令選擇整個表格。 3. 在儲存格中按滑鼠右鍵,並從彈出式功能表中選擇「Table→Insert Table」指令選取整個表格。 4. 用滑鼠點選任一個儲存格,接著按兩下「Ctrl+A」組合按鈕選取整個表格。
完成上述操作之後,我們就可以在Dreamweaver MX 2004中客製化出頗具專業水準的表格了。
三、表格定位
其實表格的網頁定位主要透過將網頁內容分成若干個區,然後將對應的內容分別填入不同的表格,從而做成非常規範與專業的網頁。下面就來看看圖2所示的網站是如何透過表格實現的。
1. 標題和導航區
網頁最上部由兩個大的表格組成:上面表格是圖片區,下面是導航區。圖片區為一行一列,透過「Insert→Image」指令插入網站的標題圖以及Logo圖示。導覽區則是一行九列的表格,分別輸入輸入各個子列目的名稱,然後透過「Insert→Hyper Link」指令來建立每個導覽列目的連結。
2. 正文區
正文區總得說來是由一個一行三列的大表格建構而成,其中每一列再透過插入單獨的表格或分割的方法來形成多個區域並輸入對應的資訊。例如最左邊一列就可以插入一個5行一列的表格,分別用來顯示Logo圖示以及對應的文字內容;中間一列可以分割為3至4個儲存格,每個儲存格用來顯示不同欄目的主要內容提示;右邊一列也可以分割為5個區域顯示不同的內容。這樣在一個大表格中劃分出多個小單元格就組成了網頁的主要內容。至於具體的單元格操作在此就不再贅述,大家可以自己試著體會一下。
雖然透過表格可以實現最基本的網頁定位,但是這種方法也並不是沒有缺點,它的最大問題在於表格內容下載比較耗時,往往要等一個表格中全部內容下載完成後才能顯示該表格內容,因此尤其要注意表格的嵌套使用,盡量不要嵌套過多的表格以影響頁面的下載速度。