應(yīng)用表格布局-《網(wǎng)頁設(shè)計(jì)制作》.ppt

1、最終效果圖,完成頁面布局,一個(gè)簡單示例,本章導(dǎo)讀,學(xué)會插入表格 掌握表格的基本操作 學(xué)會設(shè)置表格屬性 掌握表格的高級操作,第4章 表格的應(yīng)用,學(xué)習(xí)目標(biāo),頁面布局是網(wǎng)頁制作的一個(gè)重要部分，使用表格布局頁面是一種最常用的手段。 本章將學(xué)習(xí)在網(wǎng)頁中插入表格以及表格的操作，讓讀者熟練掌握對表格的使用。,本章要點(diǎn),插入表格 表格的基本操作 設(shè)置表格屬性 表格的高級操作,4.1 插 入 表 格,在網(wǎng)頁制作中，表格的功能較多，可用表格對網(wǎng)頁中的文本、圖像及其他元素進(jìn)行定位，也可有序地排列數(shù)據(jù)等，為網(wǎng)頁制作提供了很大的方便。 下面將講解表格的創(chuàng)建方法以及如何添加表格的內(nèi)容。,3.1 插 入 表 格,3.1.1

2、 插入表格的方法 3.1.2 嵌套表格的創(chuàng)建 3.1.3 在表格中添加內(nèi)容 3.1.4 應(yīng)用舉例在網(wǎng)頁中插入表格并添加網(wǎng)頁元素,3.1.1 插入表格的方法,表格不僅可以為頁面進(jìn)行宏觀的布局，還可以使頁面中的文本、圖像等元素更有條理。,一張表格橫向叫行，縱向叫列。 行列交叉部分就叫做單元格。 單元格中的內(nèi)容和邊框之間的距離叫邊距。 單元格和單元格之間的距離叫間距。 整張表格的邊緣叫做邊框。,3.1.2 嵌套表格的創(chuàng)建,表格可進(jìn)行嵌套。嵌套表格是指在表格的某個(gè)單元格中再插入一個(gè)表格，其寬度受所在單元格的寬度限制。當(dāng)單個(gè)表格不能滿足布局的需求時(shí)，可以進(jìn)行嵌套表格的創(chuàng)建。,3.1.3 在表格中添加內(nèi)容

3、,在表格中可添加各種網(wǎng)頁元素。添加表格內(nèi)容的方法很簡單，只需將光標(biāo)插入點(diǎn)定位到所需的單元格中，然后按照添加網(wǎng)頁元素的方法操作即可。,3.1.4 應(yīng)用舉例在網(wǎng)頁中插入表格并添加網(wǎng)頁元素,下面為“繁花似錦”網(wǎng)頁進(jìn)行表格的添加和網(wǎng)頁元素的添加。,最終效果圖,3.2 表格的基本操作,通常插入的表格并不符合要求，這時(shí)可根據(jù)實(shí)際情況對表格進(jìn)行一些基本操作，如合并及拆分單元格、刪除和添加行或列等。,3.2 表格的基本操作,3.2.1 選中操作 3.2.2 單元格的合并及拆分 3.2.3 插入、刪除行或列,3.2.1 選中操作,在對表格進(jìn)行操作之前需先將表格選中。可以選中整個(gè)表格，也可以只選中某行或某列甚至某

4、個(gè)單元格。,3.2.1 選中操作,1整個(gè)表格的選中 2行或列的選中 3單元格的選中,1整個(gè)表格的選中,選中整個(gè)表格有以下幾種方法： 將光標(biāo)移到表格邊框線上，當(dāng)邊框線為紅色且光標(biāo)變?yōu)?形狀時(shí)，單擊鼠標(biāo)左鍵即可。 將光標(biāo)移到表格的邊框上，當(dāng)鼠標(biāo)光標(biāo)變?yōu)?或 的形狀時(shí)單擊鼠標(biāo)即可。 將光標(biāo)插入點(diǎn)定位到表格的任一單元格中，單擊窗口左下角標(biāo)簽選擇器中的標(biāo)簽即可。 將光標(biāo)插入點(diǎn)定位到表格的任意單元格中，表格上端或下端將彈出綠線的標(biāo)志，單擊最上端標(biāo)有表格寬度的綠線中的 按鈕，如這里單擊 按鈕，在彈出的快捷菜單中選擇“選擇表格”命令即可。,2行或列的選中,行、列的選中方法如下： 將光標(biāo)移到所需行的左側(cè)，當(dāng)光標(biāo)

5、變?yōu)?形狀且該行的邊框線變?yōu)榧t色時(shí)單擊鼠標(biāo)即可選中該行。 將光標(biāo)移到所需列的上端，當(dāng)光標(biāo)變?yōu)?形狀且該列的邊框線變?yōu)榧t色時(shí)單擊鼠標(biāo)左鍵即可選中該列。,3單元格的選中,單個(gè)單元格的選中與多個(gè)單元格的選中操作不相同，下面將分別介紹。 1）單個(gè)單元格的選中 2）多個(gè)單元格的選中,3.2.2 單元格的合并及拆分,為了更好地對網(wǎng)頁進(jìn)行布局，在使用表格時(shí)常常需要把單元格進(jìn)行拆分或合并，特別是在頁面內(nèi)容非常多的情況下，更加需要這些操作。,3.2.2 單元格的合并及拆分,1單元格的拆分 2單元格的合并,1單元格的拆分,當(dāng)表格中的單元格不夠使用時(shí)，可將單元格拆分。,2單元格的合并,合并單元格的操作比較簡單，選中

6、要合并的單元格區(qū)域并單擊“屬性”面板左下角的 按鈕即可。,3.2.3 插入、刪除行或列,在進(jìn)行網(wǎng)頁制作時(shí)，若插入表格的行、列不夠或行、列太多，則可根據(jù)實(shí)際情況進(jìn)行插入或刪除行、列的操作。,3.2.3 插入、刪除行或列,1行或列的插入 2行或列的刪除,1行或列的插入,行或列的插入有單行、單列的插入和多行、多列的插入兩種情況。 1）單行或單列的插入 2）多行或多列的插入,插入單行或單列,插入多行或多列“修改”“表格”“插入行或列”,2行或列的刪除,將光標(biāo)插入點(diǎn)定位到所需單元格中，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“表格/刪除行”命令可刪除光標(biāo)插入點(diǎn)所在的行；選擇“表格/刪除列”命令可刪除光標(biāo)插入

7、點(diǎn)所在的列。,3.3 表 格 屬 性,在“屬性”面板中可對表格進(jìn)行寬度、邊框粗細(xì)、對齊、背景顏色或背景圖像等的屬性設(shè)置。,3.3 表 格 屬 性,8.3.1 設(shè)置表格屬性 8.3.2 設(shè)置單元格屬性,3.3.1 設(shè)置表格屬性,選中表格后，“屬性”面板可在其中進(jìn)行各項(xiàng)設(shè)置。 “表格Id”下拉列表框 “行”和“列”文本框 “寬”和“高”文本框 “填充”文本框 “間距”文本框 “對齊”下拉列表框 “邊框”文本框 “邊框顏色”文本框,3.3.1 設(shè)置表格屬性,“背景顏色”文本框 “背景圖像”文本框 單擊 按鈕可刪除表格的列寬值。 單擊 按鈕可刪除表格的行高值。 單擊 按鈕可將表格寬度單位從瀏覽器窗口的

8、百分比轉(zhuǎn)換為像素。 單擊 按鈕可將表格寬度單位從像素轉(zhuǎn)換為百分比。 設(shè)置完成后按Enter鍵即可使設(shè)置生效。,3.3.2 設(shè)置單元格屬性,除了可以設(shè)置整個(gè)表格的屬性外，還可以對表格的單元格、行或列的屬性進(jìn)行設(shè)置。選中要設(shè)置屬性的單元格、行或列，其中的設(shè)置與表格屬性的設(shè)置大致相同，這里就不再贅述。 需要說明的是在“水平”下拉列表框中可選擇單元格中文本在水平方向上的對齊方式；在“垂直”下拉列表框中可選擇單元格中的文本在垂直方向上的對齊方式。設(shè)置完成后按Enter鍵即可使設(shè)置生效。,3.4 表格的高級操作,對表格還可進(jìn)行一些高級操作，如對表格內(nèi)容排序、導(dǎo)入/導(dǎo)出表格數(shù)據(jù)等。,3.4 表格的高級操作,3.4.1 表格的排序 3.4.2 表格中數(shù)據(jù)的導(dǎo)入與導(dǎo)出,3.4.1 表格的排序,菜單“命令”|“排序表格” 表格是一種常見的處理數(shù)據(jù)的形式，在Dreamweaver中可對其中的數(shù)據(jù)進(jìn)行排序。,3.4.2 表格中數(shù)據(jù)的導(dǎo)入與導(dǎo)出,在Dreamweaver中，可對表格的數(shù)據(jù)進(jìn)行導(dǎo)入和導(dǎo)出，這給網(wǎng)頁制作提供了很大的 方便。,3.4.2 表格中數(shù)據(jù)的導(dǎo)入與導(dǎo)出,1表格數(shù)據(jù)的導(dǎo)入 2表格數(shù)據(jù)的導(dǎo)出,1表格數(shù)據(jù)