12.5.4　應(yīng)用表格定位網(wǎng)頁(yè)元素

表格在網(wǎng)頁(yè)中發(fā)揮著重要的作用，它通過(guò)有序地組織數(shù)據(jù)來(lái)布局整個(gè)網(wǎng)頁(yè)。在復(fù)雜的網(wǎng)頁(yè)中，表格是對(duì)文本和圖形進(jìn)行布局的強(qiáng)有力的工具，可以說(shuō)表格是 Dreamweaver 8頁(yè)面排版的核心。

1.創(chuàng)建表格

Dreamweaver 8創(chuàng)建表格的手段是相當(dāng)靈活的，“屬性”面板、“插入”菜單都能幫助用戶(hù)生成形式多樣的表格，然后用戶(hù)就可以在表格內(nèi)組合內(nèi)容，將不同的網(wǎng)頁(yè)素材存放在所選的單元格內(nèi)，達(dá)到秩序排版的目的。

插入表格的操作方法：

① 選擇菜單【插入】→【表格】，或者通過(guò)單擊“插入”面板“常用”選項(xiàng)卡中的“表格”打開(kāi)“表格”對(duì)話(huà)框，對(duì)話(huà)框可分為“表格大小”、“頁(yè)眉”、“輔助功能”三部分，對(duì)表格的各項(xiàng)屬性進(jìn)行設(shè)置，如圖 12-63　所示。

圖12-63　“插入表格”對(duì)話(huà)框

② 分別在“行數(shù)”和“列數(shù)”文本框中輸入表格的行和列的數(shù)值，此例中輸入數(shù)值8和4。

③“表格寬度”文本框用于定義表格的寬度。有兩種方法：一是在“寬度”文本 框中輸入以像素為單位的寬度數(shù)值。另一種是在“寬度”文本框中指定輸入代表瀏覽器窗口百分比的數(shù)值。在輸入瀏覽器窗口的百分比數(shù)值時(shí)，不需要輸入百分號(hào)，輸入數(shù)值即可。

④ “邊框粗細(xì)”文本框用于定義表格的邊框?qū)挾??？芍苯釉谖谋究蛑休斎胍韵袼貫閱挝坏倪吙驍?shù)值，此例中取默認(rèn)值 1。若要確保瀏覽器不顯示表格邊框，則將邊框粗細(xì)設(shè)置為0。

⑤ “單元格邊距”用于指定單元格內(nèi)容和單元格邊框之間的距離；“單元格間距”用于指定表格單元格之間的距離，該距離不包括邊框的寬度，用戶(hù)在文本框內(nèi)設(shè)置的數(shù)值是以像素為單位的，輸入數(shù)值10，5；若要確保瀏覽器不顯示表格中的邊距和間距，可將這兩項(xiàng)都設(shè)置為 0。

⑥ 在“頁(yè)眉”部分可設(shè)置有無(wú)表格標(biāo)題以及將行（頂部）或列（左部）設(shè)置為標(biāo)題，此例中選擇頂部。

⑦ 在“輔助功能”部分：“標(biāo)題”提供一個(gè)顯示在表格外的標(biāo)題；“對(duì)齊標(biāo)題”指定表格標(biāo)題相對(duì)于表格的顯示位置；“摘要”給出表格的說(shuō)明，該文本不會(huì)顯示在瀏覽器中，此例中不設(shè)置輔助功能部分。

⑧ 單擊【確定】按鈕，出現(xiàn)的表格如圖12-64所示。

圖12-64　插入表格

2.填充表格

文本、圖像都可以作為表格的填充對(duì)象，還可以在表格內(nèi)插入表單、水平線(xiàn)、插件、ActiveX等對(duì)象。向表格中添加內(nèi)容時(shí)需將光標(biāo)定位到要輸入內(nèi)容的單元格內(nèi)。

在單元格內(nèi)使用鍵盤(pán)上的光標(biāo)移動(dòng)鍵，每次只能將光標(biāo)移動(dòng)至下一個(gè)漢字或字符位置。

按 Tab 功能鍵時(shí)，將使插入點(diǎn)在表格內(nèi)按從左向右、從上到下的順序逐格移動(dòng)。如果插入點(diǎn)已經(jīng)位于表格最后一個(gè)單元格內(nèi)，繼續(xù)按 Tab 鍵時(shí)在表格的后面將插入一個(gè)新行。在表格內(nèi)填充文本后的效果如圖 12-65　所示。

3.操作單元格

單元格是表格的最小組成單位，對(duì)單元格的操作主要表現(xiàn)在選擇、復(fù)制、分割和合并等方面。需要不規(guī)則表格時(shí)，可對(duì)原本規(guī)則的表格進(jìn)行分割、合并，表格的形狀就會(huì)發(fā)生變化。

圖12-65　填充表格內(nèi)容

（1）選擇單元格

選擇單元格是針對(duì)單元格任何操作的基礎(chǔ)，鼠標(biāo)是這項(xiàng)操作的重要工具。

選擇單個(gè)單元格的方法：按住“Ctrl”鍵單擊該單元格或?qū)⒐鈽?biāo)定位在單元格中，然后單擊文檔窗口狀態(tài)欄的＜ td ＞標(biāo)簽。

選擇單元格區(qū)域有以下兩種方法：

① 在表格內(nèi)拖動(dòng)鼠標(biāo)便可使經(jīng)過(guò)區(qū)域的單元格處于選擇狀態(tài)。

② 先選中一個(gè)單元格，然后按住“Shift”鍵，再單擊另一個(gè)單元格，便可選中以這兩個(gè)單元格為對(duì)角的一個(gè)矩形區(qū)域。

上述兩種方法用于選擇連續(xù)的單元格。不連續(xù)單元格的選擇方法是：按住“Ctrl”鍵，然后再單擊單元格，隨著鼠標(biāo)的單擊，所選的單元格將成為選擇的對(duì)象，如圖 12-66所示。單元格被選擇后，它的邊框?qū)⒁陨钌@示。

需要取消已經(jīng)選擇的單元格時(shí)，先按住“Ctrl”鍵，然后再依次單擊準(zhǔn)備取消選擇的單元格，單元格的邊框?qū)⒒謴?fù)為淺色。在這里按住“Ctrl”功能鍵是非常關(guān)鍵的，否則單擊過(guò)后將取消所有單元格的選擇。

※ 提示：

用戶(hù)不能同時(shí)選擇多個(gè)表格內(nèi)的單元格，也就是說(shuō)只有當(dāng)前表格的單元格才可能處于選擇狀態(tài)。當(dāng)試圖在第 2　個(gè)表格內(nèi)選擇單元格時(shí)，在此之前選擇的單元格將自動(dòng)處于非選擇狀態(tài)。

圖12-66　選擇單元格

（2）單元格的拆分與合并

單元格的拆分操作針對(duì)對(duì)象為一個(gè)單元格，合并操作針對(duì)對(duì)象為所選的多個(gè)單元格。

拆分單元格的操作方法：

① 將光標(biāo)定位在要拆分的單元格中。

② 選擇菜單【修改】→【表格】→【拆分單元格】，或者單擊“屬性”面板中的“拆分單元格為行或列”按鈕，彈出的對(duì)話(huà)框如圖 12-67　所示。

圖12-67　拆分單元格

③ 在“把單元格拆分”選項(xiàng)中選中“行”單選按鈕。

④ 在“行數(shù)”文本框中輸入分割單元格的行數(shù)（例如4）。

⑤ 單擊【確定】按鈕，觀察結(jié)果。

4.設(shè)置單元格屬性

設(shè)置單元格的屬性主要是通過(guò)“屬性”面板來(lái)完成的。選擇單元格之后，“屬性”面板中將出現(xiàn)與單元格有關(guān)的多項(xiàng)參數(shù)，如圖 12-68　所示。通過(guò)文本框、下拉列表的操作可以改變單元格的大小、背景、邊框、對(duì)齊方式等。

圖12-68　單元格屬性面板

（1）改變單元格大小

在默認(rèn)情況下，單元格的大小會(huì)隨著填充內(nèi)容的增多而自動(dòng)調(diào)整。將鼠標(biāo)移動(dòng)至單元格的左、右兩側(cè)邊線(xiàn)上時(shí)，光標(biāo)會(huì)成水平箭頭形狀，沿箭頭指示的方向拖動(dòng)鼠標(biāo)，將改變單元格的寬度；改變單元格高度的方法同上。

需要精確地定義單元格的大小時(shí)，可在“屬性”面板的“寬”、“高”文本框中進(jìn)行設(shè)置，如果直接在文本框中輸入數(shù)值，表示單元格的寬度、高度將使用像素作為度量單位。

Dreamweaver 8能夠同時(shí)調(diào)整多個(gè)單元格的大小，選擇多個(gè)單元格之后，按照上述方法將使所選的單元格具有相同的寬度與高度。

選中“屬性”面板的“不換行”復(fù)選框后，將禁止文字換行。這樣隨著輸入文字的增多，單元格的寬度將不斷地加大，而它的高度卻始終保持不變。

（2）對(duì)齊單元格

Dreamweaver 8允許用戶(hù)在水平、垂直方向上設(shè)置單元格的對(duì)齊方式。水平對(duì)齊包括左對(duì)齊、居中對(duì)齊、右對(duì)齊，垂直對(duì)齊包括頂端、居中、底部、基線(xiàn)的對(duì)齊。在默認(rèn)的情況下單元格的內(nèi)容采用水平左對(duì)齊、垂直居中對(duì)齊的方式。選中單元格的“屬性”面板的“標(biāo)題”選項(xiàng)，將使所選的單元格成為表格的標(biāo)題，單元格的內(nèi)容將以默認(rèn)的水平居中、粗體的方式出現(xiàn)在表格內(nèi)。

5.操作行與列

表格是由數(shù)量不等的行、列組成的，而表格的行、列又包含著多個(gè)單元格，因此所有表格行、列及其單元格的操作都是調(diào)整表格的重要手段。在表格內(nèi)既能夠插入新行、新列，又可將多行、多列進(jìn)行合并，改變表格的外觀。

（1）選擇行與列

表格行是由水平排列的單元格組成的，表格列是由垂直排列的單元格組成的。在對(duì)表格的行、列進(jìn)行操作之前，必須選擇相應(yīng)的行與列，以便確定此后操作的對(duì)象。一般通過(guò)鼠標(biāo)或鍵盤(pán)的操作就能夠完成對(duì)表格行、列的選擇。處于選擇狀態(tài)的行或列的邊框?qū)⒁暂^深的顏色出現(xiàn)在網(wǎng)頁(yè)內(nèi)。如圖 12-69　所示，表格的第2、4兩列處于選擇狀態(tài)。

選擇單行、單列可用如下方法之一：

●將鼠標(biāo)移到待選行的左邊界，當(dāng)光標(biāo)變成黑色向右的箭頭時(shí)，單擊即可選取該行。

●將鼠標(biāo)移到待選列的上邊界，當(dāng)光標(biāo)變成黑色向下的箭頭時(shí)，單擊即可選取該列。

圖12-69　選擇列

●將鼠標(biāo)移動(dòng)到表格某行的左邊界，當(dāng)光標(biāo)變成黑色向右的箭頭時(shí)，按住鼠標(biāo)左鍵拖動(dòng)鼠標(biāo)，即可選擇表格內(nèi)連續(xù)的若干行。

●將鼠標(biāo)移動(dòng)到表格某列的上邊界，當(dāng)光標(biāo)變成黑色向下的箭頭時(shí)，按住鼠標(biāo)左鍵拖動(dòng)鼠標(biāo)，即可選擇表格內(nèi)連續(xù)的若干列。

●按住Ctrl鍵，將鼠標(biāo)移動(dòng)到表格某行的左邊界，當(dāng)光標(biāo)變成黑色向右的箭頭時(shí)單擊，即可選擇表格內(nèi)不連續(xù)的若干行。

●按住Ctrl鍵，將鼠標(biāo)移動(dòng)到表格某列的上邊界，當(dāng)光標(biāo)變成黑色向下的箭頭時(shí)單擊，即可選擇表格內(nèi)不連續(xù)的若干列。

（2）插入行與列

將插入點(diǎn)定位于單元格內(nèi)，用戶(hù)可以進(jìn)行插入單行、單列的操作，也可以一次性地插入多個(gè)行或列。在默認(rèn)的情況下，插入的行將位于所選單元格的上方，而插入的列將位于所選單元格的左側(cè)。

進(jìn)行單行插入可選擇菜單【修改】→【表格】→【插入行】命令，或者單擊鼠標(biāo)右鍵在“快捷菜單”中選擇【表格】→【插入行】命令。同樣的方法也可以插入單列。

Dreamweaver 8能夠讓用戶(hù)在單元格的指定位置插入行或列，可選擇菜單【插入】→【表格對(duì)象】→【在上/下面插入行】，或者【插入】→【表格對(duì)象】→【在左/右邊插入列】。

插入多個(gè)表格行或列的操作方法：

① 在表格內(nèi)確定插入表格行的位置。

② 選擇菜單【修改】→【表格】→【插入行或列…】命令，或者單擊鼠標(biāo)右鍵在“快捷菜單”中選擇【表格】→【插入行或列…】，打開(kāi)“插入行或列”對(duì)話(huà)框，如圖12-70所示。

③ 在“插入”選項(xiàng)組中選中“行”單選按鈕。

圖12-70　插入行或列對(duì)話(huà)框

④ 在“行數(shù)”框中輸入插入行的數(shù)量。

⑤ 在“位置”選項(xiàng)組中選中插入行的位置。

⑥ 單擊【確定】按鈕。

在“位置”選項(xiàng)組選中“所選之上”單選按鈕，表示在所選單元格的上方插入指定數(shù)量的行；選中“所選之下”單選按鈕，表示在所選單元格的下方插入指定數(shù)量的行。

同樣的方法可以插入列。

（3）刪除行與列

刪除表格行的方法非常簡(jiǎn)單，在刪除之前需要選擇表格行，然后執(zhí)行下列操作步驟之一：

●選擇菜單【修改】→【表格】→【刪除行】命令。

●單擊鼠標(biāo)右鍵彈出快捷菜單，選擇“表格”菜單中的“刪除行”命令。

同樣的方法可以刪除表格的列。

6.設(shè)置表格

在頁(yè)面內(nèi)創(chuàng)建表格后，通過(guò)屬性面板，可對(duì)它的大小、邊框、顏色等屬性進(jìn)行設(shè)置。希望快速地格式化表格時(shí)可以通過(guò)預(yù)設(shè)樣式來(lái)自定義新的表格形式。

（1）選擇整個(gè)表格

選擇表格的方法很多，鼠標(biāo)、菜單命令、狀態(tài)欄標(biāo)簽都可以獨(dú)立地完成該項(xiàng)操作。當(dāng)表格處于選擇狀態(tài)時(shí)，它的邊框?qū)⒁陨钌@示，此時(shí)屬性面板顯示的各項(xiàng)參數(shù)都是針對(duì)表格的，而不是針對(duì)單元格的。

使用鼠標(biāo)選擇表格可用以下方法之一：

① 將鼠標(biāo)移動(dòng)至表格的左上角、表格的頂邊緣或底邊緣，當(dāng)光標(biāo)變?yōu)?img class="row2" src="http://image.guayunfan.com/attached/image/20210502/146386/64b2ba78-6731-4d2e-8c36-b338ed59698e.jpg" alt="img445">形，表格四周的邊框線(xiàn)呈現(xiàn)紅色時(shí)單擊。

② 將鼠標(biāo)移動(dòng)至行或列的邊框線(xiàn)上，當(dāng)光標(biāo)變?yōu)?img class="row2" src="http://image.guayunfan.com/attached/image/20210502/146386/46277702-856f-420e-b07c-2abc5b776b02.jpg" alt="img446">或形，表格四周的邊框線(xiàn)呈現(xiàn)紅色時(shí)單擊。

③ 將插入點(diǎn)定位在表格內(nèi)，選擇【修改】→【表格】→【選擇表格】命令。

④ 插入點(diǎn)定位于所選的表格內(nèi)單擊文檔窗口狀態(tài)欄的＜table＞標(biāo)簽。

（2）定義表格屬性

●定義表格大小

選擇表格之后，通過(guò)拖動(dòng)的方式可以方便、快捷地改變表格的大小，它適用于對(duì)寬度、高度要求不嚴(yán)格的表格。需要精確地定義表格的大小時(shí)，可打開(kāi)“屬性”面板，在“寬”文本框中輸入表格的寬度數(shù)值，并打開(kāi)右側(cè)下拉列表框選擇數(shù)值的單位，如圖 12-71所示。Dreamweaver 8采用像素和瀏覽器窗口的百分比兩種方式來(lái)定義表格的寬度，類(lèi)似地，“高”文本框用于定義表格的高度，打開(kāi)右側(cè)的下拉列表框選擇數(shù)值的單位之后，便可對(duì)表格的高度進(jìn)行定義，這種定義寬度或高度的方法在此之前已經(jīng)介紹過(guò)。需要改變表格行、列的數(shù)目時(shí)，可在“行”，“列”文本框中輸入數(shù)值。Dreamweaver 8規(guī)定添加的表格行出現(xiàn)在表格的底端，添加的表格列出現(xiàn)在表格的右端。

一旦以像素或百分比的形式定義表格的大小之后，就可以使兩者之間進(jìn)行轉(zhuǎn)換。單擊“將表格寬度或高度轉(zhuǎn)換為像素”按鈕或時(shí)，將使表格寬度或高度轉(zhuǎn)換為以像素為單位。單擊“將表格寬度或高度轉(zhuǎn)換為百分比”按鈕或時(shí)，將使表格寬度或高度轉(zhuǎn)換為百分比為單位。如圖12-71所示。

圖12-71　表格的屬性面板

面板中的參數(shù)“填充”用于設(shè)置單元格內(nèi)容和單元格邊框之間的距離；“間距”用于設(shè)置表格單元格之間的距離，它們的調(diào)整將影響到表格內(nèi)所有單元格及其內(nèi)容的位置。如果沒(méi)有指定這些參數(shù)，那么Netscape Navigator、Microsoft Internet Explorer 將采用默認(rèn)值（單元格填充為 1、單元格間距為 2）的方式顯示表格。

●定義表格顏色

“屬性”面板中的“邊框顏色”、色塊和文本框用于定義表格邊框線(xiàn)的顏色，“背景顏色”、色塊和文本框用于定義表格的背景色。試完成如下設(shè)定：表格邊框線(xiàn)為黑色，表格背景色為灰色。效果如圖12-72　所示。

圖12-72　定義表格顏色

（3）使用預(yù)置樣式

為了快速格式化表格的背景、對(duì)齊方式、文本風(fēng)格、邊框?qū)傩缘?，Dreamweaver 8提供了多種預(yù)設(shè)的格式，只需選擇這些樣式的名稱(chēng)，就可對(duì)表格及其填充內(nèi)容的所有屬性進(jìn)行設(shè)置。在預(yù)設(shè)樣式的基礎(chǔ)上，對(duì)表格的屬性繼續(xù)修改，以提高工作效率。

使用預(yù)置樣式的操作方法：

① 選中表格。

② 選擇【命令】→【格式化表格】命令，打開(kāi)“格式化表格”對(duì)話(huà)框，如圖 12-73所示。

③ 在左側(cè)的列表框中選擇一種預(yù)置的格式，可在右側(cè)的預(yù)覽框中對(duì)這種格式進(jìn)行觀察。

④ 單擊“應(yīng)用”按鈕，將所選的預(yù)置樣式應(yīng)用于表格，并觀察其改變。

⑤ 可在“行顏色”選項(xiàng)組中，分別定義“第一種”、“第二種”兩種框的顏色，然后打開(kāi)“交錯(cuò)”下拉列表框，選擇欄目的切換方式。選擇“每一行”時(shí)，表示隔行切換“第一種”、“第二種”欄目。選擇“每?jī)尚小睍r(shí)，表示每?jī)尚星袚Q一次“第一種”、“第二種”欄目。以此可推出“每三行”、“每四行”切換方式。

⑥ “第一行”選項(xiàng)組的“對(duì)齊”下拉列表框用于確定表格第一行的對(duì)齊方式，“文字樣式”用于設(shè)置第一行的文本風(fēng)格，可在常規(guī)、粗體、斜體、加粗斜體之間選擇?！氨尘吧庇糜诙x第一行的背景，“文本顏色”則用于定義文本的顏色。選中“將所有屬性套用至 TD 標(biāo)注而不是 TR 標(biāo)簽”復(fù)選框之后，將把設(shè)置的參數(shù)應(yīng)用于單元格而不是表格行。

⑦ 在“最左列”選項(xiàng)組打開(kāi)“對(duì)齊”下拉列表框之后，便可選擇第一列的對(duì)齊方式，“文字樣式”用于定義第一列文本的風(fēng)格。需要調(diào)整表格邊框的寬度時(shí)，可直接在“邊框”文本框中輸入像素?cái)?shù)值。

圖12-73　格式化表格