利用表格設計和制作網(wǎng)

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

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

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

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

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

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

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

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

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

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

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

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

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

14、項的數(shù)值來增加或減少行數(shù)或列數(shù)。寬和高：設置表格的寬度和高度?？梢赃x擇使用百分比或像素值。使用“屬性”面板上兩個按鈕（清除列寬）和（清除行高）可以清除原來的寬度和高度設置；使用“屬性”面板上的四個按鈕（將表格寬度轉(zhuǎn)為像素）、（將表格高度轉(zhuǎn)換為像素）、（將表格寬度轉(zhuǎn)換為百分比）、（將表格高度轉(zhuǎn)化為百分比），可以將表格寬度和高度在像素和百分比之間進行轉(zhuǎn)換。填充：表格周圍和其他元素之間的間距。間距：單元格之間的間距。對齊：表格在網(wǎng)頁中的對齊方式，有默認、左對齊、居中對齊和右對齊4種選擇。邊框：表格邊框的寬度，若設為0，則在瀏覽網(wǎng)頁時看不到表格邊框。背景顏色：設置表格的背景顏色，通過顏色拾取器按鈕來選

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

36、單元格中插入文本和圖像，如圖4-21所示。當不在布局表格中繪制布局單元格時，Dreamweaver MX會自動創(chuàng)建一個布局表格以容納該單元格。布局單元格不能存在于布局表格之外。當Dreamweaver MX自動創(chuàng)建布局表格時，該表格最初顯示為填滿整個設計視圖，即使更改網(wǎng)頁文檔窗口的大小也是如此。這種全窗口默認布局表格使用戶可以在設計視圖中的任意位置繪制布局單元格。用戶可以將該表格設置為特定的大小，方法是用鼠標拖動布局表格邊框的控制點來高速表格的大小。可以在網(wǎng)頁文檔布局的空白區(qū)域中創(chuàng)建布局表格，也可以在現(xiàn)有布局單元格和表格的周圍或嵌套在現(xiàn)有布局表格中創(chuàng)建布局表格。表格不能互相重疊，但一個表格可以

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