《網(wǎng)頁設計與制作》課件第7章 表格

第7章表格7.1表格的基本操作7.2設置單元格屬性7.3設置表格屬性7.4表格的排序7.5格式化表格7.6表格數(shù)據(jù)的導入和導出7.1表格的基本操作7.1.1創(chuàng)建表格7.1.2單元格的拆分與合并7.1.3行與列的添加與刪除7.1.1創(chuàng)建表格創(chuàng)建表格的具體步驟如下：（1）選擇菜單命令【插入】表格】，會自動打開【表格】對話框，如圖7-1所示。（2）在上圖中設置表格的行數(shù)與列數(shù)，默認為3行3列。（3）設置表格的寬度?？蔀榘俜直然蛘呦袼兀诖嗽O為100％，這樣無論當前的窗口有多大，表格始終可以充滿整個頁面。7.1.1創(chuàng)建表格（4）在【邊框粗細】文本框中設置表格邊框的粗細。在此設置為0，數(shù)值越大，邊框就越粗。（5）設置單元格邊距和間距，在此設為1。（6）設置頁眉，即為表格的對齊方式，有無、左、頂部、兩者共四種選擇，在此選擇默認。實際操作時可根據(jù)需要選擇合適的方式。（7）此外，還有輔助功能區(qū)，可根據(jù)需要進行設置，也可留空。（8）單擊【確定】按鈕，在當前文檔中，插入了一個3行3列，寬度為100%的表格，如圖7-2所示。7.1.2單元格的拆分與合并表格中行與列圍成的區(qū)域稱為單元格，在單元格中可以插入文本、圖像等元素，也可以根據(jù)實際的需要對單元格進行合并和拆分，具體的步驟如下：（1）將單元格拆分成行或列，行數(shù)中可以輸定數(shù)字，顯示拆分的數(shù)量。將光標放在剛插入的表格第一行，單擊【屬性】面板中的“拆分單元格”按鈕，會彈出【拆分單元格】對話框，如圖7-3所示。7.1.2單元格的拆分與合并（2）在對話框中將【單元格拆分】后的“列”單選按鈕選中，在【列數(shù)】文本框中輸入2，單擊【確定】按鈕，就可以把表格的第一行拆分成2列，變成2個單元格，如圖7-4所示。（3）選中剛才拆分的2個單元格，此時在屬性面板中，單擊【合并單元格】按鈕，則2列單元格又會合并成1個，如圖7-5、7-6所示。7.1.3行與列的添加與刪除對行與列進行添加與刪除的操作步驟如下： （1）在新建的表格上分別輸入文本，如圖7-7所示。（2）在第四行右擊，在彈出的快捷菜單中選擇【表格】插入行】命令，此時就會在當前行上方插入一行，如圖7-8所示。（3）在當前的第5行右擊，在彈出的快捷菜單中選擇【表格》插入行或列】命令，如圖7-9所示。7.1.3行與列的添加與刪除（4）打開【插入行或列】對話框，如果選擇插入【行】選項，可以設置插入的行在插入點的上或下，如果選項的是插入【列】選項，可以設置插入的列在插入點的前或后。這里僅以對行的操作為例，選擇在所選位置之前插入2行，如圖7-10所示。（5）單擊【確定】按鈕，此時表格變成了7行，如圖7-11所示。（6）將光標置于要刪除行的任意一個單元格中，右鍵選擇【表格》刪除行】命令或者按下Delete鍵，可將該行刪除。如圖7-12、7-13所示。7.2設置單元格屬性

單元格作為表格的重要的組成部分，其屬性的設置影響到表格的外觀，將鼠標放到某個單元格內(nèi)，可以通過【屬性】面板對這個單元格進行設置，如圖7-14所示。在屬性面板中，各參數(shù)的含義如下：（1）水平對齊：有默認、左對齊、居中對齊、右對齊4種對齊方式。默認的對齊方式是左對齊，設置后的三種效果如圖7-15所示。（2）垂直對齊：有默認、頂端、底部、基線4種方式，默認的對齊方式是居中，設置后的三種效果如圖7-16所示。7.2設置單元格屬性（3）在【屬性】面板中寬和高的文本框中輸入數(shù)值，可以設置單元格的高度和寬度，此數(shù)值的單位可為像素(px)或者百分比(%)（4）單元格中設置背景圖片，單擊背景后的按鈕，在彈出的【選擇圖像源文件】對話框中選擇背景圖像，然后單擊【確定】按鈕，完成背景圖像的設置，如圖7-17所示。（5）設置背景色，單擊背景顏色后的按鈕，可以對選中的單元格背景顏色進行設置，如圖7-18所示。（6）設置單元格邊框顏色，單擊邊框顏色后的按鈕，可以對所選單元格的邊框顏色進行設置，如圖7-19所示。7.3設置表格屬性7.3.1表格的邊框?qū)傩?.3.2表格的背景屬性7.3.3表格的對齊屬性7.3.4表格的填充與間距7.3.5表格的嵌套7.3.1表格的邊框?qū)傩赃吙驅(qū)傩杂?個：大小和顏色，邊框的大小屬性用于設置邊框的寬度，在【屬性】面板中“邊框”選項中設置其寬度，可以設置為0或其他數(shù)值。只有在其數(shù)值大于0時，邊框才可以在瀏覽器中可見。表格邊框在網(wǎng)頁設計過程中經(jīng)常用到，有時會根據(jù)需要設置成一定的數(shù)值，以像素為單位。邊框的顏色是為了美化表格和網(wǎng)頁而設置的，可以在“邊框顏色”選項中直接輸入顏色值，或單擊“邊框顏色”后的按鈕，出現(xiàn)顏色選擇器，或采用自定義顏色適配器，進行邊框顏色的設置，而且邊框顏色只有在表格的寬度大于0時才有效。7.3.2表格的背景屬性

表格的背景可以使用顏色填充也可以使用圖片填充。使用背景色填充表格的步驟如下：選中表格，在【屬性】面板中的背景顏色后面的文本框中輸入顏色值，或者在顏色選擇框中選擇背景顏色，屬性如圖7-21所示。設置背景顏色的表格在瀏覽器中的顯示效果如圖7-22所示。7.3.2表格的背景屬性使用背景圖片填充表格的步驟如下：（1）選中表格，打開【屬性】面板，在背景后面的文本框中輸入表格背景圖像的路徑和名稱，或者單擊【文件夾】按鈕，打開【選擇圖像源文件】對話框，選擇本地圖片作為背景圖像，如圖7-23所示。（2）單擊【確定】按鈕，就可以將表格的背景設置為圖片，表格在瀏覽器中的預覽效果如圖7-24所示。7.3.3表格的對齊屬性選中表格，在屬性面板中可以設置表格在文檔中的對齊方式?？梢栽O置為：左對齊、居中對齊、右對齊，根據(jù)需要進行設置，默認是左對齊。如果表格的寬度為100%時，就不需要設置對齊屬性，不同的對齊屬性在瀏覽器中的效果如圖7-25所示。7.3.4表格的填充與間距在屬性面板中可以設置表格的填充與間距數(shù)值。填充：通過數(shù)值設置單元格內(nèi)部空白區(qū)域的大??；間距：通過數(shù)值設置單元格之間的距離。設置表格填充和間距的屬性效果如圖7-26所示。使用表格的填充和間距屬性可以設置細邊框的表格，此屬性在實際制作過程中經(jīng)常用到。7.3.5表格的嵌套使用表格嵌套來制作網(wǎng)頁的步驟如下：（1）單擊工具欄中【插入表格】按鈕，插入一個2行2列的表格。表格的屬性如圖7-27所示。（2）在第1行第1列中插入圖像，第1行第2列中插入文本。（3）在第2行的2個單元格插入和第1行同樣的元素，此時文檔效果如圖7-28所示。（4）將第2行第1列的圖像換成一個大圖，此時文檔的界面發(fā)生了錯位，第1行第1列的單元格的寬度被第2行第1列的圖給撐大了，如圖7-29所示。7.3.5表格的嵌套（5）如果需要保持第1行的原圖片和文檔位置不變，需要建立表格嵌套。（6）選中第1行的2個單元格，單擊【屬性】面板中的“合并單元格”按鈕，將第1行的2個單元格合并。（7）然后在合并后的單元格中插入一個1行2列的表格，并設置邊框為0，如圖7-30所示。（8）單擊【確定】按鈕，將表格插入到單元格中，如圖7-31所示。（9）將原來單元格的圖像和文本分別移到新建的這個表格的2個單元格中，保存文檔，并在瀏覽器中預覽效果如圖7-32所示。7.4表格的排序在網(wǎng)頁中，用戶經(jīng)常要對表格中的大量數(shù)據(jù)進行排序，使用Dreamweaver8可以很容易實現(xiàn)將表格內(nèi)的數(shù)據(jù)排序，具體的操作步驟如下：（1）選中頁面中的表格，如圖7-33所示。（2）選擇菜單命令【命令】排序表格】，彈出【排序表格】對話框，如圖7-34所示。（3）設置排序按【列3】。（4）設置【順序》按數(shù)值順序》降序】。（5）設置【再按》順序》按字母順序》升序】。（6）選中【完成排序后所有行的顏色保持不變】復選項。（7）單擊【確定】按鈕，表格中數(shù)據(jù)的排序結果如圖7-35所示。7.5格式化表格下面將介紹如何美化表格，具體的操作步驟如下：（1）選中表格，單擊【命令】格式化表格】選項，如圖7-36所示。（2）單擊【格式化表格】選項后，將彈出【格式化表格】對話框，如圖7-37所示。（3）在【格式化表格】對話框的左上角有各種樣式，讀者可以根據(jù)各自的喜好自行選擇。本例中選擇【AltRows：EarthColors】這一項。這里需要注意的是最后一項，該項詢問是否把各樣式代碼添加到TD標注里而非默認添加到TR標簽中。建議不要勾選該項，否則會生成比默認設置多得多的代碼。格式化后的表格如圖7-38所示。7.6表格數(shù)據(jù)的導入和導出7.6.1表格數(shù)據(jù)的導入7.6.2表格數(shù)據(jù)的導出7.6.1表格數(shù)據(jù)的導入（1）在將Excel中的數(shù)據(jù)導入之前，也可以先將Excel中的文本另存為文本格式的文件再導入，但要注意保存類型應選擇【文本文件（制表分隔符）】。如圖7-39所示。（2）選擇菜單命令【文件》導入》表格式數(shù)據(jù)】，彈出“導入表格式數(shù)據(jù)”對話框，如圖7-40所示。（3）單擊【瀏覽】按鈕，選擇存放數(shù)據(jù)的文本文件即cj.txt文件。其定界符項要和文本文件里的分離符相對應，因為cj.txt文件里用的是制表符，所以在此選擇了Tab，其他各項可根據(jù)讀者的需要進行修改。（4）如果選擇菜單命令【文件》導入》Excel文檔】，則彈出“導入Excel文檔”對話框，如圖7-41所示。（5）單擊【確定】按鈕，完成表格數(shù)據(jù)的導入，此時再文檔中插入了表格，如圖7-42所示。7.6.2表格數(shù)據(jù)的導出利用Dreamweaver8同樣可以將表格數(shù)據(jù)導出為文本文件，具體的操作步驟如下：（1）將光標移至表格中的任意一個單元格，選擇菜單命令【文件》導出》表格】