網(wǎng)頁制作入門必備大師珍藏版哈工大.ppt

第12章 使用表格,表格是用來在頁面中顯示表格式數(shù)據(jù)的元素。很多網(wǎng)頁設(shè)計人員使用表格進(jìn)行頁面布。本章詳細(xì)講解下使用表格和用表格進(jìn)行頁面布局的方法。,12.1 表格的基礎(chǔ)知識,一般表格都是由很多行或列組成，其中每個格子稱為“單元格”。其中表格的顯示由邊框、內(nèi)邊距和單元格邊距構(gòu)成。按照表格的組成，內(nèi)容元素中定義的樣式將覆蓋外部元素中定義的樣式。 在“文檔窗口”中，邊框?yàn)?的表格，一般會以雙虛線的格式顯示，如圖左所示。在瀏覽器中，邊框?yàn)?的表格，不會顯示邊線，如右圖所示。,12.2 創(chuàng)建表格,選擇“插入”|“表格”命令，可以打開“表格”對話框，如圖所示。,12.3 選擇表格,選取表格是對表格進(jìn)行進(jìn)一步操作的基礎(chǔ)。其中包括，選擇整個表格、選擇行或列、選擇單元格三個部分。,12.3.1 選擇整個表格,可以執(zhí)行以下操作之一來選擇整個表格。 單擊表格的邊框。 單擊表格內(nèi)的任意位置，然后在“文檔窗口”的底部，選擇元素，如左圖所示。 使用鼠標(biāo)，表格的起始位置，拖拽到結(jié)束位置。 單擊表格內(nèi)的某個位置，然后選擇“修改”|“表格”|“選擇表格”。 選擇后的表格，將在表格邊緣顯示黑色的選擇線，如右圖所示。,12.3.2 選擇表格的行或列,可以執(zhí)行以下操作之一來選擇表格的行或列。 使用鼠標(biāo)懸停在表格行或列的邊緣，當(dāng)鼠標(biāo)顯示為箭頭形狀時，單擊鼠標(biāo)。 單擊表格的某個位置，按住“Shift”鍵，單擊所選的表格，選擇行或者列（也可以同時選擇幾行或幾列表格）。 單擊表格的某個位置，然后在“文檔窗口”的底部，選擇元素，可以選擇單元格所在的行。 在已經(jīng)選擇的表格下面，單擊三角形標(biāo)志，在打開的菜單中選擇“選擇列”選項(xiàng)，可以選擇相應(yīng)的列，如圖所示。 選擇表格的行或列后，表格的顯示效果，如圖所示。,12.3.3 選擇單元格,可以執(zhí)行以下操作之一來選擇表格的單元格。 單擊單元格中的某個位置，選擇“編輯”|“全選”命令。 按住“Ctrl”鍵，單擊所選的單元格。 單擊表格的某個位置，然后在“文檔窗口”的底部，選擇元素。 按住“Ctrl”鍵，單擊要選的單元格，可以同時選擇幾個單元格。選擇表格的單元格后，表格的顯示效果，如圖所示。,12.4 定義表格屬性,表格屬性，包括表格的整體屬性、行或列的屬性和單元格的屬性。,12.4.1 表格的整體屬性,選擇表格后，在屬性窗口會顯示相應(yīng)的屬性。根據(jù)選擇的內(nèi)容不同，屬性面板的參數(shù)也有所區(qū)別。選擇整個表格時，屬性面板的顯示效果，如圖所示。,12.4.2 表格的行、列或單元格屬性,選擇表格行、列或單元格后，屬性面板的顯示效果，如圖所示。,12.5 處理表格內(nèi)部元素,處理表格內(nèi)部元素，是指對表格中的行、列或者單元格進(jìn)行處理。其內(nèi)容包括添加或刪除行和列、拆分和合并單元格、處理表格的元素等。,12.5.1 添加或刪除行和列,添加或刪除行和列是控制表格顯示效果的最基本操作，通過這兩個操作，可以更改表格整體的顯示效果。具體內(nèi)容如下所示。 1添加行和列 2刪除行和列 3使用屬性面板添加或刪除行或列 可以通過更改屬性面板中行或列的參數(shù)來添加或刪除行或列。更改參數(shù)后，將在表格的右側(cè)添加或刪除的列。在表格的底部添加或刪除行。,12.5.2 合并和拆分單元格,合并和拆分單元格可以對表格進(jìn)行更精細(xì)的劃分，通過這兩個操作，可以使表格中數(shù)據(jù)的顯示方式更加多樣化。具體內(nèi)容如下所示。 1合并單元格的條件 合并單元格的含義就是將幾個單元格合并成一個。所以所選的單元格必須能夠相鄰成行或者列，或者幾個矩形能夠排列成一個完整的矩形。如果幾個單元格排列的不規(guī)則，或不相鄰，則不能合并單元格。 2合并單元格 3拆分單元格 單擊要拆分的單元格，執(zhí)行下列操作之一，拆分單元格。,12.5.3 處理表格元素,處理表格元素，包括復(fù)制或剪切表格、粘貼單元格、刪除單元格等。通過相應(yīng)的操作，可以方便的制作更多的表格，和重復(fù)的表格內(nèi)容具體內(nèi)容如下所示。 1復(fù)制或剪切表格 與合并單元格類似，只有相鄰的排列方式為矩形的單元格，才能夠復(fù)制和剪切。 2粘貼單元格 3刪除單元格 在Dreamweaver中，沒有直接刪除單元格的命令。選擇單元格，使用“Delete”鍵可以刪除表格中的內(nèi)容，但不能刪除單元格。,12.6 調(diào)整表格的大小,調(diào)整表格的大小，包括調(diào)整表格的整體大小、調(diào)整表格行或列的大小、調(diào)整單元格大小等三個部分。,12.6.1 調(diào)整表格的整體大小,選擇表格，執(zhí)行下列操作之一，調(diào)整表格的整體大小。 在表格的屬性面板中通過更改參數(shù)，調(diào)整表格的大小。 使用鼠標(biāo)，拖動表格邊緣的選框，調(diào)整表格的大小。 在拖動選框，調(diào)整表格大小時，會以虛線顯示調(diào)整后表格的大小，如圖所示。,12.6.2 調(diào)整表格行或列的大小,選擇表格中要調(diào)整的行或列，執(zhí)行下列操作之一，調(diào)整表格行或列的大小。 在表格的屬性面板中通過更改參數(shù)，調(diào)整表格的大小。 使用鼠標(biāo)，拖動表格邊緣的選框，調(diào)整表格的大小。 根據(jù)所要調(diào)整的行或列的位置不同，以及所要調(diào)整的效果不同，具體的調(diào)整方法也有所區(qū)別。,12.6.3 清除寬度和高度,在調(diào)整表格大小時，如果要重新定義表格的寬度或高度，可以清除已經(jīng)定義的寬度和高度。 選擇表格，執(zhí)行下列操作之一，清除表格的寬度或高度。 選擇“修改”|“表格”|“清除單元格寬度”命令，或者“修改”|“表格”|“清楚單元格高度”命令。 在“屬性”面板中，選擇“”按鈕清除單元格寬度，選擇“”按鈕清除單元格高度。 單擊表格底部的三角形，在打開的下拉菜單中選擇“清除所有寬度”或者“清除所有高度”選項(xiàng)。,12.6.4 沖突的寬度和高度,如果同時定義了表格的寬度和高度，同時定義了單元格的寬度和高度，就有可能出現(xiàn)高度和寬度沖突的情況。下面講解下高度和寬度沖突時的顯示效果。 1單元格大小之和與表格大小沖突 當(dāng)單元格定義的寬度之和與表格的寬度不一致時，表格的寬度會保持不變，按照單元格定義的寬度，按照比例分配單元格的寬度。 2單元格寬度或高度沖突,12.7 嵌套的表格,在表格中需要添加嵌套表格的地方單擊鼠標(biāo)，選擇“插入記錄”|“表格”命令，可以插入嵌套的表格。嵌套表格的顯示效果，如圖所示。,12.8 使用表格布局,使用表格對網(wǎng)頁進(jìn)行布局，并不是推薦的布局方法（推薦使用CSS樣式進(jìn)行布局），但是依然有很多設(shè)計師使用表格進(jìn)行布局。下面講解使用表格布局的方法。,12.8.1 表格模式,在Dreamweaver中，表格有兩種顯示模式，標(biāo)準(zhǔn)模式、擴(kuò)展模式。在兩種模式下，表格的顯示效果會有所區(qū)別。 表格的標(biāo)準(zhǔn)模式和擴(kuò)展模式其實(shí)并沒有本質(zhì)的差別，只是在顯示效果上有所不同。,12.9 表格與代碼,在Dreamweaver中，設(shè)計視圖中制作的所有內(nèi)容，都回對應(yīng)相應(yīng)的XHTML代碼（或者HTML代碼，具體使用的代碼和頁面的文檔類型有關(guān)）。除了在設(shè)計視圖中更改表格的各種屬性外，也可以在代碼視圖中修改代碼來實(shí)現(xiàn)對表格的編輯。,12.9.1 表格結(jié)構(gòu)與代碼,從上面的學(xué)習(xí)中，可以了解到表格可以分為以下幾個部分，整體表格、表格名稱、標(biāo)題、行或列、單元格等。不同的表格部分會對應(yīng)相應(yīng)的表格元素。在設(shè)計視圖中，制作一個兩行兩列的表格，其顯示效果如圖所示。,12.9.2 表格屬性與代碼,設(shè)計視圖中，表格屬性面板中的每個屬性，如寬度、邊框等都對應(yīng)相應(yīng)的代碼。在設(shè)計視圖中，制作一個表格，其顯示效果如圖所示。,12.10 小結(jié),本章主要講解了使用表格的各種知識，其中包括表格的創(chuàng)建、選擇等。其中比較重要的是調(diào)整表格的大小、拆分表格以及表格高度和寬度的確定等知識。表格作為顯示數(shù)據(jù)的元素，在網(wǎng)頁中經(jīng)常用到，熟練使用表格，并學(xué)會利用表格的特點(diǎn)對網(wǎng)頁內(nèi)容的顯示很有幫助。,12.10 本章習(xí)題,1以下哪種方式可以選擇表格？ A單擊表格的邊框。 B單擊表格內(nèi)