《dw教學》第四講----表格布局

1、編輯ppt1主講主講:劉苗劉苗編輯ppt2編輯ppt3n通過本講的學習，使大家掌握表格的創(chuàng)建及各通過本講的學習，使大家掌握表格的創(chuàng)建及各屬性設(shè)置和表格的基本操作，會使用表格和布屬性設(shè)置和表格的基本操作，會使用表格和布局表格做網(wǎng)頁布局局表格做網(wǎng)頁布局教學目標教學目標編輯ppt4n表格表格n布局表格布局表格本講主要內(nèi)容本講主要內(nèi)容編輯ppt5任務一、任務一、網(wǎng)頁布局網(wǎng)頁布局 在頁面設(shè)計中，頁面布局是一個很重要的部分，在頁面設(shè)計中，頁面布局是一個很重要的部分，DW中提供了表格、布局表格、布局單元格、層、中提供了表格、布局表格、布局單元格、層、框架來設(shè)計網(wǎng)頁布局的方法?？蚣軄碓O(shè)計網(wǎng)頁布局的方法。布局的

2、輔助功能布局的輔助功能1、使用標尺：、使用標尺：單位：單位：坐標原點：可以移動，也可以重設(shè)原點坐標原點：可以移動，也可以重設(shè)原點.顯示：查看標尺顯示顯示：查看標尺顯示2、使用網(wǎng)格：查看網(wǎng)格網(wǎng)格設(shè)置、使用網(wǎng)格：查看網(wǎng)格網(wǎng)格設(shè)置編輯ppt63、跟蹤圖像、跟蹤圖像 頁面屬性跟蹤圖像透明度。它可以更好地幫助頁面屬性跟蹤圖像透明度。它可以更好地幫助進行網(wǎng)頁的設(shè)置，完成初步的布局繪制布局表格和進行網(wǎng)頁的設(shè)置，完成初步的布局繪制布局表格和布局單元格）。預覽時，追蹤圖像是無圖象顯示的布局單元格）。預覽時，追蹤圖像是無圖象顯示的僅僅作為輔助功能。僅僅作為輔助功能。注意：注意：n“標尺、網(wǎng)格、跟蹤圖象標尺、網(wǎng)格、

3、跟蹤圖象”則是對網(wǎng)頁中的元素進行則是對網(wǎng)頁中的元素進行精確的定位。精確的定位。n 表格是將網(wǎng)頁中的內(nèi)容進行定位，完成網(wǎng)頁布局表格是將網(wǎng)頁中的內(nèi)容進行定位，完成網(wǎng)頁布局編輯ppt7任務二、表格任務二、表格1、表格概述、表格概述在網(wǎng)頁文檔中在網(wǎng)頁文檔中,表格對整理所有內(nèi)容的布局操作表格對整理所有內(nèi)容的布局操作起著重要作用。起著重要作用。 通過表格可以將頁面劃分為不同的部分，實現(xiàn)通過表格可以將頁面劃分為不同的部分，實現(xiàn)對元素的準確定位。對元素的準確定位。 利用表格可控制文本和圖形在頁面上出現(xiàn)的位置，利用表格可控制文本和圖形在頁面上出現(xiàn)的位置，方便地設(shè)計出水平或垂直結(jié)構(gòu)。方便地設(shè)計出水平或垂直結(jié)構(gòu)。

4、表格是對文本和圖形進行布局的重要工具。表格是對文本和圖形進行布局的重要工具。編輯ppt82、HTML表格標記表格標記n表格標簽：表格標簽： 創(chuàng)建一個表格創(chuàng)建一個表格 設(shè)置設(shè)置表格表格邊框的寬度邊框的寬度 設(shè)置表格的寬度。用設(shè)置表格的寬度。用絕對象素或總寬度的百分比絕對象素或總寬度的百分比表示表示n行標簽：行標簽： 表格中的每一行表格中的每一行n單元格標簽：單元格標簽： 表格中的一行中的每一格表格中的一行中的每一格n表格頭標簽：表格頭標簽： 設(shè)置表格頭：通常是黑體居中文字設(shè)置表格頭：通常是黑體居中文字編輯ppt93、創(chuàng)建表格、創(chuàng)建表格n單擊插入常用工具欄上的按鈕單擊插入常用工具欄上的按鈕n將光標

5、停放在選定的位置，執(zhí)行插入將光標停放在選定的位置，執(zhí)行插入表格表格n將插入面板中的按鈕從插入面板中拖到頁面的相將插入面板中的按鈕從插入面板中拖到頁面的相應位置。應位置。編輯ppt104、設(shè)置表格屬性、設(shè)置表格屬性nTable id(表格名）表格名） nRows設(shè)置表格的行數(shù)，設(shè)置表格的行數(shù)，Cols設(shè)置表格的列數(shù)設(shè)置表格的列數(shù)nWidth：設(shè)置表格的寬度，以像素或百分比為單位：設(shè)置表格的寬度，以像素或百分比為單位nHeight：設(shè)置表格的高度，以像素或百分比為單位：設(shè)置表格的高度，以像素或百分比為單位編輯ppt11nCellpad(填充填充)：單元格填充值：單元格填充值 nCellspace（

6、間距）（間距）:單元格間距單元格間距nAlign（對齊）：表格的對齊方式（對齊）：表格的對齊方式nBorder（邊框）：表格的邊框?qū)挾龋ㄟ吙颍罕砀竦倪吙驅(qū)挾萵Bordcolor（邊框顏色）（邊框顏色）:表格邊框色表格邊框色nBgcolor：表格背景色：表格背景色nBgimage：表格背景圖像：表格背景圖像編輯ppt125、設(shè)置單元格屬性、設(shè)置單元格屬性n前提：選中單元格或光標定位到單元格中前提：選中單元格或光標定位到單元格中nHorz(水平水平):設(shè)置單元格內(nèi)容的水平對齊方式設(shè)置單元格內(nèi)容的水平對齊方式nVert（垂直）：設(shè)置單元格的垂直對齊方式（垂直）：設(shè)置單元格的垂直對齊方式nW和和H：

7、以像素表示的單位設(shè)置單元格的寬度和高：以像素表示的單位設(shè)置單元格的寬度和高度如果要使用百分比為單位，剛在數(shù)值后加百度如果要使用百分比為單位，剛在數(shù)值后加百分比符號（）分比符號（）編輯ppt13Bg(背景背景):設(shè)置單元格的背景圖案（上方）設(shè)置單元格的背景圖案（上方） 設(shè)置單元格的背景顏色（下方）設(shè)置單元格的背景顏色（下方）Boder(邊框邊框):設(shè)置單元格的顏色（邊框）設(shè)置單元格的顏色（邊框）Merge(合并合并):合并單元格合并單元格Split(拆分拆分):拆分單元格拆分單元格No wrap:禁止換行復選框禁止換行復選框Header(標題標題)：將選中的單元格設(shè)置為表格標題，默認：將選中的單

8、元格設(shè)置為表格標題，默認情況下，標題單元格中的內(nèi)容被設(shè)為粗體并且居中對情況下，標題單元格中的內(nèi)容被設(shè)為粗體并且居中對齊齊 編輯ppt146、表格的基本操作、表格的基本操作n選擇表格整體、行、列、單元格選擇表格整體、行、列、單元格n調(diào)整整個表格、行、列大小調(diào)整整個表格、行、列大小n插入插入/刪除行和列刪除行和列n合并合并/拆分單元格拆分單元格n復制及粘貼單元格復制及粘貼單元格編輯ppt15在表格中選定一個或多個單元格，單元格連續(xù)可在表格中選定一個或多個單元格，單元格連續(xù)可以被剪切或復制，不連續(xù)則不能。以被剪切或復制，不連續(xù)則不能。選擇選擇edit/cut（copy）命令或用快捷鍵。）命令或用快捷

9、鍵。 粘貼單元格的操作如下：粘貼單元格的操作如下： 若要在表格內(nèi)粘貼單元格若要在表格內(nèi)粘貼單元格,則單擊想要粘貼的位置則單擊想要粘貼的位置,若要生成一新的表格若要生成一新的表格,則將光標置于表格外。則將光標置于表格外。 選擇選擇edit/paste命令或用快捷鍵。命令或用快捷鍵。編輯ppt16注意：注意：如何讓插入的表格自動居中？如何讓插入的表格自動居中？在屬性面板中的在屬性面板中的“對齊對齊”中選擇中選擇“居中對齊居中對齊”如何讓表格中的文字居中？如何讓表格中的文字居中？（默認下文字是垂直居左對齊）（默認下文字是垂直居左對齊）方法：光標放在文字的位置，在屬性面板中方法：光標放在文字的位置，在

10、屬性面板中“水平水平”中中選擇選擇“居中對齊居中對齊”，“垂直垂直”選擇選擇“居中居中”編輯ppt177、表格排序、表格排序A 選定表格，執(zhí)行選定表格，執(zhí)行command/sort table命令命令B 在彈出的對話框中在彈出的對話框中sort by（排序按）在此下拉列表中選定（排序按）在此下拉列表中選定排序的列。排序的列。Order(順序順序):選擇一字母還是數(shù)字排序選擇一字母還是數(shù)字排序 alphabetically/numberically右側(cè)右側(cè) ascending升序升序descending降序降序Then by(再按再按):設(shè)置在另外一列中進行下級的排序設(shè)置在另外一列中進行下級的排

11、序Sort includes first row（排序包括第一行），如果表格第一（排序包括第一行），如果表格第一行是標題，則不需要選中該復選框行是標題，則不需要選中該復選框。編輯ppt188、格式化表格、格式化表格 選 定 表 格 ， 執(zhí) 行選 定 表 格 ， 執(zhí) 行 c o m m a n d / f o r m a t a b l e在彈出的對話框中選擇一種設(shè)計格式。在彈出的對話框中選擇一種設(shè)計格式。9、表格的嵌套、表格的嵌套 表格嵌套是把一個新的表格插入到原有的單元格表格嵌套是把一個新的表格插入到原有的單元格中，嵌套表格受外面單元格大小限制。中，嵌套表格受外面單元格大小限制。編輯ppt1

12、910、導入與導出表格、導入與導出表格導出表格導出表格要把要把DW中創(chuàng)建的表格數(shù)據(jù)導出必須把數(shù)據(jù)存為一種可中創(chuàng)建的表格數(shù)據(jù)導出必須把數(shù)據(jù)存為一種可分隔數(shù)據(jù)的文件格式，可以使用逗號、冒號、分號、空分隔數(shù)據(jù)的文件格式，可以使用逗號、冒號、分號、空格等作為分隔符。在格等作為分隔符。在DW中不允許導出表格的一部分。中不允許導出表格的一部分。A、將光標定位在表格的任一單元格中、將光標定位在表格的任一單元格中B、選擇、選擇 文件文件/導出導出/導出表格導出表格 命令命令 delimiter(分隔符分隔符)選擇一種分隔符。如選擇一種分隔符。如逗號逗號Linebreaks(換行符換行符)選擇一種操作系統(tǒng)，如選

13、擇一種操作系統(tǒng)，如“windows”。單擊單擊“導出導出”并保存即可。并保存即可。編輯ppt20導入表格導入表格（在數(shù)據(jù)龐大時常用）（在數(shù)據(jù)龐大時常用） 向向DW中導入表格數(shù)據(jù)應將源表格數(shù)據(jù)保存為以某種分中導入表格數(shù)據(jù)應將源表格數(shù)據(jù)保存為以某種分隔符作為數(shù)據(jù)間隔的純文本文件。如果有已經(jīng)制作好隔符作為數(shù)據(jù)間隔的純文本文件。如果有已經(jīng)制作好的的Excel工作表，打開這個工作表執(zhí)行工作表，打開這個工作表執(zhí)行“文件另存為文件另存為”命令，保存類型選擇命令，保存類型選擇“文本文件文本文件”。 選擇選擇file/import/tabular data命令命令 或或insert/table objects/

14、import tabular data命令命令 或在或在insert/command面板中選擇面板中選擇tabular data按鈕按鈕編輯ppt21ndata file(數(shù)據(jù)文件數(shù)據(jù)文件)輸入要導入的文件名稱。輸入要導入的文件名稱。文件導入文件導入Excell文檔或者文檔或者word文檔文檔ndelimiter(定界符定界符)分割表格數(shù)據(jù)的分割符如果選擇分割表格數(shù)據(jù)的分割符如果選擇other右側(cè)會出現(xiàn)新的文本框右側(cè)會出現(xiàn)新的文本框,在其中輸入新的分隔符。在其中輸入新的分隔符。nfit to data適應數(shù)據(jù)適應數(shù)據(jù)set設(shè)置，以指定表格的寬度。設(shè)置，以指定表格的寬度。 注意：在記事本中輸入數(shù)

15、字再按注意：在記事本中輸入數(shù)字再按Tab鍵可做表格鍵可做表格編輯ppt22任務三、任務三、布局表格布局表格1、布局的三種模式、布局的三種模式n標準：標準：最常用的一種模式，即標準模式下顯示的表最常用的一種模式，即標準模式下顯示的表 格等內(nèi)容，最接近在瀏覽器中實際顯示狀態(tài)。格等內(nèi)容，最接近在瀏覽器中實際顯示狀態(tài)。n擴展：擴展：加粗顯示表格的邊框，便于對表格進行選加粗顯示表格的邊框，便于對表格進行選 擇，移動等操作擇，移動等操作,便于對表格及逆行選擇移動等操作。便于對表格及逆行選擇移動等操作。在該模式下顯示的表格，與在瀏覽器中顯示的表格在該模式下顯示的表格，與在瀏覽器中顯示的表格不一致，如需查看表格的視覺效果可以在標準模式不一致，如需查看表格的視覺效果可以在標準模式下進行。下進行。n布局：布局：可以在布局中使用布局表格和布局單元格創(chuàng)可以在布局中使用布局表格和布局單元格創(chuàng)建表格，在該模式下可以方便快捷地創(chuàng)建網(wǎng)頁的布建表格，在該模式下可以方便快捷地創(chuàng)建網(wǎng)頁的布局。局。編輯ppt232、布局表格、布局表格 插入插入布局對象布局對象布局表格布局表格 （頁面上顯示的布局表格外框為綠色，而單元格為（頁面上顯示的布局表格外框為綠色，而單元格為藍色）藍色）3、布局表格的屬性設(shè)置