Chapter4_表格0.ppt

1、1,網(wǎng)頁設(shè)計與制作實用教程 （Dreamweaver+Flash+Photoshop）,2013 . 3,2,1. 插入表格,插入表格： 單擊網(wǎng)頁中需要插入表格的地方 在菜單欄選擇“插入”“表格”命令，或者單擊“常用”工具欄里的“表格”按鈕，或者運(yùn)用組合鍵CTRL+ALT+T 設(shè)置表格大小 行數(shù)和列數(shù) 表格寬度：像素設(shè)置表格寬度的實際值，百分比設(shè)置表格與頁面寬度的相對比值,3,1. 插入表格,導(dǎo)入表格數(shù)據(jù)文件 利用插入表格數(shù)據(jù)命令將其他文檔的數(shù)據(jù)加入到網(wǎng)頁中，并生成表格。比如可以將表格數(shù)據(jù)設(shè)置為 .txt格式，并且用逗號、分號、冒號等分隔符分開數(shù)據(jù)，以便自動生成表格。 操作方法 文件導(dǎo)入表格式

2、數(shù)據(jù) 插入表格對象導(dǎo)入表格式數(shù)據(jù) 常用工具的“表格數(shù)據(jù)”按鈕,4,2. 選擇表格,選擇整個表格 光標(biāo)置于表格某單元格中，修改表格選擇表格 光標(biāo)置于表格某單元格中，右擊，表格選擇表格 光標(biāo)置于表格尾部（在表格的同一行，但不在表格之內(nèi)），向左拖動鼠標(biāo) 單擊表格的邊線 選擇單個單元格 光標(biāo)置于所要選擇的單元格中，按 Ctrl+A 光標(biāo)置于所要選擇的單元格中，向右拖動鼠標(biāo) 光標(biāo)置于所要選擇的單元格中，編輯全選 Ctrl+單擊所要選擇的單元格,5,2. 選擇表格,選擇多個單元格 Ctrl+單擊所要選擇的所有單元格 光標(biāo)置于單元格中，拖動鼠標(biāo)，選擇多個單元格 選擇整行，光標(biāo)置于該行左邊緣，光標(biāo)變成時單擊

3、選擇整列，光標(biāo)置于該列上邊緣，光標(biāo)變成時單擊 選擇全部單元格 光標(biāo)置于第1個單元格中，拖動鼠標(biāo)至最后一個單元格 光標(biāo)置于第1個單元格中，Shift鍵+單擊最后一個單元格 光標(biāo)置于第1行左邊緣，當(dāng)光標(biāo)變成時，向下拖動 光標(biāo)置于第1列上邊緣，當(dāng)光標(biāo)變成時，向右拖動,6,3. 編輯表格,邊框 點擊邊框設(shè)置表格邊框的粗細(xì)效果 單元格邊距：是指單元格中填充內(nèi)容距離邊框的距離大小 單元格間距：是指相鄰單元格之間的距離,7,3. 編輯表格,理解表格邊框、單元格邊框、間距、填充（邊距）,8,3. 編輯表格-標(biāo)題與格式,標(biāo)題：表格的標(biāo)題名稱，默認(rèn)出現(xiàn)在表格上方 摘要：為表格的備注，不會在網(wǎng)頁中顯示 表格的行列標(biāo)

4、題 無：不設(shè)置表格的行或列的標(biāo)題 左：可以為每行在第一欄設(shè)置一個標(biāo)題 頂部：可以為每列在頭一欄設(shè)置一個標(biāo)題 兩者：可以同時輸入“左”端和“頂部”的標(biāo)題,9,3. 編輯表格-屬性設(shè)置,表格 設(shè)置表格背景 選擇整個表格，單擊屬性面板上“背景顏色”，在調(diào)色板中選擇，或在文本框中直接輸入顏色色碼 設(shè)置圖像背景，右擊表格編輯標(biāo)簽瀏覽器特定的，設(shè)置背景圖片 表格對齊 表格和頁面對齊：可以在table標(biāo)記中用align屬性。或者用 div標(biāo)記的align屬性 表格內(nèi)容對齊：包括數(shù)據(jù)在水平方向和垂直方向的對齊,10,3. 編輯表格-屬性設(shè)置,控制表格和單元格大小 表格能方便將網(wǎng)頁劃分為任意大小的矩形區(qū)域，可用

5、作排版工具，即設(shè)置表格和單元格大小 用 width 和 height 屬性設(shè)置，取值可以是像素數(shù)，也可以是百分比，但一般都使用絕對的像素數(shù) 設(shè)置單元格的背景 與設(shè)置整個頁面的背景類似，表格或單元格也可以設(shè)置背景顏色或圖案；設(shè)置方法為：在TABLE、TR或TD標(biāo)記符內(nèi)使用bgcolor屬性設(shè)置背景色；使用background屬性設(shè)置背景圖案,11,制作樣例,例一：明星相冊,12,制作樣例,要求： 標(biāo)題“明星相冊” 設(shè)置字體：黑體、大小：36像素、 顏色：#FFCC33、居中對齊 創(chuàng)建導(dǎo)航位置的表格1行5列、表格寬度700像素、邊框為0、填充3、間距0、背景顏色為：#FF99CC、每個單元格必須一

6、樣寬，且里面的文字居中對齊 設(shè)置網(wǎng)頁背景顏色為：#009900，設(shè)置導(dǎo)航鏈接 創(chuàng)建圖像展示表格3行4列,13,制作樣例,其他要求：,14,制作樣例,知識點： 1）選定表格和單元格 選定整個表格 選定行或列 選定單元格 2）設(shè)置表格和單元格的屬性 3）調(diào)整表格的尺寸 選定表格鼠標(biāo)拖動 設(shè)置屬性值 調(diào)整行和列的寬度,15,制作樣例,例二：制作課程表 步驟一：插入5行6列的表格，寬度為500像素，邊框、填充、間距各為1；并調(diào)整表格錄入文字如下圖所示：,16,制作樣例,知識點： 1）添加/刪除行列 選中表格，通過【屬性】面板修改行、列數(shù) 選中單元格，通過【修改】菜單修改行、列數(shù) 右擊表格表格 選中行/

7、列，delete刪除 2）單元格的合并和拆分 3）復(fù)制、移動和清除 同其他對象的操作,17,制作樣例,步驟二：在步驟一的基礎(chǔ)上，設(shè)置表格屬性，如下圖所示效果：,18,制作樣例,表格屬性參數(shù)：,19,制作樣例,步驟三：設(shè)置單元格屬性，完成課程表。如下圖所示：,20,制作樣例,要求： 所有單元格居中對齊，字體大小為12px 第一列和第二行字體加粗 第二行背景顏色設(shè)置為：#B6C9D7；填寫科目的單元格設(shè)置背景顏色：#E9F1F8 最上一行字體：隸書 36px 紅色；設(shè)置行高70像素；背景圖片：bg.gif 左上角單元格，插入圖片logo.gif，設(shè)置圖片寬、高為60，并設(shè)置圖片在單元格的頂部對齊 最下一行設(shè)置行高20