DW_07使用表格

1、主講：主講：韓維良韓維良2021年年10月月網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格第一節(jié)第一節(jié) 使用表格對頁面進(jìn)行布局使用表格對頁面進(jìn)行布局由于網(wǎng)頁的主要組成元素是文字、圖形或其它一些可視化元素（如 Flash動(dòng)畫、圖像或文本段落），為了不使它們從一個(gè)邊緣流向另一個(gè)邊緣，必須將它們插入到一個(gè)“容器”中，這個(gè)“容器”就是表格。 2021年10月15日星期五教育學(xué)院3網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格實(shí)際上，在 Internet 上的絕大多數(shù)網(wǎng)頁都是用表格輔助布局的。借助表格實(shí)現(xiàn)網(wǎng)頁的精細(xì)排版。可以說表格的靈活應(yīng)用是網(wǎng)頁制作中最為重要的一個(gè)技巧，表格運(yùn)用得好壞，直接反映了網(wǎng)頁設(shè)計(jì)師的水平。2021年10月15

2、日星期五教育學(xué)院4網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格一、版面布局概述一、版面布局概述一般情況下一個(gè)網(wǎng)頁主要包括：LOGO（標(biāo)志），Banner（橫幅廣告條），導(dǎo)航欄，導(dǎo)航菜單，網(wǎng)頁正文，版權(quán)聲明。在設(shè)計(jì)頁面布局時(shí)，也正是圍繞著這些元素展開的。在頁面制作過程中要確定一個(gè)頁面的布局（版式），應(yīng)該綜合考慮如何安置頁面中的各種內(nèi)容，比如標(biāo)題文字、導(dǎo)航欄、圖片、動(dòng)畫、超鏈接等。 2021年10月15日星期五教育學(xué)院5網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格做一個(gè)網(wǎng)頁，尤其是主頁，先要規(guī)劃好版面布局（頁面的條塊分割頁面的條塊分割）。如同一個(gè)容器，規(guī)劃好位置。幾種常用的版式（分欄結(jié)構(gòu)）：二分欄，三分欄的結(jié)構(gòu)等。 2021

3、年10月15日星期五教育學(xué)院6網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格2021年10月15日星期五教育學(xué)院7網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格2021年10月15日星期五教育學(xué)院8網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格 常見的網(wǎng)頁布局類型：有“國”字型、“匡”字型、“三”字型、“川”字型等。 網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格1“國國”字型字型 網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格2“匡匡”字型字型 網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格3“三三”字型字型 網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格4“川川”字型字型 網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格5其他類型其他類型 (1) 封面型 (2) Flash 型 (3) 框架型 網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章

4、使用表格6、網(wǎng)頁頁面的構(gòu)成、網(wǎng)頁頁面的構(gòu)成1）網(wǎng)頁尺寸 根據(jù)屏幕分辨率的大小設(shè)計(jì)網(wǎng)頁的寬度。 一般如果屏幕分辨率為800*600 那么設(shè)計(jì)網(wǎng)頁的尺寸為780*428，如果屏幕分辨率為1024*768，那么設(shè)計(jì)頁面尺寸為980*600。2）頁頭（頁眉） 通常放置logo（網(wǎng)站標(biāo)志）和banner（廣告條）3）頁腳放置版權(quán)信息、聯(lián)系電話、網(wǎng)站介紹、備案信息等等。4）導(dǎo)航欄各版塊欄目的超鏈接。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格第二節(jié)第二節(jié) 插入表格插入表格一、創(chuàng)建表格一、創(chuàng)建表格1、插入表格、插入表格在文檔窗口的設(shè)計(jì)視圖中，將插入點(diǎn)置于要插入表格的位置，單擊“插入”菜單中的“表格”或單擊插入欄的“常用”

5、中的“插入表格”按鈕 ，或者Ctrl+Alt+T。設(shè)置行列數(shù)以及邊框等。2021年10月15日星期五教育學(xué)院16網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格在對話框中進(jìn)行選項(xiàng)設(shè)置。行、列數(shù)行、列數(shù)：用于設(shè)置插入表格的行數(shù)和列數(shù)。表格寬度表格寬度：用于設(shè)置表格的寬度，選擇“像素”為單位時(shí)，表格的寬度為固定像素的寬度；選擇“百分比”為單位時(shí)，表格的寬度與其上一級窗口的寬度將保持相同的百分比。邊框粗細(xì)邊框粗細(xì)：用于設(shè)置表格的邊框?qū)挾取?單元格邊距單元格邊距：(屬性面板是填充填充)用于設(shè)置表格中單元格中的內(nèi)容與單元格邊框的距離。2021年10月15日星期五教育學(xué)院18網(wǎng)站建設(shè)網(wǎng)站建設(shè)第

6、7章使用表格單元格間距單元格間距：用于設(shè)置表格中單元格之間的間距。頁眉頁眉：把表格的第一行或第一列作為標(biāo)題行或標(biāo)題列，作為標(biāo)題行或標(biāo)題列的行或列的內(nèi)容將以粗體的形式顯示。分別為無、左、頂部、兩者。即確定是否啟用表格的行列標(biāo)題。在左側(cè)為行標(biāo)題，在頂部為列標(biāo)題。輔助功能中的標(biāo)題輔助功能中的標(biāo)題：用于設(shè)置表格標(biāo)題，該標(biāo)題在表格的外側(cè)。(選中后，可知，也作為表格的一部分)摘要摘要：用于描述表格的相關(guān)信息。2021年10月15日星期五教育學(xué)院19網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格2021年10月15日星期五教育學(xué)院20輔助中的標(biāo)題輔助中的標(biāo)題網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格表格寬度菜單表格寬度菜單：單擊表格中

7、的任意位置，在表格的上方或者下方顯示寬度和寬度分布。單擊其中的小三角可以對其進(jìn)行相應(yīng)的設(shè)置。也可以在“查看”中“可視化助理”的“表格寬度”中設(shè)置顯示或者隱藏，默認(rèn)顯示。2021年10月15日星期五教育學(xué)院21網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格實(shí)踐：實(shí)現(xiàn)如下的操作。 2021年10月15日星期五教育學(xué)院22網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格 在網(wǎng)頁中插入表格后，可以向單元格中直接輸入文本或插入其它的對象，如圖像、動(dòng)畫等，還可以向表格中插入嵌套表格。另外,表格內(nèi)容的排版等。當(dāng)然，用戶也可以從外部導(dǎo)入其它軟件編輯的表格，如Excel電子表格等。 2021年10月15日星期五教育學(xué)院23網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章

8、使用表格2、表格的、表格的html標(biāo)簽標(biāo)簽 a1 b1 a2 b2 2021年10月15日星期五教育學(xué)院24網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格 表格標(biāo)記 行標(biāo)記 單元格標(biāo)記2021年10月15日星期五教育學(xué)院25網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格第三節(jié)第三節(jié) 選擇表格選擇表格一、選擇表格一、選擇表格鼠標(biāo)指針指向表格左上角，當(dāng)鼠標(biāo)指針右下角出現(xiàn)表格圖形時(shí)，單擊。將光標(biāo)指向表格邊框，單擊鼠標(biāo)，可以選擇整個(gè)表格?！靶薷摹薄氨砀瘛薄斑x定表格”；右擊，選“表格”“選定表格”表格內(nèi)任意單擊，在“標(biāo)簽選擇器”中單擊其它方法不常用略。2021年10月15日星期五教育學(xué)院26網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格二、選擇表格的

9、行或列二、選擇表格的行或列鼠標(biāo)指針指向行左邊緣或者列的頂邊，出現(xiàn)實(shí)心箭頭時(shí)單擊，或者單擊并拖動(dòng)可選擇多行或者多列。從某處按下左鍵，拖動(dòng)出一個(gè)多行多列的矩形區(qū)域。插入點(diǎn)置于某單元格中時(shí)，在“標(biāo)簽選擇器” 單擊，則選中插入點(diǎn)所在的行。單擊表格寬度菜單中的小三角，選“選擇列”2021年10月15日星期五教育學(xué)院27網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格三、選擇單元格三、選擇單元格1、選擇單個(gè)單元格、選擇單個(gè)單元格Ctrl+單擊在單元格中單擊，按下Ctrl+A2、選擇相鄰的單元格、選擇相鄰的單元格單擊首，Shift+單擊尾3、選擇不相鄰的單元格、選擇不相鄰的單元格Ctrl+逐個(gè)單擊2021年10月15日星期五

10、教育學(xué)院28網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格2021年10月15日星期五4、用、用“標(biāo)簽選擇器標(biāo)簽選擇器”選擇單元格選擇單元格插入點(diǎn)置于某單元格中時(shí)，在“標(biāo)簽選擇器”中單擊，則選中插入點(diǎn)所在單元格。教育學(xué)院29網(wǎng)頁中插入的表格狀態(tài)欄中的“標(biāo)簽選擇器”網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格第四節(jié)第四節(jié) 設(shè)置表格的屬性設(shè)置表格的屬性選擇要設(shè)置屬性的表格區(qū)域(可以是整個(gè)表格、一行或一列或一個(gè)單元格)后，在屬性面板中設(shè)置。2021年10月15日星期五教育學(xué)院30網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格表格表格：用于設(shè)置表格的名稱。行和列行和列：用于設(shè)置表格的行數(shù)和列數(shù)。寬寬：用于設(shè)置表格的寬度，單位為“百分比”或“像素”

11、。填充填充：用于設(shè)置單元格中的內(nèi)容與邊框之間的距離。（單位：象素）(內(nèi)邊距)，在表格插入對話框稱為單元格邊距。間距間距：用于設(shè)置單元格之間的距離，（單位：象素）對齊對齊：用于設(shè)置表格在網(wǎng)頁中的對齊方式。2021年10月15日星期五教育學(xué)院31網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格2021年10月15日星期五教育學(xué)院網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格2021年10月15日星期五教育學(xué)院33border(邊框的厚度邊框的厚度) 內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容cellpadding(單元格填充單元格填充)cellspacing(單元格間距單元格間距)網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格邊框邊框：用于設(shè)置表格外邊框的

12、寬度。類類：用于設(shè)置表格的CSS樣式。單擊按鈕單擊按鈕，（寬度橡皮擦）可以取消單元格的寬度設(shè)置，使其寬度隨單元格的內(nèi)容自動(dòng)縮放。單擊按鈕單擊按鈕，（高度橡皮擦）可以取消單元格的高度設(shè)置，使其高度隨單元格的內(nèi)容自動(dòng)調(diào)整。單擊按鈕單擊按鈕，可以將表格寬度轉(zhuǎn)換為像素。單擊按鈕單擊按鈕，可以將表格寬度轉(zhuǎn)換為百分比。2021年10月15日星期五教育學(xué)院34網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格2021年10月15日星期五教育學(xué)院網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格第五節(jié)第五節(jié) 設(shè)置行、列和單元格的屬性設(shè)置行、列和單元格的屬性單擊某單元格，在屬性面板中可以設(shè)置其屬性，上半部分為單元格內(nèi)文本的屬性，下半部分為單元格的屬性

13、。2021年10月15日星期五教育學(xué)院36網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格一、拆分和合并單元格一、拆分和合并單元格拆分單元格的操作是將一個(gè)單元格拆分為幾個(gè)連續(xù)的單元格；拆分方法拆分方法：選取一個(gè)單元格，單擊屬性面板中的“拆分單元格為行或列” 按鈕填寫拆分行（列）的數(shù)目。2021年10月15日星期五教育學(xué)院37網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格合并是將多個(gè)連續(xù)的單元格合并成一個(gè)；合并方法合并方法：選取待合并的多個(gè)連續(xù)的單元格，單擊屬性面板中的“合并所選單元格” 按鈕。二、設(shè)置單元格內(nèi)容的對齊方式二、設(shè)置單元格內(nèi)容的對齊方式水平水平：設(shè)置單元格內(nèi)容在水平方向上的對齊方式，主要有：默認(rèn)、左、中、右。垂直垂

14、直：設(shè)置單元格內(nèi)容在垂直方向上的對齊方式，主要有：默認(rèn)、頂端、劇中、底部、基線。2021年10月15日星期五教育學(xué)院38網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格三、設(shè)置單元格背景三、設(shè)置單元格背景選取單元格，在屬性面板中的“背景”中添加背景圖片或在“背景顏色”中選取一種顏色或利用16進(jìn)制數(shù)指定一種顏色；2021年10月15日星期五教育學(xué)院39網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格第六節(jié)第六節(jié) 表格基本操作表格基本操作一、調(diào)整表格大小一、調(diào)整表格大小1、調(diào)整列寬調(diào)整列寬：拖動(dòng)列右邊框。2、調(diào)整行高調(diào)整行高：拖動(dòng)行下邊框。3、調(diào)整表寬調(diào)整表寬：選中表格，拖動(dòng)右側(cè)尺寸控點(diǎn)。4、調(diào)整表高調(diào)整表高：選中表格，拖動(dòng)底邊尺寸

15、控點(diǎn)。5、同時(shí)調(diào)整表寬表高同時(shí)調(diào)整表寬表高：選中表格，拖動(dòng)右下角尺寸控點(diǎn)。2021年10月15日星期五教育學(xué)院40網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格二、清除和均化表格大小二、清除和均化表格大小1、清除所有高度、清除所有高度方法：選中表格，選擇表格寬度菜單中的“清除所有高度”?；蛘摺靶薷摹薄氨砀瘛薄扒宄龁卧窀叨取薄Ｊ贡砀窀叨仁湛s至最小程度，即不能再小了。2021年10月15日星期五教育學(xué)院41網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格2、清除所有寬度、清除所有寬度方法：選中表格，選擇表格寬度菜單中的“清除所有寬度”。或者“修改”“表格”“清除單元格寬度”。使表格寬度收縮至最小程度，即不能再小了。3、統(tǒng)一所有寬

16、度、統(tǒng)一所有寬度寬度不一致現(xiàn)象：代碼設(shè)置與可視化屬性中設(shè)置的不一致。方法：選中表格，選擇表格寬度菜單中的“使所有寬度一致”2021年10月15日星期五教育學(xué)院42網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格4、統(tǒng)一列寬、統(tǒng)一列寬調(diào)整表格中的各列寬度后，可以使再其寬度相同。方法：單擊某一列，在其列寬度菜單中，選擇“清除列寬”。2021年10月15日星期五教育學(xué)院43網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格三、增加行和列三、增加行和列1、增加行、增加行方法：右擊某行“表格”“插入行”/“插入行或列”；“修改”“表格”“插入行”/“插入行或列”命令?！安迦搿薄氨砀駥ο蟆薄霸谏厦娌迦胄小?“在下面插入行”命令。選中表格，在屬

17、性面板中“行”數(shù)中增加數(shù)值。2021年10月15日星期五教育學(xué)院44網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格2021年10月15日星期五教育學(xué)院45網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格2、增加列、增加列方法：右擊某列“表格”“插入列”/“插入行或列”；“修改”“表格”“插入列”/“插入行或列”命令?！安迦搿薄氨砀駥ο蟆薄霸谧筮叢迦肓小?“在右邊插入列”命令。選中表格，在屬性面板中“列”數(shù)中增加數(shù)值。2021年10月15日星期五教育學(xué)院46網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格四、刪除表格元素四、刪除表格元素1、刪除單元格內(nèi)的對象、刪除單元格內(nèi)的對象方法：選中一個(gè)或者多個(gè)單元格，按Delete，或者“編輯”“清除”。2

18、、刪除行、刪除行方法：在欲刪除的行中單擊，選擇“修改”“表格”“刪除行”命令；在欲刪除的行中右擊，選擇“刪除行”命令；選中表格，在屬性面板中“行”數(shù)中減少數(shù)值，則從表格底部刪除相應(yīng)的行數(shù)。2021年10月15日星期五教育學(xué)院47網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格3、刪除列、刪除列方法：在欲刪除的列中單擊，選擇“修改”“表格”“刪除列”命令；在欲刪除的列中右擊，選擇“刪除列”命令；選中表格，在屬性面板中“列”數(shù)中減少數(shù)值，則從表格右端刪除相應(yīng)的列數(shù)。2021年10月15日星期五教育學(xué)院48網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格五、剪切、復(fù)制和粘貼單元格五、剪切、復(fù)制和粘貼單元格1、剪切或者復(fù)制單元格、剪切或

19、者復(fù)制單元格方法：選中一個(gè)包含一個(gè)或者多個(gè)單元格的矩形區(qū)域 ， “ 編 輯 ” “ 剪 切 ” / “ 復(fù) 制 ” ， 或 者Ctrl+X/Ctrl+C;如果選中區(qū)域包含整行或者整列，則為剪切后刪除所含的整行或者整列，反之，剪切后僅清除所選單元格的內(nèi)容，復(fù)制對原內(nèi)容沒有影響。2021年10月15日星期五教育學(xué)院49網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格2、粘貼單元格、粘貼單元格單擊欲粘貼處,“編輯”“粘貼”，或者Ctrl+V;如果是粘貼整行整列，則將插入整行或者整列。也可選擇性的粘貼：單擊欲粘貼處,“編輯”“選擇性粘貼”;再選擇粘貼類型。2021年10月15日星期五教育學(xué)院50網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使

20、用表格六、合并和拆分單元格六、合并和拆分單元格1、合并、合并方法：選中欲合并的多個(gè)相鄰單元格，“修改”“表格”“合并單元格”或者右擊選擇“表格”“合并單元格”?；蛘邌螕裟硢卧瘢靶薷摹薄氨砀瘛薄霸黾有袑挕?，則向下合并一行向下合并一行。單擊某單元格，“修改”“表格”“增加列寬”，則向右合并一列。向右合并一列。2021年10月15日星期五教育學(xué)院51網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格2、拆分、拆分方法：選中欲拆分的單元格，“修改”“表格”“拆分單元格”或者右擊選擇“表格”“拆分單元格”。再選擇拆分類型以及相應(yīng)拆分?jǐn)?shù)量。2021年10月15日星期五教育學(xué)院52網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格或者單擊某個(gè)

21、合并后的單元格，“修改”“表格”“減少行寬”，則在其下方拆分出一行。單擊某單元格，“修改”“表格”“減少列寬”，則在其右側(cè)拆分出一列。2021年10月15日星期五教育學(xué)院53網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格七、表格嵌套七、表格嵌套在一個(gè)表格中嵌套另一個(gè)表格，在網(wǎng)頁設(shè)計(jì)中是非常普遍的操作，從而保證各自屬性的設(shè)置不受干擾。方法：單擊現(xiàn)有表格中的一個(gè)單元格， 選擇“插入”菜單中的“表格” ,設(shè)置相關(guān)屬性。練習(xí)：練習(xí)：設(shè)計(jì)一個(gè)二分欄的頁面布局。2021年10月15日星期五教育學(xué)院54網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格第七節(jié)第七節(jié) 操作數(shù)據(jù)表格操作數(shù)據(jù)表格一、導(dǎo)入表格數(shù)據(jù)一、導(dǎo)入表格數(shù)據(jù)可以將在Excel表格

22、或者文本文件中的表格式數(shù)據(jù)導(dǎo)入到Dreamweaver中。前提前提：導(dǎo)入到網(wǎng)頁中的表格，須以CSV格式或文本格式以特定的分隔符分隔才可以實(shí)現(xiàn)導(dǎo)入。如將EXCEL中的電子表格另存為CSV格式（一個(gè)工作表存為一個(gè)CSV文件）。2021年10月15日星期五教育學(xué)院55網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格方法：單擊欲插入處，選擇“文件”“導(dǎo)入”“表格式數(shù)據(jù)”或選擇“插入”“表格對象”“導(dǎo)入表格式數(shù)據(jù)”菜單命令。也可以導(dǎo)入Excel的原始數(shù)據(jù)，有時(shí)兼容性不好 ，出錯(cuò)。2021年10月15日星期五教育學(xué)院56網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格二、導(dǎo)出表格數(shù)據(jù)二、導(dǎo)出表格數(shù)據(jù)方法：將插入點(diǎn)置于欲導(dǎo)出的表格中，選擇“文件”“導(dǎo)出”“表格”。再選擇定界符和換行符的類型。導(dǎo)出的表格格式為：CSV格式。2021年10月15日星期五教育學(xué)院57網(wǎng)站建設(shè)網(wǎng)站建設(shè)第7章使用表格三、排序表格數(shù)據(jù)三、排序表格數(shù)據(jù)可以根據(jù)單個(gè)列的內(nèi)容對