項目七

用表格規劃網頁任務1

創建表格任務2表格操作任務1創建表格任務引入小明已經學會了在網頁中添加各種類型的內容，但是他又發現網頁是分為不同的區域進行分布的，如何對網頁的頁面進行合理的布局呢，通過請教同事了解到，在網頁中可以創建表格，通過對表格進行操作可以將網頁進行布局，那么首先應該學會如何在網頁中創建表格，以及如何在單元格中創建嵌套表格？知識準備一、創建表格、單元格在Dreamweaver中，利用表格可以方便地將數據、文本、圖片規范地顯示在頁面上，使網頁更加美觀、有條理。在HTML中，表格是很多優秀站點設計的整體標準，用表格格式化的頁面在不同平臺、不同分辨率的瀏覽器中都能保持布局和對齊。不過，表格有一個缺陷：它會使網頁顯示的速度變慢。盡管如此，表格在網頁布局中仍扮演著很重要的角色，是網頁設計者必須掌握的一個強大的工具。下面我們就介紹表格一些常用的操作。表格由三個基本部分組成：行、列和單元格。案例——創建表格下面以在網頁中插入一個3行3列的表格為例，介紹在網頁中創建表格的操作步驟。（1）在“插入”面板頂部的下拉菜單中單擊“HTML”標簽，切換到“HTML”插入面板。（2）單擊“表格”圖標按鈕，或執行“插入”｜“表格”菜單命令，彈出“表格”對話框，如圖所示。（3）在“行數”文本框中輸入表格的行數3。（4）單擊“確定”按鈕即可插入表格，最終制作結果如圖所示。“表格”對話框

插入的表格案例——使用DOM面板插入表格使用DreamweaverCC2021中的DOM面板也可以很便捷地在網頁中插入表格。方法如下：（1）執行“窗口”|“DOM”菜單命令，打開DOM面板。按空格鍵或單擊DOM面板中與所需元素相鄰的標簽，單擊標簽左側的“添加元素”按鈕，在彈出的下拉菜單中選擇要插入元素的位置，如圖所示。（2）根據需要選擇要插入元素的位置，例如要在圖片后插入元素，則選擇“在此項后插入”命令，將會插入并顯示占位符div標簽。

添加元素下拉菜單

鍵入標簽名稱

使用DOM面板插入表格二、創建嵌套表格嵌套表格是位于一個單元格中的表格。可以像對其他表格一樣對嵌套表格進行格式設置，但其寬度受它所在單元格的寬度的限制。若要創建嵌套表格，可以單擊現有表格中的一個單元格，再在單元格插入表格。例如，在一個3行3列的表格的中間單元格中插入一個3行3列的表格，就形成一個如圖所示的嵌套表格。與插入表格類似，使用DOM面板也可以很輕松地插入嵌套表格。例如，要在第二行第二列單元格中嵌套一個3行3列的表格，可以執行如下操作：（1）選中要嵌套表格的單元格，打開DOM面板，單擊添加元素按鈕，在彈出的下拉菜單中選擇“插入子元素”命令，如圖所示。（2）將自動插入的div標簽修改為table，如圖所示，按Enter鍵提交。在DOM面板中可以很直觀地看到元素之間的結構關系。嵌套后的表格效果如圖所示。嵌套表格插入子元素嵌套的表格標簽嵌套的表格效果。任務2表格操作任務引入學會了創建表格和嵌套表格之后，接下來就可以對表格進行相關的操作，那么如何選定表格和單元格，如何設置表格和單元格屬性，如何增加刪除行或列，如何拆分/合并單元格，如何在表格中添加內容，如何對表格數據排序呢？知識準備常用的表格操作包括選定表格和單元格、設置表格和單元格屬性、增加/刪除行或列、拆分/合并單元格，以及在表格中添加內容、表格數據排序等內容。下面分別進行介紹。一、選定表格對象在對表格進行操作之前，必須先選中表格元素。可以一次選中整個表格、一行表格單元、一列表格單元或者幾個連續（或不連續）的單元格。1．選擇整個表格將光標放置在表格的任一單元格中，然后在文檔窗口底部的標簽選擇器中單擊<table>標記，或執行“編輯”｜“表格”｜“選擇表格”命令，選中整個表格。選中整個表格的效果如圖左圖所示。2．選中一行表格或一列單元格將光標放置在一行表格單元的左邊界上，或將光標放置在一列表格單元的頂端，當顯示黑色箭頭（或）時單擊鼠標。選中一列表格單元的情況如圖左圖所示。3．選中多個連續的單元格單擊一個單元格，然后縱向或橫向拖動鼠標到另一個單元格；或單擊一個單元格，然后按住Shift鍵單擊另一個單元格，所有矩形區域內的單元格都被選擇。4．選中多個不連續的單元格按住Ctrl鍵單擊多個要選擇的單元格。選中多個不連續單元格的效果如圖所示。

選中整個表格選中一列或一行表格單元選中多個連續表格單元

選中多個不連續表格單元二、設置表格和單元格屬性1．表格的屬性面板選中表格，執行“窗口”｜“屬性”命令顯示表格屬性面板，如圖所示。2．單元格的屬性面板選中單元格，執行“窗口”｜“屬性”命令顯示單元格屬性面板，如圖所示。

表格屬性面板清除列寬前后

單元格屬性面板單元格CSS屬性設置面板案例——設置單元格背景圖像下面通過一個簡單示例，介紹在DreamweaverCC2021中新建CSS規則設置單元格背景圖像的操作步驟。（1）執行“插入”｜“表格”菜單命令，在彈出的“表格”對話框中設置表格的寬度為300像素，行數為3，列數也為3，邊框粗細為1。（2）將光標置于第一行第一列的單元格中，右擊彈出快捷菜單，選擇“CSS樣式”｜“新建”命令，如圖所示，打開“新建CSS規則”對話框，如圖所示。快捷菜單

“新建CSS規則”對話框（3）在“選擇器類型”下拉列表中選擇“標簽”，“選擇器名稱”選擇td，“規則定義”選擇“僅限該文檔”。然后單擊“確定”按鈕打開對應的規則定義對話框。（4）在對話框左側的“分類”列表中選擇“背景”，然后單擊“背景圖像”右側的“瀏覽”按鈕，在彈出的資源對話框中選擇喜歡的背景圖片。單擊“確定”按鈕關閉對話框。三、擴展表格模式通常情況下，表格是在“標準”模式下直接插入的，最初的用途是顯示表格式數據。“擴展表格”模式臨時向文檔中的所有表格添加單元格邊距和間距，并且增加表格的邊框，使編輯操作更加容易。設置單元格背景圖像

設置單元格背景圖像案例——切換表格模式下面通過一個簡單示例介紹切換到表格“擴展”模式下的具體操作步驟。（1）由于在“代碼”視圖下無法切換到表格的“擴展”模式，所以應先將當前文檔窗口的視圖切換到“設計”視圖或“拆分”視圖。（2）在文檔窗口插入一個表格，如圖所示。（3）將鼠標放置在任一單元格中，單擊鼠標右鍵彈出快捷菜單，執行“表格”｜“擴展表格模式”命令，如圖所示。

標準模式下的表格

執行擴展模式表格的擴展模式四、增加、刪除行或列在DreamweaverCC2021中增加、刪除行或列非常簡單。下面通過一個簡單示例介紹這些操作的具體步驟。本例首先創建一張表格，然后進行增加、刪除行或列的操作。（1）切換到“HTML”插入面板，單擊“表格”圖標按鈕，或執行“插入”｜“表格”命令，彈出“表格”對話框。（2）在“行數”文本框中輸入表格的行數4。在“列數”文本框中輸入表格列數5，其余選項保持默認值。單擊“確定”按鈕關閉對話框，然后輸入文本，如圖所示。（3）將光標定位于第3行的任一單元格中，通過以下方法之一刪除一行：執行“編輯”｜“表格”｜“刪除行”命令，刪除表格第3行。在單元格上單擊鼠標右鍵，在彈出的快捷菜單中執行“表格”｜“刪除行”命令，刪除表格第3行。將光標放置在第3行表格單元的左邊界上，當黑色箭頭出現時單擊鼠標，選中表格第3行，然后按Delete鍵刪除行。切換到實時視圖，選中表格第3行，然后按Delete鍵刪除選定行。創建表格

刪除第3行

刪除第2列（5）用上一步同樣的方法刪除第3列和第4列。此時效果如圖7-27所示。（6）將光標定位于數字為2.5的單元格，通過以下方法之一增加一行：執行“編輯”｜“表格”｜“插入行”命令。（7）將光標定位于數字為1.5的單元格，通過以下方法之一增加一列：

執行“編輯”｜“表格”｜“插入列”命令。在單元格上單擊鼠標右鍵，在彈出的快捷菜單中執行“表格”｜“插入列”命令。在實時視圖中選中單元格，單擊鼠標右鍵，在彈出的快捷菜單中選擇“插入列”命令。插入空列后的最終效果如圖所示。五、拆分、合并單元格在DreamweaverCC2021中拆分、合并單元格也非常簡單。

刪除第3、4列

插入空白行

實例制作結果案例——拆分、合并單元格下面通過一個簡單示例介紹這些操作的具體步驟。本例首先創建一張表格，如圖所示，然后進行拆分、合并單元格操作，最終實現圖的效果。（1）在文檔中插入如圖7-30所示的表格。（2）選中數字分別為1.1和1.2的單元格。（3）通過以下方法之一合并這兩個單元格：（4）同樣辦法合并數字為2.2和3.2的單元格，操作的結果如圖所示。（5）將光標定位于數字為1.3的單元格，通過以下方法之一打開如圖7-34所示的“拆分單元格”對話框。（6）在對話框中選擇“把單元格拆分為行”，在“行數”文本框中輸入2。單擊“確定”按鈕完成單元格拆分，結果如圖所示。

插入表格

操作結果合并單元格（1）

合并單元格（2）

“拆分單元格”對話框六、在表格中添加內容在文檔中插入表格后，就可以在表格中輸入各種數據了。若要將圖像、Flash動畫或其他媒體插入到單元格中，應先單擊單元格，將光標放置在需要插入數據的單元格中，從“插入”菜單或“插入”面板中選擇相應的選項即可。若要插入文本，可以先將文本復制到剪貼板，然后粘貼在單元格內；或者直接在單元格內輸入數據。按Tab鍵可以在單元格之間移動。若要使表格中的數據對齊，應盡量使用單元格屬性面板下半部分的“水平”和“垂直”選項，要避免使用屬性面板上半部分的對齊屬性。案例——在表格中添加內容下面以制作圖為例，介紹在表格中添加內容的操作步驟。（1）單擊“HTML”插入面板中的“表格”按鈕，插入一張2行2列，寬700像素，標題顯示方式為“頂部”的表格。（2）選中第一行單元格，設置單元格內容水平對齊方式為“居中”，垂直對齊方式為“居中”。（3）將光標定位在第二行第一列單元格，執行“插入”|“圖像”命令，在彈出的對話框中選擇圖像。（4）將光標定位在第二行第二列單元格內，執行“插入”|“HTML”|“日期”命令，在彈出的對話框中選擇日期格式，單擊“確定”按鈕關閉對話框。（5）打開CSS設計器面板，在頁面中定義CSS規則.bg，設置單元格的背景圖像。（6）保存文件，在瀏覽器預覽頁面。七、復制、粘貼單元格在DreamweaverCC2021中，可以非常靈活地復制、粘貼單元格。可以一次只復制、粘貼一個單元格，也可以一次復制、粘貼一行、一列乃至多行多列單元格。但不能復制不是矩形的區域。復制及粘貼單元格的步驟如下：（1）選擇表格中的一個或多個單元格。所選的單元格必須是連續的，并且形狀必須為矩形。（2）鼠標右擊選中的單元格，在彈出的上下文菜單中執行“拷貝”命令。（3）選擇要粘貼單元格的位置。（4）將光標定位于目標表格中，鼠標右擊目標單元格，在彈出的快捷菜單中執行“粘貼”命令，完成粘貼。源表格

目標表格粘貼結果出錯信息八、導出/導入表格數據在DreamweaverCC2021中建立的表格，可以保存到一個文本文件中，需要時再從文件中導入表格數據。下面對表格的導出和導入操作分別進行說明。1．輸出表格數據將表格數據導出為文本文件的具體操作步驟如下：（1）在文檔窗口中創建一個表格，在表格中輸入數據，如圖7-41所示。（2）將光標放置在表格中或選中表格。執行“文件”｜“導出”｜“表格”命令。彈出“導出表格”對話框，如圖所示。（3）在“定界符”下拉列表中選擇一種表格數據輸出到文本文件后的分隔符。（4）在“換行符”下拉列表中選擇一種表格數據輸出到文本文件后的換行方式。（5）設置完成之后，單擊“導出”按鈕，彈出“表格導出為”對話框。（6）輸入文件名table1.txt，然后單擊“保存”按鈕導出表格數據。

表格

“導出表格”對話框

表格數據文件2．導入文本數據以前保存的表格數據或其他文本數據可以重新以表格的形式導入到Dreamweaver文檔中。將文本文件數據導入為表格數據的具體操作步驟如下：（1）在記事本中創建一組帶分隔符格式的數據，如圖所示。（2）在Dreamweaver文檔窗口中執行“文件”｜“導入”｜“表格式數據”命令。彈出“導入表格式數據”對話框，如圖所示。（3）在該對話框中設置需要引入數據的位置和輸入數據時所用的分隔符類型，本例選擇逗號“，”。（4）單擊“確定”按鈕。在Dreamweaver文檔窗口中出現數據表格，如圖所示。九、表格排序在表格中輸入內容時，常常需要對表格內容進行排序。Dreamweaver2021提供了表格排序的功能。數據文件

“導入表格式數據”對話框

導入數據后的效果案例——表格排序下面以一個示例介紹表格排序的具體步驟。（1）新建一個表格，效果如圖所示。（2）將光標定位在表格內，然后執行“編輯”｜“表格”｜“排序表格”命令，彈出“排序表格”對話框，如圖所示。（3）在“排序按”下拉列表框選擇需要進行排序的列。本例按數學成績排序，各項具體設置如圖所示。（4）單擊“確定”按鈕，完成操作。排序結果如圖所示。排序前的表格

“排序表格”對話框“排序表格”對話框排序后的表格綜合案例利用表格布局頁面DreamweaverCC2021提供了多種對網頁進行布局的方法，利用表格設計網頁布局是其中常用的一種。本節將通過一個簡單的例子介紹使用表格進行頁面布局的方法。（1）新建一個HTML頁面。（2）切換到“插入”面板中的“HTML”面板，單擊表格圖標，在彈出的對話框中設置表格的行為1，列為2，寬為850像素，然后單擊“確定”按鈕插入表格。（3）選中表格，在屬性面板上的“對齊”下拉列表中選擇“居中對齊”，使表格在頁面上居中。（4）選中第一行第二列的單元格，在屬性面板上設置其寬度為280像素，單元格內容水平“右對齊”，垂直“底部”對齊，然后執行“插入”|“圖像”命令，在單元格中插入一張圖片。效果如圖所示。（5）將光標定位在第一行第一列的單元格中，單擊屬性面板上的“拆分單元格”按鈕，在彈出的對話框中將單元格拆分為五行一列。（5）將光標定位在第一行第一列的單元格中，單擊屬性面板上的“拆分單元格”按鈕，在彈出的對話框中將單元格拆分為五行一列。（6）將光標定位在拆分后的第一行單元格中，輸入文本“welcome”。（7）將光標定位在拆分后的第二行單元格中，輸入文本“財經”，單元格高度為45。然后在屬性面板上設置單元格水平對齊方式為“左對齊”，垂直“居中”對齊。（8）將光標定位在拆分后的第三行單元格中，單擊屬性面板上的“拆分單元格