1、授課人：何蘊(yùn)婷授課人：何蘊(yùn)婷EMAIL：網(wǎng)頁設(shè)計（網(wǎng)頁設(shè)計（5 5）在網(wǎng)頁中應(yīng)用表格 與框架內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途1 1、通過實(shí)訓(xùn)項目熟練掌握在網(wǎng)頁中插入、通過實(shí)訓(xùn)項目熟練掌握在網(wǎng)頁中插入表格。表格。2 2、通過實(shí)訓(xùn)項目了解框架頁面的結(jié)構(gòu)。、通過實(shí)訓(xùn)項目了解框架頁面的結(jié)構(gòu)。內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途1、在網(wǎng)頁中插入表格。、在網(wǎng)頁中插入表格。2、建立框架結(jié)構(gòu)的網(wǎng)頁。、建立框架結(jié)構(gòu)的網(wǎng)頁。內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途 設(shè)置頁面效果如圖內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣

2、傳用途內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途 1. 1.創(chuàng)建網(wǎng)頁，并插入表格創(chuàng)建網(wǎng)頁，并插入表格（1 1）在學(xué)生盤文件夾）在學(xué)生盤文件夾14ec14ec下的文件夾下的文件夾“website”website”中新建文件夾中新建文件夾“shixun5”shixun5” （2 2）在文件夾）在文件夾“shixun5”shixun5”中新建網(wǎng)頁，中新建網(wǎng)頁，文件名為文件名為resume.htmresume.htm。 （3 3）給網(wǎng)頁插入表格（）給網(wǎng)頁插入表格（DWDW插入的方法）插入的方法）語法：語法： 我的個人簡歷我的個人簡歷 表格中的行表格中的行表格中的單元格表格中的單元格

3、內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途 2. 2.給網(wǎng)頁中的表格設(shè)置樣式給網(wǎng)頁中的表格設(shè)置樣式（1 1）表格的寬度和高度（相關(guān)屬性）表格的寬度和高度（相關(guān)屬性width ，height）（2 2）表格的邊界間距（）表格的邊界間距（相關(guān)屬性相關(guān)屬性 border，cellpadding）（3 3）表格的背景（相關(guān)屬性）表格的背景（相關(guān)屬性background ，），）內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途 3. 3.建立框架結(jié)構(gòu)的網(wǎng)頁建立框架結(jié)構(gòu)的網(wǎng)頁主要用到框架的創(chuàng)建、框架和框架集的屬性設(shè)置、框架和框架集的保存、不能顯示框架的處理等知識。本頁面分

4、為上中下3個框架來制作，在制作之前應(yīng)先制作好各框架中要顯示的網(wǎng)頁。（1 1） 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途 3. 3.建立框架結(jié)構(gòu)的網(wǎng)頁建立框架結(jié)構(gòu)的網(wǎng)頁框架頁面的語法結(jié)構(gòu) 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途教學(xué)相關(guān)內(nèi)容教學(xué)相關(guān)內(nèi)容 表格 框架內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途相關(guān)內(nèi)容相關(guān)內(nèi)容插入表格 輸入表格內(nèi)容 表格嵌套 選擇表格 合并及拆分單元格 插入或刪除行或列 設(shè)置表格、單元格屬性和表格模板 表格內(nèi)容的移動和排序 表格數(shù)據(jù)的導(dǎo)出 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途插入

5、表格插入表格 在網(wǎng)頁制作中，對頁面進(jìn)行布局是非常重要的，表格就是頁面布局中常用的方式。Dreamweaver不僅支持在表格中有序地排列數(shù)據(jù)，還可用表格對網(wǎng)頁中的文本、圖像及其他元素進(jìn)行定位。 語法：語法： 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途輸入表格內(nèi)容輸入表格內(nèi)容 手動添加表格內(nèi)容 從其他文檔導(dǎo)入表格式數(shù)據(jù) 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途手動添加表格內(nèi)容手動添加表格內(nèi)容 將表格插入到文檔后即可向表格添加文本或圖像等內(nèi)容。向表格添加內(nèi)容的方法很簡單，只需將插入點(diǎn)定位到要輸入內(nèi)容的單元格中，再輸入文本或插入圖像即可。內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資

6、料, ,不作任何宣傳用途不作任何宣傳用途從其他文檔導(dǎo)入表格式數(shù)據(jù)從其他文檔導(dǎo)入表格式數(shù)據(jù) Dreamweaver可以將創(chuàng)建在另一個應(yīng)用程序（如寫字板文件）中的數(shù)據(jù)導(dǎo)入到網(wǎng)頁中并設(shè)置為表格的格式，而且各數(shù)據(jù)之間不可以制表符、逗號、冒號、分號或其他分隔符分隔開來。 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途表格嵌套表格嵌套 嵌套表格是表格布局中一個十分重要的環(huán)節(jié)，它是指在一個表格的單元格中再插入一個表格，嵌套表格的寬度受所在單元格的寬度限制，其編輯方法與表格相同。 語法：語法： 外層外層 內(nèi)層內(nèi)層 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途選擇表格選擇表格

7、選擇整個表格 選擇整行或整列 選擇單元格 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途選擇整個表格選擇整個表格 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途選擇整行或整列選擇整行或整列 將鼠標(biāo)光標(biāo)移到要選擇行或列的左側(cè)或上方，當(dāng)需要選擇的行或列邊框線呈紅色時單擊鼠標(biāo)即可。 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途選擇單元格選擇單元格 單元格的選擇分為選擇單個單元格和選擇多個單元格區(qū)域。內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途合并及拆分單元格合并及拆分單元格 合并單元格 拆分單元格 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作

8、任何宣傳用途不作任何宣傳用途合并單元格合并單元格 合并單元格操作只能針對連續(xù)的單元格使用。 舉例：舉例： 我的個人簡歷我的個人簡歷 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途拆分單元格拆分單元格 表格中每一行中的單元格列數(shù)可能不等，這時就可根據(jù)需要使用拆分命令把一個單元格變?yōu)閹讉€單元格。 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途插入或刪除行或列插入或刪除行或列 插入單行或單列 插入多行或多列 刪除行或列 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途插入單行或單列插入單行或單列 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳

9、用途插入多行或多列插入多行或多列 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途刪除行或列刪除行或列 將插入點(diǎn)定位到要刪除行或列的任意一個單元格中，然后選擇修改表格刪除行菜單命令或選擇修改表格刪除列菜單命令。 選擇表格要刪除的行或列，然后選擇編輯清除菜單命令或按【Delete】鍵。 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途設(shè)置表格、單元格屬性和表格模板設(shè)置表格、單元格屬性和表格模板 設(shè)置表格屬性 設(shè)置單元格屬性 套用表格模板內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途設(shè)置表格屬性設(shè)置表格屬性 “表格”屬性面板中顯示了插入表格的所有特性，通

10、過修改面板中的參數(shù)可快速地編輯表格外觀。 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途設(shè)置單元格屬性設(shè)置單元格屬性 在編輯網(wǎng)頁時除可以設(shè)置整個表格的屬性外，還可以單獨(dú)設(shè)置表格中某行、列或單元格的屬性。內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途套用表格模板套用表格模板 在Dreamweaver中提供了多個表格模板供用戶選擇使用，還可以通過設(shè)置模板的參數(shù)來調(diào)整表格的外觀。 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途表格內(nèi)容的移動和排序表格內(nèi)容的移動和排序 表格整列內(nèi)容的移動表格的排序 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣

11、傳用途表格整列內(nèi)容的移動表格整列內(nèi)容的移動內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途表格的排序表格的排序 表格一般用來處理數(shù)據(jù)，在處理數(shù)據(jù)的同時還需要對表格中的各項進(jìn)行排序。 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途表格數(shù)據(jù)的導(dǎo)出表格數(shù)據(jù)的導(dǎo)出 因為語言原因，導(dǎo)出的文件只能用寫字板打開才能正確顯示其中的數(shù)據(jù)，在其他程序中打開會亂碼。 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途認(rèn)識框架和框架集認(rèn)識框架和框架集 框架是將一個頁面劃分成不同的文檔區(qū)，每個文檔區(qū)顯示獨(dú)立的內(nèi)容，其效果是在瀏覽網(wǎng)頁時，網(wǎng)頁中一部分區(qū)域（如公司Logo、導(dǎo)航條）

12、內(nèi)容不改變，而其他區(qū)域內(nèi)容在不斷發(fā)生改變。 框架集是HTML文件，它定義一組框架的布局和屬性，包括框架的數(shù)目、大小、位置以及在框架中初始顯示頁面的地址。框架集文件本身不包含要在瀏覽器中顯示的網(wǎng)頁內(nèi)容（對不能顯示框架的瀏覽器進(jìn)行的處理除外，即部分），框架集文件只是向瀏覽器提供應(yīng)如何顯示一組框架以及在這些框架中應(yīng)顯示哪些網(wǎng)頁的有關(guān)信息。 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途框架和框架集的創(chuàng)建框架和框架集的創(chuàng)建 在“插入”欄插入預(yù)定義的框架集創(chuàng)建預(yù)定義框架集 手動設(shè)計框架 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途在在“插入插入”欄插入預(yù)定義的框架集欄插

13、入預(yù)定義的框架集 在Dreamweaver中預(yù)定義了一些框架集樣式，需要使用時直接插入即可。 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途創(chuàng)建預(yù)定義框架集創(chuàng)建預(yù)定義框架集 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途手動設(shè)計框架手動設(shè)計框架 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途框架和框架集的選擇和刪除框架和框架集的選擇和刪除 認(rèn)識“框架”面板 選擇框架與框架集刪除框架 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途認(rèn)識認(rèn)識“框架框架”面板面板 “框架”面板中顯示所創(chuàng)建的框架結(jié)構(gòu)，并在不同的框架區(qū)域中顯示框架的名稱。當(dāng)

14、在框架網(wǎng)頁中新建、刪除框架，或修改框架的尺寸、名稱等時，“框架”面板中的示意圖會跟隨變化。 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途選擇框架與框架集選擇框架與框架集在編輯窗口中選擇 在“框架”面板中選擇 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途在編輯窗口中選擇在編輯窗口中選擇 在編輯窗口中選擇框架的方法很簡單，按住【Alt】鍵，在要選擇的框架內(nèi)單擊鼠標(biāo)左鍵即可。被選取的框架邊框呈虛線顯示。 選擇框架集時，單擊框架邊框即可，選取的所有框架邊框呈虛線。 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途在在“框架框架”面板中選擇面板中選擇 在

15、“框架”面板中單擊框架區(qū)域中的任意位置即可選擇框架，選中的框架以粗黑框顯示。 在“框架”面板中單擊框架邊框即可選擇框架集，如果要選擇整個框架集，只需單擊框架最外面的邊框即可。 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途刪除框架刪除框架 如果窗口中有不需要的框架，可將其刪除，用鼠標(biāo)將要刪除框架的邊框拖到父框架邊框上或拖離頁面即可。 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途框架和框架集的保存框架和框架集的保存 保存框架與框架集之后才能在瀏覽器中瀏覽用框架布局的網(wǎng)頁。每個框架包含一個網(wǎng)頁，一個框架集則包含多個網(wǎng)頁，在保存時應(yīng)保存所有的框架與框架集。 保存框架

16、 保存框架集 保存框架集中的所有網(wǎng)頁 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途保存框架保存框架 將插入點(diǎn)定位到要保存的框架中。 選擇文件保存框架菜單命令，在打開的“另存為”對話框中像保存其他網(wǎng)頁一樣指定保存路徑和文件名，然后單擊“保存”按鈕即可。 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途保存框架集保存框架集 選中要保存的框架集。選擇文件保存框架頁菜單命令，打開“另存為”對話框。在“保存在”下拉列表框中選擇框架集的保存路徑，在“文件名”文本框中為框架集命名。單擊“保存”按鈕即可保存框架集。 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途

17、保存框架集中的所有網(wǎng)頁保存框架集中的所有網(wǎng)頁 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途框架和框架集的屬性設(shè)置框架和框架集的屬性設(shè)置 框架集的屬性設(shè)置 框架集文檔標(biāo)題的設(shè)置 框架的屬性設(shè)置 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途框架集的屬性設(shè)置框架集的屬性設(shè)置 使用框架集屬性面板可以查看和設(shè)置大多數(shù)框架集屬性。 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途框架集文檔標(biāo)題的設(shè)置框架集文檔標(biāo)題的設(shè)置 當(dāng)訪問者在瀏覽器中查看該框架集時，標(biāo)題將顯示在瀏覽器的標(biāo)題欄中。 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途框架的屬性設(shè)置框架的屬性設(shè)置 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)資料, ,不作任何宣傳用途不作任何宣傳用途處理不能顯示框架的瀏覽器處理不能顯示框架的瀏覽器 由于在低版本的瀏覽器中不能正確顯示使用了框架的網(wǎng)頁和框架中的內(nèi)容，因此在Dreamweaver中允許指定在不支持框架的基于文本的瀏覽器和較舊的圖形瀏覽器中顯示內(nèi)容。此類內(nèi)容存儲在框架集文件中，用標(biāo)簽括起來。當(dāng)不支持框架的瀏覽器加載該框架集文件時，瀏覽器只顯示用標(biāo)簽括起來的內(nèi)容。 內(nèi)部培訓(xùn)資料內(nèi)部培訓(xùn)