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

《31-應(yīng)用表格布局-《網(wǎng)頁設(shè)計制作》.ppt》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在應(yīng)用文檔-天天文庫。

1、最終效果圖完成頁面布局一個簡單示例本章導(dǎo)讀學(xué)會插入表格掌握表格的基本操作學(xué)會設(shè)置表格屬性掌握表格的高級操作第4章表格的應(yīng)用學(xué)習(xí)目標(biāo)頁面布局是網(wǎng)頁制作的一個重要部分，使用表格布局頁面是一種最常用的手段。本章將學(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

2、.1.1插入表格的方法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)行嵌套。嵌套表格是指在表格的某個單元格中再插入一個表格，其寬度受所在單元格的寬度限制。當(dāng)單個表格不能滿足布局的需求時，可以進(jìn)行嵌

3、套表格的創(chuàng)建。3.1.3在表格中添加內(nèi)容在表格中可添加各種網(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表格的基本操作通常插入的表格并不符合要求，這時可根據(jù)實(shí)際情況對表格進(jìn)行一些基本操作，如合并及拆分單元格、刪除和添加行或列等。3.2表格的基本操作3.2.1選中操作3.2.2單元格的合并及拆分3.2.3插入、刪除行或列3.2.1選中操作在對表格

4、進(jìn)行操作之前需先將表格選中。可以選中整個表格，也可以只選中某行或某列甚至某個單元格。3.2.1選中操作1．整個表格的選中2．行或列的選中3．單元格的選中1．整個表格的選中選中整個表格有以下幾種方法：?將光標(biāo)移到表格邊框線上，當(dāng)邊框線為紅色且光標(biāo)變?yōu)樾螤顣r，單擊鼠標(biāo)左鍵即可。?將光標(biāo)移到表格的邊框上，當(dāng)鼠標(biāo)光標(biāo)變?yōu)榛虻男螤顣r單擊鼠標(biāo)即可。?將光標(biāo)插入點(diǎn)定位到表格的任一單元格中，單擊窗口左下角標(biāo)簽選擇器中的

5、的按鈕，如這里單擊按鈕，在彈出的快捷菜單中選擇“選擇表格”命令即可。2．行或列的選中行、列的選中方法如下：?將光標(biāo)移到所需行的左側(cè)，當(dāng)光標(biāo)變?yōu)樾螤钋以撔械倪吙蚓€變?yōu)榧t色時單擊鼠標(biāo)即可選中該行。?將光標(biāo)移到所需列的上端，當(dāng)光標(biāo)變?yōu)樾螤钋以摿械倪吙蚓€變?yōu)榧t色時單擊鼠標(biāo)左鍵即可選中該列。3．單元格的選中單個單元格的選中與多個單元格的選中操作不相同，下面將分別介紹。1）單個單元格的選中2）多個單元格的選中3.2.2單元格的合并及拆分為了更好地對網(wǎng)頁進(jìn)行布局，在使用表格時常常需要把單元格進(jìn)行拆分或合并，特別是在頁面內(nèi)容非常多的情況下，更

6、加需要這些操作。3.2.2單元格的合并及拆分1．單元格的拆分2．單元格的合并1．單元格的拆分當(dāng)表格中的單元格不夠使用時，可將單元格拆分。2．單元格的合并合并單元格的操作比較簡單，選中要合并的單元格區(qū)域并單擊“屬性”面板左下角的按鈕即可。3.2.3插入、刪除行或列在進(jìn)行網(wǎng)頁制作時，若插入表格的行、列不夠或行、列太多，則可根據(jù)實(shí)際情況進(jìn)行插入或刪除行、列的操作。3.2.3插入、刪除行或列1．行或列的插入2．行或列的刪除1．行或列的插入行或列的插入有單行、單列的插入和多行、多列的插入兩種情況。1）單行或單列的插入2）多行或多列的插入

7、插入單行或單列插入多行或多列“修改”>“表格”>“插入行或列”2．行或列的刪除將光標(biāo)插入點(diǎn)定位到所需單元格中，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“表格/刪除行”命令可刪除光標(biāo)插入點(diǎn)所在的行；選擇“表格/刪除列”命令可刪除光標(biāo)插入點(diǎn)所在的列。3.3表格屬性在“屬性”面板中可對表格進(jìn)行寬度、邊框粗細(xì)、對齊、背景顏色或背景圖像等的屬性設(shè)置。3.3表格屬性8.3.1設(shè)置表格屬性8.3.2設(shè)置單元格屬性3.3.1設(shè)置表格屬性選中表格后，“屬性”面板可在其中進(jìn)行各項設(shè)置。?“表格Id”下拉列表框?“行”和“列”文本框?“寬”和“高”文本

8、框?“填充”文本框?“間距”文本框?“對齊”下拉列表框?“邊框”文本框?“邊框顏色”文本框3.3.1設(shè)置表格屬性?“背景顏色”文本框?“背景圖像”文本框?單擊按鈕可刪除表格的列寬值。?單擊按鈕可刪除表格的行高值。?單擊按鈕可將表格寬度單位從瀏覽器窗口的百分比轉(zhuǎn)換為像素。?單擊