第10章 表格.ppt

1、第10章 表格,表格（Table）在網(wǎng)頁制作中是一個非常重要的概念，是由不同的行、列、單元格組成的一種能夠有效描述信息的組織方式。表格在網(wǎng)頁中使用非常普遍，使用表格進行布局，規(guī)劃網(wǎng)頁中的各種元素，會得到非常好的效果。通過本章的學習，對表格有一個基本的認識，掌握用表格布局的方法。,10.1 表格的基本操作,本節(jié)主要介紹表格的基本組成部分以及一些基本操作，如插入表格、選擇表格、添加或刪除行和列、單元格的拆分與合并等。掌握這些基本用法，利用表格就可以實現(xiàn)對網(wǎng)頁的布局，如清華大學的網(wǎng)站就是用了大量表格來進行布局的，如圖10.1所示。,10.1.1 表格的組成,表格通常由標題、行、列、單元格、邊框幾部分

2、組成，如圖10.2所示，是一個3行3列的表格，邊框粗細為2像素。其中，標題位于表格第一行，用來說明表格的主題。表格中的每一個格就是單元格；水平方向的一系列單元格組合在一起就是行；垂直方向的一系列單元格組合在一起就是列；邊框是分隔單元格的線框。,10.1.2 插入表格,Dreamweaver CS4提供了多種插入表格的方法，下面來介紹如何插入表格，以及設置表格參數(shù)。具體操作步驟如下：,10.1.3 選擇表格,對插入的表格進行編輯之前，首先選擇表格要編輯的區(qū)域，可以選擇整個表格、一行、一列、連續(xù)或不連續(xù)的多個單元格。具體操作步驟如下：,10.1.4 添加或刪除表格的行和列,在表格中添加行或列是表格

3、經(jīng)常用到的基本操作之一。下面以網(wǎng)頁“電子簡歷”為例，來學習如果在表格中添加行和列。具體操作步驟如下：,10.1.5 單元格的拆分與合并,在應用表格時，有時需要對單元格進行拆分與合并。實際上，不規(guī)則的表格是由規(guī)則的表格拆分合并而成。拆分是指將一個單元格拆分為多個單元格。合并是指將多個連續(xù)的單元格合并成一個單元格。具體操作步驟如下：,10.2 在表格中添加內(nèi)容,表格建立后，可以在表格中添加內(nèi)容。這一節(jié)主要來學習如何在表格中添加表格、文本、圖像等網(wǎng)頁元素。下面以網(wǎng)頁中的“站點搜索”欄目為例。,10.2.1 在表格中插入圖像,（1）在“編輯區(qū)”中，將光標移至要插入圖像的單元格中，如圖10.24所示。

4、（2）在“插入”工具欄的“常用”類別中，單擊“圖像”按鈕。在彈出的“選擇圖像源文件”對話框中，瀏覽并選中要插入的圖像，單擊“確定”按鈕，表格中即會出現(xiàn)插入的圖像，如圖10.25所示。,10.2.2 在表格中插入表格,在表格中插入新的表格，稱為表格的嵌套，用這種方式可以創(chuàng)建出復雜的表格，是網(wǎng)頁布局常用的方法之一。具體操作步驟如下： （1）在“編輯區(qū)”中，將光標移到要插入表格的單元格中，如圖10.26所示。 （2）在“插入”工具欄的“常用”類別中，單擊“表格”按鈕。與插入新表格操作相同。在彈出的“表格”對話框中，“行數(shù)”文本框中輸入表格的行數(shù)“2”；“列數(shù)”文本框中輸入表格的列數(shù)“2”；“表格寬度

5、”選擇“90%”，單位是“像素”；“邊框粗細”為“0”像素，單擊“確定”按鈕。此時，在單元格中插入了一個2行2列的表格，如圖10.27所示。,10.2.3 在表格中添加文本,將光標移至新插入表格的單元格中，通過鍵盤直接在單元格中輸入文字，或通過其他文檔采用“復制-粘貼”的方法將文字輸入到單元格中，如圖10.28所示。,10.3 表格屬性,利用屬性檢查器對表格屬性進行設置，可以美化表格，實現(xiàn)網(wǎng)頁布局所需要的效果。屬性設置包括兩部分，一是整個表格的屬性設置，如表格的大小、邊框、對齊方式、背景等；二是單元格的屬性設置，如單元格的大小、對齊方式、邊框、背景等。,10.3.1 設置表格屬性,本小節(jié)主要介

6、紹設置表格外觀、背景圖像、表格寬度轉(zhuǎn)換等內(nèi)容。 1設置表格外觀 2設置背景圖像 3表格寬度轉(zhuǎn)換,10.3.2 設置單元格屬性,1設置對齊方式、標題、換行 2設置單元格顏色,10.3.3 實例應用制作細線框表格,表格的邊框最小為1像素，如果希望表格的邊框比1像素更細，下面就來學習制作細線框表格。細線框表格在網(wǎng)頁制作時經(jīng)常用到，如圖10.42所示。,10.4 表格數(shù)據(jù)的導入與導出,在網(wǎng)頁制作時，有時需要輸入大量的表格數(shù)據(jù)。Dreamweaver可以實現(xiàn)把表格數(shù)據(jù)導入到網(wǎng)頁中或把網(wǎng)頁中的表格數(shù)據(jù)導出。另外，使用Dreamweaver還可以對表格中的數(shù)據(jù)進行排序操作。,10.4.1 表格數(shù)據(jù)的導入,在第6章6.1.4導入數(shù)據(jù)文檔一節(jié)中，介紹了如何將Excel表格導入到Dreamweaver中，下面來學習如何將保存為文本文檔的表格數(shù)據(jù)導入到Dreamweaver中。雙擊打開要導入的文檔如圖10.49所示。,10.4.2 表格數(shù)據(jù)排序,利用Dreamweaver CS4的表格排序功能可以像Excel一樣對表格中的數(shù)據(jù)進行排序。下面以剛導入的表格為