布局表格的應(yīng)用課件

1、布局表格的應(yīng)用 Dreamweaver MX 2004網(wǎng)頁設(shè)計(jì)教學(xué)設(shè)計(jì) 教學(xué)目標(biāo)熟練掌握布局表格和布局單元格的繪制方法靈活使用布局表格和布局單元格進(jìn)行頁面布局、設(shè)計(jì)。 知識重點(diǎn)：布局表格、布局單元格的繪制方法和參數(shù)設(shè)置。 知識難點(diǎn)：熟練掌握布局表格與單元格的編輯和具體應(yīng)用。 課題引入：(3分鐘) 不同的人設(shè)計(jì)的網(wǎng)頁頁面各不相同，各具特色。但在制作網(wǎng)頁之前都必須要做的一件工作是對網(wǎng)頁頁面進(jìn)行區(qū)域的劃分，根據(jù)網(wǎng)頁的內(nèi)容和功能區(qū)域不同，將網(wǎng)頁頁面劃分成不同區(qū)域，如：標(biāo)題區(qū)域，圖片展示區(qū)域，內(nèi)容顯示區(qū)域，文字說明區(qū)域等。這種對頁面進(jìn)行功能區(qū)域的劃分操作就是我們今天所要講的一個(gè)概念“布局”。 在實(shí)際的網(wǎng)

2、頁制作過程中，我們比較常用的布局方法利用基礎(chǔ)表格進(jìn)行頁面內(nèi)容布局，利用布局表格及布局單元格或利用框架等進(jìn)行頁面布局?；A(chǔ)表格的優(yōu)、缺點(diǎn)：（實(shí)例展示）基礎(chǔ)表格的制作方便，快捷，但表格的寬、高不易控制，在插入圖片或者文字的時(shí)候，會(huì)影響其它單元格的高度及寬度。布局表格及布局單元格特點(diǎn)：繪制布局表格和單元格的方法簡單，能隨心所欲地繪制不同風(fēng)格的網(wǎng)頁布局，做出各具特色的網(wǎng)頁版面。 2、鼠標(biāo)左鍵單擊布局表格圖標(biāo)后，將鼠標(biāo)移到一編輯區(qū)，鼠標(biāo)變成“十”形光標(biāo)，按下左鍵拖動(dòng)繪制布局表格。布局單元格的繪制：略（學(xué)生自己參照布局表格的繪制方法繪制布局單元格），要注意Alt鍵的應(yīng)用。說明：1、布局表格中不能直接插入網(wǎng)

3、頁元素，但可以插入新的布局表格，形成嵌套布局表格。2、布局單元格不能獨(dú)立存在，布局單元格一定要在布局表格里面，并受限于布局表格，網(wǎng)頁中的元素只能插入到布局單元格中。讓學(xué)生根據(jù)樣圖自己繪制布局表格及單元格(15分鐘)外框表格755*650標(biāo)題欄表格755*63導(dǎo)航欄表格755*33表格755*50單元格150*130單元格150*30圖片區(qū)表格164*507三、布局表格和布局單元格的簡單應(yīng)用及布局效果制作（10分鐘）清遠(yuǎn)美食網(wǎng)-首頁設(shè)計(jì)效果 1、觀察實(shí)例網(wǎng)站 “清遠(yuǎn)美食網(wǎng)” 首頁設(shè)計(jì)效果圖，說說頁面是如何布局和分區(qū)。（2分鐘，提問學(xué)生）2、按要求繪制布局表格和布局單元格，具體參數(shù)如上圖所示：（注意嵌套表格的繪制）3、根據(jù)樣圖在相應(yīng)位置插入相應(yīng)的圖片和文字。4、完成頁面的制作。注：巡堂，對學(xué)生操作中出現(xiàn)的常見問題進(jìn)行歸納、講解。 四、展示作品并進(jìn)行實(shí)例小結(jié)（5分鐘）1、繪制嵌套表格和布局單元格時(shí)一定要注意寬高設(shè)置（以插入對象寬度、高度為參考），如果超出布局表格的范圍，將自動(dòng)增加多余的嵌套表格。2、使用布