第一步：在表格第一列的上面兩個(gè)單元格中按下并拖動(dòng)鼠標，此時(shí)可以選中兩個(gè)單元格。接著(zhù)點(diǎn)擊屬性模板中的“Merges selected cells using spans”按鈕，這樣就把選中的兩格合并成為一個(gè)單元格。按照這種方法再將表格第一行右側的兩個(gè)單元格合并為一個(gè)單元格。
小提示：選中一個(gè)單元格之后點(diǎn)擊屬性面板中的“Splits cell into rows or columns”按鈕可以把單元格拆分為多個(gè)行或者列。
第二步：將表格第一列的三個(gè)單元格全部選中，再將屬性模板中的背景顏色（Bg）一項設置為“#FFFF00”，這樣表格第一列中的單元格背景全部變?yōu)辄S色。
第三步：在表格中輸入相應的文本，為了美觀(guān)可以在屬性面板中進(jìn)行居中設置。
第四步：為了使表格產(chǎn)生立體效果，可以將整個(gè)表格選中，然后在屬性面板中設定表格邊框的寬度（Border）為7，并且將邊框顏色（Border color）設置為藍色即可。
小提示：通常選取整個(gè)表格比較困難，在此提供四種常用的方法：1． 把鼠標移動(dòng)到表格右邊界外側，按下鼠標之后往左拖拽，這樣可以快速選取整個(gè)表格。2． 運行“Modify→Table→Insert Table”命令選擇整個(gè)表格。3． 在單元格中右擊鼠標，并且從彈出菜單中選擇“Table→Insert Table”命令選取整個(gè)表格。4． 用鼠標點(diǎn)擊任一個(gè)單元格，接著(zhù)按兩下“Ctrl＋A”組合按鈕選取整個(gè)表格。
完成上述操作之后，我們就可以在Dreamweaver MX 2004中定制出頗具專(zhuān)業(yè)水準的表格了。
三、表格定位
其實(shí)表格的網(wǎng)頁(yè)定位主要通過(guò)將網(wǎng)頁(yè)內容分成若干個(gè)區，然后將相應的內容分別填入不同的表格，從而做成非常規范與專(zhuān)業(yè)的網(wǎng)頁(yè)。下面就來(lái)看看圖2所示的網(wǎng)站是如何通過(guò)表格實(shí)現的。
1． 標題和導航區
網(wǎng)頁(yè)最上部由兩個(gè)大的表格組成：上面表格是圖片區，下面是導航區。圖片區為一行一列，通過(guò)“Insert→Image”命令插入網(wǎng)站的標題圖以及Logo圖標。導航區則是一個(gè)一行九列的表格，分別輸入輸入各個(gè)子欄目的名稱(chēng)，然后通過(guò)“Insert→Hyper Link”命令來(lái)創(chuàng )建每個(gè)導航欄目的鏈接。
2． 正文區
正文區總得說(shuō)來(lái)是由一個(gè)一行三列的大表格構建而成，其中每一列再通過(guò)插入單獨的表格或者拆分的方法來(lái)形成多個(gè)區域并輸入相應的信息。比如最左邊一列就可以插入一個(gè)5行一列的表格，分別用來(lái)顯示Logo圖標以及相應的文字內容；中間一列可以拆分為3至4個(gè)單元格，每個(gè)單元格用于顯示不同欄目的主要內容提示；右邊一列也可以拆分為5個(gè)區域顯示不同的內容。這樣在一個(gè)大表格中劃分出多個(gè)小單元格組成了網(wǎng)頁(yè)的主要內容。至于具體的單元格操作在此就不再贅述，大家可以自己試著(zhù)體會(huì )一下。
雖然通過(guò)表格可以實(shí)現最基本的網(wǎng)頁(yè)定位，但是這種方法也并不是沒(méi)有缺點(diǎn)，它的最大問(wèn)題在于表格內容下載比較耗時(shí)，往往要等一個(gè)表格中全部?jì)热菹螺d完成后才能顯示該表格內容，因此尤其要注意表格的嵌套使用，盡量不要嵌套過(guò)多的表格以影響頁(yè)面的下載速度。
用框架構建網(wǎng)頁(yè)
我們登錄一些論壇之后，可以看見(jiàn)左邊是每個(gè)討論區的名稱(chēng)，點(diǎn)擊任意一個(gè)討論區就可以在右部區域中看見(jiàn)相應討論區的內容，不過(guò)左右部分是獨立顯示的，例如拖動(dòng)左邊的滾動(dòng)條不會(huì )影響右側的顯示效果。其實(shí)這就是頁(yè)面中利用了框架技術(shù)，因此可以把瀏覽器的顯示空間分割為幾個(gè)部分，每個(gè)部分都獨立顯示網(wǎng)頁(yè)內容。而且把幾個(gè)框架結合在一起構成框架集，能夠讓頁(yè)面具有更為豐富的效果。
一、創(chuàng )建框架和框架集
第一步：在Dreamweaver MX 2004中新建一個(gè)頁(yè)面，運行“View→Visual Aids→Frame Borders”命令之后可以看見(jiàn)編輯窗口中出現一個(gè)邊框，用鼠標點(diǎn)擊邊框之后可以看見(jiàn)虛線(xiàn)框，說(shuō)明新建的頁(yè)面中已經(jīng)附帶了框架。
第二步：按下“Alt”按鍵，用鼠標拖拽邊框，松開(kāi)鼠標之后就可以把窗口一分為二，這樣就把頁(yè)面分為兩個(gè)邊框。比如拖拽左右邊框可以把窗口分為左右兩個(gè)部分，而拖拽上下邊框可以把窗口分為上下兩個(gè)部分。另外，窗口的四個(gè)角也可以拖拽，這樣可以直接把窗口分為四個(gè)區域（如圖1）。當窗口分割為幾個(gè)框架之后，每個(gè)框架都可以作為獨立的網(wǎng)頁(yè)進(jìn)行編輯，也可以直接把某個(gè)已經(jīng)存在的頁(yè)面賦給一個(gè)框架。
第三步：框架允許嵌套，比如要創(chuàng )建圖2所示的框架，可以先通過(guò)上述的方法水平一分為二，但是接著(zhù)不能直接拖拽邊框，否則會(huì )得到圖1所示的框架。正確的方法是先在右下角的框架面板中點(diǎn)擊右部的框架，然后再按下“Alt”按鈕拖拽邊框。
小提示：如果邊框拖拽錯了，只要用鼠標把需要刪除的線(xiàn)拖拽到父框架的邊框上即可刪除它。
二、編輯框架
頁(yè)面中經(jīng)?；煊锌蚣芎涂蚣芗?，選取不同對象可以進(jìn)行不同的屬性設置。
第一步：框架集的屬性。選中框架集之后可以看見(jiàn)屬性對象面板（如圖3），其中“Border”一項可以設定是否顯示邊框，“Border Width”一項可以設定邊框寬度，“Border Color”可以設定邊框的顏色。另外還可以設置每個(gè)邊框的尺寸，此時(shí)在面板右邊的縮略圖中選定一行或者一列，然后在它旁邊的“Alue”輸入框中輸入數值，并且選擇像素或者百分比作為單位即可。
第二步：框架的屬性。如果在框架面板中選擇任意一個(gè)框架，在框架面板中被選中的框架會(huì )有黑色的邊框顯示，這時(shí)就可以在屬性面板中進(jìn)行相應的設置了（如圖4）。比如在此可以通過(guò)“Src”地址欄設置框架中的網(wǎng)頁(yè)文件，“Scroll”為是否加入滾動(dòng)條，“Border”可以決定是否顯示邊框，“No resize”允許在瀏覽器是改變框架大小，另外“Margin Width”和“Margin Height”分別設置邊界的寬度和高度來(lái)決定框架中內容和邊框的距離。
第三步：輸入框架中的內容。用鼠標點(diǎn)擊任意一個(gè)框架之后就可以像正常編輯頁(yè)面一樣插入各種文本內容、圖片、Flash動(dòng)畫(huà)和背景音樂(lè )等網(wǎng)頁(yè)元素。
其實(shí)利用框架能夠對網(wǎng)頁(yè)布局進(jìn)行合理規劃，尤其在設計網(wǎng)頁(yè)初期更顯得格外重要，因此需要大家在日常使用中多加練習，這對搭建一個(gè)優(yōu)秀的網(wǎng)站可是大有裨益的！
聯(lián)系客服
