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