Dreamweaver-CS5實例教程-課件5

Dreamweaver-CS5實例教程-課件51第5章使用表格

本章簡介： 表格是網(wǎng)頁設計中一個非常有用的工具，它不僅可以將相關(guān)數(shù)據(jù)有序地排列在一起，還可以精確地定位文字、圖像等網(wǎng)頁元素在頁面中的位置，使得頁面在形式上豐富多彩又條理清楚，在組織上井然有序而不顯單調(diào)。使用表格進行頁面布局的最大好處是，即使瀏覽者改變計算機的分辨率也不會影響網(wǎng)頁的瀏覽效果。因此，表格是網(wǎng)站設計人員必須掌握的工具。表格運用得是否熟練，是劃分專業(yè)制作人士和業(yè)余愛好者的一個重要標準。第5章使用表格本章簡介：2課堂學習目標表格的簡單操作網(wǎng)頁中的數(shù)據(jù)表格復雜表格的排版利用表格進行頁面布局課堂學習目標表格的簡單操作35.1

表格的簡單操作課堂案例——時尚購物網(wǎng)頁表格的組成插入表格表格各元素的屬性在表格中插入內(nèi)容選擇表格元素復制、粘貼表格刪除表格和表格內(nèi)容縮放表格合并和拆分單元格增加和刪除表格的行和列5.1表格的簡單操作課堂案例——時尚購物網(wǎng)頁45.1.1課堂案例——時尚購物網(wǎng)頁

使用“表格”按鈕插入表格效果。使用“圖像”按鈕插入圖像。使用“合并所選單元格”按鈕合并單元格。使用“屬性”面板設置文字的顏色、對齊效果。 效果圖5.1.1課堂案例——時尚購物網(wǎng)頁 使用“表格”按鈕插入55.1.2表格的組成

表格中包含行、列、單元格、表格標題等元素。 效果圖5.1.2表格的組成 表格中包含行、列、單元格、表格標題65.1.3插入表格

要將相關(guān)數(shù)據(jù)有序地組織在一起，必須先插入表格，然后才能有效組織數(shù)據(jù)。 插入表格的具體操作步驟如下： （1）在“文檔”窗口中，將插入點放到合適的位置。 （2）通過以下幾種方法啟用“表格”對話框。 選擇“插入記錄>表格”命令。 單擊“插入”面板“常用”選項卡上的“表格”按鈕。 單擊“插入”布局“布局”選項卡面板上的“表格”按鈕。 （3）根據(jù)需要選擇新建表格的大小、行列數(shù)值等，單擊“確定”按鈕完成新建表格的設置。5.1.3插入表格 要將相關(guān)數(shù)據(jù)有序地組織在一起，必須75.1.4表格各元素的屬性

插入表格后，通過選擇不同的表格對象，可以在“屬性”面板中看到它們的各項參數(shù)，修改這些參數(shù)可以得到不同風格的表格。5.1.4表格各元素的屬性 插入表格后，通過選擇不同的85.1.5在表格中插入內(nèi)容

建立表格后，可以在表格中添加各種網(wǎng)頁元素，如文本、圖像和表格等。在表格中添加元素的操作非常簡單，只需根據(jù)設計要求選定單元格，然后插入網(wǎng)頁元素即可。一般當表格中插入內(nèi)容后，表格的尺寸會隨內(nèi)容的尺寸自動調(diào)整。當然，還可以利用單元格的屬性來調(diào)整其內(nèi)部元素的對齊方式和單元格的大小等。5.1.5在表格中插入內(nèi)容 建立表格后，可以在表格中添95.1.6選擇表格元素

先選擇表格元素，然后對其進行操作。一次可以選擇整個表格、多行或多列，也可以選擇一個或多個單元格。5.1.6選擇表格元素 先選擇表格元素，然后對其進行操作105.1.7復制、粘貼表格

在DreamweaverCS5中復制表格的操作如同在Word中一樣?？梢詫Ρ砀裰械亩鄠€單元格進行復制、剪切、粘貼操作，并保留原單元格的格式。也可以僅對單元格的內(nèi)容進行操作。5.1.7復制、粘貼表格 在DreamweaverC115.1.8刪除表格和表格內(nèi)容

刪除表格的操作包括刪除行或列，清除表格內(nèi)容。5.1.8刪除表格和表格內(nèi)容 刪除表格的操作包括刪除行或125.1.9縮放表格

創(chuàng)建表格后，可根據(jù)需要調(diào)整表格、行和列的大小。5.1.9縮放表格 創(chuàng)建表格后，可根據(jù)需要調(diào)整表格、行和135.1.10合并和拆分單元格

有的表格項需要幾行或幾列來說明，這時需要將多個單元格合并，生成一個跨多個列或行的單元格。5.1.10合并和拆分單元格 有的表格項需要幾行或幾列145.1.11增加和刪除表格的行和列

在實際工作中，隨著客觀環(huán)境的變化，表格中的項目也需要做相應的調(diào)整，通過選擇“修改>表格”中的相應子菜單命令，可添加、刪除行或列。5.1.11增加和刪除表格的行和列 在實際工作中，隨著155.2

網(wǎng)頁中的數(shù)據(jù)表格課堂案例——電子科技網(wǎng)頁導入和導出表格的數(shù)據(jù)排序表格5.2網(wǎng)頁中的數(shù)據(jù)表格課堂案例——電子科技網(wǎng)頁165.2.1課堂案例——電子科技網(wǎng)頁

使用“導入表格式數(shù)據(jù)”命令導入外部表格數(shù)據(jù)。使用“排序表格”命令將表格的數(shù)據(jù)排序。效果圖5.2.1課堂案例——電子科技網(wǎng)頁 使用“導入表格式數(shù)據(jù)17

有時需要將Word文檔中的內(nèi)容或Excel文檔中的表格數(shù)據(jù)導入到網(wǎng)頁中進行發(fā)布，或?qū)⒕W(wǎng)頁中的表格數(shù)據(jù)導出到Word文檔或Excel文檔中進行編輯，DreamweaverCS5提供了實現(xiàn)這種操作的功能。5.2.2導入和導出表格的數(shù)據(jù) 有時需要將Word文檔中的內(nèi)容或Excel文檔中的表格18

日常工作中，常常需要對無序的表格內(nèi)容進行排序，以便瀏覽者可以快速找到所需的數(shù)據(jù)。表格排序功能可以為網(wǎng)站設計者解決這一難題。 將插入點放到要排序的表格中，然后選擇“命令>排序表格”命令，彈出“排序表格”對話框，根據(jù)需要設置相應選項，單擊“應用”或“確定”按鈕完成設置。5.2.3排序表格 日常工作中，常常需要對無序的表格內(nèi)容進行排序，以便瀏覽19

當一個表格無法對網(wǎng)頁元素進行復雜的定位時，需要在表格的一個單元格中繼續(xù)插入表格，這叫做表格的嵌套。單元格中的表格是內(nèi)嵌入式表格，通過內(nèi)嵌入式表格可以將一個單元再分成許多行和列，而且可以無限地插入內(nèi)嵌入式表格，但是內(nèi)嵌入式表格越多，瀏覽時花費在下載頁面的時間越長，因此，內(nèi)嵌入式的表格最多不超過3層。5.3復雜表格的排版 當一個表格無法對網(wǎng)頁元素進行復雜的定位時，需要在表格的205.4課堂練習——設計家園網(wǎng)頁

使用“導入表格式數(shù)據(jù)”命令導入外部表格數(shù)據(jù)。使用“排序表格”命令將表格的數(shù)據(jù)排序。 效果圖5.4課堂練習——設計家園網(wǎng)頁 使用“導入表格式數(shù)據(jù)”命215.5課堂練習——百貨折扣網(wǎng)頁

使用“頁面屬性”命令設置頁面屬性。使用“圖像”和“表格”按鈕制作網(wǎng)頁效果。使用“屬性”面板設置單元格背景顏色。效果圖5.5課堂練習——百貨折扣網(wǎng)頁 使用“頁面屬性”命令225.6課后習題——手機頻道網(wǎng)頁

使用“頁面屬性”命令設置頁面屬性。使用“表格”按鈕插入表格效果。使用“圖像”按鈕插入圖像。效果圖5.6課后習題——手機頻道網(wǎng)頁 使用“頁面屬性”命令設置23Dreamweaver-CS5實例教程-課件524第5章使用表格

本章簡介： 表格是網(wǎng)頁設計中一個非常有用的工具，它不僅可以將相關(guān)數(shù)據(jù)有序地排列在一起，還可以精確地定位文字、圖像等網(wǎng)頁元素在頁面中的位置，使得頁面在形式上豐富多彩又條理清楚，在組織上井然有序而不顯單調(diào)。使用表格進行頁面布局的最大好處是，即使瀏覽者改變計算機的分辨率也不會影響網(wǎng)頁的瀏覽效果。因此，表格是網(wǎng)站設計人員必須掌握的工具。表格運用得是否熟練，是劃分專業(yè)制作人士和業(yè)余愛好者的一個重要標準。第5章使用表格本章簡介：25課堂學習目標表格的簡單操作網(wǎng)頁中的數(shù)據(jù)表格復雜表格的排版利用表格進行頁面布局課堂學習目標表格的簡單操作265.1

表格的簡單操作課堂案例——時尚購物網(wǎng)頁表格的組成插入表格表格各元素的屬性在表格中插入內(nèi)容選擇表格元素復制、粘貼表格刪除表格和表格內(nèi)容縮放表格合并和拆分單元格增加和刪除表格的行和列5.1表格的簡單操作課堂案例——時尚購物網(wǎng)頁275.1.1課堂案例——時尚購物網(wǎng)頁

使用“表格”按鈕插入表格效果。使用“圖像”按鈕插入圖像。使用“合并所選單元格”按鈕合并單元格。使用“屬性”面板設置文字的顏色、對齊效果。 效果圖5.1.1課堂案例——時尚購物網(wǎng)頁 使用“表格”按鈕插入285.1.2表格的組成

表格中包含行、列、單元格、表格標題等元素。 效果圖5.1.2表格的組成 表格中包含行、列、單元格、表格標題295.1.3插入表格

要將相關(guān)數(shù)據(jù)有序地組織在一起，必須先插入表格，然后才能有效組織數(shù)據(jù)。 插入表格的具體操作步驟如下： （1）在“文檔”窗口中，將插入點放到合適的位置。 （2）通過以下幾種方法啟用“表格”對話框。 選擇“插入記錄>表格”命令。 單擊“插入”面板“常用”選項卡上的“表格”按鈕。 單擊“插入”布局“布局”選項卡面板上的“表格”按鈕。 （3）根據(jù)需要選擇新建表格的大小、行列數(shù)值等，單擊“確定”按鈕完成新建表格的設置。5.1.3插入表格 要將相關(guān)數(shù)據(jù)有序地組織在一起，必須305.1.4表格各元素的屬性

插入表格后，通過選擇不同的表格對象，可以在“屬性”面板中看到它們的各項參數(shù)，修改這些參數(shù)可以得到不同風格的表格。5.1.4表格各元素的屬性 插入表格后，通過選擇不同的315.1.5在表格中插入內(nèi)容

建立表格后，可以在表格中添加各種網(wǎng)頁元素，如文本、圖像和表格等。在表格中添加元素的操作非常簡單，只需根據(jù)設計要求選定單元格，然后插入網(wǎng)頁元素即可。一般當表格中插入內(nèi)容后，表格的尺寸會隨內(nèi)容的尺寸自動調(diào)整。當然，還可以利用單元格的屬性來調(diào)整其內(nèi)部元素的對齊方式和單元格的大小等。5.1.5在表格中插入內(nèi)容 建立表格后，可以在表格中添325.1.6選擇表格元素

先選擇表格元素，然后對其進行操作。一次可以選擇整個表格、多行或多列，也可以選擇一個或多個單元格。5.1.6選擇表格元素 先選擇表格元素，然后對其進行操作335.1.7復制、粘貼表格

在DreamweaverCS5中復制表格的操作如同在Word中一樣?？梢詫Ρ砀裰械亩鄠€單元格進行復制、剪切、粘貼操作，并保留原單元格的格式。也可以僅對單元格的內(nèi)容進行操作。5.1.7復制、粘貼表格 在DreamweaverC345.1.8刪除表格和表格內(nèi)容

刪除表格的操作包括刪除行或列，清除表格內(nèi)容。5.1.8刪除表格和表格內(nèi)容 刪除表格的操作包括刪除行或355.1.9縮放表格

創(chuàng)建表格后，可根據(jù)需要調(diào)整表格、行和列的大小。5.1.9縮放表格 創(chuàng)建表格后，可根據(jù)需要調(diào)整表格、行和365.1.10合并和拆分單元格

有的表格項需要幾行或幾列來說明，這時需要將多個單元格合并，生成一個跨多個列或行的單元格。5.1.10合并和拆分單元格 有的表格項需要幾行或幾列375.1.11增加和刪除表格的行和列

在實際工作中，隨著客觀環(huán)境的變化，表格中的項目也需要做相應的調(diào)整，通過選擇“修改>表格”中的相應子菜單命令，可添加、刪除行或列。5.1.11增加和刪除表格的行和列 在實際工作中，隨著385.2

網(wǎng)頁中的數(shù)據(jù)表格課堂案例——電子科技網(wǎng)頁導入和導出表格的數(shù)據(jù)排序表格5.2網(wǎng)頁中的數(shù)據(jù)表格課堂案例——電子科技網(wǎng)頁395.2.1課堂案例——電子科技網(wǎng)頁

使用“導入表格式數(shù)據(jù)”命令導入外部表格數(shù)據(jù)。使用“排序表格”命令將表格的數(shù)據(jù)排序。效果圖5.2.1課堂案例——電子科技網(wǎng)頁 使用“導入表格式數(shù)據(jù)40

有時需要將Word文檔中的內(nèi)容或Excel文檔中的表格數(shù)據(jù)導入到網(wǎng)頁中進行發(fā)布，或?qū)⒕W(wǎng)頁中的表格數(shù)據(jù)導出到Word文檔或Excel文檔中進行編輯，DreamweaverCS5提供了實現(xiàn)這種操作的功能。5.2.2導入和導出表格的數(shù)據(jù) 有時需要將Word文檔中的內(nèi)容或Excel文檔中的表格41

日常工作中，常常需要對無序的表格內(nèi)容進行排序，以便瀏覽者可以快速找到所需的數(shù)據(jù)。表格排序功能可以為網(wǎng)站設計者解決這一難題。 將插入點放到要排序的表格中，然后選擇“命令>排序表格”命令，彈出“排序表格”對話框，根據(jù)需要設置相應選項，單擊“應用”或“確定”按鈕完成設置。5.2.3排序表格 日常工作中，常常需要對無序的表格內(nèi)容進行排序，以便瀏覽42

當一個表格無法對網(wǎng)頁元素進行復雜的定位時，需要在表格的一個單元格中繼續(xù)插入表格，這叫做表格的嵌套。單元格中的表格是內(nèi)嵌入式表格，通過內(nèi)嵌入式表格可以將一個單元再分成許多行和列，而且可以無限地插入內(nèi)嵌入式表格，但是內(nèi)嵌入式表格越多，瀏覽時花費在下載頁面的時間越長，因此，內(nèi)嵌入式的表格最多不超過3層。5.3復雜表格的排版 當一個表格無法對網(wǎng)頁元素進行復雜的定位時，需要在表格的435.4課堂練習——設計家園網(wǎng)頁

使用“導入表格式數(shù)據(jù)”命令導