網(wǎng)頁制作項目8

項目8使用表格布局網(wǎng)頁項目描述

知識儲備

實踐向?qū)?/p>

能力拓展

退出項目小結(jié)

項目描述

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

圖8-1“廬山風(fēng)景欣賞”頁面效果圖返回8.2知識儲備8.2.1認(rèn)識表格8.2.2表格的基本操作8.2.3設(shè)置表格及單元格的屬性8.2.4調(diào)整表格的結(jié)構(gòu)8.2.5填加表格數(shù)據(jù)8.2.6導(dǎo)入外部表格數(shù)據(jù)文件8.2.7嵌套表格8.2知識儲備

8.2.1認(rèn)識表格

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

8.2.2表格的基本操作

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

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

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

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

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

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

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

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

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

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

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

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