《多媒體技術(shù)與網(wǎng)頁(yè)設(shè)計(jì)》課件第19章

第19章表格19.1創(chuàng)建表格19.2編輯表格19.3設(shè)置表格19.4高級(jí)操作19.5使用布局視圖進(jìn)行網(wǎng)頁(yè)布局

19.1創(chuàng)建表格

1.新建表格

在網(wǎng)頁(yè)中插入表格的具體操作步驟如下：

(1)將光標(biāo)移到需要插入表格的位置。

(2)選擇“插入”→“表格”命令，或單擊“常用”插入欄中的按鈕，彈出“表格”對(duì)話框。

(3)在對(duì)話框中設(shè)置插入表格的行數(shù)、列數(shù)、表格

寬度、邊框粗細(xì)、單元格邊距等屬性，如圖19.1所示。

(4)單擊“確定”按鈕即可創(chuàng)建一個(gè)表格，如圖19.2

所示。圖19.1“表格”對(duì)話框圖19.2創(chuàng)建的表格

2.輸入內(nèi)容

表格創(chuàng)建后可以向表格中輸入內(nèi)容。輸入表格內(nèi)容的方法很簡(jiǎn)單，只需將光標(biāo)移到需要輸入內(nèi)容的單元格中，然后按輸入文本或插入圖像的方法進(jìn)行操作即可。如圖19.3所示為向表格中輸入了三幅圖像。圖19.3輸入表格內(nèi)容19.2編輯表格

剛開(kāi)始創(chuàng)建的表格有時(shí)并不一定符合要求，這時(shí)就需要編輯表格，如刪除表格、拆分與合并某些單元格等。

19.2.1選擇表格

對(duì)表格進(jìn)行操作之前要先選擇表格，既可以選擇整個(gè)表格，也可以只選擇某行或某列或某個(gè)單元格。

1.選擇整個(gè)表格

選擇整個(gè)表格的方法有以下幾種：

(1)將鼠標(biāo)移到表格內(nèi)部的邊框上，當(dāng)鼠標(biāo)變?yōu)榛蛐螤顣r(shí)單擊鼠標(biāo)即可，如圖19.4所示。圖19.4選擇表格方法(1)

(2)將鼠標(biāo)移到表格的外邊框線上，當(dāng)鼠標(biāo)變?yōu)樾螤顣r(shí)單擊鼠標(biāo)左鍵即可，如圖19.5所示。圖19.5選擇表格方法(2)

(3)將光標(biāo)移到表格的任一單元格中，單擊窗口左下角標(biāo)簽選擇器中的<table>標(biāo)簽即可，如圖19.6所示。圖19.6選擇表格方法(3)

(4)將光標(biāo)移到表格的任一單元格中，表格上端或

下端將彈出綠線的標(biāo)志，單擊最上端標(biāo)有表格寬度的按

鈕，在彈出的菜單中選擇“選擇表格”命令即可，如圖19.7所示。圖19.7選擇表格方法(4)

2.選擇整行

選擇整行有以下兩種方法：

(1)將鼠標(biāo)移到需選擇行的左側(cè)，當(dāng)鼠標(biāo)變?yōu)樾螤钋以撔械倪吙蚓€變?yōu)榧t色時(shí)，單擊鼠標(biāo)左鍵即可選擇該行，如圖19.8所示。圖19.8選擇整行方法(1)

(2)將光標(biāo)移到需選擇行的任一單元格中，單擊窗口左下角標(biāo)簽選擇器中的<tr>標(biāo)簽即可，如圖19.9所示。圖19.9選擇整行方法(2)

3.選擇整列

選擇整列有以下兩種方法：

(1)將鼠標(biāo)移到需選擇列的上端，當(dāng)鼠標(biāo)變?yōu)樾螤钋以摿械倪吙蚓€變?yōu)榧t色時(shí)，單擊鼠標(biāo)左鍵即可，如圖19.10所示。圖19.10選擇整列方法(1)

(2)將光標(biāo)移到表格中任一單元格中，單擊需選擇的列上端的按鈕，在彈出的菜單中選擇“選擇列”命令即可，如圖19.11所示。圖19.11選擇整列方法(2)

4.選擇單元格

選擇單元格有選擇單個(gè)單元格、選擇相鄰的多個(gè)單元格和選擇不相鄰的多個(gè)單元格三種方式。

(1)選擇單個(gè)單元格：將鼠標(biāo)移動(dòng)到需要選擇的單元格中并單擊即可。

(2)選擇相鄰的多個(gè)單元格：首先將鼠標(biāo)移動(dòng)到一個(gè)單元格中，然后按住鼠標(biāo)左鍵不放并拖動(dòng)，當(dāng)?shù)竭_(dá)需要的單元格時(shí)釋放鼠標(biāo)，即可選擇以這兩個(gè)單元格為對(duì)角線的矩形區(qū)域中的所有單元格，如圖19.12所示。圖19.12選擇相鄰的多個(gè)單元格

(3)選擇不相鄰的多個(gè)單元格：按住Ctrl鍵不放，然后單擊要選擇的單元格即可，如圖19.13所示。圖19.13選擇不相鄰的多個(gè)單元格19.2.2拆分與合并單元格

1.拆分單元格

可以將某個(gè)單元格拆分成幾行或幾列。例如，拆分圖19.14所示的原始表格的具體步驟如下：

(1)將光標(biāo)移到要拆分的單元格中，然后單擊“屬性”面板左下角“單元格”欄中的按鈕(如圖19.15所示)，彈出如圖19.16所示的“拆分單元格”對(duì)話框。圖19.14原始表格圖19.15點(diǎn)擊拆分表格按鈕

(2)在“把單元格拆分”欄中，若選中“行”按鈕，可以將單元格拆分成多行；若選中“列”按鈕，則可以將單元格拆分為多列。

(3)在“行數(shù)”或“列數(shù)”數(shù)值框中輸入要拆分的行數(shù)或

列數(shù)。

(4)單擊“確定”按鈕，即可得到如圖19.17所示的拆分結(jié)果。圖19.16“拆分單元格”對(duì)話框圖19.17拆分表格結(jié)果

2.合并單元格

單元格合并只能對(duì)相鄰的兩個(gè)或多個(gè)單元格進(jìn)行合

并。首先要選擇相鄰的單元格區(qū)域(如圖19.18所示)，然后單擊“屬性”面板左下角的按鈕(如圖19.19所示)，即可將它們合并為一個(gè)單元格，如圖19.20所示。圖19.19點(diǎn)擊合并表格按鈕圖19.20合并結(jié)果

圖19.18選擇相鄰的單元格

19.2.3插入與刪除行(列)

在制作表格時(shí)，經(jīng)常要插入或刪除行(列)。

1.插入行(列)

行(列)的插入有單行(列)和多行(列)的插入兩種情況。

1)單行(列)的插入

將光標(biāo)移到需插入行或列的單元格中，單擊鼠標(biāo)右

鍵，在彈出的快捷菜單中選擇“表格”→“插入行”命令，即可在當(dāng)前單元格上方插入一行，如圖19.21所示；若在彈出的快捷菜單中選擇“表格”→“插入列”命令，則可在當(dāng)前單元格的左側(cè)插入一列，如圖19.22所示。圖19.21插入單行圖19.22插入單列

2)多行(列)的插入

插入多行或多列的具體步驟如下：

(1)將光標(biāo)插入點(diǎn)定位到需插入多行或多列的單元

格中。

(2)單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“表格”→“插入行或列”命令，彈出“插入行或列”對(duì)話框。

(3)輸入行(列)的數(shù)值，在“位置”欄選擇插入的位置，如圖19.23所示。圖19.23“插入行或列”對(duì)話框

(4)單擊“確定”按鈕，關(guān)閉對(duì)話框完成設(shè)置。如圖19.24所示為表格插入了兩行后的效果。圖19.24插入兩行后的效果

2.刪除行(列)

將光標(biāo)移到需刪除的單元格中，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“表格”→“刪除行”命令可以刪除光標(biāo)所在的行；選擇“表格”→“刪除列”命令則可刪除光標(biāo)所在的列。

19.3設(shè)置表格

19.3.1設(shè)置表格屬性

選擇某個(gè)表格后，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“屬性”命令，彈出如圖19.25所示的“屬性”面板，通過(guò)該面板可以對(duì)表格的屬性進(jìn)行設(shè)置。圖19.25表格“屬性”面板表格“屬性”面板中各項(xiàng)參數(shù)的含義如下：

(1)表格Id：命名表格名稱。

(2)行、列：設(shè)置表格的行數(shù)和列數(shù)。

(3)寬、高：設(shè)置表格的寬度和高度。

(4)填充：設(shè)置單元格邊界和單元格內(nèi)容之間的

距離。

(5)間距：設(shè)置相鄰單元格之間的距離。

(6)對(duì)齊：設(shè)置表格與文本或圖像等網(wǎng)頁(yè)元素之間的對(duì)齊方式。

(7)邊框：設(shè)置邊框的粗細(xì)。

(8)邊框顏色：設(shè)置邊框的顏色。

(9)背景顏色：設(shè)置表格的背景顏色。

(10)背景圖像：設(shè)置表格的背景圖像。單擊文本框右側(cè)的按鈕，在彈出的“選擇圖像源文件”對(duì)話框中可以選擇圖像作為背景。

(11)按鈕：刪除表格的列寬值。

(12)按鈕：刪除表格的行高值。

(13)按鈕：將表格寬度單位從瀏覽器窗口的百分比轉(zhuǎn)換為像素。

(14)按鈕：將表格寬度單位從像素轉(zhuǎn)換為瀏覽器窗口的百分比。19.3.2設(shè)置單元格屬性

Dreamweaver軟件可以設(shè)置某個(gè)單元格、行或列的屬性。選擇要設(shè)置屬性的單元格、行或列，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“屬性”命令，彈出如圖19.26所示的“屬性”面板。圖19.26單元格“屬性”面板

(1)水平：設(shè)置單元格中的文本在水平方向上的對(duì)齊方式。

(2)垂直：設(shè)置單元格中的文本在垂直方向上的對(duì)齊方式。

(3)寬、高：設(shè)置單元格的寬度和高度。

(4)背景：設(shè)置單元格的背景圖像。

(5)背景顏色：設(shè)置單元格的背景顏色。

(6)邊框：設(shè)置單元格邊框的顏色。

19.4高級(jí)操作

19.4.1創(chuàng)建嵌套表格

嵌套表格是指表格中的某個(gè)單元格又含有表格，但是其寬度受所在單元格寬度的限制。嵌套表格經(jīng)常用于對(duì)表格內(nèi)部的文字或圖像的位置進(jìn)行控制。創(chuàng)建嵌套表格和創(chuàng)建表格非常類(lèi)似，其具體操作步驟如下：

(1)將光標(biāo)移到需插入表格的單元格中。

(2)選擇“插入”→“表格”命令，彈出“表格”對(duì)話框。

(3)設(shè)置表格的行數(shù)、列數(shù)、寬度和邊框等屬性。

(4)單擊“確定”按鈕完成表格的添加，如圖19.27

所示。圖19.27創(chuàng)建的嵌套表格19.4.2排序

Dreamweaver8可對(duì)表格中的內(nèi)容進(jìn)行排序，其具體操作步驟如下：

(1)選擇要進(jìn)行排序操作的表格，如圖19.28所示。圖19.28選擇表格

(2)選擇“排序表格”命令，彈出“排序表格”對(duì)話框。

(3)在“排序按”下拉列表框中選擇主關(guān)鍵字序列，這里選擇“列2”作為主關(guān)鍵字排序列。在其下面的“順序”下拉列表框中選擇是按字母還是按數(shù)字、是升序還是降序排序。這里分別選擇“按字母順序”選項(xiàng)和“升序”選項(xiàng)。

(4)在“再按”中選擇作為子排序列的列，這里選擇“列3”選項(xiàng)。在其下的“順序”中選擇子排序列的排序方式，這里分別選擇“按數(shù)字順序”選項(xiàng)和“升序”選項(xiàng)，如圖19.29

所示。圖19.29“排序表格”對(duì)話框

(5)單擊“確定”按鈕關(guān)閉對(duì)話框，對(duì)表格的內(nèi)容進(jìn)行排序，結(jié)果如圖19.30所示。

在“排序表格”對(duì)話框的“選項(xiàng)”欄進(jìn)行設(shè)置，其中各

項(xiàng)參數(shù)的含義如下：

(1)排序包含第一行：將表格的第一行包括在排序

中。圖19.30排序后的表格

(2)排序標(biāo)題行：指定使用與body行相同的條件對(duì)表格thead部分中的所有行進(jìn)行排序，前提是thead部分存在。

(3)排序腳注行：指定使用與body行相同的條件對(duì)表格tfoot部分中的所有行進(jìn)行排序，前提是tfoot部分存在。

(4)完成排序后所有行顏色保持不變：指定排序后表格行的屬性應(yīng)該保持與相同內(nèi)容的關(guān)聯(lián)。19.4.3格式化

格式化即設(shè)置表格的格式，其具體操作步驟為：選擇“格式化表格”命令，彈出“格式化表格”對(duì)話框，在其左上角列表框中選擇一種表格樣式，或在下方的設(shè)置區(qū)域中對(duì)表格進(jìn)行設(shè)置，如圖19.31所示。設(shè)置后單擊“確定”按鈕，如圖19.32所示為格式化后的表格。圖19.31“格式化表格”對(duì)話框圖19.32格式化后的表格

19.5使用布局視圖進(jìn)行網(wǎng)頁(yè)布局

使用表格除了可以制作表格外，還可以布局網(wǎng)頁(yè)。用表格布局網(wǎng)頁(yè)有兩種方法：一種是手工添加布局表格，其方法和添加普通表格一樣，只要將表格邊框的粗細(xì)設(shè)置為0，表格的間距設(shè)置為0，根據(jù)需要手動(dòng)設(shè)置每個(gè)單元格的寬度和高度即可；另一種是在布局視圖中創(chuàng)建布局表格和布局單元格，從而對(duì)網(wǎng)頁(yè)進(jìn)行布局。19.5.1創(chuàng)建布局表格和布局單元格

要使用布局表格和布局單元格，首先要將編輯窗口切換到布局模式，然后創(chuàng)建布局表格，再在布局表格中添加布局單元格進(jìn)行頁(yè)面布局。

1.切換到布局視圖

將插入欄切換到“布局”插入欄，單擊“布局”按鈕，將編輯窗口切換到布局模式，此時(shí)“布局”插入欄中的“布局表格”按鈕和“布局單元格”按鈕被激活，如圖19.33所示。圖19.33切換到布局視圖

2.創(chuàng)建布局表格

將編輯窗口切換到布局視圖后就可以添加布局表格，在“布局”插入欄中單擊按鈕，此時(shí)鼠標(biāo)指針變?yōu)樾?/p>

狀，按住鼠標(biāo)左鍵不放，拖動(dòng)到所需位置后釋放鼠標(biāo)即

可。如圖19.34所示為創(chuàng)建的布局表格。圖19.34創(chuàng)建的布局表格

3.創(chuàng)建布局單元格

添加布局表格可以添加布局單元格，單擊“布局”插入欄中的按鈕，按住鼠標(biāo)左鍵不放，從左上角向右下角拖動(dòng)到適合大小后釋放鼠標(biāo)即可。如圖19.35所示為在布局表格中創(chuàng)建的布局單元格。圖19.35創(chuàng)建的布局單元格

4.創(chuàng)建嵌套布局表格

在布局表格中還可以創(chuàng)建嵌套的布局表格，單擊“布局”插入欄中的按鈕，然后在已創(chuàng)建的布局表格中拖動(dòng)鼠標(biāo)光標(biāo)即可創(chuàng)建嵌套布局表格，如圖19.36所示。圖19.36創(chuàng)建的嵌套布局表格19.5.2