第03章-使用表格布局頁面

《網(wǎng)頁設計與制作基礎教程(第3版)》第三章使用表格布局頁面:::::《計算機基礎與實訓教材系列》系列叢書官方網(wǎng)站edu:::::學習目標

在網(wǎng)頁中插入的文本和圖像會隨著瀏覽器窗口的放大與縮小發(fā)生變化，這使得網(wǎng)頁處于不穩(wěn)定的顯示狀態(tài)。要解決這種狀態(tài)，最簡單的方法就是使用表格，表格不僅能夠控制網(wǎng)頁在瀏覽器窗口中的位置，還可以控制網(wǎng)頁元素在網(wǎng)頁中的顯示位置。:::::《計算機基礎與實訓教材系列》系列叢書官方網(wǎng)站edu:::::本章重點

創(chuàng)建基本表格

插入表格元素

調(diào)整表格大小

導入與導出表格數(shù)據(jù)

使用表格制作網(wǎng)頁:::::《計算機基礎與實訓教材系列》系列叢書官方網(wǎng)站edu:::::3.1使用表格

網(wǎng)頁能夠向訪問者提供的信息是多樣化的，包括文字、圖像、動畫和視頻等。如何使這些網(wǎng)頁元素在網(wǎng)頁中的合理位置上顯示出來，使網(wǎng)頁變得不僅美觀而且有條理，是網(wǎng)頁設計者在著手設計網(wǎng)頁之前必須要考慮的問題。表格的作用就是幫助用戶高效、準確地定位各種網(wǎng)頁數(shù)據(jù)，并直觀、鮮明地表達設計者的思想。

網(wǎng)頁中表格的用途創(chuàng)建表格插入表格元素

設置表格屬性:::::《計算機基礎與實訓教材系列》系列叢書官方網(wǎng)站edu:::::3.1.1網(wǎng)頁中表格的用途

使用表格排版的頁面在不同平臺、不同分辨率的瀏覽器中都能保持其原有的布局，并且在不同的瀏覽器平臺中具有較好的兼容性，所以表格式網(wǎng)頁中最常用的排版方式之一。:::::《計算機基礎與實訓教材系列》系列叢書官方網(wǎng)站edu:::::3.1.2創(chuàng)建表格

表格是用于在HTML頁面上顯示表格式數(shù)據(jù)以及對文本和圖形進行布局的工具。表格由一行或多行組成，每行又由一個或多個單元格組成。

插入表格

插入嵌套表格:::::《計算機基礎與實訓教材系列》系列叢書官方網(wǎng)站edu:::::3.1.3插入表格元素

為了使網(wǎng)頁中的元素能夠有序的在瀏覽器中顯示，用戶在插入文本和圖像之前，最好先插入一個表格。在表格中插入文本與圖像的方法與直接在網(wǎng)頁中插入基本相同，只是在插入之前，需要先將鼠標光標放置在表格中。

在表格中輸入文本在表格中插入圖像:::::《計算機基礎與實訓教材系列》系列叢書官方網(wǎng)站edu:::::3.1.4設置表格屬性

表格由單元格組成，即使是一個最簡單的表格，也由一個單元格。而表格與單元格的屬性完全不同，選擇不同的對象（表格或單元格），“屬性”檢查器將會顯示相應的選項參數(shù)。

表格屬性單元格屬性:::::《計算機基礎與實訓教材系列》系列叢書官方網(wǎng)站edu:::::3.2編輯表格

當用戶創(chuàng)建的表格不符合網(wǎng)頁設計的要求時，可以通過拆分與合并表格中的單元格，或者增加與刪除表格行或列來達到所需的目的。除此之外，在表格中還可以執(zhí)行復制、剪切、粘貼等操作，并保存原有單元格的格式。

選擇表格元素調(diào)整表格大小更改列寬和行高

添加或刪除行或列

拆分與合并單元格

復制與粘貼單元格

設置表格內(nèi)容排序

導入與導出表格式數(shù)據(jù):::::《計算機基礎與實訓教材系列》系列叢書官方網(wǎng)站edu:::::3.2.1選擇表格元素

將鼠標光標放置在網(wǎng)頁中的表格內(nèi)，“屬性”檢查器將顯示單元格的屬性，而不是表格的屬性。這說明選中的單元格，而非表格。在網(wǎng)頁中創(chuàng)建一個表格，既包括表格自身，還包含單元格、行與列等元素，而這些元素的選擇方法各不相同。

選擇整個表格

選中行和列

選中單元格

選中單元格區(qū)域

選中不相鄰的單元格:::::《計算機基礎與實訓教材系列》系列叢書官方網(wǎng)站edu:::::3.2.2調(diào)整表格大小

當用戶選中網(wǎng)頁中的表格后，在表格右下角區(qū)域將顯示3個控制點，通過拖動這3個控制點可以將表格橫向、縱向或者整體放大。:::::《計算機基礎與實訓教材系列》系列叢書官方網(wǎng)站edu:::::3.2.3更改列寬和行高

要更改單元格的列寬和行高，可以在“屬性”面板中調(diào)整數(shù)值，或拖動列或行的邊框來更改表格的列寬或行高；也可以在“代碼”視圖中修改HTML代碼來更改單元格的寬度和高度。:::::《計算機基礎與實訓教材系列》系列叢書官方網(wǎng)站edu:::::3.2.4添加或刪除行或列

表格中空白的單元格也會占據(jù)頁面位置，所以多余的行或列可以刪除；此外，也可以在特定行或列上方或左側添加行或列。:::::《計算機基礎與實訓教材系列》系列叢書官方網(wǎng)站edu:::::3.2.5拆分與合并單元格

在制作頁面時，如果插入的表格與實際效果不相符，例如有缺少或多余單元格的情況，可根據(jù)需要，進行拆分和合并單元格操作。:::::《計算機基礎與實訓教材系列》系列叢書官方網(wǎng)站edu:::::3.2.6復制與粘貼單元格

用戶在DreamweaverCC中插入表格并選中表格中一個單元格后，選擇“編輯”命令，在彈出的的菜單中可以對表格執(zhí)行“剪切”、“拷貝”、“粘貼”等操作。:::::《計算機基礎與實訓教材系列》系列叢書官方網(wǎng)站edu:::::3.2.7設置表格內(nèi)容排序

對于網(wǎng)頁中插入的表格，用戶可以根據(jù)單個列的內(nèi)容對表格中的行進行排序或者根據(jù)兩個列的內(nèi)容執(zhí)行更加復雜的表格排序。:::::《計算機基礎與實訓教材系列》系列叢書官方網(wǎng)站edu:::::3.2.8導入與導出表格式數(shù)據(jù)

使用Dreamweav