教學(xué)課題：創(chuàng)建表格
教學(xué)目標(biāo)：1、學(xué)會(huì)添加表格、設(shè)置表格屬性。
2、掌握設(shè)置表格中行和列屬性的方法。
?。?、掌握拆分單元格，合并單元格的方法。
教學(xué)重點(diǎn)：表格的基本操作、表格及單元格的屬性設(shè)置。
教學(xué)難點(diǎn)：選擇表格及單元格，并進(jìn)行屬性設(shè)置。
教學(xué)方法：任務(wù)驅(qū)動(dòng)法、小組合組學(xué)習(xí)法。
教學(xué)課時(shí)：２節(jié)
教學(xué)過程：
1、導(dǎo)入：略
2、講解新課
演示案例1：電視劇頻道
【需求分析】： “隔距邊框”在網(wǎng)頁中主要用來排列各個(gè)欄目或頻道的項(xiàng)目列表中使用。
【技能要點(diǎn)】
- 插入表格
- 設(shè)置表格屬性
- 設(shè)置單元格屬性
【操作步驟】
步驟１：打開Dreamweaver CS5，新建一個(gè)網(wǎng)頁，保存為“電視劇頻道.htm”。設(shè)置頁面屬性中的文字大小為“12px”,在光標(biāo)處添加“電視劇頻道”文字，按Shift+Enter手工換行。
步驟２：網(wǎng)頁中插入一個(gè)3行3列的表格對(duì)象，表格屬性板中把”width”表格的寬度設(shè)定為200像素，“border”（邊框）設(shè)定為0，“cellspacing”（間距）設(shè)定為2，“cellspadding”（邊距，也稱為填充）設(shè)定為1，如圖6.7所示?！?/p>
表6.7 表格屬性面板
步驟３：按住鼠標(biāo)左鍵不放，在各個(gè)單元格上拖動(dòng)，同時(shí)選中6個(gè)單元格對(duì)象，如圖6.8所示。在單元格屬性板中將其單元格背景設(shè)定為“紅色”，如圖6.9所示。注意該顏色即隔距邊框的顏色。
表6.8 選中單元格
表6.9 表格屬性面板
步驟４：為了實(shí)現(xiàn)隔距的效果，我們這里要用到“嵌套表格”的制作了。選中左上角單元格，在單元格屬性面板中將“水平”設(shè)定為左對(duì)齊，“垂直”設(shè)定為頂端。如圖6.10所示。
表6.10表格屬性面板
步驟５：依次在六個(gè)單元格中都插入一個(gè)1行1列的表格對(duì)象，每一個(gè)表格的屬性都設(shè)定一樣。將表格“border”（邊框）、“cellspadding”（邊距）、“cellspacing”（間距）全部設(shè)定為0，如圖6.11所示。
同時(shí)在代碼窗口中將每個(gè)表格的背景顏色均設(shè)定為同網(wǎng)頁背景色“白色”，另外還有一點(diǎn)就是，將“Width”（寬）和“Height”（高）均設(shè)定為比例顯示狀態(tài)下的“100%”，這樣可以使它根據(jù)大小自動(dòng)充滿整個(gè)單元格。這樣1個(gè)像素邊框的單元格隔距就做好。
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
表6.11 表格屬性面板
步驟６：向表格中添加電視劇的類型頻道的文字，為了使文字和邊框有一定的間距，我們把上面的代碼中的“cellspacing”（間距）全部設(shè)定為6.12，使內(nèi)容和邊框有6像素的間距。編輯頁面如圖6.12所示。
表6.12編輯頁面
3、作業(yè)：在網(wǎng)上設(shè)置一個(gè)“考生登記表”（如圖６.13），主要是根據(jù)表格屬性和單元格屬性來設(shè)置表格的外觀。
圖6.13考生登記表
教學(xué)課題：表格的數(shù)據(jù)處理
教學(xué)目標(biāo)：1、掌握表格數(shù)據(jù)的導(dǎo)入和導(dǎo)出
２、掌握插入和刪除表格的行與列
３、掌握表格關(guān)鍵字的排序
４、能夠在單元格中正確插入文字、圖片、聲音等素材。
教學(xué)重點(diǎn)：表格中關(guān)鍵字的排序
教學(xué)難點(diǎn)：網(wǎng)頁和其他軟件中的數(shù)據(jù)導(dǎo)入和導(dǎo)出共享
教學(xué)方法：任務(wù)驅(qū)動(dòng)法、小組合組學(xué)習(xí)法。
教學(xué)課時(shí)：２節(jié)
教學(xué)過程：1、導(dǎo)入新課：略
2、講解新課：
演示案例２：家庭支出統(tǒng)計(jì)
【需求分析】對(duì)于一個(gè)新組成的年青家庭，每月在衣食住行還有娛樂等方面有著不小的開銷，如果不清楚自己的消費(fèi)著重點(diǎn)，有可能會(huì)入不敷出，成為月光族。為此我們?cè)O(shè)計(jì)一個(gè)家庭月支出統(tǒng)計(jì)表，直觀分析每個(gè)月的消費(fèi)大方向
【技能要點(diǎn)】
- 插入行或列。
- 刪除行或列
- 導(dǎo)入表格數(shù)據(jù)文件
- 表格關(guān)鍵字的排序
【操作步驟】
步驟１：打開Dreamweaver CS5，新建一個(gè)網(wǎng)頁，保存為“家庭支出統(tǒng)計(jì).htm”。
步驟２：在空白文檔中輸入“家庭支出統(tǒng)計(jì)”，設(shè)為“標(biāo)題1”大小，并居中。
步驟３：按<Enter>鍵換行，從“文件”菜單中選擇“導(dǎo)入”命令，然后選擇“Excel文檔”，導(dǎo)入“家庭支出統(tǒng)計(jì).xls”文件，如圖6.25所示，這樣Excel表格就被導(dǎo)入到頁面中了。
圖6.25 導(dǎo)入Excel表
步驟４：選中表格對(duì)象，表格屬性板中把表格的“寬度”設(shè)定為700像素， “填充”設(shè)定為5，“間距”設(shè)定為0，“邊框”設(shè)定為1，“對(duì)齊方式”設(shè)定為“居中對(duì)齊”如圖6.26所示。 
圖6.26 表格屬性
步驟５：拖動(dòng)鼠標(biāo)選中所有單元格對(duì)象，設(shè)置單元格屬性“水平”設(shè)定為“居中對(duì)齊”，“垂直”設(shè)定為“居中”。
步驟６：首先將光標(biāo)移動(dòng)到表格內(nèi)任一單元格內(nèi)，或選定表格，然后在“命令”菜單中選擇“排序表格”，打開排序表格對(duì)話框，如圖6所示。排序后的結(jié)果如圖6.27所示。
圖6.27 排序后效果圖
步驟７：選中表格第一行，然后單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“表格”→“插入行或列”命令，彈出“插入行或列”對(duì)話框，行數(shù)中輸入“1”，位置中選擇“所選之下”，最后按“確定”按鈕,如圖6.28所示。
圖6.28 在表格中向下插入一行
步驟８：選中表格第一列中前兩個(gè)單元格，合并單元格；再次選中表格最后一列中前兩個(gè)單元格，合并單元格；把“合計(jì)”文字改成“合計(jì)人民幣”，效果如圖6.29所示。
圖6.29 合共單元格后效果圖
步驟９：分別在“衣”、“食”、“住”、“行”和“其它”下面的單元格添加“yi.jpg”、“shi.jpg”、“zhu.jpg”、“xing.jpg” 和“qita.jpg”五張圖片，重新設(shè)定圖片大小為：寬84，高76。最終效果如圖6.29所示。
3、作業(yè)：小虎隊(duì)由三個(gè)年輕男孩組成，他們的歌曲具有陽光向上的特點(diǎn)，一直以來經(jīng)常在網(wǎng)上點(diǎn)播?，F(xiàn)為這些好歌設(shè)計(jì)一個(gè)點(diǎn)播排行榜
圖6.30 歌曲排行榜
教學(xué)課題：利用表格對(duì)頁面進(jìn)行布局
教學(xué)目標(biāo)： １、了解構(gòu)建表格布局網(wǎng)頁的思路。
- 能夠根據(jù)網(wǎng)頁設(shè)計(jì)內(nèi)容，正確布局表格的結(jié)構(gòu)，掌握表格嵌套的設(shè)計(jì)方法。
教學(xué)重點(diǎn)：使用表格布局網(wǎng)頁并利用表格精確定位網(wǎng)頁元素。
教學(xué)難點(diǎn)： 正確布局表格的結(jié)構(gòu)。
教學(xué)方法：任務(wù)驅(qū)動(dòng)法、小組合組學(xué)習(xí)法。
教學(xué)課時(shí)：２節(jié)
教學(xué)過程：1、導(dǎo)入新課：略
2、講解新課：
演示案例3：個(gè)人天地
【需求分析】
【技能要點(diǎn)】
- 構(gòu)建表格布局網(wǎng)頁的思路。
- 創(chuàng)建第一個(gè)表格和其他表格的嵌套。
- 設(shè)置“table”表格有一個(gè)非常重要的“frame”邊框?qū)傩浴?/li>
【操作步驟】
步驟１：打開Dreamweaver CS5，新建一個(gè)網(wǎng)頁，保存為“個(gè)人天地.htm”。添加6行5列的表格，寬750像素，居中對(duì)齊。表格屬性如圖6.34所示。 
圖6.34表格屬性設(shè)置
步驟２：分別選中表格的第1列和第5列單元格，設(shè)置列寬為“60”，再次選中表格的第2列和第4列單元格，設(shè)置列寬為“26”。
步驟３： 選中表格第1行第3個(gè)單元格，插入圖片“shouyetitle.jpg”。
步驟４：選中表格第2行，合并單元格，刪除表格中的“ ”（空格），然后把行高設(shè)定為“5”。
步驟５：選中表格第3行，合并中間的3個(gè)單元格，插入圖片“daohangtiao1.jpg”。
步驟６：選中表格第4行，合并單元格，刪除表格中的“ ”（空格），然后把行高設(shè)定為“19”。
步驟７：選中表格第6行，合并單元格，插入水平線，設(shè)置長度為“621” 像素。
步驟８：在水平線下方，輸入導(dǎo)航欄文字“| 首頁 | 網(wǎng)頁制作 | 讀者服務(wù) | 個(gè)人天地 |”，并分別為導(dǎo)航欄文字做超鏈接，將合并后的單元格行高設(shè)為“52”，水平居中，垂直居中。做到這一步的效果如圖6.35所示。 
圖6.35 第一個(gè)表格效果圖
步驟９：選中表格第5行，在單元格內(nèi)插入一個(gè)1行1列的新表格，表格寬設(shè)定為500像素，居中對(duì)齊，邊框?yàn)?。然后切換到代碼窗口，在<table>標(biāo)簽中添加frame="vsides"屬性，設(shè)置表格只顯示豎線，把表格的邊框線設(shè)定為黑色bordercolor="#000000"，設(shè)置表格的高度height="600"像素。并且把表格內(nèi)部單元格的邊框設(shè)定為不顯示，操作屬性如圖6.36所示。
<table width="500" height="600" border="1" align="center" bordercolor="#000000" frame="vsides"><tr><td style="border:none">。
圖6.36 第二個(gè)表格的屬性
步驟１０：光標(biāo)放在第二個(gè)表格內(nèi)，合并中間的3個(gè)單元格，在此單元格中插入一個(gè)5行3列的表格，為了區(qū)分這兩個(gè)表格，將插入的新表格命名為“tabel3”,設(shè)定表格的寬度為100%，填充設(shè)定為6，間距設(shè)定為0，邊框設(shè)定為0。表格屬性如圖6.37所示。
圖6.37 第三個(gè)表格的屬性
步驟１１：選中tabel3表格第1行，合并第1、2個(gè)單元格，刪除這一行表格中所有的“ ”（空格），然后把行高設(shè)定為“1”，表格背景顏色設(shè)定為“#000000”。
步驟１２：選中tabel3表格第2行的第1、2個(gè)單元格，合并單元格，把單元格背景色設(shè)定為“#0099FF”，單元格中輸入 “英語園地”文字。
步驟１３：選中tabel3表格第3行，合并所有單元格，刪除這一行表格中所有的“ ”（空格），然后把行高設(shè)定為“1”，表格背景顏色設(shè)定為“#000000”。
步驟１４：選中tabel3表格第4行，合并2、3個(gè)單元格，添加文本。
步驟１５：選中tabel3表格第5行，輸入“>>>Enter”文字，并把單元格的水平屬性設(shè)定為“右對(duì)齊”。做到這一步的效果如圖6.38所示。
圖6.38 第三個(gè)表格制作效果圖
步驟１６：下面是選中標(biāo)簽<tabel3>，復(fù)制<tabel3>為<tabel4>、<tabel5>、<tabel6>，粘貼到下面，然后修改文字信息。重復(fù)這步操作。
