1、4.4運(yùn)用表格布局和美化網(wǎng)頁(yè)學(xué)習(xí)目的：1、掌握運(yùn)用表格來(lái)布局和美化網(wǎng)頁(yè)的方法與技巧。 2、培養(yǎng)學(xué)生自主學(xué)習(xí)的能力和小組合作的力。 3、培養(yǎng)學(xué)生美化網(wǎng)頁(yè)的能力，提高學(xué)生審美能力。重點(diǎn)難點(diǎn)：掌握運(yùn)用表格來(lái)布局和美化網(wǎng)頁(yè)的方法與技巧。學(xué)習(xí)方式：情景設(shè)置法 任務(wù)驅(qū)動(dòng)法 學(xué)習(xí)任務(wù)：對(duì)自己小組的網(wǎng)頁(yè)進(jìn)行布局設(shè)計(jì)劃成本 學(xué)習(xí)內(nèi)容：一、表格的使用 表格是網(wǎng)頁(yè)的一個(gè)非常重要元素，因?yàn)镠TML本身并沒(méi)有提供更多的排版手段，我們往往就要借助表格實(shí)現(xiàn)網(wǎng)頁(yè)的精細(xì)排版?？梢哉f(shuō)表格的是網(wǎng)頁(yè)制作中最為重要的一個(gè)技巧，表格運(yùn)用得好壞，直接反映了了網(wǎng)頁(yè)設(shè)計(jì)師的水平。 點(diǎn)擊對(duì)象面板的 ，看到如下的對(duì)話框： Rows：表格的行數(shù)；C

2、olumns：表格的列數(shù)； Width：表格的寬度，單位可以是Pixels（像數(shù)）或Percent（百分比）。按像素定義的表格大小是固定的，而按百分比定義的表格，會(huì)按照瀏覽器的大小而變化。后面會(huì)繼續(xù)深入講解兩種定義方法的區(qū)別； Border：表格線的寬度； Cell Padding：?jiǎn)卧耖g距；Cell Spacing：?jiǎn)卧襁吘?。所謂的單元格，就是表格里面的每一小格。 按照如圖的設(shè)置后，就得到下面這個(gè)表格： 在表格線上點(diǎn)一下，可以全選整個(gè)表格，此時(shí)可在屬性面板看到： Rows，Cols：表格的行和列； W，H：表格的寬和高，通常情況下，我們都不會(huì)定義表格的高度； CellPad，CellSp

3、ace：?jiǎn)卧耖g距和單元格邊距；Border：表格線的寬度； Ailgn：表格的對(duì)齊方式，可以將表格靠左（Left）、置中（Center）、靠右（Right） ：消除行的高度設(shè)置； ：消除列的寬度設(shè)置； ：將表格寬度的設(shè)置由百分比轉(zhuǎn)換為像素； ：將表格寬度的設(shè)置由像素轉(zhuǎn)換為百分比； Bg Color：設(shè)置表格的背景顏色； Brdr Color：設(shè)置表格線的顏色； Bg Image：設(shè)置表格的背景圖，如果設(shè)置了背景圖，背景顏色就失效了；點(diǎn)擊后面的公文包按鈕選擇背景圖； 如果我們把光標(biāo)移到其中一個(gè)單元格，此時(shí)看到的屬性面板又有所不同： ：合并單元格（之前要先選擇相應(yīng)的需要合并單元格）； ：拆分單元

4、格，拆分為多行或多列； Horz：?jiǎn)卧駜?nèi)部的水平對(duì)齊方式，作用與 類似； Vert：?jiǎn)卧駜?nèi)部的縱向?qū)R方式； W，H：?jiǎn)卧竦膶挾扰c高度； Bg：?jiǎn)卧癖尘皥D； Bg：?jiǎn)卧癖尘邦伾?Brdr：?jiǎn)卧襁吙蝾伾?。表格的使用之?根據(jù)上面對(duì)表格和單元格的參數(shù)，我們可以做出以下的表格： 以上是一個(gè)32的表格，表格寬度為350個(gè)像素，每個(gè)單元格的寬度為33%，即占表格的三分之一，其中單元格1和單元格4 已經(jīng)合并；單元格邊距、單元格間距、表格線寬度都為10；表格的底色為灰色，單元格5的邊框顏色為紅色，單元格6的底色為綠色； 在上面的例子，我們將表格線寬度設(shè)置為0，在編輯狀態(tài)下，看到的表格是： 寬度為0的邊框線，在編輯狀態(tài)下會(huì)以虛線表示，而實(shí)際的瀏覽效果為： 可見(jiàn)，寬度為0的表格線就不會(huì)在瀏覽器顯示。其實(shí)所謂的利用表格進(jìn)行排版，就是使用表格線為0的表格，將頁(yè)面劃分為多個(gè)區(qū)域，從而達(dá)到定位排版的效果。另外，表格與表格是可以嵌套的，例如在上面表格中，在單元格2里再插入一個(gè)表格寬度為100%，表格線寬度為0的表格，并分別為單元格設(shè)置不同的背景色，在編輯狀態(tài)下可以看到： 而實(shí)際的瀏覽效果為： 表格的嵌套在網(wǎng)頁(yè)制作中被經(jīng)常使用到，尤其是在新浪、搜狐、網(wǎng)易等門(mén)戶網(wǎng)站中，為了使大