《網(wǎng)頁(yè)表格的處理》PPT課件.ppt

1、通過(guò)本章學(xué)習(xí)，應(yīng)該掌握以下內(nèi)容： 利用FrontPage 2002創(chuàng)建表格的四種方法 編輯表格的方法 設(shè)置表格的屬性的方法 用表格設(shè)計(jì)頁(yè)面布局 利用HTML和Dreamweaver 4.0創(chuàng)建表格的方法,第4章 網(wǎng)頁(yè)表格的處理,4.1 利用FrontPage 創(chuàng)建并編輯表格,4.1.1 創(chuàng)建表格 表格以行和列的形式來(lái)組織信息，具有容量大、結(jié)構(gòu)嚴(yán)謹(jǐn)和效果直觀等多個(gè)優(yōu)點(diǎn)，是網(wǎng)頁(yè)中不可缺少的記錄或總結(jié)工具，比如個(gè)人簡(jiǎn)歷、產(chǎn)品信息、業(yè)務(wù)報(bào)表甚至家庭理財(cái)都能用到表格。 FrontPage 2002提供了強(qiáng)大的制表功能，使得在制作網(wǎng)頁(yè)的過(guò)程中插入表格的操作顯得簡(jiǎn)便、快捷。 在FrontPage 2002中

2、，創(chuàng)建表格有以下4種方法。 1使用菜單命令創(chuàng)建表格 如果用戶希望準(zhǔn)確地設(shè)置要?jiǎng)?chuàng)建的表格的行、列數(shù)，可以通過(guò)執(zhí)行菜單命令創(chuàng)建所需的表格。使用這種方法，可以同時(shí)設(shè)置表格所有的屬性，如行和列的數(shù)目、邊框?qū)挾鹊取?選擇“表格”| “插入”| “表格”命令，打開(kāi)圖4.1所示的“插入表格”對(duì)話框； 輸入行數(shù)、列數(shù)，設(shè)置表格的對(duì)齊方式、邊框的粗細(xì)、單元格邊距和間距，單擊“確定”按鈕，即可得到相應(yīng)的表格,2使用命令按鈕創(chuàng)建表格 在編輯網(wǎng)頁(yè)時(shí)，使用“常用”工具欄中的“插入表格”按鈕，可以快速地在網(wǎng)頁(yè)中插入一個(gè)表格。插入表格時(shí)用戶可以自由選擇表格所包含的行數(shù)和列數(shù). 3繪制表格 利用前面兩種方法可以建立“n乘m”

3、單元數(shù)的表格，單元格大小會(huì)自動(dòng)平均分配。如果需要的表格比較簡(jiǎn)單，則可以手動(dòng)繪制表格。 手動(dòng)繪制表格的操作步驟如下： 選擇“視圖”|“工具欄”|“表格”命令，打開(kāi)表格對(duì)話框； 單擊“手繪表格”按鈕，在編輯區(qū)按下鼠標(biāo)左鍵并拖動(dòng)，即可劃出表格邊框，再在邊框內(nèi)添加線條即可畫出需要的表格。 如果有畫錯(cuò)的線條可以用表格中的“擦除”工具擦除。 4將文本轉(zhuǎn)換成為表格 如果有現(xiàn)成的文本，可以把文本轉(zhuǎn)換成為表格,4.1.2 表格的編輯 1修改表格 應(yīng)用菜單或命令按鈕創(chuàng)建后的表格，有些是需要經(jīng)過(guò)修改才能應(yīng)用的。修改表格主要包括修改表格的大小、合并單元格、拆分單元格等操作。 （1）修改表格大小 在FrontPage

4、2002中，修改表格的大小有以下兩種方法。 通過(guò)鼠標(biāo)拖拽法可以粗略地調(diào)整表格的大小。 通過(guò)“表格屬性”對(duì)話框可以精確地調(diào)整表格的大小。 （2）合并單元格 在FrontPage 2002中合并單元格的方法有以下三種： 先選擇要合并的單元格，然后執(zhí)行“表格”|“合并單元格”命令即可。 選擇要合并的單元格，在選中的單元格中單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“合并單元格”命令。 選擇要合并的單元格，單擊“表格”工具欄上的“合并單元格”按鈕,3）拆分單元格 拆分單元格與合并單元格是兩個(gè)逆操作。拆分單元格就是將一個(gè)單元格拆分為多個(gè)單元格。在FrontPage 2002中拆分單元格的方法有以下幾種。 將光

5、標(biāo)放在要拆分的單元格內(nèi)，執(zhí)行“表格”|“拆分單元格”命令，彈出“拆分單元格”對(duì)話框，如圖4.9所示。在該對(duì)話框中選擇“拆分為列”或“拆分為行”，單擊“確定”按鈕。 將光標(biāo)放在要拆分的單元格內(nèi)，單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“拆分單元格”命令。 將光標(biāo)放在要拆分的單元格內(nèi)，單擊“表格”工具欄上的“拆分單元格”按鈕,2在表格中添加文字和圖片 創(chuàng)建一個(gè)表格以后，就可以在表格中添加相應(yīng)的內(nèi)容了，在表格中添加的內(nèi)容有文字與圖片兩種形式。 （1）在表格中添加文字 在創(chuàng)建好的表格內(nèi)按要求輸入文字，調(diào)整文字的字號(hào)、字體、對(duì)齊方式等。 （2）在表格中插入圖片 選中要插入圖片的單元格，選擇“插入”| “圖片

6、”| “來(lái)自文件”（根據(jù)需要選擇圖片的來(lái)源）命令，打開(kāi)“圖片”對(duì)話框； 在對(duì)話框中選擇圖片，選中圖片文件之后，單擊“插入”按鈕，則圖片及插入到相應(yīng)的單元格里。調(diào)整圖片大小及位置。 3刪除表格 （1）刪除單元格 在FrontPage 2002中如果要?jiǎng)h除某個(gè)單元格，可以通過(guò)以下方法： 選擇要?jiǎng)h除的單元格，執(zhí)行“表格”|“刪除單元格”命令。 選擇要?jiǎng)h除的單元格，并單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“刪除單元格”命令,2）刪除列或行 在FrontPage 2002中如果要?jiǎng)h除某列或某行，可以采用以下方法： 選擇要?jiǎng)h除的列或行，執(zhí)行“表格”|“刪除單元格”命令即可。 選擇要?jiǎng)h除的列或行，并單擊鼠標(biāo)右

7、鍵，從彈出的快捷菜單中選擇“刪除單元格”命令。 （3）刪除整個(gè)表格 如果要?jiǎng)h除某個(gè)表格，只需選中此表格中的所有單元格，然后單擊右鍵并從彈出的快捷菜單中選擇“刪除單元格”命令即可。刪除整個(gè)表格的操作方法如下： 注意：如果在刪除表格、單元格、行或列時(shí)，使用Delete鍵刪除，則只刪除該表格、單元格、行或列中的文本，而不是刪除表格,4.1.3 設(shè)置表格的屬性 將光標(biāo)置于表格中，然后單擊右鍵并從彈出的快捷菜單中選擇“表格屬性”命令，在打開(kāi)的“表格屬性”對(duì)話框中進(jìn)行表格屬性設(shè)置。 1表格的布局 （1）表格的對(duì)齊方式 FrontPage 2002中提供了4種對(duì)齊方式：默認(rèn)、左對(duì)齊、右對(duì)齊和居中。單擊“表格

8、屬性”對(duì)話框中的“對(duì)齊方式”下拉列表框，可從中選擇所需的對(duì)齊方式。 （2）表格的浮動(dòng)方式 此功能有點(diǎn)像圖片的環(huán)繞功能。創(chuàng)建一個(gè)表格后，表格的兩側(cè)是不能輸入任何文字的。 如果進(jìn)行了浮動(dòng)設(shè)置，就可以獲得與圖片環(huán)繞差不多的效果了。FrontPage 2002中提供了3種浮動(dòng)方式：默認(rèn)、左對(duì)齊和右對(duì)齊。 （3）單元格的邊距與間距 如果想設(shè)置表格線與表格內(nèi)容間的距離或兩單元格間的距離，可以通過(guò)單元格邊距與單元格間距兩個(gè)選項(xiàng)來(lái)設(shè)置,2為表格添加背景 為表格添加背景也要應(yīng)用“表格屬性”對(duì)話框。表格背景可分為兩種形式：一種是為表格添加背景顏色，另一種是為表格添加背景圖片。 （1）為表格添加背景顏色 選中表格或

9、單元格后，單擊“表格屬性”對(duì)話框中的“顏色”選項(xiàng)右側(cè)的向下箭頭，從彈出的顏色面板中選擇所需的背景顏色，則此顏色就會(huì)顯示在表格的背景層中。 （2）為表格添加背景圖片 選中表格或單元格后，啟用“表格屬性”或“單元格屬性”對(duì)話框中的“使用背景圖片”復(fù)選框，然后選擇一個(gè)圖片作為表格的背景，可為表格添加背景圖片。 3為表格添加邊框 在FrontPage中如果想要改變表格的邊框，可以采用以下方法： 選擇要設(shè)置邊框的表格，執(zhí)行“格式”| “邊框和底紋”命令。 在要設(shè)置邊框的表格中單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“表格屬性”命令，打開(kāi)“表格屬性”對(duì)話框，在“邊框”選項(xiàng)組中進(jìn)行相關(guān)設(shè)置,4.1.4使用表格設(shè)

10、計(jì)頁(yè)面布局 在網(wǎng)頁(yè)設(shè)計(jì)中表格還有一個(gè)重要的作用，就是設(shè)計(jì)頁(yè)面布局。 一個(gè)空白網(wǎng)頁(yè)布置起來(lái)比較困難，尤其是一些復(fù)雜的頁(yè)面。這時(shí)可以利用表格將網(wǎng)頁(yè)分成若干個(gè)單元格，每個(gè)單元格對(duì)應(yīng)網(wǎng)頁(yè)中的一個(gè)部分。然后，對(duì)每一部分分別進(jìn)行設(shè)計(jì)和制作，這樣就可以使復(fù)雜的網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)化，而且所設(shè)計(jì)的網(wǎng)頁(yè)清晰、有條理性。 另外，在很多網(wǎng)頁(yè)上都有各種細(xì)線的布局效果，使得頁(yè)面簡(jiǎn)潔明快、條理清楚。這些細(xì)線要么是用圖像的方式生成，要么是利用表格的各種特性制作而成。使用表格實(shí)現(xiàn)這些細(xì)線可以使頁(yè)面文件更小，下載更快，因此更為實(shí)用。細(xì)線效果大致可以分為兩類，一類是表格框線，另一類是各種橫豎分隔線。 用表格布置頁(yè)面時(shí)，首先要規(guī)劃頁(yè)面的布置

11、，然后利用表格的平鋪和嵌套，將網(wǎng)頁(yè)中的各元素定位在各自的位置上。由于瀏覽器在下載網(wǎng)頁(yè)時(shí)，先下載整個(gè)表格，然后再下載表格中的內(nèi)容。所以在用表格布置頁(yè)面時(shí)，不能將整個(gè)網(wǎng)頁(yè)的內(nèi)容都放在一個(gè)大表格中，以免影響網(wǎng)頁(yè)的下在速度,4.2 其他處理網(wǎng)頁(yè)表格的方法 4.2.1 利用HTML處理網(wǎng)頁(yè)表格 1表格的基本構(gòu)成 通常在HTML中創(chuàng)建一個(gè)普通的表格應(yīng)包括以下標(biāo)記符： （1）TABLE TABLE標(biāo)記符用于定義整個(gè)表格，表格內(nèi)的所有內(nèi)容都應(yīng)該位于和之間。 （2）CAPTION 如果表格需要標(biāo)題，那么就應(yīng)該使用CAPTION標(biāo)記符將表格標(biāo)題包括在和之間。 （3）TR TR標(biāo)記符用于定義表格的行，對(duì)于每一個(gè)表格

12、行，都對(duì)應(yīng)一個(gè)TR標(biāo)記符。TR標(biāo)記符的結(jié)束標(biāo)記符可以省略,4）TD和TH 在表格行中的每個(gè)單元格，都對(duì)應(yīng)于一個(gè)TD標(biāo)記符或者TH標(biāo)記符，用于標(biāo)記表格的內(nèi)容，其中可以包括文字、圖像或其他對(duì)象。TD與TH的功能和用法幾乎完全相同（可以任意混合使用，但效果略有不同），唯一不同之處在于TD表示普通表格數(shù)據(jù)，而TH表示表格的行列標(biāo)題數(shù)據(jù)（也就是通常所說(shuō)的表頭）。TD和TH的結(jié)束標(biāo)記符都可以省略，并且可以不包括任何內(nèi)容 3表格的編輯及屬性設(shè)置 （1）合并單元格 在和標(biāo)記內(nèi)使用rowspan屬性可以進(jìn)行行合并，rowspan的取值表示垂直方向上合并的行數(shù)；使用colspan屬性可以進(jìn)行列合并， colspa

13、n的取值表示水平方向上的合并的列數(shù)。 （2）邊框與分隔線 在TABLE標(biāo)記內(nèi)使用frame、rules和border屬性可以設(shè)置表格的邊框和單元格分隔線。 （3）控制單元格空白 在TABLE標(biāo)記符中使用cellspacing屬性可以控制單元格之間的空白,4）表格的對(duì)齊 表格的對(duì)齊包括頁(yè)面對(duì)齊和內(nèi)容對(duì)齊。 表格的頁(yè)面對(duì)齊 表格在頁(yè)面中的對(duì)齊與其他頁(yè)面內(nèi)容一樣，可以直接在TABLE標(biāo)記符中使用align屬性。另外，也可以用DIV標(biāo)記符的align屬性設(shè)置表格的對(duì)齊。 表格的內(nèi)容對(duì)齊 表格單元格內(nèi)容的對(duì)齊包括各數(shù)據(jù)項(xiàng)在水平方向和垂直方向上的對(duì)齊。 設(shè)置水平對(duì)齊的方法是：在標(biāo)記符、內(nèi)使用align屬性

14、，其常用的取值可以是：center、left、right、justify . 設(shè)置表格數(shù)據(jù)在垂直方向的對(duì)齊應(yīng)在TR、TD或TH標(biāo)記符中使用valign屬性，valign屬性的常用取值包括：top 、bottom、middle。 （5）控制表格和單元格大小 可以使用標(biāo)記符的width和height屬性設(shè)置表格和單元格大小。 （6）設(shè)置表格和單元格的背景 在TABLE、TR或TD標(biāo)記符內(nèi)使用bgcolor屬性設(shè)置背景顏色；使用background屬性設(shè)置背景圖案,4.2.2 利用Dreamweaver 8.0處理網(wǎng)頁(yè)表格 1創(chuàng)建表格 （1）創(chuàng)建新表格 利用Dreamweaver 4.0創(chuàng)建新表格時(shí)

15、，首先選中對(duì)象面板上“View”欄目下“Standard View”（標(biāo)準(zhǔn)視圖）按鈕，然后可以通過(guò)下列四種方式中的任意一種： 將對(duì)象面板調(diào)整到“Common”類上，單擊“Insert Table”（插入表格）按鈕。 通過(guò)主窗口的菜單“Insert”|“Table”命令。 使用快捷組合鍵“Ctrl+Alt+T”。 將對(duì)象面板調(diào)整到“Common”類上，拖動(dòng)“Insert Table”按鈕到主窗口的工作區(qū)中,2）選擇表格 選擇表格可分為選擇整個(gè)表格和選擇表格中的單元格。 如果要選擇整個(gè)表格，則可進(jìn)行如下的操作之一： 將光標(biāo)置于表格中的某個(gè)單元格中，選擇“Modify”|“Table”|“Selec

16、t Table”命令。 將光標(biāo)置于表格中的某個(gè)單元格中，再按兩次組合鍵“Ctrl+A”。 將光標(biāo)置于表格中的某個(gè)單元格中，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“Select Table”命令。 將光標(biāo)置于表格的尾部（在表格的同一行，但不在表格之內(nèi)），向左拖動(dòng)鼠標(biāo)。 單擊表格的邊線。 選擇單個(gè)單元格的方法有以下幾種： 將光標(biāo)置于所要選擇的單元格中，按一次組合鍵“Ctrl+A”。 將光標(biāo)置于所要選擇的單元格中，向右拖動(dòng)鼠標(biāo)。 將光標(biāo)置于所要選擇的單元格中，選擇“Edit”|“Select All”命令。 按住Ctrl鍵，單擊所要選擇的單元格，再單擊一次則取消對(duì)單元格的選擇,選擇多個(gè)單元格的方法有以

17、下幾種： 按住Ctrl鍵，單擊所要選擇的所有單元格。 將光標(biāo)置于單元格中，拖動(dòng)鼠標(biāo)，選擇多個(gè)單元格。 如果要選擇整行，將光標(biāo)置于該行的左邊緣，當(dāng)光標(biāo)變成圖標(biāo)時(shí)單擊鼠標(biāo)左鍵。 如果要選擇整列，將光標(biāo)置于該列的上邊緣，當(dāng)光標(biāo)變成圖標(biāo)時(shí)單擊鼠標(biāo)左鍵。 選擇的全部單元格的方法有以下幾種： 將光標(biāo)置于第1個(gè)單元格中，并拖動(dòng)鼠標(biāo)至最后一個(gè)單元格。 將光標(biāo)置于第1個(gè)單元格中，按住Shift鍵，再單擊最后一個(gè)單元格。 將光標(biāo)置于第1行的左邊緣，當(dāng)光標(biāo)變成圖標(biāo)時(shí)，向下拖動(dòng)鼠標(biāo)至最后一行。 將光標(biāo)置于第1列的上邊緣，當(dāng)光標(biāo)變成圖標(biāo)時(shí)，向右拖動(dòng)鼠標(biāo)至最后一列,3）添加刪除行列 在現(xiàn)有的表格中插入單元行，可以選擇以下

18、的操作之一： 將光標(biāo)移到要插入單元行的下一行，選擇“Modify”|“Table”|“Insert Row”命令。 將光標(biāo)移到要插入單元行的下一行，按組合鍵“Ctrl+M”。 將光標(biāo)移到要插入單元行的下一行，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“Table”|“Insert Row”命令。 在現(xiàn)有的表格中插入單元列，可以選擇以上的操作之一： 將光標(biāo)移到在插入單元列的右邊一列，選擇“Modify”|“Table”|“Insert Column”命令。 將光標(biāo)移到要插入單元列的右邊一列，按組合鍵“Ctrl+Shift+A”。 將光標(biāo)移到要插入單元列的右邊一列，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“

19、Table”|“Insert Column”命令。 如果想在現(xiàn)有的表格中添加多行或多列，首先將光標(biāo)移到要插r入行或列附近的單元格中，單擊鼠標(biāo)右鍵，在彈出的下拉菜單中選擇“Table”|“Insert Rows or Columns”命令，彈出 “Insert Rows or Columns”對(duì)話框。在此對(duì)話框中進(jìn)行相關(guān)的設(shè)置，然后單擊“OK”按鈕，設(shè)置的多列或多行將插入到頁(yè)面中,刪除整行整列，可以采用下列辦法之一： 先選擇欲刪除的整行或整列，直接按Del鍵，即可刪除。 先將光標(biāo)移到要?jiǎng)h除的行或列中，選擇“Modify”|“Table”|“Delete Row”或“Delete Column”命令。 將光標(biāo)移到要?jiǎng)h除的行或列中，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“Table”|