第4章表格和布局課前復(fù)習編輯文本圖像文件的類型插入圖像和設(shè)置圖像屬性插入鼠標經(jīng)過圖像插入導(dǎo)航條本章要點插入表格設(shè)置表格屬性選擇表格使用表格插入布局表格插入布局單元格使用布局表格4.1插入表格4.1.1插入表格并設(shè)置表格的屬性＂插入＂菜單>＂表格＂命令。在插入欄中的“常用”選項卡中，單擊表格按鈕

設(shè)置＂表格＂對話框選項例4-1（4_1.htm）插入一個4行3列，寬為200（像素），邊框為1，邊距為2，間框為2的表格。4.2選取表格4.2.1選擇整個表格4.2.2選擇行或列

4.2.3選擇單元格

4.3設(shè)置表格屬性4.3.1表格屬性4.3.2單元格屬性4.4表格的操作4.4.1插入行和列1.添加單個行或列2.添加多行或多列4.4.2刪除行或列4.4.3拆分單元格4.3.4合并單元格4.3.5復(fù)制、粘貼例4-3（4_3.html）插入如圖4-16所示的課程表格

1）在Dreamweaver中按Ctrl+Alt+T，彈出插入表格的對話框，如圖。2)設(shè)置表格屬性，表格寬為400，具中對齊方式。背景色為#99CCFF。3）選擇條一行的第2-5單元格，單擊合并單元格按鈕，合并單元格，其他類似操作。4)在表格內(nèi)的單元格內(nèi)輸入文字。完成表格。4.5調(diào)整表格4.5.1調(diào)整表格大小在水平方向調(diào)整表格的大小，拖動右邊的選擇柄。在垂直方向調(diào)整表格的大小，拖動底部的選擇柄。在兩個方向調(diào)整表格的大小，拖動右下角的選擇柄。

4.5.2調(diào)整列和行的大小1．更改列寬度并保持整個表的寬度不變，拖動想更改的列的右邊框。2．更改某個列的寬度并保持其他列的大小不變，按住Shift鍵，然后拖動列的邊框。4.6嵌套表格嵌套表格是在另一個表格的單元格中的表格?？梢韵駥θ魏纹渌砀褚粯訉η短妆砀襁M行格式設(shè)置；但是，其寬度受它所在單元格的寬度的限制。1)單擊現(xiàn)有表格中的一個單元格。2)選擇＂插入＂>＂表格＂。即會出現(xiàn)＂插入表格＂對話框。3)完成對話框。4)單擊＂確定＂。該表格即出現(xiàn)在現(xiàn)有表格中。4.7排序表格可以根據(jù)單個列的內(nèi)容對表格中的行進行排序。還可以根據(jù)兩個列的內(nèi)容執(zhí)行更加復(fù)雜的表格排序。不能對包含合并單元格的表格進行排序。1)選擇該表格或單擊任意單元格。2)選擇“命令”>“排序表格”。3)設(shè)置＂排序表格＂對話框選項。4)單擊＂確定＂。例4-4(4_4.html)繪制如圖4-23的成績表格。按第三列成績升序排序。例4-6(4-6.html)創(chuàng)建基于表格的頁面布局操作步驟1）插入第1個表格(1行1列，寬700)。2）在表格下方插入第2個表格(1行8列，寬700)。3）在表格下方插入第3個表格（1行3列，寬700）。將第2列分開為2行。4）在表格下方插入第4個表格(寬700，1行1列)。如圖4-29所示。4.8在＂布局模式＂對網(wǎng)頁進行布局4.8.1“標準”模式和“布局”模式１．切換到“布局”模式２．切換出＂布局＂模式優(yōu)點：在布局模式下，表格和單元格是分開創(chuàng)建，而且可以自由移動和改變大小的。4.9.2在＂布局＂模式中繪制單元格和表格１．繪制布局單元格單擊＂繪制布局單元格＂按鈕,拖動指針以創(chuàng)建布局表格。２．繪制布局表格單擊＂繪制布局表格＂按鈕,拖動指針以創(chuàng)建布局表格。3．嵌套布局表格

單擊“繪制布局表格”按鈕。指向現(xiàn)有布局表格中的空白（灰色）區(qū)域，然后拖動指針以創(chuàng)建嵌套布局表格。4．在現(xiàn)有布局單元格或表格周圍繪制布局表格4.9.3將內(nèi)容添加到布局單元格中

1．將文本添加到布局單元格（切換“到標準模式”）1）將插入點放置在要添加文本的布局單元格中。2）在單元格中鍵入文本。當進行鍵入時，單元格將按需要自動擴展，或粘貼從其他文檔復(fù)制的文本。（鍵入時，單元格按需要自動擴展）2．將圖像添加到布局單元格中1）將插入點放置在要添加圖像的布局單元格中。2）選擇“插入”>“圖像”?；蛟凇安迦搿睓诘摹俺Ｓ谩鳖悇e中，單擊“圖像”按鈕上的箭頭，然后選擇“圖像”。

4.9.4調(diào)整布局單元格和表格的大小以及移動

1．調(diào)整布局單元格的大小1）選擇一個單元格，方法是單擊該單元格的邊緣，或者在按住Ctrl鍵的同時單擊該單元格中的任何位置。該單元格周圍出現(xiàn)選擇控制點。2）拖動選擇控制點來調(diào)整單元格的大小。如圖4-35所示。2．移動布局單元格1）選擇一個單元格，方法是單擊該單元格的邊緣，或者在按住Ctrl鍵的同時單擊該單元格中的任何位置。該單元格周圍出現(xiàn)選擇控制點。2）將該單元格拖到其布局表格中的另一個位置?；虬醇^鍵移動該單元格，每次移動1個像素。（在按住Shift鍵的同時按箭頭鍵移動該單元格，每次10個像素。）3．調(diào)整布局表格的大小.1）通過單擊表格頂部的標簽選擇一個表格。該表格周圍出現(xiàn)選擇控制點。2)拖動選擇控制點來調(diào)整表格的大小。表格邊緣與其他單元格和表格的邊緣自動靠齊。4．移動布局表格1）通過單擊表格頂部的標簽選擇一個表格。該表格周圍出現(xiàn)選擇控制點。2）將表格拖到頁上的另一個位置?；虬醇^鍵移動該表格，每次移動1個像素。（在按住Shift鍵的同時按箭頭鍵移動該單元格，每次10個像素。）只有當布局表格嵌套在另一個布局表格中時，才可以移動該布局表格。4.9.5設(shè)置布局單元格的格式1．選擇一個單元格2．打開“屬性”檢查器3.通過設(shè)置屬性更改單元格的格式設(shè)置。4.9.6設(shè)置布局表格的格式1．通過單擊表格頂部的標簽選擇一個表格。2.打開“屬性”檢查器3．通過設(shè)置屬性更改表格的格式設(shè)置

4.9.7設(shè)置列寬度表格中的列可以具有固定的寬度或自動延伸。在布局完成之前讓某個列自動伸展可能會對表格布局產(chǎn)生無法預(yù)料的效果。為了防止列變得出乎意料的寬或窄，在讓某個列自動伸展之前，先創(chuàng)建完整的布局，并在使列自動伸展時使用間隔圖像。（但是，如果每個列都包含其他內(nèi)容，可以使該列保持所需的寬度，則無需使用間隔圖像。）1）使列自動伸展2）設(shè)置為固定寬度例4-7(4_7.html)繪制如圖4-39所示的布局表格和布局單元格。操作步驟如下：1）建立站點和網(wǎng)頁。2）在＂插入＂欄的＂布局＂類別中單擊＂布局模式＂按鈕。3）在第1行插入第1個寬780的單元格。插入圖像j1.jpg。4)在第2行插入第2個寬780的單元格。插入Flash對象banner3.swf。5）在第3行插入第3個寬780的單元格。并在＂插入＂欄的＂布局＂類別中單擊＂標準模式＂按鈕。6)在第3個寬780的單元格內(nèi)插入1行(寬100%)9列的表格，建立用于導(dǎo)航的表格，在表格各單元格內(nèi)插入文字(首頁廈門特產(chǎn)魅力廈門特產(chǎn)展示茶葉專區(qū)廈門旅游我要購買加盟合作聯(lián)系我們)。并在＂插入＂欄的＂布局＂類別中單擊＂布局模式＂按鈕7)在第4行并排插入第4、5、6個單元格（3個單元格的寬合計為780的）。(1)在第4個單元格內(nèi)插入圖像g.gif。(2)在第5個單元格內(nèi)插入圖像g6.jpg，右對齊。插入文本。(3)在第6個單元格內(nèi)插入圖像g2.gif，右對齊。插入文本。8)在第5行并排插入第7、8個單元格（2個單元格的寬合計為780的）。(1)在第7個單元格內(nèi)插入文本。(2)在第8個單元格內(nèi)插入圖像ind_03a.jpg。9）在第6行并排插入第9、10個單元格（2個單元格的寬合計為780的）。10）在第9個單元格內(nèi)插入圖像jj1-1.gif。11）單擊＂標準模式＂按鈕,在第10個單元格內(nèi)插入表格(4行6列)。在表格內(nèi)分別插入圖像和文字，并設(shè)置對齊方式。注意將圖像設(shè)置成寬90高116并重新取樣。保存。12）在第7行并排插入寬780的單元格。插入文字，并具中對齊。13）設(shè)置文字大小。14)將各行的表格（單元格）具中對齊。4.9本章小結(jié)本章介紹插入表格和編輯表格的方法，要要求理解單元格，表格，間距，填充，邊框的含義。重點的如何調(diào)整行和列的寬度、高度以及拆分和合并單元格的方法。本章小結(jié)