第3章使用表格布局排版網(wǎng)頁,教學(xué)內(nèi)容：表格是網(wǎng)頁不可缺少的重要元素。無論用于排列數(shù)據(jù)還是在頁面上對文本進(jìn)行排版，表格都表現(xiàn)出了強(qiáng)大的功能。它以簡潔明了和高效快捷的方式，將數(shù)據(jù)、文本、圖像和表單等元素有序地顯示在頁面上，從而呈現(xiàn)出版式漂亮的網(wǎng)頁。表格最基本的作用就是讓復(fù)雜的數(shù)據(jù)變得更有條理，讓人容易看懂，在設(shè)計頁面時，往往要利用表格來排版網(wǎng)頁元素。通過對本章的學(xué)習(xí)，應(yīng)掌握插入表格、設(shè)置表格屬性和編輯表格的方法，能夠利用表格排列網(wǎng)頁數(shù)據(jù)。,學(xué)習(xí)目標(biāo) 掌握表格的插入 掌握表格屬性的設(shè)置 掌握選擇表格的方法 掌握編輯表格和單元格 掌握利用表格排列布局網(wǎng)頁,教學(xué)目標(biāo)和基本要求 _ _ _ 教學(xué)時間：本章共分_課時 教學(xué)方法 案例教學(xué) 多媒體教學(xué) 理論面授 教學(xué)素材 課程范例文件：sample第3章 練習(xí)文件：exercise第3章,3.1 插入表格,在Dreamweaver 中，表格可以用于制作簡單的圖表，還可以用于安排網(wǎng)頁文檔的整體布局，起著非常重要的作用。利用表格設(shè)計頁面布局，可以不受分辨率的限制 。,3.1.1 表格的基本概念 表格基礎(chǔ)是隨著添加正文或圖像而擴(kuò)展的。表格由行、列和單元格3部分組成。行貫穿表格的左右；列則是上下方向的；單元格是行和列交匯的部分，是輸入信息的地方。單元格會自動擴(kuò)展到輸入信息相適應(yīng)的尺寸 。,3.1.2小案例插入表格 在Dreamweaver中插入表格非常簡單 。,3.2 設(shè)置表格屬性,直接插入的表格有時并不能讓人滿意，在Dreamweaver中，通過設(shè)置表格或單元格的屬性，可以很方便地修改表格的外觀 。,3.2.1小 設(shè)置表格屬性 設(shè)置表格的屬性，可以通過表格的【屬性】面板進(jìn)行。選擇表格，在【屬性】面板中將顯示表格的屬性 。,3.2.2 設(shè)置單元格屬性 將光標(biāo)置于單元格中，該單元格就處于選中狀態(tài)，此時屬性面板中顯示出所有允許設(shè)置的單元格屬性的選項(xiàng) 。,3.3 選擇表格元素 要想在文檔中對一個元素進(jìn)行編輯，那么首先要選擇它；同樣，要想對表格進(jìn)行編輯，首先也要選中它。選擇表格操作可以分為選中整個表格、選中單元格等幾種情況，下面分別進(jìn)行介紹。,3.3.1 選取表格 選擇整個表格有以下幾種方法。 單擊表格線的任意位置。 將光標(biāo)置于表格內(nèi)的任意位置，選擇菜單中的【修改】|【表格】|【選擇表格】命令。 將光標(biāo)放置到表格的左上角，按住鼠標(biāo)左鍵不放，拖曳鼠標(biāo)指針到表格的右下角，將整個表格中的單元格選中，單擊鼠標(biāo)右鍵，在彈出的菜單中選擇【表格】|【選擇表格】選項(xiàng)。 將光標(biāo)放置在表格的任意位置，單擊文檔窗口左下角的標(biāo)簽，選中表格后，選項(xiàng)控柄就出現(xiàn)在表格的四周。,3.3.2 選取行或列 選擇表格的行或列有以下幾種方法。 當(dāng)鼠標(biāo)指針位于要選擇行首或列頂時，鼠標(biāo)指針形狀變成了 箭頭或 箭頭時，單擊鼠標(biāo)左鍵即可以選中行或列。 將光標(biāo)置于要選擇的行首或列頂，按住鼠標(biāo)左鍵不放從左至右拖曳或者從上至下拖曳，即可選中行或者列。,3.3.3 選取單元格 選擇表格中的單個或多個單元格的方法有以下多種。 按住鼠標(biāo)左鍵并拖曳，可以選擇一個單元格或多個單元格。 按住Ctrl鍵，單擊選擇的單元格，即可選中單元格。 將光標(biāo)放置在表格的任意單元格中，單擊窗口左下角的標(biāo)簽，即可選中一個單元格。 在已經(jīng)選擇的相鄰單元格中，按住Ctrl鍵單擊不想選擇的單元格，將其去除，可以選擇不相鄰的多個單元格。,按住Shift鍵不放并單擊多個單元格中的第一個和最后一個，可以選擇多個相鄰的單元格。 按住Ctrl鍵不放并單擊多個單元格，可以選擇多個相鄰或不相鄰的單元格。,3.4 表格的基本操作,創(chuàng)建表格后，可以根據(jù)需要調(diào)整表格的高度和寬度，添加或刪除行或列，拆分或合并單元格等 。,3.4.1 小案例調(diào)整表格高度和寬度 調(diào)整表格的高度和寬度時，表格中所有單元格將按比例相應(yīng)改變大小 。選中表格，此時會出現(xiàn)3個控制點(diǎn)，將鼠標(biāo)指針分別放在3個不同的控制點(diǎn)上 ，按住鼠標(biāo)左鍵拖動即可改變表格的高度和寬度 。,3.4.2 小案例添加或刪除行或列 將光標(biāo)置于要插入行的位置，選擇菜單中的【修改】|【表格】|【插入行】命令，即可插入一行。 將光標(biāo)置于要插入列的位置，選擇菜單中的【修改】|【表格】|【插入列】命令，即可插入一列。 將光標(biāo)置于要插入行或列的位置，選擇菜單中的【修改】|【表格】|【插入行或列】命令，彈出【插入行或列】對話框，在對話框中進(jìn)行相應(yīng)的設(shè)置，單擊【確定】按鈕，即可插入行或列。,刪除行或列有以下幾種方法。 將光標(biāo)置于要刪除行的位置，選擇菜單中的【修改】|【表格】|【刪除行】命令，即可刪除行。 將光標(biāo)置于要刪除列的位置，選擇菜單中的【修改】|【表格】|【刪除列】命令，即可刪除列。 選中要刪除的行或列，選擇菜單中的【編輯】|【清除】命令，即可刪除行或列。 將光標(biāo)置于要刪除行或列的位置，單擊鼠標(biāo)右鍵，在彈出的菜單中選擇【表格】|【刪除行】命令或選擇【表格】|【刪除列】命令，也可以刪除行或列。 將光標(biāo)置于要刪除行或列的位置，可以在【屬性】面板中的【行】或【列】。,3.4.3小案例拆分單元格 在使用表格的過程中，有時需要拆分單元格以達(dá)到自己所需的效果。拆分單元格就是將選中的單元格拆分為多行或多列。,3.4.4 合并單元格 合并單元格就是將選中的單元格合并為一個單元格，合并單元格有以下幾種方法。 選中要合并的單元格，選擇菜單中的【修改】|【表格】|【合并單元格】命令，即可將多個單元格合并成一個單元格。 選中要合并的單元格，在【屬性】面板中單擊【合并所選單元格，使用跨度】按鈕 ，即可合并單元格。 選中要合并的單元格，單擊鼠標(biāo)右鍵，在彈出的菜單中選擇【表格】|【合并單元格】命令，即可合并單元格。,3.5 排序及整理表格內(nèi)容 Dreamweaver CS6提供了導(dǎo)入表格式數(shù)據(jù)和表格排序功能，使用這兩個功能可以整理表格內(nèi)的數(shù)據(jù) 。,3.5.1小案例導(dǎo)入表格式數(shù)據(jù) 在導(dǎo)入表格式數(shù)據(jù)前，首先要將表格數(shù)據(jù)文件轉(zhuǎn)換成.txt（文本文件）格式，并且該文件中的數(shù)據(jù)要帶有分隔符，如逗號、分號、冒號等。導(dǎo)入到Dreamweaver中的數(shù)據(jù)不會出現(xiàn)分隔符，且會自動生成表格 。,3.5.2小案例排序表格 Dreamweaver CS6還提供了表格的排序功能，使表格中的內(nèi)容按一定的順序進(jìn)行排列。在Dreamweaver 中，可以對一列的內(nèi)容進(jìn)行簡單排序，也可以對兩列的內(nèi)容進(jìn)行更為復(fù)雜的排序。不能對包含有Colspan或Rowspan屬性的表格進(jìn)行排序，也就是說，不能對那些包含有合并單元格的表格進(jìn)行排序。,3.6 綜合案例 本章主要講述了表格的基本概念、創(chuàng)建表格和表格的編輯等，下面將通過本章所講述的知識創(chuàng)建實(shí)例。掌握表格的使用技巧就可以設(shè)計出很多富有創(chuàng)意、風(fēng)格獨(dú)特的網(wǎng)頁 。,綜合案例1創(chuàng)建細(xì)線表格 表格無疑是網(wǎng)頁制作中最為重要的一個對象，因?yàn)橥ǔ＞W(wǎng)頁都是依靠表格來排列數(shù)據(jù)的，它直接決定了網(wǎng)頁是否美觀、內(nèi)容組織是否清晰。合理地利用表格可以方便地美化頁面。本例將講述如何制作細(xì)線表格，從而使網(wǎng)頁更加美觀精細(xì)。,綜合案例2創(chuàng)建圓角表格 制作網(wǎng)頁時常常有一些技巧，如在表格的四周加上圓角，這樣可以避免直接使