【正文】 第四章 利用表格設(shè)計和制作網(wǎng)頁 在網(wǎng)頁設(shè)計制作中，表格（ Table）是一個重要的網(wǎng)頁元素，主要用來在頁面上布局?jǐn)?shù)據(jù)和圖像，使頁面中的信息布局合理、簡潔。另外，在網(wǎng)頁設(shè)計制作中，表格還有一個重要作用，就是對網(wǎng)頁進(jìn)行排版。通過表格，可以實(shí)現(xiàn)很多用一般手段很難實(shí)現(xiàn)的排版效果，達(dá)到頁面排版布局的完全控制。本章以示例網(wǎng)頁示例為介紹網(wǎng)頁表格的設(shè)計與制作的方法。通過本章的學(xué)習(xí)，讀者應(yīng)該掌握以下內(nèi)容： ? 利用 DreamweaverMX 創(chuàng)建表格的方法 ? 編輯表格的方法 ? 設(shè)置表格屬性的方法 ? 利用 HTML 編輯表格的方法 ? 使用表格和布局視圖 進(jìn)行頁面布局的方法 表格網(wǎng)頁實(shí)例 我們在上網(wǎng)瀏覽時雖然沒有看到多少表格，但許多網(wǎng)頁設(shè)計的排版實(shí)際上都是采用隱藏了邊框的表格來實(shí)現(xiàn)的。表格化的頁面在不同平臺、不同分辨率的瀏覽器里都能顯示出原有的布局和對齊。圖 41 所示的是“天使部落”網(wǎng)頁利用表格進(jìn)行布局的頁面效果。 圖 41 “天使部落”主頁 Dreamweaver MX 提供了強(qiáng)大的制表功能，使得在制作網(wǎng)頁的過程中插入表格的操作變得簡便、快捷，并可以在表格中插入圖片、文字、 Flash 等各種元素。表格還可以轉(zhuǎn)換成層，當(dāng)作層來使用（層的知識在第 9 章學(xué)習(xí)）。對已經(jīng)建立好的表格，可以很容易地修改表格的外觀，改變表格中行、列的數(shù)量，對表格添加顏色，改變表格對齊方式等操作。下面以制作“天使部落”主頁為例介紹創(chuàng)建表格、編輯表格、在表格中添加文字和圖片、刪除表格等內(nèi)容，并結(jié)合此例介紹設(shè)置表格和單元格的屬性等方法。 利用 Dreamweaver 8 編輯網(wǎng)頁表格 創(chuàng)建表格 表格主要由以下 3 個基本元素組成。 ? 行（ Row）：表格在水平方向上的組成元素。 ? 列（ Column）：表格在豎直方向上的組成元素。 ? 單元格（ Cell）：表格中的最小的獨(dú) 立存放數(shù)據(jù)的區(qū)域。 另外，還有以下幾個概念需要掌握。 邊框 (Border)：單元格四周的界線標(biāo)志。 表格間距 (Cellspace)：定義內(nèi)部表格線的寬度。 表格間隙 (Cellpad)：相鄰的單元格之間的間隙。 在 Dreamweaver 8 中，創(chuàng)建表格有以下 4 種方式。 ? 執(zhí)行主菜單中的“插入”→“表格”命令。 ? 按組合鍵 Ctrl+Alt+T。 ? 單擊插入面板上“常用”選項(xiàng)卡中的“插入表格”按鈕 。 ? 單擊插入面板上“表格”選項(xiàng)卡中的“插入表格”按鈕 。 使用上述 4 種方式中任意一種方法都將打開如圖 42 所示的“插入表格 ”對話框。 圖 42 “插入表格”對話框 對話框中各選項(xiàng)含義如下。 行數(shù)：初次指定表格的總行數(shù)。 列數(shù)：初次指定表格的總列數(shù)。 單元格填充：指定單元格的大小，以像素為單位。 單元格間距：指定單元格之間的距離，以像素為單位。 寬度：指定表格的寬度，以百分比或像素為單位（百分比用于根據(jù)瀏覽器窗口的大小來自動調(diào)整表格的寬度）。 邊框：指定表格邊界的寬度，以像素為單位（如果在瀏覽器窗口中不顯示表格的邊框，則定 義為 0）。 具體操作是，在對話框中對各選項(xiàng)進(jìn)行設(shè)置，創(chuàng)建一個 6 行 3 列的表格，寬度設(shè)為 100百分比或 774 像素，邊框設(shè)為 0，其他設(shè)置取默認(rèn)值。新建表格如圖 43 所示。 圖 43 新建表格 表格的編輯 1. 修改表格 新建立的表格必須經(jīng)過部分或全部修改后才能應(yīng)用。修改表格主要包括調(diào)整表格的大小、合并單元格、拆分單元格等操作。 （ 1）調(diào)整表格的大小 可以用下列的操作之一來改變表格的大小。 ? 移動鼠標(biāo)到表格的水平或垂直邊框上，當(dāng)鼠標(biāo)變?yōu)殡p豎杠或雙橫杠時，上下或左右拖動鼠標(biāo)，可以粗略地調(diào)整表格的大小。 ? 選中整個表格（雙擊表格邊框），在表格邊框右下方出現(xiàn)三個控制點(diǎn)，將鼠標(biāo)移到控制點(diǎn)上，當(dāng)鼠標(biāo)指針變?yōu)殡p箭頭形 狀時，拖動鼠標(biāo)上下、左右或斜方向移動，也可以粗略地調(diào)整表格的大小。 ? 利用表格“屬性”面板，可以精確地設(shè)置表格的大小。選中整個表格，在表格“屬性”面板中的“寬（ W）”、“高（ H）”文本框中輸入數(shù)值，如圖 44 所示，精確調(diào)整整個表格的大小。 圖 44 利用“屬性”面板調(diào)整表格的大小 （ 2）調(diào)整行高、列寬 ? 調(diào)整一行或一列。將鼠標(biāo)指針移到要改變行或列的單元邊框上，當(dāng)鼠標(biāo)變?yōu)殡p豎杠或雙橫杠時，上下或左右拖動鼠標(biāo)至合適的行高或列寬。 ? 利用表格“屬性”面板設(shè)置。選中表格中的任一單元格，或選中所在行（列），然后在表格“ 屬性”面板中的“寬（ W）”、“高（ H）”文本框中輸入數(shù)值。如果文本框中為空白，則行高、列寬將由瀏覽器和ＤｒｅａｍｗｅａｖｅｒＭＸ根據(jù)單元格中的內(nèi)容來自動調(diào)整。 ? 清除行高、列寬。若不能用拖動單元格邊框的方法來改變所需的行高、列寬，則可以清除行高、列寬，再重新進(jìn)行設(shè)置。選中整個表格，執(zhí)行主菜單中的“修改”→“表格”→“清除單元格高度”（或“清除單元格寬度”）命令，可以對所有單元格的高度、寬度進(jìn)行壓縮，直到內(nèi)容最多的單元格與上下左右邊框之間沒有間隙為止。 （ 3）合并單元格 首先選中需要合并的單元格，然后利用下列的 操作之一來合并單元格。 ? 執(zhí)行主菜單中的“修改”→“表格”→“合并單元格”命令。 ? 右擊選中的單元格，從彈出的快捷菜單中選擇“表格”→“合并單元格”命令。 ? 單擊表格“屬性”面板上的合并單元格按鈕 。 ? 按組合鍵 Ctrl+Alt+M。 利用上述 4 種方法之一可以將圖 4— 3新建表格中的第 6 行的 3表單元分別合并，將第 1 列的 4 行的 2個單元、第 4行的 3 列的 2個單元分別合并。合并后的效果如圖4— 5 所示。 圖 45 合并單元格后的表格 （ 4）拆分單元格 拆分單元格與合并單元格互為逆操作。拆分單元格就是將一個單 元格拆分成需要的多個單元格。同樣先選中需要拆分的單元格，然后進(jìn)行以下之一的操作。 ? 執(zhí)行主菜單中“修改”→“表格”→“拆分單元格”命令。 ? 右擊選中的單元格，從彈出的快捷菜單中選擇“表格”→“拆分單元格”命令。 ? 單擊表格“屬性”面板上的拆分單元格按鈕 。 ? 按組合鍵 Ctrl+Alt+S。 上述幾種操作都會打開“拆分單元格”對話框，如圖 4— 6 所示，選擇是拆分成行還是列，并輸入要拆分成的數(shù)量即可。 圖 46 “拆分單元格”對話框 （ 5）表格的嵌套 為了達(dá)到排版的效果，通常使用表格嵌套的方法。如在圖 4— 1“天使部落 “主頁中的”理想篇 ”、“生活篇 ”、?等內(nèi)容就是通過表格嵌套實(shí)現(xiàn)的。具體操作方法是，將鼠標(biāo)指針定位在所需位置，如在第 3 行 2 列單元格中，單擊“常用”面板中的插入表格按鈕，插入一個 6 行 1 列的表格。用同樣的方法可以插入另外 3 個表格，如圖 4— 7 所示。 圖 47 進(jìn)行嵌套后的表格 （ 6）表格的復(fù)制 通過復(fù)制表格中的行、列或整個表格，可以達(dá)到充表格的目的。具體操作如下。 選中一行（列）或多行（列），執(zhí)行主菜單中的“編輯”→“拷貝”命令，或用鼠標(biāo)右擊選中的行（列），從彈出的快捷菜單中選擇“拷貝”命令，或按組 合鍵 Ctrl+V，然后移動鼠標(biāo)到目的位置，執(zhí)行主菜單中的“編輯”→“粘貼”命令，或直接按組合鍵 Ctrl+V，可以擴(kuò)充表格的行或列。若選中整個表格，再進(jìn)行復(fù)制和粘貼，可以將表格擴(kuò)充一倍。 （ 7）刪除表格 將不需要的行或列刪除。具體操作方法是