1、第7章 表格與層,表格是網(wǎng)頁(yè)中的一個(gè)重要容器元素，可包含文字和圖像。表格使網(wǎng)頁(yè)結(jié)構(gòu)緊湊整齊，使網(wǎng)頁(yè)內(nèi)容的顯示一目了然。表格使用的方法靈活，卻略顯復(fù)雜。使用Dreamweaver不僅可以使創(chuàng)建表格簡(jiǎn)單快捷，還可以使修改方式更為方便。除此之外，層也是網(wǎng)頁(yè)中的一個(gè)重要容器元素。當(dāng)網(wǎng)頁(yè)中有動(dòng)態(tài)效果時(shí)，大多使用了層元素。另外，現(xiàn)在流行的Web標(biāo)準(zhǔn)中，層元素是不可缺少的。,7.1 基本操作,前面介紹了表格的作用是使網(wǎng)頁(yè)整齊明了。本節(jié)將介紹如何在網(wǎng)頁(yè)中添加表格，以及簡(jiǎn)單設(shè)置表格的屬性來適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的需要。,7.1.1 插入表格,了解了表格的用途之后，接下來了解如何把表格插入到網(wǎng)頁(yè)中。具體步驟如下：,【表格】

2、對(duì)話框圖 表格效果,7.1.2 輸入數(shù)據(jù),插入表格之后，接下來介紹如何把數(shù)據(jù)輸入到表格中，具體步驟如下：,輸入數(shù)據(jù)效果,7.1.3 調(diào)整表格尺寸,在表格中輸入數(shù)據(jù)后，如果數(shù)據(jù)內(nèi)容較多，就需要調(diào)整表格的大小，以適應(yīng)內(nèi)容的需要。如何進(jìn)行調(diào)整，具體步驟如下：,選中表格效果 調(diào)整表格效果,7.1.4 表格對(duì)齊,從上面的圖中可以看出表格默認(rèn)的對(duì)齊方式是左對(duì)齊，修改對(duì)齊方式的具體步驟如下：,居中對(duì)齊效果,7.2 編輯表格,前面介紹了表格的基本操作，還有一些其他的對(duì)表格進(jìn)行編輯的操作。例如，合并或拆分表格單元、添加或刪除表格行或列、調(diào)整行高或列寬及設(shè)置表格標(biāo)題等。,7.2.1 表格標(biāo)題,一般情況下表格會(huì)有一

3、行標(biāo)題來說明表格的內(nèi)容項(xiàng)。例如一張學(xué)生成績(jī)表，有一行標(biāo)題說明對(duì)應(yīng)的成績(jī)科目。在表格中，設(shè)置標(biāo)題的具體步驟如下：,無表格標(biāo)題效果 表格標(biāo)題效果,7.2.2 表格列寬與行高,當(dāng)單元格中的內(nèi)容較多時(shí)，需要調(diào)整表格單元的寬度和高度。Dreamweaver的可視化操作可以使此項(xiàng)操作變得簡(jiǎn)單方便，具體步驟如下：,原始效果 改變寬高效果,7.2.3 添加行或列,在網(wǎng)頁(yè)設(shè)計(jì)過程中，當(dāng)表格的行或列不夠時(shí)，就需要添加一行或一列。添加行或列的具體步驟如下：,原始表格效果 【插入行或列】對(duì)話框,7.2.3 添加行或列,單擊【確定】按鈕，完成插入行，效果如圖左所示選擇【所選之前】單選按鈕，然后單擊【確定】按鈕，完成插入

4、列，效果如圖右所示。,插入行效果 插入列效果,7.2.4 刪除行或列,了解了如何添加行或列，接下來介紹如何把多余的行或列刪除，具體步驟如下： 接著上一小節(jié)中的實(shí)例，保持插入行和列的效果。 選中需要?jiǎng)h除的行，可以同時(shí)選中多行。選中上小節(jié)中插入的行。 保持光標(biāo)在選中的行上，然后右擊，彈出快捷菜單。 單擊【表格】|【刪除行】命令，完成行的刪除。,7.2.5 合并單元格,在表格的使用過程中，有的內(nèi)容需要占兩個(gè)或兩個(gè)以上的單元格。此時(shí)需要把多個(gè)單元格合并成一個(gè)單元格，可以是合并同行的單元格，也可以是合并同列的單元格。具體步驟如下：,原始表格效果 合并單元格效果,7.2.6 拆分單元格,上一小節(jié)介紹了如何

5、合并單元格。既然有合并，當(dāng)然也有拆分。拆分單元格的具體步驟如下：,【拆分單元格】對(duì)話框,7.3 表格外觀,表格的外觀包括表格邊框的粗細(xì)與顏色、單元格之間的距離（即間距）、表格內(nèi)容的顏色與對(duì)齊方式、表格的背景顏色與背景圖像，以及單元格的背景顏色與背景圖像等。,7.3.1 設(shè)置邊框粗細(xì),邊框的粗細(xì)可以為網(wǎng)頁(yè)增添一些趣味。在插入表格時(shí)，默認(rèn)邊框?yàn)?像素。如何進(jìn)行邊框粗細(xì)的修改，具體步驟如下：,無邊框效果圖 無邊框預(yù)覽效果,7.3.1 設(shè)置邊框粗細(xì),在【邊框】文本框中輸入5，按Enter鍵，效果如圖左所示，預(yù)覽如圖右所示。,邊框?yàn)?的效果 加邊框預(yù)覽效果,7.3.2 設(shè)置邊框顏色,在上一小節(jié)中，邊框的

6、默認(rèn)顏色是灰色，如果總以灰色顯示會(huì)很單調(diào)。下面將介紹設(shè)置邊框的顏色，具體步驟如下：,邊框顏色效果 單元格邊框顏色效果,7.3.3 設(shè)置表格間距,插入一個(gè)表格后，可以看到表格的邊框之間有一個(gè)間隙，它就是表格的間距。默認(rèn)的間距是2像素。如何進(jìn)行表格的間距的設(shè)置？具體步驟如下：,表格間距效果,7.3.4 表格填充,表格填充是指單元格內(nèi)容與單元格邊框之間的距離。如何對(duì)其進(jìn)行設(shè)置？具體步驟如下：,表格填充效果,7.3.5 設(shè)置單元格對(duì)齊方式,前面設(shè)置了表格在頁(yè)面中的對(duì)齊方式，那么表格中內(nèi)容的對(duì)齊方式如何進(jìn)行設(shè)置？具體步驟如下：,水平居中效果 底部對(duì)齊效果,7.3.6 設(shè)置表格背景顏色與圖像,前面介紹了網(wǎng)

7、頁(yè)的背景顏色和圖像，其實(shí)也可以為表格設(shè)置背景顏色和圖像，從而使表格的外觀更多姿多彩，具體步驟如下：,表格背景顏色效果 表格背景圖像效果,7.3.7 設(shè)置單元格背景顏色與背景圖像,前面介紹了表格背景顏色與背景圖像，如何設(shè)置單元格背景顏色與背景圖像？具體步驟如下：,單元格背景顏色效果 單元格背景圖像效果,7.4 div層,層是網(wǎng)頁(yè)中一個(gè)重要的動(dòng)態(tài)元素，能使網(wǎng)頁(yè)動(dòng)起來，它是網(wǎng)頁(yè)中不可缺少的重要元素，在后面介紹的Web標(biāo)準(zhǔn)中更是不可或缺。在本節(jié)中只介紹層的基本用法，一些高級(jí)用法會(huì)在相關(guān)的內(nèi)容中再詳細(xì)介紹。,7.4.1 層基本操作,層標(biāo)簽如此的重要，如何把層加入到網(wǎng)頁(yè)之中？具體步驟如下 :,插入層效果

8、改變層大小效果,層背景顏色效果圖 層位置設(shè)置效果,7.4.2 層屬性操作,層除了大小與背景，還有其他的相關(guān)屬性，例如層編號(hào)、Z軸和溢出方式等，具體步驟如下：,層【屬性】面板,7.4.2 層屬性操作,按F12鍵，進(jìn)行預(yù)覽: 比較設(shè)置Z軸前后的效果可以看出，Z軸值越大，層就越靠前。通過設(shè)置Z軸值可以修改層的前后順序。,設(shè)置Z軸前預(yù)覽效果 設(shè)置Z軸后預(yù)覽效果,7.4.3 【層】面板,對(duì)層的屬性修改可以通過層的屬性面板進(jìn)行，還可以在【層】面板修改一部分屬性。例如，層的可見屬性、Z軸順序和層編號(hào)。具體步驟如下：,【層】面板,7.4.3 【層】面板,擊【眼睛】按鈕，可以使層顯示或隱藏。如果此列內(nèi)容為空，表示從父層繼承。單擊Layer1前的【眼睛】按鈕，使其眼睛圖像為閉合，如圖左所示。此時(shí)預(yù)覽效果如圖右所示。,閉合眼睛效果 預(yù)覽隱藏層效果,7.4.4 層與表格轉(zhuǎn)換,前面介紹了表格與層都可用于網(wǎng)頁(yè)布局。它們之間也可以相互轉(zhuǎn)換，具