第8章“熱銷商品”頁面——表格的使用8.1表格基礎8.2“熱銷商品”頁面表格分析8.3表格基本操作8.4表格的編輯與優(yōu)化8.5使用布局表格在簡單的圖文混排頁面的制作中，頁面元素的位置控制問題一直困擾著我們，而通過表格來定位頁面元素，讓所有的內(nèi)容，如文本、圖形等都呈現(xiàn)在表格中，不僅可以很好地組織網(wǎng)頁內(nèi)容，還使得頁面元素的位置控制問題得到很好的解決。本章以“熱銷商品”頁面(本書配套電子文檔中的root/tujian.htm文件，網(wǎng)頁效果圖見圖8-1)為例，介紹表格排版的使用。

圖8-1“熱銷商品”頁面

構(gòu)成表格的元素主要有三個：行、列和單元格。在網(wǎng)頁插入的表格中，水平空間為行，垂直空間為列，而行列相交的空間則為單元格，如圖8-2所示。表格外觀的修改主要是通過設置表格<table>、行<tr>或單元格<td>的屬性來完成的。8.1表格基礎

圖8-2行、列和單元格

圖8-1所示的“熱銷商品”頁面雖然看起來非常復雜，但我們將其中的文字、圖片等內(nèi)容完全忽略后，得到的是如圖8-3所示的表格框架。從表格的邊框可作初步判斷，此表格框架是由六種表格組成(見圖8-4)：其中表格一為三行一列表格，主要放置LOGO以及定位其他表格；表格二為一行五列的分類導航欄；表格三為拆分合并后的表格，主要作用為定位表格四；8.2“熱銷商品”頁面表格分析而表格四為三個一行四列的表格；表格五為表格四單元格中的嵌套表格，用于儲存商品信息；由于表格六與表格五邊框設置不同，因此作為獨立表格設計。在分析其表格框架后，下面就開始利用表格來制作這個網(wǎng)頁。

圖8-3表格框架

圖8-4表格框架分析

8.3.1新建表格

創(chuàng)建表格的方法有三種：在菜單欄中選擇“插入”→“表格”命令，或在“常用”工具欄中點擊 (表格)按鈕，最方便的當然是按下Ctrl+Alt+T快捷鍵了。8.3表格基本操作通過以上操作可彈出“表格”對話框(見圖8-5)，以設置表格的具體屬性。根據(jù)“表格一”的屬性，我們將“表格”對話框的“行”設置為3，“列”設置為1，“表格寬度”有兩種單位可供選擇，分別是絕對像素值和表格占瀏覽器窗口百分比，這里設置為780像素。“邊框粗細”使用默認的設置1像素。“單元格間距”指單元格與單元格、單元格與表格邊框的距離，默認設置間距為2。而單元格邊距(又稱為單元格填充)表示單元格中的內(nèi)容與邊框距離的大小，默認設置為1。這里由于排版需要，我們將單元格間距與單元格邊距均設置為0，單擊“確定”按鈕，“表格一”的雛形就基本完成了(見圖8-6)。

圖8-5“表格”對話框

圖8-6“表格一”的雛形8.3.2設置表格和單元格屬性

經(jīng)過上面的操作后，還需對如圖8-6所示的表格作進一步的表格和單元格屬性設置操作。

首先，要設置單元格的高度。將光標定位在第一行的單元格中，觀察狀態(tài)欄的標簽選擇器，此時標簽選擇器所顯示的是 ，凹陷下去的<td>表示的是現(xiàn)在光標處在單元格內(nèi)，此時“屬性”窗口中所設置的是單元格的屬性“寬”、“高”、“背景顏色”、“背景圖像”等。根據(jù)“表格一”的需要，我們分別將光標定位在三個單元格中，并初步將單元格的高度分別設置為200、50、500像素。這里對單元格高度的設置只是為了讓初學者更清晰地對比和了解圖8-4中“表格一”的結(jié)構(gòu)，高度的設置對“表格一”內(nèi)容的填充及其嵌套表格的使用沒有任何影響。接下來設置表格的邊框顏色。在標簽選擇器顯示的 中，<tr>和<table>分別代表行和表格。因此，我們將光標放置在單元格中時，選擇標簽選擇器中的<table>標簽以設置表格屬性，此時標簽選擇器顯示為 ，光標所在的表格已被選中，被選中的表格下邊緣、右邊緣和右下邊緣將會出現(xiàn)小矩形選擇柄。“屬性”面板中所顯示的是當前表格的屬性設置，如“行”、“列”、“背景顏色”、“邊框顏色”等，我們對照“表格一”將“邊框顏色”設置為黑色，將“對齊”選擇為“居中對齊”。此時，“表格一”就成功完成了。8.3.3在表格中添加內(nèi)容

表格的單元格中可以添加文本、圖像以及Flash等其他對象。在表格中添加內(nèi)容只需將光標定位到單元格中，直接輸入文字可添加文本，而利用第6章所學內(nèi)容可將圖像、Flash等各種對象輕松地插入到單元格中?，F(xiàn)在我們將“表格一”第一行中的Banner圖片(見本書配套電子文檔中的root/img文件夾)插入到表格中：將光標定位到第一行單元格后，按下“常用”工具欄的 按鈕，利用插入圖像的方法，將圖片“banner.jpg”插入到單元格中。8.3.4拆分、合并單元格

當需要建立不規(guī)則的表格時，可以使用拆分、合并單元格的方法。如圖8-4中表格三和表格五就是不規(guī)則的表格，無法用插入表格的方法一次創(chuàng)建到位。下面就以表格三為例講解拆分、合并單元格的方法。

對于表格三，有兩種方法可以創(chuàng)建：

方法一：先新建一個七行一列的表格，將“表格寬度”設置為780像素，“邊框粗細”設置為0，并將第一、三、五、七行行高調(diào)整為20像素，第二、四、六行行高調(diào)整為266像素，再進行“拆分單元格”操作。將光標置于表格中的第二行，單擊鼠標右鍵，在彈出的快捷菜單中選擇“表格”→“拆分單元格”(見圖8-7)，或在“屬性”面板中左下角單擊 (拆分單元格)按鈕，當然最快捷的方法是按下快捷鍵Ctrl+Alt+S，此時將彈出“拆分單元格”對話框，供用戶設置拆分的行數(shù)或列數(shù)。我們根據(jù)需要，將第二行拆分為三列(見圖8-8)。重復以上步驟，將第四、六行也同樣拆分成三列，并適當調(diào)整列寬，使第一列和第三列列寬為25像素，表格三就創(chuàng)建完畢了。

圖8-7利用右鍵彈出菜單拆分單元格

圖8-8“拆分單元格”對話框方法二：先新建一個七行三列表格，表格列寬設置為780像素，第一、三、五、七行行高調(diào)整為20像素，第二、四、六行行高調(diào)整為266像素，再進行“合并單元格”操作。用鼠標拖動同時選中第一行的3個單元格，單擊鼠標右鍵，在彈出的快捷菜單中選擇“表格”→“合并單元格”，或在“屬性”面板中左下角單擊 (合并單元格)按鈕，當然最快捷的方法是按下快捷鍵Ctrl+Alt+M，此時三個單元格就將合并成一個單元格了。重復以上步驟，將第三、五、七行的三個單元格也同樣合并成一個單元格，適當調(diào)整列寬，使第一列和第三列列寬為25像素，表格三就創(chuàng)建完畢了。拆分、合并單元格能幫助我們完成一些復雜的表格制作，但拆分、合并后的表格在行高、列寬的調(diào)整上有一定的限制，如在表格三中，拆分后的第二、四、六行的三個單元格列寬不能單獨調(diào)整，任意調(diào)整一個單元格的列寬，均會影響其他行對應的單元格的列寬，因此，在使用時應注意拆分合并單元格的使用范圍。8.3.5創(chuàng)建嵌套表格

所謂嵌套表格，即在一個表格的單元格中再插入另外一個表格。使用嵌套表格的好處是實現(xiàn)網(wǎng)頁內(nèi)部排版的細節(jié)控制，這就很好地解決了只用一個單元格拆分、合并來制作網(wǎng)頁而帶來的行高或列寬的沖突。在圖8-4中，表格二、三、四、五、六都是嵌套表格。下面就逐一講解這些嵌套表格的創(chuàng)建過程。

(1)表格二的插入：將光標置于大表格的第二行，利用前面講過的方法，插入一個一行五列的表格，并設置表格的寬度、高度使其與所在單元格相符，表格邊框、間距設置為0，填充設置為2，由于網(wǎng)頁設置了背景顏色，因此我們要將表格二的背景顏色設置為白色。然后在表格二的每一個單元格中，分別插入樣式為“TranslucentTab”的Flash按鈕，將“按鈕文本”分別設置為“首頁”、“熱銷商品”、“商品分類”、“尺寸度量”、“關(guān)于我們”，并在單元格“屬性”面板中將Flash按鈕的對齊方式設置為居中對齊，嵌套表格表格二就完工了。

(2)表格三的插入：將光標置于大表格的第三行，按照8.3.4節(jié)所述的方法，將表格三插入到大表格中，將表格間距和填充設為0，并將表格背景顏色設置為“#9F5D9D”(紫色)，在表格第三、五行中，插入背景圖像“bg.jpg”(見本書配套電子文檔中的root/img文件夾)，嵌套表格表格三插入完成。

(3)表格四的插入：將光標置于表格三的第二行第二列中，插入一個一行四列的表格，并設置表格的寬度、高度，使其與所在單元格相符，將表格間距、填充設置為0，邊框設置為1，邊框顏色為“#A665A7”(紫色)，由于所在單元格設置了背景顏色，因此，我們還要將表格四的背景顏色設置為白色。利用同樣方法，在表格三中第四、六行插入表格四。

(4)表格五的插入：表格五是嵌套于表格四的每一個單元格中的一個不規(guī)則表格。將光標置于表格四的單元格中，插入一個四行一列的表格，表格的邊框、間距、填充設置均為0，調(diào)整表格的大小使其與所在單元格相符，并將表格前三行的行高分別設置為30像素、160像素和44像素。利用拆分單元格的方法，將第二行拆分為三列。在表格的第一、三行中分別輸入相應的文字描述并設置為居中對齊，第四行中插入圖像“book_16.gif”(見本書配套電子文檔中的root/img文件夾)，并設置為居中對齊。重復以上操作，表格五就被嵌套在表格四的每一個單元格中了。

(5)表格六的插入：表格六是一個簡單的一行一列的表格，在表格四的第二行第二列中，插入一個一行一列的表格，并將表格邊框設置為1，顏色為黑色，間距、填充均設置為0，最后，在表格六中插入相應的商品圖片即可。

最后，將網(wǎng)頁標題修改為“熱銷商品”，網(wǎng)頁背景顏色設置為“#F9E8F9”，如圖8-1所示的“熱銷商品”頁面就全部完成了。

8.4.1改變表格和單元格的大小

在網(wǎng)頁制作的過程中，很多時候需要對表格或者單元格的大小進行調(diào)整。對于整個表格大小的調(diào)整，常用的方法是選中表格后，通過拖動表格下方、右下方和右方出現(xiàn)的控制手柄(見圖8-9)來分別調(diào)節(jié)表格的高度、寬度和同時進行高、寬度的調(diào)節(jié)。在有明確的調(diào)整目的的情況下，如需要將表格列寬調(diào)整到某個具體的大小時，可直接在“屬性”面板里表格的“寬”、“高”屬性中輸入數(shù)字。8.4表格的編輯與優(yōu)化

圖8-9表格大小的調(diào)整單元格的行高、列寬可以通過拖動單元格的邊框進行調(diào)整。將鼠標移動到需要調(diào)整的單元格的行邊框上，鼠標變成 形狀時，拖動鼠標可調(diào)節(jié)行高；同樣，將鼠標移動到需要調(diào)整的單元格的列邊框上，鼠標變成

形狀時，拖動鼠標可調(diào)節(jié)列寬。這里需要注意的是，Dreamweaver為了保證表格的總寬度不變，調(diào)整列寬時，相鄰的單元格的列寬將會受到影響，如需保留其他列的列寬，可按下Shift鍵后再進行拖動，此時其他列寬不變，表格的總寬度隨著單元格列寬的調(diào)節(jié)而改變。8.4.2編輯單元格

單元格可被復制、剪切、粘貼和刪除。在選中一個或多個單元格后，按下快捷鍵Ctrl+C可復制單元格，按下快捷鍵Ctrl+X可剪切單元格，在需要粘貼的位置按下Ctrl+V鍵即可粘貼單元格了。注意，粘貼單元格時從粘貼位置向下存在的表格行數(shù)和向右存在的表格列數(shù)必須滿足所剪切或復制的單元格的行列數(shù)。在刪除單元格時，需選中單元格所在的行或列，按下Delete鍵整行或整列刪除才能達到刪除單元格的目的，否則只能刪除單元格中的內(nèi)容。8.4.3增加、刪除行或列

在表格中增加行或列有以下三種方法：

方法一：將光標定位在某一單元格中，單擊鼠標右鍵，在彈出的快捷菜單中選擇“表格”→“插入行”或“插入列”，可在光標所在的單元格的下方或右方插入一行或一列。當需要插入的行或列不止一個時，可選擇“插入行或列”，在打開的“插入行或列”對話框中指定需要插入的行數(shù)或列數(shù)。在菜單欄中選擇“修改”→“表格”后出現(xiàn)的子菜單項與右鍵彈出的菜單有相同的內(nèi)容，因此，也可在定位光標后利用菜單欄進行插入行或列的操作。方法二：如需在表格的末尾添加行，可將光標定位在最后一個單元格中，按下“Tab”鍵，即可快速地添加一個新行。

方法三：選中表格后，直接在屬性窗口中輸入行數(shù)或列數(shù)，也可達到增加行或列的目的。

刪除行或列的常用方法是選中該行或列后，按下Delete鍵即可。8.4.4自動套用表格格式

為了方便用戶，Dreamweaver預置了一些表格的格式設計供用戶方便地套用。

自動套用表格格式的方法是：選中表格后，選擇“命令”→“格式化表格”，在彈出的“格式化表格”對話框中(見圖8-10)，用戶可自由選擇設計主題，并可進一步修改行顏色、對齊方式等其他表格屬性，按下“確定”按鈕，預置的表格屬性就將套用到所選中的表格中(見圖8-11)。

圖8-10“格式化表格”對話框

圖8-11格式化后的表格8.4.5表格式數(shù)據(jù)導入和導出

有時我們需要將一些外部文件中的數(shù)據(jù)導入到Dreamweaver中，或?qū)reamweaver的表格數(shù)據(jù)導出到外部文件中，下面介紹表格式數(shù)據(jù)導入和導出的方法：

1．導入表格式數(shù)據(jù)。首先確保導入的外部數(shù)據(jù)內(nèi)容具有一定的分隔規(guī)律，如用制表符分隔的

.txt文本文件，然后在Dreamweaver中將光標定位在需要插入數(shù)據(jù)的位置，選擇“文件”→“導入”→“表格式數(shù)據(jù)”，在彈出的“導入表格式數(shù)據(jù)”對話框(見圖8-12)中，通過“瀏覽”按鈕指定外部文件的位置，并選擇外部數(shù)據(jù)文件的定界符(如制表符)以及表格的寬度、邊距等屬性，單擊“確定”按鈕即可將表格式數(shù)據(jù)導入到Dreamweaver中。

圖8-12“導入表格式數(shù)據(jù)”對話框

2．導出表格式數(shù)據(jù)：相對應于導入外部數(shù)據(jù)，可將Dreamweaver中的表格數(shù)據(jù)導出到外部文本文件中，相鄰的單元格內(nèi)容由分隔符隔開，具體的操作步驟是：選中需要導出的表格后，單擊“文件”→“導出”→“表格”，在彈出的“導出表格”對話框(見圖8-13)中，設置導出的表格的定界符(即分隔符)和換行符，單擊“導出”按鈕，選擇導出位置，輸入文件名即可。當導出表格時，可以導出整個表格，但是不能選擇導出部分表格。

圖8-13“導出表格”對話框

8.5.1繪制布局表格和單元格

布局表格，指的是在布局視圖中繪制表格，與標準視圖中使用表格不同的是，在標準視圖中使用表格進行布局，實際上就是向頁面中插入幾個表格，然后在表格中添加文本和圖像，將內(nèi)容規(guī)范在表格內(nèi)，以達到排版的目的。只要掌握了以上關(guān)于表格的基本操作，8.5使用布局表格就能在標準視圖中進行布局。而采用布局視圖繪制表格，可以在頁面上方便地繪制表格、在表格中“嵌套表格”，將這些表格移動到合適的位置、調(diào)整其大小等。下面介紹布局表格的使用方法：

(1)新建網(wǎng)頁后，將Dreamweaver的標準視圖切換到布局視圖。在插入欄里選擇“布局”類別，單擊“布局”按鈕，或在菜單欄中選擇“查看”→“表格模式”→“布局模式”，此時將彈出“從布局模式開始”對話框，提示繪制布局表格和單元格的方法。

(2)單擊插入工具欄“布局”類別中的 (布局表格)按鈕，鼠標變成“+”形狀，在文檔區(qū)拖動鼠標就可以繪制布局表格了。如需繪制多個布局表格，在繪制表格的同時按住Ctrl鍵，可以避免每次繪制時重新選擇 (布局表格)按鈕的麻煩。

在布局模式中繪制嵌套表格也顯得格外輕松。以圖8-14中的表格為例，利用布局表格，只需兩步即可完成：首先繪制大表格，再在大表格中間拖動繪制小表格，其中產(chǎn)生的單元格都由布局表格自動生成，而不需自己手動設置。但要注意的是，布局表格內(nèi)部不允許添加文本或其他對象，如需添加，必須切換成標準視圖或在布局表格中繪制布局單元格。

圖8-14利用布局表格繪制嵌套表格

(3)繪制布局單元格的方法跟布局表格的方法很類似，布局單元格與布局表格不同的是，布局單元格不能相互重疊，即在布局單元格內(nèi)，不能再嵌套新的單元格。單擊“插入”工具欄“布局”類別中的 (布局單元格)按鈕，鼠標變成“+”形狀，在文檔區(qū)拖動鼠標就可以繪制布局單元格了。繪制好的布局單元格以白色背景藍色邊框顯示(見圖8-15)，在其中可添加文本、圖像和其他網(wǎng)頁元素，與在標準模式中將內(nèi)容添加到表格單元格相同。在布局表格中任何位置繪制布局單元格，布局表格將根據(jù)單元格位置，將表格自動分割行列，如圖8-15所示的布局表格，在繪制了布局單元格后，布局表格將自動根據(jù)布局單元格將其劃分為3行3列的表格。

初學者在學習布局模式繪制表格的時候需要注意的是，布局表格雖然可以層層嵌套，容易操作，但是真正儲存網(wǎng)頁內(nèi)容的是單元格，因此，在繪制過程中應根據(jù)需要使用嵌套表格，如果只是單純地存儲數(shù)據(jù)，應考慮使用布局單元格。

圖8-15布局單元格8.5.2布局表格和單元格屬性的設置

布局模式下的布局表格和布局單元格，在選中后也有相應的“屬性”面板。選中布局表格的方法是直接在布局表格內(nèi)部灰色區(qū)域單擊，而選中布局單元格則單擊單元格的邊線即可。選中后的布局表格和單元格“屬性”面板如圖8-16所示。雖然布局模式下同樣能插入文本、圖像等網(wǎng)頁內(nèi)容，同樣能進行屬性設置，但建議在使用時，在完成布局表格繪制后返回“標準模式”下再添加內(nèi)容和進行屬性設置。

圖8-16布局表格和布局單元格“屬性”面板8.5.3布局表格繪制實例

只要有了草圖，利用布局