用表格定位網(wǎng)頁

使用表格可以清晰地顯示列表的數(shù)據(jù)，實際上表格的作用遠遠不止顯示數(shù)據(jù)，它在網(wǎng)頁定位上一直起著重要的作用，尤其是對于使用非IE瀏覽器的網(wǎng)友來說，使用表格定位的網(wǎng)頁比使用圖層定位的網(wǎng)頁更具有優(yōu)勢。


　　一、創(chuàng)建表格


　　第一步：在Dreamweaver MX 2004中運行“Insert→Table”命令，彈出屬性設(shè)置窗口，其中“Rows”和“Columns”分別對應(yīng)著表格的行數(shù)和列數(shù)，“Table width”表示表格的寬度，而“Border thickness”則是邊框的寬度，同時還可以設(shè)定表格的樣式，根據(jù)自己的需要來設(shè)置表格的相應(yīng)屬性即可。

　　小提示：表格的寬度和高度可以通過瀏覽器窗口百分比或者使用絕對像素值來定義，比如設(shè)置寬度為窗口寬度的60％，那么當(dāng)瀏覽器窗口大小變化的時候表格的寬度也隨之變化；而如果設(shè)置寬度為400像素，那么無論瀏覽器窗口大小為多少，表格的寬度都不會變化。

　　第二步：點擊窗口中的“OK”按鈕之后即可在Dreamweaver MX 2004中新建一個表格，而且通過窗口下部的屬性面板還可以對其進行諸如表格線條的顏色、表格的背景色、單元格的對齊方式等參數(shù)進行調(diào)整。


　　二、基本使用


　　在創(chuàng)建了上述的表格之后，我們就可以對它進行調(diào)整使用。比如我們需要制作圖1所示的表格，就可以先插入一個四行三列的表格，然后對其進行下述操作。

　　第一步：在表格第一列的上面兩個單元格中按下并拖動鼠標(biāo)，此時可以選中兩個單元格。接著點擊屬性模板中的“Merges selected cells using spans”按鈕，這樣就把選中的兩格合并成為一個單元格。按照這種方法再將表格第一行右側(cè)的兩個單元格合并為一個單元格。

　　小提示：選中一個單元格之后點擊屬性面板中的“Splits cell into rows or columns”按鈕可以把單元格拆分為多個行或者列。

　　第二步：將表格第一列的三個單元格全部選中，再將屬性模板中的背景顏色（Bg）一項設(shè)置為“#FFFF00”，這樣表格第一列中的單元格背景全部變?yōu)辄S色。

　　第三步：在表格中輸入相應(yīng)的文本，為了美觀可以在屬性面板中進行居中設(shè)置。

　　第四步：為了使表格產(chǎn)生立體效果，可以將整個表格選中，然后在屬性面板中設(shè)定表格邊框的寬度（Border）為7，并且將邊框顏色（Border color）設(shè)置為藍色即可。

　　小提示：通常選取整個表格比較困難，在此提供四種常用的方法：1． 把鼠標(biāo)移動到表格右邊界外側(cè)，按下鼠標(biāo)之后往左拖拽，這樣可以快速選取整個表格。2． 運行“Modify→Table→Insert Table”命令選擇整個表格。3． 在單元格中右擊鼠標(biāo)，并且從彈出菜單中選擇“Table→Insert Table”命令選取整個表格。4． 用鼠標(biāo)點擊任一個單元格，接著按兩下“Ctrl＋A”組合按鈕選取整個表格。

　　完成上述操作之后，我們就可以在Dreamweaver MX 2004中定制出頗具專業(yè)水準(zhǔn)的表格了。
　　三、表格定位


　　其實表格的網(wǎng)頁定位主要通過將網(wǎng)頁內(nèi)容分成若干個區(qū)，然后將相應(yīng)的內(nèi)容分別填入不同的表格，從而做成非常規(guī)范與專業(yè)的網(wǎng)頁。下面就來看看圖2所示的網(wǎng)站是如何通過表格實現(xiàn)的。

　　1． 標(biāo)題和導(dǎo)航區(qū)

　　網(wǎng)頁最上部由兩個大的表格組成：上面表格是圖片區(qū)，下面是導(dǎo)航區(qū)。圖片區(qū)為一行一列，通過“Insert→Image”命令插入網(wǎng)站的標(biāo)題圖以及Logo圖標(biāo)。導(dǎo)航區(qū)則是一個一行九列的表格，分別輸入輸入各個子欄目的名稱，然后通過“Insert→Hyper Link”命令來創(chuàng)建每個導(dǎo)航欄目的鏈接。

　　2． 正文區(qū)

　　正文區(qū)總得說來是由一個一行三列的大表格構(gòu)建而成，其中每一列再通過插入單獨的表格或者拆分的方法來形成多個區(qū)域并輸入相應(yīng)的信息。比如最左邊一列就可以插入一個5行一列的表格，分別用來顯示Logo圖標(biāo)以及相應(yīng)的文字內(nèi)容；中間一列可以拆分為3至4個單元格，每個單元格用于顯示不同欄目的主要內(nèi)容提示；右邊一列也可以拆分為5個區(qū)域顯示不同的內(nèi)容。這樣在一個大表格中劃分出多個小單元格組成了網(wǎng)頁的主要內(nèi)容。至于具體的單元格操作在此就不再贅述，大家可以自己試著體會一下。

　　雖然通過表格可以實現(xiàn)最基本的網(wǎng)頁定位，但是這種方法也并不是沒有缺點，它的最大問題在于表格內(nèi)容下載比較耗時，往往要等一個表格中全部內(nèi)容下載完成后才能顯示該表格內(nèi)容，因此尤其要注意表格的嵌套使用，盡量不要嵌套過多的表格以影響頁面的下載速度。