網頁制作項目8

項目8使用表格布局網頁項目描述

知識儲備

實踐向導

能力拓展

退出項目小結

項目描述

表格是一種特殊的元素，不但可以用來設置各種數據，還可以作為頁面布局元素來使用。在作為頁面布局元素使用時，表格可以有助于用戶有條理地組織網頁中的各種對象。本項目運用表格知識制作“廬山風景欣賞”網頁，其效果如圖。項目描述

圖8-1“廬山風景欣賞”頁面效果圖返回8.2知識儲備8.2.1認識表格8.2.2表格的基本操作8.2.3設置表格及單元格的屬性8.2.4調整表格的結構8.2.5填加表格數據8.2.6導入外部表格數據文件8.2.7嵌套表格8.2知識儲備

8.2.1認識表格

1.表格的組成元素一張表格橫向叫行，縱向叫列，行列交叉部分就叫單元格，如圖8-2所示。單元格中的內容和邊框之間的距離叫邊距。單元格和單元格之間的距離叫間距。整張表格的邊緣叫邊框。圖8-2表格的基本組成部分8.2知識儲備

8.2.2表格的基本操作

1.插入表插入表格的具體操作步驟：①將光標置于要插入表格的位置。②單擊菜單“插入”→“表格”命令,彈出“表格”對話框。如圖8-3所示。圖8-3表格對話框8.2知識儲備③設置表格大小為“5行3列”、“表格寬度”為100%，“邊框粗細”為“3”像素，然后單擊“確定”按鈕。此時，在DreamweaverCS5中顯示了5行3列的表格，如圖8-4所示。④在插入表格之后，就可以像在Word中一樣輸入表格內容了。圖8-4插入表格8.2知識儲備2.選擇表格和表格元素表格元素包括行、列和單元格三種，他們的選取方法各不相同。(1)選擇表格要選擇表格，可執(zhí)行以下任意一種操作：①將鼠標指針移到表格的左上角或表格的頂、底邊緣邊框上，當指針形狀變成形狀時單擊。②在表格中的任意單元格內單擊，然后單擊文檔窗口左下角標簽選擇器中的<table>標簽。③單擊表格中的任意單元格，然后選擇菜單“修改”→“表格”→“選擇表格”命令。④在表格上右擊鼠標，從彈出的快捷菜單中選擇“表格”→“選擇表格”命令。8.2知識儲備表格被選定后，表格的下邊緣和右邊緣會出現(xiàn)尺寸控點，如圖8-5所示。圖8-5表格的選定狀態(tài)8.2知識儲備(2)選擇表格元素可以分別選擇表格中的行、列、單元格，一次可以選擇一行、一列、一個單元格，也可以同時選擇多行、多列或多個單元格。①選擇行：將指針指向行的左邊緣，當指針形狀變?yōu)檫x擇箭頭（右指的箭頭）時單擊，可選擇當前行；上下拖動指針可選擇多行。②選擇列：將指針指向行的上邊緣，當指針形狀變?yōu)檫x擇箭頭（下指的箭頭）時單擊，可選擇當前列；左右拖動指針可選擇多列。8.2知識儲備③選擇單元格：在所需單元格中單擊，然后單擊文檔窗口左下角標簽選擇器中的<td>標簽。④選擇連續(xù)的單元格區(qū)域：從一個單元格拖到另一個單元格，或者先單擊一個單元格，然后按住shift鍵單擊另一個單元格。兩個單元格定義的直線或矩形區(qū)域中的所有單元格都將被選中。⑤選擇不相鄰的單元格：在按住Ctrl鍵的同時單擊要選擇的單元格、行或列。如果按住Ctrl鍵，單擊尚未選中的單元格、行或列，則會將其選中。如果它已經被選中，再次單擊則會將其從選擇中刪除。8.2知識儲備8.2.3設置表格及單元格的屬性

1.設置表格屬性格式化表格的大部分操作都可以通過表格屬性面板完成。選擇表格后，屬性面板上會顯示當前表格的相關屬性，如圖8-6所示。圖8-6表格屬性面板8.2知識儲備2.設置單元格、行或列屬性當選擇單元格或者一行、一列時，屬性面板中將對應顯示單元格或者行、列的屬性，在行、列、單元格的屬性面板中可以分別設置行、列或單元格的寬、高、背景顏色以及單元格內容的對齊方式等屬性，如圖8-7所示。圖8-7單元格屬性面板8.2知識儲備8.2.4調整表格的結構

1.調整表格和單元格的大小當調整整個表格的大小時，表格中的所有單元格按比例更改大小。選中插入的表格，在出現(xiàn)三個控制點后，將鼠標移動到控制點上，鼠標形狀變成雙向箭頭時，按鼠標左鍵并拖動即可改變表格的大小。

8.2知識儲備將光標置于要設置大小的單元格中，用鼠標拖動列或行的邊框來調整列寬或行高，如圖8-8所示。圖8-8調整單元格行高8.2知識儲備2.添加或刪除行或列在網頁文檔中添加行或列可以用以下方法：(1)將光標置于相應的單元格中，選擇菜單“修改”→“表格”→“插入行”命令，即可插入一行。(2)將光標置于相應的位置，選擇菜單“修改”→“表格”→“插入列”命令，即可在相應的位置插入一列。8.2知識儲備(3)將光標置于相應的位置，選擇菜單“修改”→“表格”→“插入行或列”命令，彈出“插入行或列”對話框，在對話框中進行相應的設置，如圖8-9所示。單擊“確定”按鈕，即可在相應位置插入行或列。圖8-9插入行或列對話框8.2知識儲備

在網頁文檔中刪除行或列可以用以下方法：(1)將光標置于要刪除行的任意一個單元格，選擇菜單“修改”→“表格”→“刪除行”命令就可以刪除當前行。(2)將光標置于要刪除列中的任意一個單元格，選擇菜單“修改”→“表格”→“刪除列”命令就可以刪除當前列。(3)選中要刪除的行或列，選擇菜單“編輯”→“清除”命令，即可刪除行或列。(4)選中要刪除的行或列，按Delete鍵或按BackSpace鍵也可以刪除行或列。8.2知識儲備3.拆分單元格在使用表格的過程中，有時需要拆分單元格以達到所需的效果。拆分單元格就是將選中的表格單元格拆分為多行或多列，有以下方法：(1)將光標置于要拆分的單元格中，選擇菜單“修改”→“表格”→“拆分單元格”命令，彈出“拆分單元格”對話框，如圖8-10所示。設置完成后，單擊“確定”按鈕。圖8-10拆分單元格對話框8.2知識儲備(2)將光標置于要的拆分的單元格中，單擊鼠標右鍵，在彈出菜單中選擇“表格”→“拆分單元格”命令，彈出“拆分單元格”對話框，然后進行相應的設置。(3)單擊“屬性”面板中的“拆分單元格”按鈕，彈出“拆分單元格”對話框，然后進行相應的設置。8.2知識儲備

4.合并單元格合并單元格就是將選中單元格的內容合并到一個單元格，合并單元格有以下方法：(1)選中要合并的單元格，然后選擇菜單“修改”→“表格”→“合并單元格”命令，將多個單元格合并成一個，如圖8-11所示。圖8-11合并單元格8.2知識儲備(2)選中要合并的單元格，在“屬性”面板中單擊“合并單元格”按鈕，即可合并單元格。(3)選中要合并的單元格，單擊鼠標右鍵，在彈出菜單中選擇“表格”→“合并單元格”，可合并單元格。8.2知識儲備5.剪切、復制和粘貼表格剪切、復制和粘貼表格步驟如下：①選擇要剪切的表格，選擇菜單“編輯”→“剪切”或菜單“編輯”→“拷貝”命令。②光標置于要粘貼表格的位置，選擇菜單“編輯”→“粘貼”命令，即可復制或者移動表格。8.2知識儲備

8.2.5添加表格數據表格中的每一個單元格都相當于一個獨立的小文檔，在要添加內容的單元格中單擊，即可在其中輸入文字、插入圖像或者其他網頁元素。在單元格中添加和編輯數據的方法與在普通文檔中相同。編輯完一個單元格的數據后，用戶可執(zhí)行以下任意操作移動插入點，以便編輯下一個單元格。在表格中跳轉的方法如下：

(1)跳轉至下一個單元格：按Tab鍵。

(2)跳轉至上一個單元格：按Shift+Tab組合鍵。

(3)向上、向下、向左、向右移動插入點：按上、下、左、右箭頭鍵。

(4)在表格下方添加一行：在表格的最后一個單元格中按Tab鍵。8.2知識儲備8.2.6導入外部表格數據文件如果在其他應用程序（如寫字板）中創(chuàng)建了以分隔文本的格式保存的表格式數據文件（其中的項以制表符、逗號、冒號、分號或其他分隔符隔開），可以直接將其導入到DreamweaverCS5中。導入的表格數據文件在網頁中顯示為表格的格式。8.2知識儲備要導入數據文件，可選擇“文件”→“導入”→“表格式數據”命令或選擇“插入”→“表格對象”→“導入表格式數據”命令，打開如圖8-12所示的“導入表格式數據”對話框，進行相關設置后單擊“確定”按鈕，即可將所選文件中的數據以格式的形式導入到DreamweaverCS5文檔中。圖8-12“導入表格式數據”對話框8.2知識儲備8.2.7嵌套表格嵌套表格是在一個表格的單元格中插入另一個表格，用戶可以像對其他任何表格一樣對嵌套表格進行格式設置，但是寬度受其所在單元格的寬度限制。嵌套表格的具體步驟如下：①選擇要嵌套表格的單元格，在“插入”面板的“常用”分類中單擊“表格”按鈕，如圖8-13所示。8.2知識儲備②在“表格”對話框中設置要嵌套的表格，然后單擊“確定”按鈕。即可在單元格中插入嵌套表格。圖8-13“插入”面板返回8.3實踐向導任務8-1制作”廬山風景欣賞”網頁，效果如圖8-1所示。具體操作步驟如下：（1）啟動DreamweaverCS5,單擊菜單“文件”→“新建”命令，打開“新建文檔”對話框，選擇“空白頁”→“HTML”→“<無>”選項，單擊“確定”按鈕，創(chuàng)建一個網頁文檔，并保存文件。8.3實踐向導（2）單擊菜單“插入”→“表格”命令，彈出“表格”對話框，插入一個4行3列的表格，設置表格寬度為870像素，邊框粗細為0像素，單擊“確定”按鈕。然后在“屬性”面板中設置其對齊方式為“居中對齊”

。（3）將光標置于表格中，選中第一行，合并單元格。（4）在第一行單元格內輸入文本，設置單元格高為71像素，文本格式為“標題1”，水平居中對齊，背景顏色為“#FFCC33”。8.3實踐向導（5）鼠標置于第二行第一列單元格內，設置單元格水平居中對齊，寬為290像素，高位205像素，背景顏色為”#FFCC99”。（6）設置完單元格屬性后，在單元格內插入圖像和輸入文本。（7）重復步驟（5）（6），在第二行和第三行的單元格內插入圖片和文本。（7）將光標置于表格第四行中，合并單元格，設置高度為100像素，背景顏色為“#FFCCFF”，輸入文本。8.3實踐向導（8）選擇“文件”→“保存全部”命令，保存所有文件。按【F12】預覽，效果如圖所示。返回8.4能力拓展