靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)制作 教案 第7章 用表格規(guī)劃網(wǎng)頁(yè)

靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)制作STYLEREFbt1a項(xiàng)目七STYLEREFbt1b用表格規(guī)劃網(wǎng)頁(yè)項(xiàng)目七用表格規(guī)劃網(wǎng)頁(yè)思政目標(biāo)注重培養(yǎng)分析能力，主動(dòng)拓寬自己的視野，充分發(fā)揮創(chuàng)造力。樹(shù)立正確的職業(yè)觀，培養(yǎng)正確的職業(yè)操守技能目標(biāo)學(xué)會(huì)創(chuàng)建表格、設(shè)置表格和單元格屬性掌握表格的各種操作項(xiàng)目導(dǎo)讀在網(wǎng)頁(yè)設(shè)計(jì)的眾多環(huán)節(jié)中，頁(yè)面布局是最為重要的環(huán)節(jié)之一。表格是用于網(wǎng)頁(yè)布局設(shè)計(jì)的常用工具，可以記載表單式的資料、規(guī)范各種數(shù)據(jù)、輸入列表式的文字、排列文字和圖形，在整個(gè)網(wǎng)頁(yè)空間編排上發(fā)揮著重要的作用。合理布局表格，會(huì)使網(wǎng)頁(yè)布局整齊，又便于管理和修改。任務(wù)1創(chuàng)建表格任務(wù)引入小明已經(jīng)學(xué)會(huì)了在網(wǎng)頁(yè)中添加各種類型的內(nèi)容，但是他又發(fā)現(xiàn)網(wǎng)頁(yè)是分為不同的區(qū)域進(jìn)行分布的，如何對(duì)網(wǎng)頁(yè)的頁(yè)面進(jìn)行合理的布局呢，通過(guò)請(qǐng)教同事了解到，在網(wǎng)頁(yè)中可以創(chuàng)建表格，通過(guò)對(duì)表格進(jìn)行操作可以將網(wǎng)頁(yè)進(jìn)行布局，那么首先應(yīng)該學(xué)會(huì)如何在網(wǎng)頁(yè)中創(chuàng)建表格，以及如何在單元格中創(chuàng)建嵌套表格？知識(shí)準(zhǔn)備一、創(chuàng)建表格、單元格在Dreamweaver中，利用表格可以方便地將數(shù)據(jù)、文本、圖片規(guī)范地顯示在頁(yè)面上，使網(wǎng)頁(yè)更加美觀、有條理。在HTML中，表格是很多優(yōu)秀站點(diǎn)設(shè)計(jì)的整體標(biāo)準(zhǔn)，用表格格式化的頁(yè)面在不同平臺(tái)、不同分辨率的瀏覽器中都能保持布局和對(duì)齊。不過(guò)，表格有一個(gè)缺陷：它會(huì)使網(wǎng)頁(yè)顯示的速度變慢。因?yàn)樵跒g覽器中，文字是逐行顯示的，即從服務(wù)器上傳過(guò)來(lái)多少內(nèi)容，就顯示多少內(nèi)容，以方便瀏覽。而使用表格就不同了，整個(gè)表格的內(nèi)容全部下載完成之后，才能在客戶端的瀏覽器上顯示出來(lái)。因此，在多重嵌套的表格布局中，頁(yè)面打開(kāi)速度會(huì)比較慢。盡管如此，表格在網(wǎng)頁(yè)布局中仍扮演著很重要的角色，是網(wǎng)頁(yè)設(shè)計(jì)者必須掌握的一個(gè)強(qiáng)大的工具。下面我們就介紹表格一些常用的操作。表格由三個(gè)基本部分組成：行、列和單元格。在表格中，被線條分開(kāi)的一個(gè)個(gè)小格稱為單元格，其中可插入文字、圖像等對(duì)象；分隔單元格的線條稱為邊框；位于水平方向上的一排單元格稱作一行，位于垂直方向上的一排單元格稱作一列。單元格是表格的基本組成部分。案例——?jiǎng)?chuàng)建表格下面以在網(wǎng)頁(yè)中插入一個(gè)3行3列的表格為例，介紹在網(wǎng)頁(yè)中創(chuàng)建表格的操作步驟。（1）在“插入”面板頂部的下拉菜單中單擊“HTML”標(biāo)簽，切換到“HTML”插入面板。（2）單擊“表格”圖標(biāo)按鈕，或執(zhí)行“插入”｜“表格”菜單命令，彈出“表格”對(duì)話框，如圖7-1所示。對(duì)話框中各個(gè)選項(xiàng)的功能介紹如下： “行數(shù)”：用于設(shè)置表格的行數(shù)?！傲小保河糜谠O(shè)置表格的列數(shù)?！氨砀駥挾取保河糜谠O(shè)置表格的寬度。右側(cè)的下拉列表用于設(shè)置表格寬度的單位，有“像素”和“百分比”兩種。這兩種單位的區(qū)別在于，以像素為單位設(shè)置的表格寬度是表格的實(shí)際寬度，是固定的；而用百分比設(shè)定的表格寬度將隨瀏覽器窗口的大小改變而改變?！斑吙虼旨?xì)”：用于設(shè)置表格的邊框厚度，單位為像素。設(shè)置為0時(shí)不顯示邊框?！皢卧襁吘唷保河糜谠O(shè)置單元格的內(nèi)容和邊框的間距?！皢卧耖g距”：用于設(shè)置單元格之間的距離，相當(dāng)于設(shè)置單元格的邊框厚度。“標(biāo)題”：用于設(shè)置標(biāo)題顯示方式，有4個(gè)選項(xiàng)，具體效果見(jiàn)相應(yīng)的圖標(biāo)，可以點(diǎn)擊圖標(biāo)選中其一?！拜o助功能——標(biāo)題”：用于設(shè)置表格的標(biāo)題?！罢保河糜谠O(shè)置表格的說(shuō)明信息，對(duì)表格的顯示無(wú)影響。（3）在“行數(shù)”文本框中輸入表格的行數(shù)3。在“列”文本框中輸入表格的列數(shù)3，“標(biāo)題”選擇“頂部”，在“標(biāo)題”文本框中輸入“第一張表格”，其余選項(xiàng)保持默認(rèn)值。（4）單擊“確定”按鈕即可插入表格，最終制作結(jié)果如圖7-2所示。圖7-1“表格”對(duì)話框圖7-2插入的表格案例——使用DOM面板插入表格使用DreamweaverCC2021中的DOM面板也可以很便捷地在網(wǎng)頁(yè)中插入表格。方法如下：（1）執(zhí)行“窗口”|“DOM”菜單命令，打開(kāi)DOM面板。按空格鍵或單擊DOM面板中與所需元素相鄰的標(biāo)簽，單擊標(biāo)簽左側(cè)的“添加元素”按鈕，在彈出的下拉菜單中選擇要插入元素的位置，如圖7-3所示。（2）根據(jù)需要選擇要插入元素的位置，例如要在圖片后插入元素，則選擇“在此項(xiàng)后插入”命令，將會(huì)插入并顯示占位符div標(biāo)簽。鍵入需要的標(biāo)簽名稱table，如圖7-4所示。此時(shí)，在頁(yè)面中將自動(dòng)插入一個(gè)寬為200像素，3行3列的表格，效果如圖7-5所示。圖7-3添加元素下拉菜單圖7-4鍵入標(biāo)簽名稱圖7-5使用DOM面板插入表格二、創(chuàng)建嵌套表格圖7-6嵌套表格嵌套表格是位于圖7-6嵌套表格若要?jiǎng)?chuàng)建嵌套表格，可以單擊現(xiàn)有表格中的一個(gè)單元格，再在單元格插入表格。例如，在一個(gè)3行3列的表格的中間單元格中插入一個(gè)3行3列的表格，就形成一個(gè)如圖7-6所示的嵌套表格。與插入表格類似，使用DOM面板也可以很輕松地插入嵌套表格。例如，要在第二行第二列單元格中嵌套一個(gè)3行3列的表格，可以執(zhí)行如下操作：（1）選中要嵌套表格的單元格，打開(kāi)DOM面板，單擊添加元素按鈕，在彈出的下拉菜單中選擇“插入子元素”命令，如圖7-7所示。（2）將自動(dòng)插入的div標(biāo)簽修改為table，如圖7-8所示，按Enter鍵提交。在DOM面板中可以很直觀地看到元素之間的結(jié)構(gòu)關(guān)系。嵌套后的表格效果如圖7-9所示。圖7-7插入子元素圖7-8嵌套的表格標(biāo)簽圖7-9嵌套的表格效果。任務(wù)2表格操作任務(wù)引入學(xué)會(huì)了創(chuàng)建表格和嵌套表格之后，接下來(lái)就可以對(duì)表格進(jìn)行相關(guān)的操作，那么如何選定表格和單元格，如何設(shè)置表格和單元格屬性，如何增加刪除行或列，如何拆分/合并單元格，如何在表格中添加內(nèi)容，如何對(duì)表格數(shù)據(jù)排序呢？知識(shí)準(zhǔn)備常用的表格操作包括選定表格和單元格、設(shè)置表格和單元格屬性、增加/刪除行或列、拆分/合并單元格，以及在表格中添加內(nèi)容、表格數(shù)據(jù)排序等內(nèi)容。下面分別進(jìn)行介紹。一、選定表格對(duì)象在對(duì)表格進(jìn)行操作之前，必須先選中表格元素?？梢砸淮芜x中整個(gè)表格、一行表格單元、一列表格單元或者幾個(gè)連續(xù)（或不連續(xù)）的單元格。1．選擇整個(gè)表格將光標(biāo)放置在表格的任一單元格中，然后在文檔窗口底部的標(biāo)簽選擇器中單擊<table>標(biāo)記，或執(zhí)行“編輯”｜“表格”｜“選擇表格”命令，選中整個(gè)表格。選中整個(gè)表格的效果如圖7-10左圖所示。DreamweaverCC2021支持在實(shí)時(shí)視圖中編輯表格選項(xiàng)。切換到實(shí)時(shí)視圖，單擊表格頂端或底部的“元素顯示”按鈕，即可選中整個(gè)表格，如圖7-10右圖所示。2．選中一行表格或一列單元格將光標(biāo)放置在一行表格單元的左邊界上，或?qū)⒐鈽?biāo)放置在一列表格單元的頂端，當(dāng)顯示黑色箭頭（或）時(shí)單擊鼠標(biāo)。選中一列表格單元的情況如圖7-11左圖所示。DreamweaverCC2021在實(shí)時(shí)視圖中引入了一個(gè)與設(shè)計(jì)視圖中類似的箭頭圖標(biāo)，利用該圖標(biāo)可以輕松地在實(shí)時(shí)視圖中選擇表格的一行或一列。在實(shí)時(shí)視圖中選中表格，將鼠標(biāo)指針懸停在要選擇的行或列的邊框，即可看到一個(gè)黑色箭頭，如圖7-11右圖所示，單擊即可選擇一行或一列。圖7-10選中整個(gè)表格圖7-11選中一列或一行表格單元3．選中多個(gè)連續(xù)的單元格單擊一個(gè)單元格，然后縱向或橫向拖動(dòng)鼠標(biāo)到另一個(gè)單元格；或單擊一個(gè)單元格，然后按住Shift鍵單擊另一個(gè)單元格，所有矩形區(qū)域內(nèi)的單元格都被選擇。選中多個(gè)連續(xù)單元格的情況如圖7-12左圖所示。在實(shí)時(shí)視圖中選中表格后，按下鼠標(biāo)左鍵拖動(dòng)，或按住Shift鍵單擊需要選擇的單元格，也可以選擇連續(xù)的單元格區(qū)域，效果如圖7-12右圖所示。4．選中多個(gè)不連續(xù)的單元格按住Ctrl鍵單擊多個(gè)要選擇的單元格。選中多個(gè)不連續(xù)單元格的效果如圖7-13所示。在實(shí)時(shí)視圖中選中表格后，按下鼠標(biāo)左鍵拖動(dòng)，或按住Ctrl鍵單擊需要選擇的單元格，也可以選擇不連續(xù)的單元格區(qū)域，效果如圖7-13右圖所示。圖7-12選中多個(gè)連續(xù)表格單元圖7-13選中多個(gè)不連續(xù)表格單元二、設(shè)置表格和單元格屬性1．表格的屬性面板選中表格，執(zhí)行“窗口”｜“屬性”命令顯示表格屬性面板，如圖7-14所示。圖7-14表格屬性面板表格屬性面板的各選項(xiàng)功能如下：“表格”：用于設(shè)置表格的名稱，該名稱可被腳本引用?！靶小保河糜谠O(shè)置表格的行數(shù)?！傲小保河糜谠O(shè)置表格的列數(shù)?！皩挕保河糜谠O(shè)置表格寬度?！疤畛洌–ellPad）”：用于設(shè)置單元格的內(nèi)容與邊框的間距?！伴g距（CellSpace）”：用于設(shè)置單元格之間的距離?！皩?duì)齊（Align）”：用于設(shè)置表格相對(duì)于文檔的對(duì)齊方式。在下拉列表中有4個(gè)選項(xiàng)：“左對(duì)齊”“居中對(duì)齊”“右對(duì)齊”和“默認(rèn)”?！邦悾–lass）”：用于設(shè)置應(yīng)用于表格的CSS樣式?！斑吙颍˙order）”：用于設(shè)置表格的邊框厚度，以像素為單位。設(shè)置為0時(shí)不顯示邊框。如果要在“邊框”設(shè)置為0時(shí)查看單元格和表格邊框，可以選擇“查看”|“可視化助理”|“表格邊框”命令。：清除列寬，單擊此按鈕將壓縮表格的列寬到最小值，但不影響單元格內(nèi)元素的顯示。圖7-15顯示了表格在清除列寬前后的效果。圖7-15清除列寬前后：清除行高，單擊此按鈕將壓縮表格的行高到最小值，但不影響單元格內(nèi)元素的顯示。：將表格寬度的單位轉(zhuǎn)化為像素（即固定大小）。：將表格寬度的單位轉(zhuǎn)化為百分比（即相對(duì)大小）。在DreamweaverCC2021的表格屬性面板中，不能直接設(shè)置表格的背景圖像和背景顏色。如果要將圖像設(shè)置為表格的背景，或設(shè)置表格的背景顏色，應(yīng)使用CSS設(shè)計(jì)器。有關(guān)表格背景圖像和背景顏色的具體設(shè)置方法，將在介紹單元格的屬性時(shí)一并介紹。2．單元格的屬性面板選中單元格，執(zhí)行“窗口”｜“屬性”命令顯示單元格屬性面板，如圖7-16所示。圖7-16單元格屬性面板單元格屬性面板分為上下兩部分。上半部分用于設(shè)置單元格內(nèi)容的屬性，下半部分用于設(shè)置單元格的屬性，各選項(xiàng)功能說(shuō)明如下：“水平”：設(shè)置單元格內(nèi)容的水平對(duì)齊方式。“垂直”：設(shè)置單元格內(nèi)容的垂直對(duì)齊方式。“寬”：用于設(shè)置單元格寬度（以像素為單位）。“高”：用于設(shè)置單元格高度（以像素為單位）?！安粨Q行”：防止單詞換行。選擇了此選項(xiàng)后，單元格將按需要加寬以適應(yīng)文本，而不是在新的一行繼續(xù)該文本。“標(biāo)題”：選中“標(biāo)題”，則當(dāng)前單元格為標(biāo)題單元格。表頭單元格內(nèi)的文字將以加粗黑體顯示?！氨尘邦伾保河糜谠O(shè)置單元格的背景顏色。單擊顏色按鈕，可在彈出的顏色選擇器中選擇一種顏色，或在文本框中輸入對(duì)應(yīng)于某種顏色的代碼。：合并單元格，選中多個(gè)單元格時(shí)可用。將多個(gè)單元格合并為一個(gè)單元格。：拆分單元格，將單元格拆分為多行或多列。與文本的屬性面板類似，單元格的屬性面板也分為HTML屬性設(shè)置面板和CSS屬性設(shè)置面板，圖7-17所示為CSS屬性設(shè)置面板。圖7-17單元格CSS屬性設(shè)置面板從上圖可以看出，在DreamweaverCC2021的單元格屬性面板上，不能直接設(shè)置單元格的背景圖像，需要定義CSS規(guī)則進(jìn)行指定。案例——設(shè)置單元格背景圖像下面通過(guò)一個(gè)簡(jiǎn)單示例，介紹在DreamweaverCC2021中新建CSS規(guī)則設(shè)置單元格背景圖像的操作步驟。（1）執(zhí)行“插入”｜“表格”菜單命令，在彈出的“表格”對(duì)話框中設(shè)置表格的寬度為300像素，行數(shù)為3，列數(shù)也為3，邊框粗細(xì)為1。（2）將光標(biāo)置于第一行第一列的單元格中，右擊彈出快捷菜單，選擇“CSS樣式”｜“新建”命令，如圖7-18所示，打開(kāi)“新建CSS規(guī)則”對(duì)話框，如圖7-19所示。圖7-18快捷菜單圖7-19“新建CSS規(guī)則”對(duì)話框（3）在“選擇器類型”下拉列表中選擇“標(biāo)簽”，“選擇器名稱”選擇td，“規(guī)則定義”選擇“僅限該文檔”。然后單擊“確定”按鈕打開(kāi)對(duì)應(yīng)的規(guī)則定義對(duì)話框。（4）在對(duì)話框左側(cè)的“分類”列表中選擇“背景”，然后單擊“背景圖像”右側(cè)的“瀏覽”按鈕，在彈出的資源對(duì)話框中選擇喜歡的背景圖片。單擊“確定”按鈕關(guān)閉對(duì)話框。此時(shí)，在文檔窗口中可以看到表格中所有的單元格都自動(dòng)應(yīng)用了選擇的背景圖片。效果如圖7-20所示。如果希望不同的單元格應(yīng)用不同的背景圖像，則選中要設(shè)置背景圖像的單元格之后，在上述步驟中的第（3）的“選擇器類型”下拉列表中選擇“類”，然后在“選擇器名稱”中鍵入名稱，如.background1。效果如圖7-21所示。圖7-20設(shè)置單元格背景圖像圖7-21設(shè)置單元格背景圖像表格的背景圖像或背景顏色設(shè)置方法與此相同，不同的是，選擇器為“標(biāo)簽”時(shí)，標(biāo)簽應(yīng)選擇table。注意使用屬性面板更改表格和表格元素的屬性時(shí)，需要注意表格格式設(shè)置的優(yōu)先順序。單元格格式設(shè)置優(yōu)先于行格式設(shè)置，行格式設(shè)置又優(yōu)先于表格格式設(shè)置。例如，將單個(gè)單元格的背景顏色設(shè)置為藍(lán)色，然后將整個(gè)表格的背景顏色設(shè)置為黃色，則藍(lán)色單元格不會(huì)變?yōu)辄S色，因?yàn)閱卧窀袷皆O(shè)置優(yōu)先于表格格式設(shè)置。三、擴(kuò)展表格模式通常情況下，表格是在“標(biāo)準(zhǔn)”模式下直接插入的，最初的用途是顯示表格式數(shù)據(jù)。雖然它也能任意改變大小和行列，但在頁(yè)面中編輯表格和表格中的數(shù)據(jù)并不方便。“擴(kuò)展表格”模式臨時(shí)向文檔中的所有表格添加單元格邊距和間距，并且增加表格的邊框，使編輯操作更加容易。案例——切換表格模式下面通過(guò)一個(gè)簡(jiǎn)單示例介紹切換到表格“擴(kuò)展”模式下的具體操作步驟。（1）由于在“代碼”視圖下無(wú)法切換到表格的“擴(kuò)展”模式，所以應(yīng)先將當(dāng)前文檔窗口的視圖切換到“設(shè)計(jì)”視圖或“拆分”視圖。（2）在文檔窗口插入一個(gè)表格，如圖7-22所示。（3）將鼠標(biāo)放置在任一單元格中，單擊鼠標(biāo)右鍵彈出快捷菜單，執(zhí)行“表格”｜“擴(kuò)展表格模式”命令，如圖7-23所示。圖7-22標(biāo)準(zhǔn)模式下的表格圖7-23執(zhí)行擴(kuò)展模式此時(shí)，文檔窗口的頂部會(huì)出現(xiàn)標(biāo)有“擴(kuò)展表格模式”的橫條，且文檔窗口中的所有表格自動(dòng)添加了單元格邊距與間距，并增加表格邊框，如圖7-24所示。圖7-24表格的擴(kuò)展模式利用擴(kuò)展模式，用戶可以選擇表格中的項(xiàng)目或者精確地放置插入點(diǎn)。例如，可以將插入點(diǎn)放置在圖像的左邊或右邊，從而避免無(wú)意中選中該圖像或表格單元格。提示一旦做出選擇或放置插入點(diǎn)，就應(yīng)該回到“設(shè)計(jì)”視圖的“標(biāo)準(zhǔn)”模式下進(jìn)行編輯。諸如調(diào)整大小之類的可視操作在“擴(kuò)展表格”模式中不會(huì)產(chǎn)生預(yù)期效果。如果要退出擴(kuò)展表格模式，可以執(zhí)行以下操作之一：?jiǎn)螕粑臋n窗口頂部“擴(kuò)展表格模式”右側(cè)的“退出”。將鼠標(biāo)放置在任一單元格中，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中執(zhí)行“表格”｜“擴(kuò)展表格模式”命令。。四、增加、刪除行或列在DreamweaverCC2021中增加、刪除行或列非常簡(jiǎn)單。下面通過(guò)一個(gè)簡(jiǎn)單示例介紹這些操作的具體步驟。本例首先創(chuàng)建一張表格，然后進(jìn)行增加、刪除行或列的操作。（1）切換到“HTML”插入面板，單擊“表格”圖標(biāo)按鈕，或執(zhí)行“插入”｜“表格”命令，彈出“表格”對(duì)話框。（2）在“行數(shù)”文本框中輸入表格的行數(shù)4。在“列數(shù)”文本框中輸入表格列數(shù)5，其余選項(xiàng)保持默認(rèn)值。單擊“確定”按鈕關(guān)閉對(duì)話框，然后輸入文本，如圖7-25所示。（3）將光標(biāo)定位于第3行的任一單元格中，通過(guò)以下方法之一刪除一行：執(zhí)行“編輯”｜“表格”｜“刪除行”命令，刪除表格第3行。在單元格上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中執(zhí)行“表格”｜“刪除行”命令，刪除表格第3行。將光標(biāo)放置在第3行表格單元的左邊界上，當(dāng)黑色箭頭出現(xiàn)時(shí)單擊鼠標(biāo)，選中表格第3行，然后按Delete鍵刪除行。切換到實(shí)時(shí)視圖，選中表格第3行，然后按Delete鍵刪除選定行。刪除第3行后的效果，如圖7-26所示。（4）將光標(biāo)定位于第2列的任一單元格中，通過(guò)以下方法之一刪除一列：執(zhí)行“編輯”｜“表格”｜“刪除列”命令，刪除表格第2列。在單元格上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中執(zhí)行“表格”｜“刪除列”命令，刪除表格第2列。將光標(biāo)放置在第2列表格單元的上邊界上，當(dāng)黑色箭頭出現(xiàn)時(shí)單擊鼠標(biāo)，選中表格第2列，然后按Delete鍵。切換到實(shí)時(shí)視圖，選中表格第2列，然后按Delete鍵。刪除第2列后的效果如圖7-27所示。圖7-24創(chuàng)建表格圖7-25刪除第3行圖7-26刪除第2列（5）用上一步同樣的方法刪除第3列和第4列。此時(shí)效果如圖7-27所示。（6）將光標(biāo)定位于數(shù)字為2.5的單元格，通過(guò)以下方法之一增加一行：執(zhí)行“編輯”｜“表格”｜“插入行”命令。在單元格上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中執(zhí)行“表格”｜“插入行”命令。在實(shí)時(shí)視圖中選中單元格，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“插入行”命令。插入空行后的效果如圖7-28所示。（7）將光標(biāo)定位于數(shù)字為1.5的單元格，通過(guò)以下方法之一增加一列：執(zhí)行“編輯”｜“表格”｜“插入列”命令。在單元格上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中執(zhí)行“表格”｜“插入列”命令。在實(shí)時(shí)視圖中選中單元格，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“插入列”命令。插入空列后的最終效果如圖7-29所示。圖7-27刪除第3、4列圖7-28插入空白行圖7-29實(shí)例制作結(jié)果五、拆分、合并單元格在DreamweaverCC2021中拆分、合并單元格也非常簡(jiǎn)單。案例——拆分、合并單元格下面通過(guò)一個(gè)簡(jiǎn)單示例介紹這些操作的具體步驟。本例首先創(chuàng)建一張表格，如圖7-30所示，然后進(jìn)行拆分、合并單元格操作，最終實(shí)現(xiàn)圖7-31的效果。圖7-30插入表格圖7-31操作結(jié)果（1）在文檔中插入如圖7-30所示的表格。（2）選中數(shù)字分別為1.1和1.2的單元格。（3）通過(guò)以下方法之一合并這兩個(gè)單元格：?jiǎn)螕魧傩悦姘逯械摹昂喜卧瘛卑粹o。執(zhí)行“編輯”｜“表格”｜“合并單元格”命令。在選中的單元格上單擊鼠標(biāo)右鍵，在彈出的上下文菜單中執(zhí)行“表格”｜“合并單元格”命令。在實(shí)時(shí)視圖中選中單元格，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“合并單元格”命令。這時(shí)原來(lái)的兩個(gè)單元格就合并為一個(gè)，如圖7-32所示。（4）同樣辦法合并數(shù)字為2.2和3.2的單元格，操作的結(jié)果如圖7-33所示。（5）將光標(biāo)定位于數(shù)字為1.3的單元格，通過(guò)以下方法之一打開(kāi)如圖7-34所示的“拆分單元格”對(duì)話框。圖7-32合并單元格（1）圖7-33合并單元格（2）圖7-34“拆分單元格”對(duì)話框單擊屬性面板中的“拆分單元格”按鈕。執(zhí)行“編輯”｜“表格”｜“拆分單元格”命令。在選中的單元格上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中執(zhí)行“表格”｜“拆分圖7-35拆分單元格1.3單元格圖7-35拆分單元格1.3在實(shí)時(shí)視圖中選中單元格，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“拆分單元格”命令。（6）在對(duì)話框中選擇“把單元格拆分為行”，在“行數(shù)”文本框中輸入2。單擊“確定”按鈕完成單元格拆分，結(jié)果如圖7-35所示。六、在表格中添加內(nèi)容在文檔中插入表格后，就可以在表格中輸入各種數(shù)據(jù)了。若要將圖像、Flash動(dòng)畫或其他媒體插入到單元格中，應(yīng)先單擊單元格，將光標(biāo)放置在需要插入數(shù)據(jù)的單元格中，從“插入”菜單或“插入”面板中選擇相應(yīng)的選項(xiàng)即可。若要插入文本，可以先將文本復(fù)制到剪貼板，然后粘貼在單元格內(nèi)；或者直接在單元格內(nèi)輸入數(shù)據(jù)。按Tab鍵可以在單元格之間移動(dòng)。若要使表格中的數(shù)據(jù)對(duì)齊，應(yīng)盡量使用單元格屬性面板下半部分的“水平”和“垂直”選項(xiàng)，要避免使用屬性面板上半部分的對(duì)齊屬性。案例——在表格中添加內(nèi)容下面以制作圖7-36為例，介紹在表格中添加內(nèi)容的操作步驟。圖7-36實(shí)例效果（1）單擊“HTML”插入面板中的“表格”按鈕，插入一張2行2列，寬700像素，標(biāo)題顯示方式為“頂部”的表格。（2）選中第一行單元格，設(shè)置單元格內(nèi)容水平對(duì)齊方式為“居中”，垂直對(duì)齊方式為“居中”。將光標(biāo)定位在表格第一行第一列單元格，輸入文字“照片”，用同樣的方法在第二行輸入“拍攝日期”。（3）將光標(biāo)定位在第二行第一列單元格，執(zhí)行“插入”|“圖像”命令，在彈出的對(duì)話框中選擇圖像。（4）將光標(biāo)定位在第二行第二列單元格內(nèi)，執(zhí)行“插入”|“HTML”|“日期”命令，在彈出的對(duì)話框中選擇日期格式，單擊“確定”按鈕關(guān)閉對(duì)話框。（5）打開(kāi)CSS設(shè)計(jì)器面板，在頁(yè)面中定義CSS規(guī)則.bg，設(shè)置單元格的背景圖像。將光標(biāo)定位在第二行第二列單元格中，在屬性面板上的“目標(biāo)規(guī)則”下拉列表中選擇定義的CSS規(guī)則.bg。（6）保存文件，在瀏覽器預(yù)覽頁(yè)面。七、復(fù)制、粘貼單元格在DreamweaverCC2021中，可以非常靈活地復(fù)制、粘貼單元格?？梢砸淮沃粡?fù)制、粘貼一個(gè)單元格，也可以一次復(fù)制、粘貼一行、一列乃至多行多列單元格。但不能復(fù)制不是矩形的區(qū)域。復(fù)制及粘貼單元格的步驟如下：（1）選擇表格中的一個(gè)或多個(gè)單元格。所選的單元格必須是連續(xù)的，并且形狀必須為矩形。（2）鼠標(biāo)右擊選中的單元格，在彈出的上下文菜單中執(zhí)行“拷貝”命令。（3）選擇要粘貼單元格的位置。若要用剪貼板中的單元格替換現(xiàn)有的單元格，應(yīng)選擇一組與剪貼板上的單元格具有相同布局的現(xiàn)有單元格。例如，如果復(fù)制或剪切了一塊3×2的單元格，則可以選擇另一塊3×2的單元格，通過(guò)粘貼進(jìn)行替換。若要在特定單元格所在行粘貼一整行單元格，則單擊該單元格。若要在特定單元格左側(cè)粘貼一整列單元格，則單擊該單元格。若要用粘貼的單元格創(chuàng)建一個(gè)新表格，應(yīng)將插入點(diǎn)放置在表格之外。（4）將光標(biāo)定位于目標(biāo)表格中，鼠標(biāo)右擊目標(biāo)單元格，在彈出的快捷菜單中執(zhí)行“粘貼”命令，完成粘貼。例如，要把圖7-37選中的內(nèi)容粘貼到圖7-38表格的相同位置，可以把選中內(nèi)容復(fù)制到剪貼板，然后把光標(biāo)定位到目標(biāo)到的第一行第一列單元格內(nèi)，執(zhí)行“粘貼”命令。圖7-37源表格圖7-38目標(biāo)表格粘貼完成后的目標(biāo)表格如圖7-39所示。如果在目標(biāo)表格中粘貼時(shí)，目標(biāo)表格沒(méi)有足夠的列數(shù)來(lái)容納源單元格，將彈出出錯(cuò)信息，如圖7-40所示。警告目標(biāo)表格沒(méi)有足夠的單元格，無(wú)法完成粘貼動(dòng)作。圖7-39粘貼結(jié)果圖7-40出錯(cuò)信息提示如果剪貼板中的單元格不到一整行或一整列，并且單擊某個(gè)單元格然后粘貼剪貼板中的單元格，則所單擊的單元格和與它相鄰的單元格可能被粘貼的單元格替換（根據(jù)它們?cè)诒砀裰械奈恢茫Ｈ绻x擇了整行或整列，然后選擇“編輯”|“剪切”，則將從表格中刪除整個(gè)行或列，而不僅僅是單元格的內(nèi)容。八、導(dǎo)出/導(dǎo)入表格數(shù)據(jù)在DreamweaverCC2021中建立的表格，可以保存到一個(gè)文本文件中，需要時(shí)再?gòu)奈募袑?dǎo)入表格數(shù)據(jù)。下面對(duì)表格的導(dǎo)出和導(dǎo)入操作分別進(jìn)行說(shuō)明。1．輸出表格數(shù)據(jù)將表格數(shù)據(jù)導(dǎo)出為文本文件的具體操作步驟如下：（1）在文檔窗口中創(chuàng)建一個(gè)表格，在表格中輸入數(shù)據(jù)，如圖7-41所示。（2）將光標(biāo)放置在表格中或選中表格。執(zhí)行“文件”｜“導(dǎo)出”｜“表格”命令。彈出“導(dǎo)出表格”對(duì)話框，如圖7-42所示。（3）在“定界符”下拉列表中選擇一種表格數(shù)據(jù)輸出到文本文件后的分隔符?！癟ab”表示使用制表符作為數(shù)據(jù)的分隔符，該項(xiàng)是默認(rèn)設(shè)置?！翱瞻祖I”表示使用空格作為數(shù)據(jù)的分隔符?！岸狐c(diǎn)”表示使用逗號(hào)作為數(shù)據(jù)的分隔符?！胺痔?hào)”表示使用分號(hào)作為數(shù)據(jù)的分隔符?！耙?hào)”表示使用引號(hào)作為數(shù)據(jù)的分隔符。（4）在“換行符”下拉列表中選擇一種表格數(shù)據(jù)輸出到文本文件后的換行方式?！癢indows”表示按Windows系統(tǒng)格式換行?！癕ac”表示按蘋果公司的系統(tǒng)格式換行?！癠NIX”表示按UNIX的系統(tǒng)格式換行。（5）設(shè)置完成之后，單擊“導(dǎo)出”按鈕，彈出“表格導(dǎo)出為”對(duì)話框。（6）輸入文件名table1.txt，然后單擊“保存”按鈕導(dǎo)出表格數(shù)據(jù)。使用“記事本”應(yīng)用程序打開(kāi)導(dǎo)出的文件，內(nèi)容如圖7-43所示。圖7-41表格圖7-42“導(dǎo)出表格”對(duì)話框圖7-43表格數(shù)據(jù)文件如果分隔符選擇逗號(hào)，導(dǎo)出文件時(shí)不指定文件擴(kuò)展名，系統(tǒng)將默認(rèn)導(dǎo)出逗號(hào)分隔值文件（.csv）。2．導(dǎo)入文本數(shù)據(jù)以前保存的表格數(shù)據(jù)或其他文本數(shù)據(jù)可以重新以表格的形式導(dǎo)入到Dreamweaver文檔中。將文本文件數(shù)據(jù)導(dǎo)入為表格數(shù)據(jù)的具體操作步驟如下：（1）在記事本中創(chuàng)建一組帶分隔符格式的數(shù)據(jù)，如圖7-44所示。（2）在Dreamweaver文檔窗口中執(zhí)行“文件”｜“導(dǎo)入”｜“表格式數(shù)據(jù)”命令。彈出“導(dǎo)入表格式數(shù)據(jù)”對(duì)話框，如圖7-45所示。對(duì)話框中各選項(xiàng)的功能介紹如下：“數(shù)據(jù)文件”：在“數(shù)據(jù)文件”文本框輸入要導(dǎo)入到表格的源數(shù)據(jù)文件地址和文件名，或單擊“瀏覽”按鈕，選擇數(shù)據(jù)源文件?！岸ń绶保涸谟疫叺南吕斜碇羞x擇數(shù)據(jù)源文件數(shù)據(jù)的分隔方式?！捌ヅ鋬?nèi)容”：選中此項(xiàng)，將根據(jù)數(shù)據(jù)長(zhǎng)度自動(dòng)決定表格寬度?！霸O(shè)置為”：設(shè)置表格寬度，并可在下拉列表中選擇“百分比”或“像素”?！皢卧襁吘唷保河糜谠O(shè)置表格內(nèi)單元格的內(nèi)容和邊框的間距?！皢卧耖g距”：用于設(shè)置表格內(nèi)單元格之間的距離。“格式化首行”：設(shè)置表格首行的格式。（3）在該對(duì)話框中設(shè)置需要引入數(shù)據(jù)的位置和輸入數(shù)據(jù)時(shí)所用的分隔符類型，本例選擇逗號(hào)“，”。（4）單擊“確定”按鈕。在Dreamweaver文檔窗口中出現(xiàn)數(shù)據(jù)表格，如圖7-46所示。圖7-44數(shù)據(jù)文件圖7-45“導(dǎo)入表格式數(shù)據(jù)”對(duì)話框圖7-46導(dǎo)入數(shù)據(jù)后的效果九、表格排序在表格中輸入內(nèi)容時(shí)，常常需要對(duì)表格內(nèi)容進(jìn)行排序。Dreamweaver2021提供了表格排序的功能。案例——表格排序下面以一個(gè)示例介紹表格排序的具體步驟。（1）新建一個(gè)表格，效果如圖7-47所示。（2）將光標(biāo)定位在表格內(nèi)，然后執(zhí)行“編輯”｜“表格”｜“排序表格”命令，彈出“排序表格”對(duì)話框，如圖7-48所示。圖7-47排序前的表格圖7-48“排序表格”對(duì)話框?qū)υ捒蛑懈鬟x項(xiàng)功能說(shuō)明如下：“排序按”：在“排序按”下拉列表中列出所有列號(hào)，用于確定對(duì)哪列的值進(jìn)行排序。“順序”：確定是“按字母順序”還是“按數(shù)字順序”，是以“升序”（A到Z，小數(shù)字到大數(shù)字）還是“降序”對(duì)列數(shù)據(jù)進(jìn)行排序?！霸侔础?“順序”：指定其他列的排序方法。在“再按”下拉列表中指定應(yīng)用第二種排序方法的列，并在“順序”下拉列表中指定第二種排序方法的排序順序?！芭判虬谝恍小保褐付ū砀竦牡谝恍惺欠駞⑴c排序。如果第一行是標(biāo)題，不應(yīng)移動(dòng)，則不選擇此選項(xiàng)?！芭判驑?biāo)題行”：指定使用與內(nèi)容行相同的條件對(duì)表格標(biāo)題部分（如果存在）中的所有行進(jìn)行排序。選中此項(xiàng)，排序后標(biāo)題行仍將保留在標(biāo)題部分，并仍顯示在表格的頂部?！芭判蚰_注行”：指定使用與內(nèi)容行相同的條件對(duì)表格腳注部分（如果存在）中的所有行進(jìn)行排序。選中此項(xiàng)，排序后腳注行仍將保留在腳注部分，并仍顯示在表格的底部?！巴瓿膳判蚝笏行蓄伾３植蛔儭保褐付ㄅ判蚝蟊砀裥械念伾３峙c排序前表格行的顏色一致。如果表格行使用兩種交替的顏色，則取消選擇此選項(xiàng)以確保排序后的表格仍具有顏色交替的行。（3）在“排序按”下拉列表框選擇需要進(jìn)行排序的列。本例按數(shù)學(xué)成績(jī)排序，各項(xiàng)具體設(shè)置如圖7-49所示。（4）單擊“確定”按鈕，完成操作。排序結(jié)果如圖7-50所示。圖7-49“排序表格”對(duì)話框圖7-50排序后的表格提示當(dāng)列的內(nèi)容是數(shù)字時(shí)，選擇“按數(shù)字順序”。如果對(duì)一組由一位或兩位數(shù)組成的數(shù)字按字母順序進(jìn)行排序，則會(huì)將這些數(shù)字作為單詞進(jìn)行排序（排序結(jié)果是1、10、2、20、3、30），而不是將它們作為數(shù)字進(jìn)行排序（排序結(jié)果是1、2、3、10、20、30）。綜合案例利用表格布局頁(yè)面DreamweaverCC2021提供了多種對(duì)網(wǎng)頁(yè)進(jìn)行布局的方法，利用表格設(shè)計(jì)網(wǎng)頁(yè)布局是其中常用的一種。本節(jié)將通過(guò)一個(gè)簡(jiǎn)單的例子介紹使用表格進(jìn)行頁(yè)面布局的方法。（1）新建一個(gè)HTML頁(yè)面。（2）切換到“插入”面板中的“HTML”面板，單擊表格圖標(biāo)，在彈出的對(duì)話框中設(shè)置表格的行為1，列為2，寬為850像素，然后單擊“確定”按鈕插入表格。（3）選中表格，在屬性面板上的“對(duì)齊”下拉列表中選擇“居中對(duì)齊”，使表格在頁(yè)面上居中。（4）選中第一行第二列的單元格，在屬性面板上設(shè)置其寬度為280像素，單元格內(nèi)容水平“右對(duì)齊”，垂直“