網(wǎng)頁(yè)設(shè)計(jì)-在網(wǎng)頁(yè)中使用表格

1、第3章 在網(wǎng)頁(yè)中使用表格 3-1 插入表格 3-2 操作單元格的小技巧 3-3 利用布局視圖設(shè)計(jì)表格樣式 3-4 小知識(shí) 返回3-1插入表格 3-1-1 在網(wǎng)頁(yè)中插入表格3-1-2 調(diào)整表格大小3-1-3 將表格居中對(duì)齊3-1-4 設(shè)置表格背景色3-1-5 修改表格邊框顏色與粗細(xì) 返回3-1-1在網(wǎng)頁(yè)中插入表格 表格中的基本概念： 表格中一個(gè)一個(gè)格子稱為單元格（cell），一整條橫向單元格稱為行（row），一整條縱向單元格則稱為列（column）。 建立表格前，先確定表格的行與列數(shù)目，然后就可以插入表格，并在單元格內(nèi)開始輸入文字或圖片。 3-1-1在網(wǎng)頁(yè)中插入表格（1）將光標(biāo)移到要插入表格的位

2、置，然后到常用菜單模式上單擊表格按鈕。（2）出現(xiàn)“表格”對(duì)話框后，分別在行和列的空格中輸入表格的行數(shù)和列數(shù)，然后單擊“確定”按鈕。 根據(jù)所設(shè)置的內(nèi)容，網(wǎng)頁(yè)上就會(huì)出現(xiàn)一個(gè)指定行數(shù)、列數(shù)與邊框粗細(xì)的空白表格。 返回3-1-2調(diào)整表格大小調(diào)整表格大小有兩種方式：表格隨輸入的漢字自動(dòng)擴(kuò)大。 直接指定表格的寬度大小。直接調(diào)整表格大小的步驟如下。（1）移動(dòng)鼠標(biāo)到表格邊線，當(dāng)鼠標(biāo)出現(xiàn)圖標(biāo)后，單擊鼠標(biāo)左鍵選取表格。 3-1-2調(diào)整表格大小選取表格（2）打開屬性面板后，分別在“寬”和“高”欄輸入表格的寬度和高度。輸入表格的寬度和高度3-1-2調(diào)整表格大小 在表格屬性面板的“寬”和“高”欄后面有單位列表：像素表示

3、固定表格大小%使表格隨著瀏覽窗口的大小，以指定的百分比改變表格的相對(duì)大小。 也可以在選取表格后，移動(dòng)鼠標(biāo)到周圍的黑色標(biāo)記上，當(dāng)鼠標(biāo)出現(xiàn)圖標(biāo)后，拖動(dòng)鼠標(biāo)改變表格大小。返回3-1-3將表格居中對(duì)齊 移動(dòng)鼠標(biāo)選取表格，在打開的屬性面板中選擇“對(duì)齊”列表中的 “居中對(duì)齊”。選取表格選擇“居中對(duì)齊”3-1-4設(shè)置表格背景色 建立表格后，系統(tǒng)默認(rèn)表格是沒(méi)有背景色的，可以替表格加上背景色。選取表格后，在“屬性”面板中單擊“背景顏色”旁的按鈕，從彈出的色板中選擇表格背景色。 選擇此按鈕選取表格3-1-4設(shè)置表格背景色 除了背景色外，表格也可以設(shè)置背景圖案，只要單擊“背景圖像”欄的瀏覽文件按鈕，再選取圖片文件就

4、可以了。 返回3-1-5修改表格邊框顏色與粗細(xì) 為了讓表格看起來(lái)更醒目，可以調(diào)整邊框的粗細(xì)或是修改邊框的顏色 選取表格選擇此按鈕3-1-5修改表格邊框顏色與粗細(xì) 接著在“邊框”欄輸入表格的邊框粗細(xì)。輸入邊框粗細(xì) 表格屬性面板的“邊框”欄為表格的邊框粗細(xì)設(shè)置，輸入數(shù)字越大，則邊框越粗；若輸入0，則不會(huì)有邊框顯示。返回3-2操作單元格的小技巧3-2-1 調(diào)整單元格高度3-2-2 合并單元格3-2-3 設(shè)置標(biāo)題單元格3-2-4 設(shè)置單元格背景色3-2-5 套用默認(rèn)的表格樣式3-2-6 導(dǎo)入外部文件變成表格 返回3-2-1調(diào)整單元格高度（1）將光標(biāo)移到單元格中。 將光標(biāo)移到單元格中（2）接著在屬性面板

5、的“高”欄輸入單元格高度。 輸入單元格高度返回3-2-2合并單元格 （1）拖動(dòng)鼠標(biāo)選取要合并的單元格。 （2）打開屬性面板后，移動(dòng)鼠標(biāo)單擊合并所選單元格按鈕。選擇此按鈕3-2-2合并單元格 若要拆分單元格，按下屬性面板的拆分單元格為行或列按鈕，則會(huì)出現(xiàn)“拆分單元格”對(duì)話框，接著輸入要分割出來(lái)的行或列數(shù)目后，就會(huì)將原本的單一單元格分割成好幾個(gè)單元格。 返回3-2-3設(shè)置標(biāo)題單元格 為了讓表格的標(biāo)題更醒目，Dreamweaver有一個(gè)設(shè)置標(biāo)題單元格的選項(xiàng)，它的格式是固定不變的，被設(shè)為標(biāo)題的文字會(huì)自動(dòng)變?yōu)榇煮w，并且居中對(duì)齊。設(shè)置標(biāo)題單元格的操作步驟如下 。 將光標(biāo)移到要設(shè)成標(biāo)題的單元格，接著在屬性面

6、板中勾選“標(biāo)題”。 3-2-3設(shè)置標(biāo)題單元格光標(biāo)移到單元格中勾選“標(biāo)題”3-2-3設(shè)置標(biāo)題單元格 勾選“標(biāo)題”后，則文本的格式會(huì)被修改，變成粗體并且居中對(duì)齊。 標(biāo)題單元格的格式 若是在單元格屬性面板中勾選“不換行”，則在單元格中的文本到邊界不會(huì)自動(dòng)換行，而會(huì)一直往右延伸，擴(kuò)大單元格范圍。返回3-2-4設(shè)置單元格背景色 表格中的每一個(gè)單元格都可以分別設(shè)置背景顏色。 （1） 將光標(biāo)移入要填入背景色的單元格中。打開屬性面板后，移動(dòng)鼠標(biāo)單擊背景顏色按鈕，再?gòu)膹棾龅纳逯袉螕粝到y(tǒng)顏色拾取器按鈕。3-2-4設(shè)置單元格背景色選擇此按鈕選擇按鈕3-2-4設(shè)置單元格背景色（3）在“顏色”對(duì)話框中，選擇要填入的顏

7、色，然后選擇“確定”按鈕。3-2-4設(shè)置單元格背景色 單元格背景設(shè)置的優(yōu)先級(jí)高于表格，表格背景則高于網(wǎng)頁(yè)，所以若網(wǎng)頁(yè)、表格和單元格都設(shè)置了背景色或背景圖，則單元格的背景呈現(xiàn)的是單元格背景設(shè)置，而不是表格或網(wǎng)頁(yè)的背景。返回3-2-5套用默認(rèn)的表格樣式 除了自行設(shè)計(jì)外，Dreamweaver提供了許多默認(rèn)表格樣式，只要選取其中一個(gè)樣式，就能自動(dòng)套入所制作的表格中。（1）移動(dòng)鼠標(biāo)到菜單欄執(zhí)行“命令“格式化表格”命令。（2）在出現(xiàn)的“格式化表格”對(duì)話框中選擇要套用的表格樣式，然后單擊“確定”按鈕。 3-2-5套用默認(rèn)的表格樣式選擇要套用的表格樣式樣式內(nèi)容預(yù)覽所選樣式3-2-5套用默認(rèn)的表格樣式套用格式

8、后，表格就會(huì)變成所選定的樣式，十分方便。 表格自動(dòng)套上選擇的樣式返回3-2-6導(dǎo)入外部文件變成表格 Dreamweaver可以加入不同數(shù)據(jù)庫(kù)所制作的表格，只要將數(shù)據(jù)存成純文本文件（以Tab字符或逗號(hào)等符號(hào)分隔），就可以插入網(wǎng)頁(yè)中。（1）用Excel制作一個(gè)表格后，單擊“保存”按鈕。 3-2-6導(dǎo)入外部文件變成表格（2）出現(xiàn)“另存為”對(duì)話框后，在“保存位置”欄中選擇文件存儲(chǔ)的磁盤與文件夾，接著將文件類型設(shè)為文本文件（制表符分隔），然后在“文件名”欄輸入文件名，最后單擊“保存”按鈕。類型設(shè)為文本文件3-2-6導(dǎo)入外部文件變成表格（3）出現(xiàn)Microsoft Excel警告窗口后，移動(dòng)鼠標(biāo)單擊“確定

9、”按鈕。（4）出現(xiàn)Microsoft Excel詢問(wèn)窗口后，移動(dòng)鼠標(biāo)單擊“是”按鈕。3-2-6導(dǎo)入外部文件變成表格（5）回到Dreamweaver窗口后，將光標(biāo)移到要插入表格的位置，然后到布局模式上選擇表格數(shù)據(jù)按鈕。3-2-6導(dǎo)入外部文件變成表格（6）出現(xiàn)“導(dǎo)入表格式數(shù)據(jù)”對(duì)話框后，移動(dòng)鼠標(biāo)單擊“瀏覽”按鈕。3-2-6導(dǎo)入外部文件變成表格（7）在打開的對(duì)話框的“查找范圍”欄中選擇磁盤與文件夾，接著在列表中選擇文件名，然后單擊“打開”按鈕。（8）回到“導(dǎo)入表格式數(shù)據(jù)”對(duì)話框后，單擊“確定”按鈕。3-2-6導(dǎo)入外部文件變成表格完成后，文件中的數(shù)據(jù)就會(huì)變成表格加到編輯區(qū)中。 導(dǎo)入的文本文件自動(dòng)變成表

10、格3-2-6導(dǎo)入外部文件變成表格 將外部的表格讀入Dreamweaver后，也可以反過(guò)來(lái)，將Dreamweaver中所做的表格數(shù)據(jù)導(dǎo)出，供其他軟件使用。將光標(biāo)移到單元格內(nèi)或是選取表格，接著到菜單欄依序選擇“文件/導(dǎo)出/表格”，出現(xiàn)“導(dǎo)出表格”對(duì)話框后，分別設(shè)置定界符和換行符就可以了。 返回3-3利用布局視圖設(shè)計(jì)表格樣式3-3-1 利用布局模式繪制表格3-3-2 改變表格與單元格大小3-3-3 移動(dòng)單元格3-3-4 在單元格中插入文本或圖片 返回3-3-1利用布局模式繪制表格快速制作出符合需求表格的方法：布局模式 （1）移動(dòng)鼠標(biāo)到布局菜單模式上單擊 按鈕。3-3-1利用布局模式繪制表格（2）在打

11、開的“從布局模式開始”窗口中單擊“確定”按鈕。3-3-1利用布局模式繪制表格（3）切換到布局模式后，移動(dòng)鼠標(biāo)到布局模式上單擊布局表格按鈕，接著拖動(dòng)鼠標(biāo)在編輯區(qū)繪制一個(gè)表格。3-3-1利用布局模式繪制表格（4）繪制完表格后，移動(dòng)鼠標(biāo)到布局菜單模式上單擊繪制布局單元格按鈕，然后在表格內(nèi)繪制單元格。 繪制單元格表格寬度值3-3-1利用布局模式繪制表格除此之外，若是單擊按鈕，還可以切換成表格模式來(lái)使用。 選擇按鈕切換成表格模式返回3-3-2改變表格與單元格大小 在布局模式下，利用拖動(dòng)的方式，可以任意地修改表格與單元格的大小。（1）選擇布局表格后，表格周圍會(huì)出現(xiàn)綠色小方塊，接著移動(dòng)鼠標(biāo)到表格右下角，當(dāng)鼠

12、標(biāo)變成 圖標(biāo)時(shí)，拖動(dòng)鼠標(biāo)修改表格大小。3-3-2改變表格與單元格大小拖動(dòng)鼠標(biāo)修改表格大小選擇布局表格標(biāo)記3-3-2改變表格與單元格大小（2）將鼠標(biāo)移到單元格邊框時(shí)，邊框會(huì)變成紅色，此時(shí)就可以選取該單元格。選擇單元格3-3-2改變表格與單元格大?。?）選取單元格后，邊框會(huì)變成藍(lán)色，接著移動(dòng)鼠標(biāo)拖動(dòng)藍(lán)色小方塊，改變單元格大小。拖動(dòng)鼠標(biāo)改變單元格大小3-3-2改變表格與單元格大小修改后的表格就會(huì)依照所修改的樣式來(lái)顯示。 利用布局模式來(lái)制作表格，雖然表格可以隨意改變大小，但卻不能像層一樣任意移動(dòng)位置。 返回3-3-3移動(dòng)單元格 雖然表格在網(wǎng)頁(yè)中不能任意移動(dòng)，但是表格中的單元格在布局模式下，卻可以自由的

13、移動(dòng)。 移動(dòng)單元格的操作方法：移動(dòng)鼠標(biāo)選取單元格后，按住鼠標(biāo)不放，將它拖動(dòng)到適當(dāng)位置。 選取單元格拖動(dòng)到此3-3-3移動(dòng)單元格將單元格移到適當(dāng)位置后，Dreamweaver會(huì)改變其他單元格的大小或是自動(dòng)產(chǎn)生其他單元格來(lái)配合。 自動(dòng)產(chǎn)生適當(dāng)?shù)膯卧駚?lái)配合返回3-3-4在單元格中插入文本或圖片 在布局模式下插入文本、圖片等網(wǎng)頁(yè)組件的操作步驟和在標(biāo)準(zhǔn)視圖模式下相同，但是在布局模式下只能在自己繪制的單元格內(nèi)加入組件，若是由Dreamweaver自動(dòng)產(chǎn)生的單元格則不行。（1）將光標(biāo)移到單元格內(nèi)，接著在屬性面板中設(shè)置文本字體、大小、顏色和對(duì)齊方式后，輸入要顯示的文本內(nèi)容。 3-3-4在單元格中插入文本或圖

14、片輸入文本設(shè)置文本格式3-3-4在單元格中插入文本或圖片（2）將光標(biāo)移到單元格內(nèi)，然后到常用模式上單擊圖像按鈕。插入光標(biāo)位置3-3-4在單元格中插入文本或圖片（3）在打開的“選擇圖像源文件”窗口的 “查找范圍”欄中選擇文件所在磁盤與文件夾，接著在列表中選擇文件名，然后單擊“確定”按鈕?；氐骄庉嫯嬅婧?，Dreamweaver就會(huì)依照?qǐng)D片的大小來(lái)改變單元格的寬度和高度。 在單元格中插入圖片返回3-4小知識(shí)表格數(shù)據(jù)排序 Dreamweaver內(nèi)建了表格排序的功能，可以直接在網(wǎng)頁(yè)上對(duì)表格數(shù)據(jù)內(nèi)容進(jìn)行遞增或遞減的排序操作。（1）執(zhí)行“命令”“排序表格”命令。 3-4小知識(shí)（2）打開“排序表格”對(duì)話框后，

15、在“排序按”列表中選擇要排序的字段，接著在“順序”列表中選擇“按數(shù)字順序”，并選擇以降序的方式，然后單擊“確定”按鈕。選擇要排序的字段選擇排序方式3-4小知識(shí)完成排序后，表格內(nèi)的數(shù)據(jù)會(huì)依照第2列字段的數(shù)字大小，由多到少遞減排列。 數(shù)量從多到少遞減排序3-4小知識(shí) 若是表格內(nèi)的單元格合并或拆分過(guò)，且各行各列的單元格數(shù)不一致時(shí)，就無(wú)法進(jìn)行排序的操作。 在設(shè)置排序的順序時(shí)，若提示所設(shè)置的字段內(nèi)數(shù)值重復(fù)，則可以在“再按”下拉列表中設(shè)置第二排序字段。 返回小 結(jié) 1.在表格屬性面板的寬和高欄旁邊有下拉列表，分別是像素和%。像素表示固定表格大??；%則會(huì)使表格隨著瀏覽窗口的大小，相對(duì)調(diào)整顯示的大小。 2.除了背景色外，表格也可以設(shè)置背景圖案，只要選擇背景圖像欄的按鈕，再選取圖像文件就可以了。 3.表格屬性面板的邊框欄可以設(shè)置表格邊框粗細(xì)，輸入數(shù)字越大，則邊框越粗；若輸入0，則不會(huì)有邊框顯示。 4.選取表格中多個(gè)連續(xù)單元格，可以將它們合并起來(lái)。表格合并之后還可以拆小 結(jié)分，只要選擇單