利用表格設(shè)計(jì)和制作網(wǎng)

1、利用表格設(shè)計(jì)和制作網(wǎng)頁(yè)在網(wǎng)頁(yè)設(shè)計(jì)制作中，表格（Table）是一個(gè)重要的網(wǎng)頁(yè)元素，主要用來(lái)在頁(yè)面上布局?jǐn)?shù)據(jù)和圖像，使頁(yè)面中的信息布局合理、簡(jiǎn)潔。另外，在網(wǎng)頁(yè)設(shè)計(jì)制作中，表格還有一個(gè)重要作用，就是對(duì)網(wǎng)頁(yè)進(jìn)行排版。通過(guò)表格，可以實(shí)現(xiàn)很多用一般手段很難實(shí)現(xiàn)的排版效果，達(dá)到頁(yè)面排版布局的完全控制。本章以示例網(wǎng)頁(yè)示例為介紹網(wǎng)頁(yè)表格的設(shè)計(jì)與制作的方法。通過(guò)本章的學(xué)習(xí)，讀者應(yīng)該掌握以下內(nèi)容：利用DreamweaverMX 創(chuàng)建表格的方法編輯表格的方法設(shè)置表格屬性的方法利用HTML編輯表格的方法使用表格和布局視圖進(jìn)行頁(yè)面布局的方法表格網(wǎng)頁(yè)實(shí)例我們?cè)谏暇W(wǎng)瀏覽時(shí)雖然沒(méi)有看到多少表格，但許多網(wǎng)頁(yè)設(shè)計(jì)的排版實(shí)際上都是采

2、用隱藏了邊框的表格來(lái)實(shí)現(xiàn)的。表格化的頁(yè)面在不同平臺(tái)、不同分辨率的瀏覽器里都能顯示出原有的布局和對(duì)齊。圖4-1所示的是“天使部落”網(wǎng)頁(yè)利用表格進(jìn)行布局的頁(yè)面效果。 圖4-1 “天使部落”主頁(yè) Dreamweaver MX 提供了強(qiáng)大的制表功能，使得在制作網(wǎng)頁(yè)的過(guò)程中插入表格的操作變得簡(jiǎn)便、快捷，并可以在表格中插入圖片、文字、Flash 等各種元素。表格還可以轉(zhuǎn)換成層，當(dāng)作層來(lái)使用（層的知識(shí)在第9章學(xué)習(xí)）。對(duì)已經(jīng)建立好的表格，可以很容易地修改表格的外觀(guān)，改變表格中行、列的數(shù)量，對(duì)表格添加顏色，改變表格對(duì)齊方式等操作。下面以制作“天使部落”主頁(yè)為例介紹創(chuàng)建表格、編輯表格、在表格中添加文字和圖片、刪除

3、表格等內(nèi)容，并結(jié)合此例介紹設(shè)置表格和單元格的屬性等方法。 4.2利用Dreamweaver 8編輯網(wǎng)頁(yè)表格 創(chuàng)建表格表格主要由以下3個(gè)基本元素組成。行（Row）：表格在水平方向上的組成元素。列（Column）：表格在豎直方向上的組成元素。單元格（Cell）：表格中的最小的獨(dú)立存放數(shù)據(jù)的區(qū)域。另外，還有以下幾個(gè)概念需要掌握。邊框(Border)：?jiǎn)卧袼闹艿慕缇€(xiàn)標(biāo)志。表格間距(Cellspace)：定義內(nèi)部表格線(xiàn)的寬度。表格間隙(Cellpad)：相鄰的單元格之間的間隙。在Dreamweaver 8中，創(chuàng)建表格有以下4種方式。執(zhí)行主菜單中的“插入”“表格”命令。按組合鍵Ctrl+Alt+T。單擊

4、插入面板上“常用”選項(xiàng)卡中的“插入表格”按鈕。單擊插入面板上“表格”選項(xiàng)卡中的“插入表格”按鈕。使用上述4種方式中任意一種方法都將打開(kāi)如圖4-2所示的“插入表格”對(duì)話(huà)框。圖4-2 “插入表格”對(duì)話(huà)框?qū)υ?huà)框中各選項(xiàng)含義如下。行數(shù)：初次指定表格的總行數(shù)。列數(shù)：初次指定表格的總列數(shù)。單元格填充：指定單元格的大小，以像素為單位。單元格間距：指定單元格之間的距離，以像素為單位。寬度：指定表格的寬度，以百分比或像素為單位（百分比用于根據(jù)瀏覽器窗口的大小來(lái)自動(dòng)調(diào)整表格的寬度）。邊框：指定表格邊界的寬度，以像素為單位（如果在瀏覽器窗口中不顯示表格的邊框，則定義為0）。具體操作是，在對(duì)話(huà)框中對(duì)各選項(xiàng)進(jìn)行設(shè)置，創(chuàng)

5、建一個(gè)6行3列的表格，寬度設(shè)為100百分比或774像素，邊框設(shè)為0，其他設(shè)置取默認(rèn)值。新建表格如圖4-3所示。圖4-3 新建表格 表格的編輯1. 修改表格新建立的表格必須經(jīng)過(guò)部分或全部修改后才能應(yīng)用。修改表格主要包括調(diào)整表格的大小、合并單元格、拆分單元格等操作。（1）調(diào)整表格的大小可以用下列的操作之一來(lái)改變表格的大小。移動(dòng)鼠標(biāo)到表格的水平或垂直邊框上，當(dāng)鼠標(biāo)變?yōu)殡p豎杠或雙橫杠時(shí)，上下或左右拖動(dòng)鼠標(biāo)，可以粗略地調(diào)整表格的大小。選中整個(gè)表格（雙擊表格邊框），在表格邊框右下方出現(xiàn)三個(gè)控制點(diǎn)，將鼠標(biāo)移到控制點(diǎn)上，當(dāng)鼠標(biāo)指針變?yōu)殡p箭頭形狀時(shí)，拖動(dòng)鼠標(biāo)上下、左右或斜方向移動(dòng)，也可以粗略地調(diào)整表格的大小。利

6、用表格“屬性”面板，可以精確地設(shè)置表格的大小。選中整個(gè)表格，在表格“屬性”面板中的“寬（W）”、“高（H）”文本框中輸入數(shù)值，如圖4-4所示，精確調(diào)整整個(gè)表格的大小。圖4-4 利用“屬性”面板調(diào)整表格的大?。?）調(diào)整行高、列寬調(diào)整一行或一列。將鼠標(biāo)指針移到要改變行或列的單元邊框上，當(dāng)鼠標(biāo)變?yōu)殡p豎杠或雙橫杠時(shí)，上下或左右拖動(dòng)鼠標(biāo)至合適的行高或列寬。利用表格“屬性”面板設(shè)置。選中表格中的任一單元格，或選中所在行（列），然后在表格“屬性”面板中的“寬（W）”、“高（H）”文本框中輸入數(shù)值。如果文本框中為空白，則行高、列寬將由瀏覽器和根據(jù)單元格中的內(nèi)容來(lái)自動(dòng)調(diào)整。清除行高、列寬。若不能用拖動(dòng)單元格邊框

7、的方法來(lái)改變所需的行高、列寬，則可以清除行高、列寬，再重新進(jìn)行設(shè)置。選中整個(gè)表格，執(zhí)行主菜單中的“修改”“表格”“清除單元格高度”（或“清除單元格寬度”）命令，可以對(duì)所有單元格的高度、寬度進(jìn)行壓縮，直到內(nèi)容最多的單元格與上下左右邊框之間沒(méi)有間隙為止。（3）合并單元格首先選中需要合并的單元格，然后利用下列的操作之一來(lái)合并單元格。執(zhí)行主菜單中的“修改”“表格”“合并單元格”命令。右擊選中的單元格，從彈出的快捷菜單中選擇“表格”“合并單元格”命令。單擊表格“屬性”面板上的合并單元格按鈕。按組合鍵Ctrl+Alt+M。利用上述4種方法之一可以將圖43新建表格中的第1、2、6行的3表單元分別合并，將第1

8、列的3、4行的2個(gè)單元、第4行的2、3列的2個(gè)單元分別合并。合并后的效果如圖45所示。圖4-5 合并單元格后的表格（4）拆分單元格拆分單元格與合并單元格互為逆操作。拆分單元格就是將一個(gè)單元格拆分成需要的多個(gè)單元格。同樣先選中需要拆分的單元格，然后進(jìn)行以下之一的操作。執(zhí)行主菜單中“修改”“表格”“拆分單元格”命令。右擊選中的單元格，從彈出的快捷菜單中選擇“表格”“拆分單元格”命令。單擊表格“屬性”面板上的拆分單元格按鈕。按組合鍵Ctrl+Alt+S。上述幾種操作都會(huì)打開(kāi)“拆分單元格”對(duì)話(huà)框，如圖46所示，選擇是拆分成行還是列，并輸入要拆分成的數(shù)量即可。圖4-6 “拆分單元格”對(duì)話(huà)框（5）表格的嵌

9、套為了達(dá)到排版的效果，通常使用表格嵌套的方法。如在圖41“天使部落“主頁(yè)中的”理想篇”、“生活篇”、等內(nèi)容就是通過(guò)表格嵌套實(shí)現(xiàn)的。具體操作方法是，將鼠標(biāo)指針定位在所需位置，如在第3行2列單元格中，單擊“常用”面板中的插入表格按鈕，插入一個(gè)6行1列的表格。用同樣的方法可以插入另外3個(gè)表格，如圖47所示。圖4-7 進(jìn)行嵌套后的表格（6）表格的復(fù)制通過(guò)復(fù)制表格中的行、列或整個(gè)表格，可以達(dá)到充表格的目的。具體操作如下。選中一行（列）或多行（列），執(zhí)行主菜單中的“編輯”“拷貝”命令，或用鼠標(biāo)右擊選中的行（列），從彈出的快捷菜單中選擇“拷貝”命令，或按組合鍵Ctrl+V，然后移動(dòng)鼠標(biāo)到目的位置，執(zhí)行主菜單

10、中的“編輯”“粘貼”命令，或直接按組合鍵Ctrl+V，可以擴(kuò)充表格的行或列。若選中整個(gè)表格，再進(jìn)行復(fù)制和粘貼，可以將表格擴(kuò)充一倍。（7）刪除表格將不需要的行或列刪除。具體操作方法是，先選中需要?jiǎng)h除的行或列，然后執(zhí)行“修改”“表格”“刪除行”或“刪除列”命令（也可以執(zhí)行右鍵快捷菜單中的“表格”“刪除行：或“刪除列”命令）。當(dāng)然，刪除整行或整列最快捷的方法是直接按Del鍵。需要說(shuō)明的是，Dreamweaver MX可以對(duì)選中的一個(gè)或多個(gè)整行（列）執(zhí)行刪除操作，卻不能直接刪除整個(gè)表格，非要?jiǎng)h除整個(gè)表格，可以先選中整個(gè)表格，再執(zhí)行剪切操作。（8）增加或減少行、列跨度增加行或列的跨度，就是將相鄰的單元格

11、進(jìn)行合并，減少行或列的跨度，就是將相鄰的單元格進(jìn)行拆分。具體操作方法是，將鼠標(biāo)指針定位在所需單元格中，若執(zhí)行主菜單中“修改”“表格”“增加行寬”或“增加列寬”命令，則可以將給單元格相鄰右側(cè)或下側(cè)的單元格進(jìn)行合并；若執(zhí)行主菜單中“修改”“表格”“減少行寬”或“減少列寬”命令，則可以將該單元格相鄰右側(cè)或下側(cè)的單元格進(jìn)行拆分。同樣，利用鼠標(biāo)右擊單元格，從彈出的快捷菜單選擇“表格”中的相應(yīng)命令也可以實(shí)現(xiàn)這一功能。2在表格中輸入文字和圖像表格調(diào)整完畢，就可以在表格中輸入相應(yīng)的內(nèi)容了。向表格中輸入的內(nèi)容主要是文字和圖片兩種形式。（1）在表格中輸入文字參照“天使部落”主頁(yè)（如圖41所示）的文字內(nèi)容，在圖47

12、所示的表格內(nèi)按要求輸入文字，并通過(guò)表格“屬性”面板對(duì)文字的字號(hào)、字體、對(duì)齊方式、顏色等進(jìn)行調(diào)整（表格“屬性”面板的內(nèi)容將在節(jié)中學(xué)習(xí)）。調(diào)整后的表格如圖4-8所示。圖4-8 輸入文字后的表格 （2）在表格中插入圖像參照“天使部落”主頁(yè)（如圖4-1所示）的圖像內(nèi)容，在圖4-8所示的表格內(nèi)按要求插入圖像( 說(shuō)明，有些圖像是利用層來(lái)實(shí)現(xiàn)插入的，有關(guān)層的內(nèi)容將在第9章學(xué)習(xí))。具體操作日下。 選中需要插入圖像的單元格，執(zhí)行主菜單“插入” “圖像”命令或單擊“常用”面板中的“圖像”按鈕，打開(kāi)“選擇圖像源”對(duì)話(huà)框，打開(kāi)存放圖像的文件夾（可以事先將所需要并喜愛(ài)的圖像保存或復(fù)制到該文件夾中，如站點(diǎn)中的images

13、 文件夾），選中所需圖像（可以從右側(cè)的“圖像預(yù)覽”中看到圖像），如圖4-9 所示，單擊“確定”按鈕，圖像即插入到相應(yīng)的單元格中，通過(guò)鼠標(biāo)適當(dāng)調(diào)整圖像在單元格中的大小及位置，調(diào)整后的表格如圖4-10所示。圖4-9 “選擇圖像源”對(duì)話(huà)框圖4-10 插入圖像后的表格 設(shè)置表格屬性在節(jié)中多次提到表格“屬性”，下面介紹在表格“屬性”面板中幾種常見(jiàn)的設(shè)置方法。1.表格整體屬性設(shè)置選中整個(gè)表格，表格“屬性”面板如圖4-11所示，可以對(duì)表格的整體屬性進(jìn)行設(shè)置。其中各參數(shù)的含義如下。圖4-11 表格“屬性”面板表格名字（表格Id）：給表格對(duì)象命名，在腳本編程中可以使用。行和列：當(dāng)前表格行和列的數(shù)值，可以修改這兩

14、項(xiàng)的數(shù)值來(lái)增加或減少行數(shù)或列數(shù)。寬和高：設(shè)置表格的寬度和高度?？梢赃x擇使用百分比或像素值。使用“屬性”面板上兩個(gè)按鈕（清除列寬）和（清除行高）可以清除原來(lái)的寬度和高度設(shè)置；使用“屬性”面板上的四個(gè)按鈕（將表格寬度轉(zhuǎn)為像素）、（將表格高度轉(zhuǎn)換為像素）、（將表格寬度轉(zhuǎn)換為百分比）、（將表格高度轉(zhuǎn)化為百分比），可以將表格寬度和高度在像素和百分比之間進(jìn)行轉(zhuǎn)換。填充：表格周?chē)推渌刂g的間距。間距：?jiǎn)卧裰g的間距。對(duì)齊：表格在網(wǎng)頁(yè)中的對(duì)齊方式，有默認(rèn)、左對(duì)齊、居中對(duì)齊和右對(duì)齊4種選擇。邊框：表格邊框的寬度，若設(shè)為0，則在瀏覽網(wǎng)頁(yè)時(shí)看不到表格邊框。背景顏色：設(shè)置表格的背景顏色，通過(guò)顏色拾取器按鈕來(lái)選

15、擇顏色。邊框顏色：設(shè)置表格邊框顏色。背景圖像：設(shè)置表格整體的背景圖像，通過(guò)瀏覽文件按鈕搜索背景圖像的位置。2.行、列和單元格屬性設(shè)置選中行、列或單元格后，表格“屬性”面板的設(shè)置與整個(gè)表格的設(shè)置基本一致的，只不過(guò)是應(yīng)用范圍上不同而已?！皩傩浴泵姘宸譃樯?、兩個(gè)區(qū)域，上面是單元格中的文字屬性，可以設(shè)置文字的格式、字體、顏色、字形、對(duì)齊方式、超鏈接等；下面是行、列和單元格的屬性設(shè)置。在“屬性”面板的左下方有一個(gè)示例圖形，可以看出當(dāng)前選擇的是行、列還是單元格，如圖4-12所示選擇的是單元格。圖4-12 表格的行、列和單元格“屬性”面板其中個(gè)參數(shù)的含義如下。水平：設(shè)置單元格內(nèi)容在單元格內(nèi)的水平對(duì)齊方式，有

16、默認(rèn)、左對(duì)齊、居中對(duì)齊和齊4種選擇。垂直：設(shè)置單元格內(nèi)存單元格內(nèi)的垂直對(duì)齊方式，有默認(rèn)、頂端、中間、底部和基線(xiàn)4種選擇。寬和高：設(shè)置單元格的寬度和高度的數(shù)值。只需對(duì)某一個(gè)單元格的列寬和行高設(shè)置數(shù)值，其他單元格就會(huì)自動(dòng)做相應(yīng)的調(diào)整。不換行：設(shè)置單元格內(nèi)無(wú)抽象行功能。標(biāo)題：將單元格中的文字內(nèi)容作為表格標(biāo)題，粗體顯示。背景：設(shè)置行、列或單元格背景圖像。由于一個(gè)單元格可以使用表格、行、列和單元格等多種背景設(shè)置，所以有一定的優(yōu)先順序。背景圖像的優(yōu)先順序?yàn)椋簡(jiǎn)卧?、行列、表格。背景顏色、邊框：用于?duì)選中的行、列或單元格設(shè)置其背景及邊框的顏色。合并、拆分按鈕：在“屬性”面板的左下方有兩個(gè)工具按鈕（合并）和（

17、拆分，只對(duì)單元格有效），用于對(duì)選中的行、列或單元格進(jìn)行合并或拆分操作。424表格的排序在表格的應(yīng)用中，常要對(duì)表格中的一組數(shù)據(jù)進(jìn)行排序。在Dreamweaver MX中可以實(shí)現(xiàn)按數(shù)字的排序和按字母的排序，具體操作方法如下。（1）單擊表格中的任一單元格，執(zhí)行主菜單元中的“命令”“排序表格”命令，打開(kāi)如圖4-13所示的“排序表格”對(duì)話(huà)框。圖4-13 “排序表格”對(duì)話(huà)框（2）在“排序按：”下拉列表框中選擇要排序的列（第一關(guān)鍵字），在“順序：”下拉列表框中選擇“按字母順序”還是“按數(shù)字順序”排序，在其后的下拉列表框中選擇“升序”還是“降序”方式。（3）在“再按：”下拉列表框中選擇要進(jìn)行次級(jí)排序的列（第一

18、關(guān)鍵字）。在排序中如果遇到單元格中有相同的內(nèi)容，則按“排序按：”中指定的列優(yōu)先進(jìn)行排序。如果不需要進(jìn)一步進(jìn)行排序，可以不對(duì)此項(xiàng)排序進(jìn)行設(shè)置。（4）在“選項(xiàng)：”設(shè)置區(qū)域中有4個(gè)復(fù)選取框。 排序包含第一行：如果選中該復(fù)選框，則在排序時(shí)將第一行包含水量在內(nèi)。如果第一行是表頭，則顯然在排序時(shí)不應(yīng)將第一行包含在內(nèi)，即不要選中該復(fù)選框。對(duì)THEAD行（如果存在）進(jìn)行排序：如果選中該復(fù)選框，則表頭也參與排序。對(duì)TFOOT行（如果存在）進(jìn)行排序：如果選中該復(fù)選框，則表尾也參與排序。排隊(duì)序和行保留TR屬性。也就是行的格式會(huì)隨著該行廣西一起被移動(dòng)。否則表格排序后，改變順序的只是行的文本。（5）單擊“確定”按鈕完成

19、設(shè)置。注意：不能對(duì)有合并單元格的表格內(nèi)容進(jìn)行排序操作。表格的格式化DreamweaverMX為表格提供了17種表格格式模板,可以從中選擇一種方案快速應(yīng)用到用戶(hù)設(shè)計(jì)的表格中。具體操作方法如下。選擇一個(gè)表格,然后執(zhí)行主菜單中的命令格式化表格命令,打開(kāi)如圖4-14所示的格式化表格對(duì)話(huà)框。從中選擇一種模板方案,再對(duì)各選項(xiàng)進(jìn)一步自定義設(shè)置,然后應(yīng)用于自己所設(shè)計(jì)的表格中。對(duì)話(huà)框中各選工頁(yè)的含義如下。行顏色：用于指定應(yīng)用于行的顏色,以及顏色交替的頻率。第一行：:用于指定表格第一行(可能包含標(biāo)題)的對(duì)齊方式和文本樣式及顏色。圖4-14 “格式化”對(duì)話(huà)框最左列：用于指定表格最左列(可能包含標(biāo)題)的對(duì)齊方式和文本

20、樣式。表格：用于設(shè)置表格邊框?qū)挾鹊臄?shù)值(以像素為單位)。將所有屬性套用至TD標(biāo)注而不是TR標(biāo)簽復(fù)選框:用于指定將設(shè)計(jì)應(yīng)用于表格單元格(ID標(biāo)簽)而不是表格行(TR標(biāo)簽)。在默認(rèn)情況下,格式化表格對(duì)話(huà)框中指定的格式設(shè)置應(yīng)用于整個(gè)行而不是單個(gè)單元格。在將同一種格式應(yīng)用于行中的所有單元格時(shí),將格式應(yīng)用于TR標(biāo)簽會(huì)產(chǎn)生更簡(jiǎn)明易懂的HTML代碼。但是,此選項(xiàng)允許將格式應(yīng)用于單個(gè)單元格(前提是在編好編碼的情況下)。注意:不能對(duì)有合并單元格的表格進(jìn)行上述的格式化設(shè)置。4.3 利用HTML編輯網(wǎng)頁(yè)表格利用HTML制作示例網(wǎng)頁(yè)表格利用HTML同樣可以制作網(wǎng)頁(yè)表格。對(duì)于初學(xué)者直接使用HTML代碼編制網(wǎng)頁(yè)表格是件很

21、困難的事情,但是,可以通過(guò)Dreamweaver MX提供的文檔面板來(lái)查看己經(jīng)設(shè)計(jì)好的網(wǎng)頁(yè)表格的HIML代碼,以幫助用戶(hù)學(xué)習(xí)和掌握HTML代碼的編寫(xiě)規(guī)則及方法。例如,對(duì)于如圖4-10所示的網(wǎng)頁(yè)表格,通過(guò)執(zhí)行主菜單中的查看切換視圖命令,或單擊文檔面板上的顯示代碼視圖按鈕到來(lái)查看HTML代碼,也可以單擊吱檔面板上的顯示代碼視圖和設(shè)計(jì)視圖按鈕對(duì)照網(wǎng)頁(yè)表格設(shè)計(jì)視圖來(lái)查看HTML代碼。具體的HTML代碼如下。無(wú)標(biāo)題文檔 本站首頁(yè)理想篇生活篇星座篇通訊篇會(huì)員注冊(cè) 理想篇 星座篇 “理想”一個(gè)熟悉的詞 “星座傳說(shuō)”一星座的由來(lái) 我一個(gè)“天使”的理想 星座與性格的關(guān)系。 實(shí)現(xiàn)理想的決定性因素 星座與愛(ài)情的關(guān)系

22、。 你的“理想”變了嗎？ 星座悟語(yǔ) “理想”并不是“妄想” 星座運(yùn)程 生活篇 通訊篇 我的天使 我的郵箱 書(shū)山掠影 給我留言 輕輕河畔 介紹你自己 天使笑顏 聯(lián)系其他天使 人間天使 “天使部落”的遠(yuǎn)景規(guī)劃 版權(quán)所有 表格的基本構(gòu)成通常在HTML 中創(chuàng)建一個(gè)普通的表格應(yīng)包括以下標(biāo)記。（1）TABLE。TABLE標(biāo)記符用于定義整個(gè)表格，表格內(nèi)的所有內(nèi)容都因該位于和標(biāo)記符之間。（2）TITLE。 TITLE標(biāo)記符用于定義頁(yè)面的標(biāo)題，標(biāo)題包含在和標(biāo)記之間，在網(wǎng)頁(yè)被瀏覽時(shí)，標(biāo)題將顯示在瀏覽器窗口的標(biāo)題欄上。（3）CAPTION。如果表格需要標(biāo)題，那么就應(yīng)該使用CAPTION標(biāo)記符將表格標(biāo)題包括在和標(biāo)記符

23、之間。在圖4-10 所示網(wǎng)頁(yè)表格中美有標(biāo)題，如果是用了CAPTION標(biāo)記符，它應(yīng)該位于標(biāo)記符之后。CAPTION標(biāo)記符的格式如下。標(biāo)題Align屬性用于控制表格標(biāo)題的顯示位置，它通常有4種取值，見(jiàn)表4-1。表4-1align屬性的取值名稱(chēng)作用top標(biāo)題放在表格上部，為默認(rèn)值bottom標(biāo)題放在表格下部left標(biāo)題放在表格上部的左側(cè)right標(biāo)題放在表格上部的右側(cè)（4）TR。TR標(biāo)記符用于定義表格的行，對(duì)于每一個(gè)表格行，都對(duì)應(yīng)RT標(biāo)記符。RT標(biāo)記符的結(jié)束標(biāo)記符可以省略。（5）TD和TH.表格行中的每個(gè)單元格都對(duì)應(yīng)一個(gè)TD標(biāo)記符或TH標(biāo)記符，用于標(biāo)記表格的內(nèi)容，其中可以包括文字、圖像或其他對(duì)象。D

24、T與TH標(biāo)記符的功能和用法幾乎完全相同（可以任意混合使用，但效果略有不同）。惟一不同之處是TD標(biāo)記符表示普通表格數(shù)據(jù),而TH標(biāo)記符表示表格的行列標(biāo)題數(shù)據(jù)(即表頭)。TD和TH標(biāo)記符的結(jié)束標(biāo)記都可以省略，并且可以不包括任何內(nèi)容（即表示為空單元格）。（6）META。當(dāng)使用Dreamweaver MX創(chuàng)建一個(gè)空白的網(wǎng)頁(yè)文檔時(shí)，系統(tǒng)會(huì)自動(dòng)在頭部加上以下一行源代碼。使用標(biāo)記符定義的信息通常稱(chēng)為“元數(shù)據(jù)（meta data）”，它是頭部信息的主要組成部分，主要用于表示一個(gè)文檔的關(guān)鍵詞、作者、版權(quán)、字符編碼等。另外，它還可以傳遞一些信息，如網(wǎng)頁(yè)的過(guò)期日期、刷新間隔等。標(biāo)記符是一個(gè)單獨(dú)的標(biāo)記符，即不存在結(jié)束標(biāo)

25、記符。主要有以下四個(gè)屬性，見(jiàn)表42。表4-2 標(biāo)記符的屬性 名稱(chēng)作用name用于定義一個(gè)元數(shù)據(jù)屬性的名稱(chēng)content用于定義無(wú)數(shù)據(jù)的屬性值http-equiv用于記錄HTTP的頭部信息，HTTP服務(wù)器可以根據(jù)該信息來(lái)作出響應(yīng)charset用于定義文檔的字符編碼注意：HTML并沒(méi)有規(guī)定用戶(hù)最多可以在頭部加入多少個(gè)標(biāo)記符，只要認(rèn)為必要，用戶(hù)可以添加任意數(shù)量的標(biāo)記符。表格的編輯及屬性設(shè)置1合并單元格（1）在和標(biāo)記符內(nèi)使用rowspan屬性可以進(jìn)行行合并，rowspan的取值表示垂直方向上合并的行數(shù)。實(shí)際上，單詞rowspan的譯義就是跨越的行數(shù)。（2）在和標(biāo)記符內(nèi)使用colspan屬性可以進(jìn)行列合

26、并，colspan的取值表示水平方向上合并的列數(shù)。實(shí)際上，單詞colspan的譯義就是跨越的列數(shù)。2邊框與分隔線(xiàn)在TABLE標(biāo)記符肌使用frame 、rules和 border 屬性可以設(shè)置表格的邊框和單元格分隔線(xiàn)。（1）fame屬性用于控制表格邊框最外層的4條框線(xiàn)，其取值見(jiàn)表4-3。表4-3 frame屬性的取值名稱(chēng)作用名稱(chēng)作用Void無(wú)邊框vsides僅有左側(cè)框和右側(cè)框above僅有頂框lhs僅有左側(cè)框below僅有底框rhs僅有右側(cè)框hsides僅有頂框和底框box包含全部四個(gè)邊框（2）rules屬性用于控制是否顯示單元格之間的分隔線(xiàn)，其取值見(jiàn)表4-4。（3）border屬性用于設(shè)置邊框

27、的寬度，其值為像素值。本示例中設(shè)置border=”0”,則意味著frame=”viod”,rules=”none”。3.表格的對(duì)齊表格的對(duì)齊包括頁(yè)面對(duì)齊和內(nèi)容對(duì)齊。（1）表格的頁(yè)面對(duì)齊。表格在頁(yè)面中的對(duì)齊與其他頁(yè)面內(nèi)容一樣，可以直接在TABLE標(biāo)記符中使用align屬性。另外，也可以用DIV標(biāo)記符的align屬性設(shè)置表格的對(duì)齊，方法是，將TABLE標(biāo)記符包含在和之間。 如果不使用TABLE標(biāo)記符的align屬性設(shè)置表格的頁(yè)面對(duì)齊，則跟在表格后的文本自動(dòng)顯示在表格下的一行。如果使用了TABLE標(biāo)記符的align 屬性設(shè)置表格頁(yè)面對(duì)齊，并且使用的是left或right值，則跟在表格后的文本會(huì)位于表

28、格的左邊和右邊，從而形成文本與表格環(huán)繞的效果。（2）表格的內(nèi)容對(duì)齊。表格單元格內(nèi)容的對(duì)齊包括各數(shù)據(jù)項(xiàng)在水平方向和垂直方向上的對(duì)齊。設(shè)置水平對(duì)齊的方法是，在標(biāo)記符、內(nèi)使用align屬性，其常見(jiàn)的取值見(jiàn)表4-5。名稱(chēng)作用名稱(chēng)作用center單元格內(nèi)容中堆對(duì)齊right單元格內(nèi)容右對(duì)齊left單元格內(nèi)容左對(duì)齊，為默認(rèn)值justify單元格內(nèi)容兩端對(duì)齊如果是在TR標(biāo)記符中使用align屬性，則可以控制整行內(nèi)容的水平對(duì)齊；如果是在TD或TH標(biāo)記符中使用align屬性，則是控制單元格中內(nèi)容的水平對(duì)齊。設(shè)置表格數(shù)據(jù)在垂直方向上對(duì)齊，應(yīng)在TR、TD或TH標(biāo)記符中使用valign屬性。Valign屬性的常用取值

29、見(jiàn)表4-6。名稱(chēng)作用top數(shù)據(jù)靠單元格頂部Bottom數(shù)據(jù)靠單元格底部middle數(shù)據(jù)在單元格的垂直方向上居中，為默認(rèn)值與align屬性類(lèi)似，如果是在TR標(biāo)記符中使用valign屬性，則可以控制整行內(nèi)容的垂直對(duì)齊；如果是在TD或TH標(biāo)記符中使用valign屬性，則是控制相應(yīng)單元格中內(nèi)容的垂直對(duì)齊。4.控制表格和單元格的大小由于表格能將網(wǎng)頁(yè)劃分為任意大小的矩形區(qū)域，所以表格在網(wǎng)頁(yè)中更多地是用作排版工具。如果要分割頁(yè)面區(qū)域，經(jīng)常要做的就是設(shè)置表格和單元格的大小。可以使用標(biāo)記符的width和height屬性設(shè)置表格和單元格的大小，這兩個(gè)屬性是取值可以是像素值，也可以是百分比，但一般都使用絕對(duì)的像素值

30、。5.設(shè)置表格和單元格的背景與設(shè)置整個(gè)頁(yè)面的背景類(lèi)似，表格或單元格也可以設(shè)置背景顏色或圖案。設(shè)置方法為：在TABLE或TD標(biāo)記符內(nèi)使用bgcolor屬性設(shè)置背景顏色；使用background屬性設(shè)置背景圖案。6.控制單元格空白在TABLE標(biāo)記符中使用cellspacing屬性可以控制單元格之間的空白，使用cellpadding屬性可以控制表格分割線(xiàn)和數(shù)據(jù)之間的距離，這兩個(gè)屬性之間的取值通常采用像素值。4.4表格的應(yīng)用技巧441利用表格制作水平線(xiàn)與垂直線(xiàn)在對(duì)網(wǎng)頁(yè)布局排版時(shí)，有時(shí)候會(huì)需要一條細(xì)線(xiàn)作為分隔線(xiàn)，用一些線(xiàn)型的圖像可以完成這項(xiàng)功能，但既費(fèi)事又占據(jù)存儲(chǔ)空間。其實(shí)，這個(gè)小總是用表格就能很好的實(shí)

31、現(xiàn)，只需對(duì)表格屬性、單元格屬性及其源代碼稍作個(gè)性即可。細(xì)線(xiàn)分隔線(xiàn)具體的制作過(guò)程如下：（1）插入一個(gè)一行一列的表格。（2）在表格“屬性”面板中，按照?qǐng)D4-15所示來(lái)設(shè)置表格的屬性，即行、列數(shù)設(shè)為1；寬高為200像素（根據(jù)實(shí)際需要來(lái)設(shè)軒其值）；高不高或?yàn)?；填充、間距高為0；邊框高為0。圖4-15 設(shè)置表格屬性（3）按圖4-16所求設(shè)置單元格的屬性，即高設(shè)為1；寬不高或?yàn)?；背景顏色高為黑色（媽為細(xì)線(xiàn)的顏色，也可以高置為其他顏色）。圖4-16 設(shè)置單元格的屬性（4）查看源代碼，如圖4-17所示，將標(biāo)記符中的” ”(半個(gè)空格位)徹底刪除,就可以得到一條水平細(xì)線(xiàn).同樣的,如果在圖4-15所示的

32、表格屬性設(shè)置中改成高為某個(gè)像素什,寬為0;將圖4-16所求的單元格屬性設(shè)置必為1,高為0;把如圖4-17所示的源代碼中的 徹底刪除,則可得到一條垂直細(xì)線(xiàn)。圖4-17 去掉表格中的空格代碼注意:這種細(xì)線(xiàn)效果其實(shí)就是一個(gè)高為”1pix”的表格.在Dreamweaver MX中沒(méi)有插入元素的單元格中都自動(dòng)填充半個(gè)空格(其代碼為“ ”),只要去掉這半個(gè)空格,設(shè)置的單元格高(寬)度才起作用.利用表格進(jìn)行頁(yè)面布局網(wǎng)頁(yè)中的表格除了具備傳統(tǒng)表格存放和規(guī)劃數(shù)據(jù)的功能外,還可以用來(lái)定位網(wǎng)頁(yè)元素,也就是說(shuō)要用于網(wǎng)頁(yè)元素的排版.如在圖4-10所示的網(wǎng)頁(yè)上,就是使用了表格來(lái)進(jìn)行網(wǎng)頁(yè)排版的,但由于使用普通

33、表格進(jìn)行排版操作有些不方便, DreamweaverMX 為此提供了一種新的網(wǎng)頁(yè)排版視圖布局視圖（Layout View），在這種視圖模式下，用戶(hù)可以通過(guò)繪制布局表格和布局單元格，從而可以像在一張白紙上用筆來(lái)規(guī)劃網(wǎng)頁(yè)的布局，并可在布局單元格中插入文本和圖像，通過(guò)移動(dòng)布局表格和布局單元格的位置來(lái)精確地定位網(wǎng)頁(yè)上的文本和圖像。1.切換視圖Dreamweaver MX為設(shè)計(jì)制作表格提供了兩種視圖：標(biāo)準(zhǔn)視圖和面局視圖，前面介紹的表格創(chuàng)建及編輯過(guò)程都是在標(biāo)準(zhǔn)視圖下進(jìn)行的。要切換到布局視圖，可以執(zhí)行主菜單中的“查看”“表格視圖”“布局視圖”命令，也可以單擊“插入”面板上的“布局”選項(xiàng)卡，再單擊“布局視圖”

34、按鈕，按鈕處于被按下?tīng)顟B(tài)，如圖4-18所示。圖4-18 “布局視圖”面板首先按下“布局”按鈕，切換到布局視圖模式后，設(shè)計(jì)窗口將彈出如圖4-19所示的“布局視圖入門(mén)”對(duì)話(huà)框，提供布局視圖下相關(guān)功能的操作說(shuō)明，單擊“確定”按鈕，當(dāng)前網(wǎng)頁(yè)文檔即處于布局視圖模式下。圖4-19 “布局視圖模式”對(duì)話(huà)框2. 繪制布局表格在布局視圖模式中，就可以在網(wǎng)頁(yè)中、文檔上繪制布局表格和布局單元格了，并可以在其中插入文本和圖像，然后通過(guò)移動(dòng)布局表格和布局單元格來(lái)定位文本和圖像。要在網(wǎng)頁(yè)文檔中繪制布局表格和布局單元格，具體的操作方法如下。（1）新建一個(gè)網(wǎng)頁(yè)文檔（基本HTML頁(yè)）。（2）單擊“插入”面板“布局”選項(xiàng)卡，再單

35、擊“布局視圖”按鈕，切換至布局視圖。（3）單擊“布局”面板中的“繪制布局表格”按鈕，將鼠標(biāo)指針移至網(wǎng)頁(yè)窗口左上角，鼠標(biāo)指針變成+形狀，按住鼠標(biāo)左鍵拖動(dòng)，就可以在網(wǎng)頁(yè)文檔窗口內(nèi)畫(huà)出一個(gè)布局表格，其邊框呈現(xiàn)綠色，并在表格頂端顯示出刻度值，如圖4-20所示。圖4-20 繪制布局表格（4）單擊“布局”面板中“繪制布局單元格”按鈕，然后在已繪制好的布局表格內(nèi)按住鼠標(biāo)左鍵拖動(dòng)，就可以繪制出布局單元格了，其邊框呈天藍(lán)色。（5）重復(fù)步驟（4），可以繼續(xù)繪制布局單元格，如果按住Ctrl鍵，就可以邊疆在布局表格內(nèi)繪制多個(gè)布局單元格。注意：?jiǎn)卧癖舜酥g不能重疊。（6）在布局表格內(nèi)還可以再繪制布局表格。（7）在布局

36、單元格中插入文本和圖像，如圖4-21所示。當(dāng)不在布局表格中繪制布局單元格時(shí)，Dreamweaver MX會(huì)自動(dòng)創(chuàng)建一個(gè)布局表格以容納該單元格。布局單元格不能存在于布局表格之外。當(dāng)Dreamweaver MX自動(dòng)創(chuàng)建布局表格時(shí)，該表格最初顯示為填滿(mǎn)整個(gè)設(shè)計(jì)視圖，即使更改網(wǎng)頁(yè)文檔窗口的大小也是如此。這種全窗口默認(rèn)布局表格使用戶(hù)可以在設(shè)計(jì)視圖中的任意位置繪制布局單元格。用戶(hù)可以將該表格設(shè)置為特定的大小，方法是用鼠標(biāo)拖動(dòng)布局表格邊框的控制點(diǎn)來(lái)高速表格的大小。可以在網(wǎng)頁(yè)文檔布局的空白區(qū)域中創(chuàng)建布局表格，也可以在現(xiàn)有布局單元格和表格的周?chē)蚯短自诂F(xiàn)有布局表格中創(chuàng)建布局表格。表格不能互相重疊，但一個(gè)表格可以

37、完全飲食在另一個(gè)表格當(dāng)中，即創(chuàng)建嵌套表格。對(duì)外部表格所進(jìn)行的更改不會(huì)影響嵌套表格中的單元格。例如，當(dāng)更改外部表格中行或列的大小時(shí)，內(nèi)部表格中單元格的大小不發(fā)生變化?？梢圆迦攵嗉?jí)嵌套表格，嵌套布局表格的大小不能超過(guò)包含它的表格。注意：如果網(wǎng)頁(yè)文檔上已經(jīng)包含有內(nèi)容（文本或圖像），則只能在現(xiàn)有內(nèi)容的下方繪制新布局表格。如果想在現(xiàn)有內(nèi)容之下繪制布局表格但是出現(xiàn)禁止繪制鼠標(biāo)指針，請(qǐng)重新調(diào)整文檔窗口的大小以合現(xiàn)有內(nèi)容底部和窗口底部之間產(chǎn)生更多的空白空間。不能在布局單元格中創(chuàng)建布局表格。只能在現(xiàn)有布局表格的空白區(qū)域中或在現(xiàn)有單元格周?chē)鷦?chuàng)建嵌套布局表格。圖4-21 輸入文本和圖像的布局單元格3.編輯和設(shè)置布局表格在繪制完布局表格和布局單元格后，還經(jīng)常需要對(duì)它們進(jìn)行調(diào)整，以適應(yīng)文本和圖像等內(nèi)容的輸入。（1）選中布局表格或單元格 要對(duì)布局表格或布局單元格進(jìn)行操作，首先須選中它。具體操作方法是：將鼠標(biāo)移至布局表格