教學(xué)課題項(xiàng)目3網(wǎng)頁(yè)中的表格—3.3項(xiàng)目實(shí)施、3.4項(xiàng)目拓展授課班級(jí)授課時(shí)間教學(xué)目標(biāo)知識(shí)目標(biāo)1.掌握在網(wǎng)頁(yè)中制作表格的方法；2.掌握CSS屬性的設(shè)置。能力目標(biāo)1.培養(yǎng)學(xué)生自主學(xué)習(xí)、分析問題和解決問題的能力；2.培養(yǎng)學(xué)生熟練運(yùn)用所學(xué)知識(shí)的能力。德育目標(biāo)1.鼓勵(lì)學(xué)生主動(dòng)學(xué)習(xí)，提高學(xué)習(xí)興趣，提升學(xué)生的專業(yè)素質(zhì)；2.培養(yǎng)學(xué)生的團(tuán)隊(duì)合作精神。學(xué)情分析通過前面知識(shí)的學(xué)習(xí)，已經(jīng)代碼編輯工具的使用，掌握了HTML的基本結(jié)構(gòu)、網(wǎng)頁(yè)中各種文本的添加方法以及圖文混排的方法。本項(xiàng)目學(xué)習(xí)使用HTML5的表格制作畢業(yè)生檔案和參賽報(bào)名表，來學(xué)習(xí)表格的各類標(biāo)簽。教學(xué)重點(diǎn)1.網(wǎng)頁(yè)中表格的基本結(jié)構(gòu)；2.編輯表格的方法；3.完整的表格標(biāo)簽；4.CSS屬性設(shè)置。教學(xué)難點(diǎn)1.編輯表格的方法；2.完整的表格標(biāo)簽；3.CSS屬性設(shè)置。教學(xué)方法項(xiàng)目教學(xué)法、多媒體輔助教學(xué)法、講練結(jié)合法教學(xué)過程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容師生活動(dòng)新課導(dǎo)入給學(xué)生展示網(wǎng)頁(yè)頁(yè)面，通過頁(yè)面中的畢業(yè)生檔案和參賽報(bào)名表，導(dǎo)入本節(jié)課的內(nèi)容。教師提出問題，學(xué)生可分組討論，協(xié)作探究。技能學(xué)習(xí)單元格列行單元格列行單元格列行一、項(xiàng)目實(shí)施單元格列行單元格列行單元格列行制作畢業(yè)生檔案，利用所學(xué)的表格知識(shí)，制作如圖所示的畢業(yè)生檔案。教師操作演示，學(xué)生觀看、實(shí)訓(xùn)。必要時(shí)要求一個(gè)具有典型特質(zhì)的學(xué)生與老師互動(dòng)，共同完成操作任務(wù)，借此查看教學(xué)效果。

Step01打開Sublime編輯器，新建一個(gè)文件，保存文件名為“3-7.html”。Step02輸入【！】或者【html:5】，按Tab鍵，會(huì)自動(dòng)完成html基本代碼填充，更改head標(biāo)簽中的title標(biāo)簽的內(nèi)容為“北京理工大學(xué)畢業(yè)生檔案”。Step03在body標(biāo)簽中，輸入【table>tr*5>td*7】后按Tab鍵，插入一個(gè)5行7列的表格。Step04設(shè)置table屬性為：?jiǎn)卧襁吘啵╟ellpadding="0"）；單元格間距（cellspacing="0"）；表格邊框（border="1px"）；背景圖片（background="images/grjlbg.jpg"），如下代碼第1行所示。Step05輸入標(biāo)題“北京理工大學(xué)畢業(yè)生檔案”（使用h3標(biāo)題），如下代碼第2行所示。Step06設(shè)置行tr的高度（height）和首行列td的寬度（width），如下代碼所示。Step07住址內(nèi)容和照片所在單元格需要跨行（colspan）、跨列（rowspan）合并，如下代碼第10、30行所示。Step08按照效果圖輸入表格內(nèi)容。Step09在第10行td標(biāo)簽中，輸入【img】后按Tab鍵，在src屬性中輸入圖片的路徑和名稱。1 <tablecellpadding="0"cellspacing="0"教師操作演示，學(xué)生觀看、實(shí)訓(xùn)。必要時(shí)要求一個(gè)具有典型特質(zhì)的學(xué)生與老師互動(dòng)，共同完成操作任務(wù)，借此查看教學(xué)效果。

border="1px"background="images\grjlbg.jpg">2 <caption><h3>北京理工大學(xué)畢業(yè)生檔案</h3></caption>3 <trheight="30px">4 <tdwidth="70px">姓名</td>5 <tdwidth="80px">王美麗</td>6 <tdwidth="70px">性別</td>7 <tdwidth="80px">女</td>8 <tdwidth="70px">民族</td>9 <tdwidth="80px">漢</td>10 <tdwidth="100px"rowspan="4"><imgsrc="images\wangmeili.jpg"alt="照片"width="100px"height=120px></td>11 </tr>12 <trheight="30px">13 <td>身高</td>14 <td>177CM</td>15 <td>體重</td>16 <td>56kg</td>17 <td>政治面貌</td>18 <td>中共黨員</td> 19 </tr>20 <trheight="30px">21 <td>學(xué)制</td>22 <td>四年制</td>23 <td>學(xué)歷</td>24 <td>大學(xué)本科</td>25 <td>出生年月</td>26 <td>1998年12月</td> 27 </tr>28 <trheight="30px">29 <td>通訊地址</td>30 <tdcolspan="3">北京海淀區(qū)中關(guān)村南大街5號(hào)</td> 31 <td>畢業(yè)時(shí)間</td>32 <td>2018年6月</td> 33 </tr>34 <trheight="30px">35 <td>畢業(yè)學(xué)校</td>36 <tdcolspan="3">北京理工大學(xué)</td>37 <td>專業(yè)</td>38 <tdcolspan="2">計(jì)算機(jī)技術(shù)</td>39 </tr>40 <trheight="30px">教師操作演示，學(xué)生觀看、實(shí)訓(xùn)。必要時(shí)要求一個(gè)具有典型特質(zhì)的學(xué)生與老師互動(dòng)，共同完成操作任務(wù)，借此查看教學(xué)效果。

41 <td>Email</td>42 <tdcolspan="3">wangmeili@</td>43 <td>聯(lián)系電話</td>44 <tdcolspan="2">lt;/td>45 </tr>46 <trheight="30px">47 <tdwidth="70px">英語(yǔ)水平</td>48 <tdcolspan="2"width="200px">英語(yǔ)四級(jí)</td>49 <tdwidth="">計(jì)算機(jī)水平</td>50 <tdcolspan="3">國(guó)家三級(jí)</td>51 </tr>52 <trheight="90px">53 <td>自我評(píng)價(jià)</td>54 <tdcolspan="6"width="540">55 <p>本人的性格開朗，積極樂觀、親和力強(qiáng)，工作認(rèn)真負(fù)責(zé)，時(shí)間觀念強(qiáng)，能按時(shí)完成自己的設(shè)計(jì)任務(wù)。與人和睦相處，團(tuán)隊(duì)溝通意識(shí)和職業(yè)操守觀念強(qiáng)，有上進(jìn)心。</p>56 </td> 57 </tr>58 <trheight="120px">59 <td>所獲獎(jiǎng)勵(lì)</td>60 <tdcolspan="6">61 <ul>62 <li>在全國(guó)文明風(fēng)采大賽中榮獲三等獎(jiǎng)</li>63 <li>在全國(guó)大學(xué)生技能比賽中榮獲一等獎(jiǎng)</li>64 <li>榮獲北京市優(yōu)秀學(xué)生干部</li>65 <li>榮獲校級(jí)學(xué)生書法比賽第一名</li>66 </ul>67 </td> 68 </tr>69 <trheight="60px">70 <td>興趣愛好</td>71 <tdcolspan="6"width="540px">72 <p>書法、網(wǎng)頁(yè)設(shè)計(jì)、運(yùn)動(dòng)</p>73 </td> 74 </tr>75 <trheight="30px">

76 <tdrowspan="3">教育經(jīng)歷</td>77 <tdcolspan="2">時(shí)間</td>78 <tdcolspan="4">所在學(xué)校</td> 79 </tr>80 <trheight="30px">81 <tdcolspan="2">2011.9-2014.6</td>82 <tdcolspan="4">在北京第24中學(xué)學(xué)習(xí)</td> 83 </tr>84 <trheight="30px">85 <tdcolspan="2">2014.9-2018.6</td>86 <tdcolspan="4">在北京理工大學(xué)學(xué)習(xí)</td> 87 </tr>88 <trheight="60px">89 <td>就業(yè)方向<br>及單位</td>90 <tdcolspan="6">北京理工大學(xué)出版社，從事網(wǎng)站前端設(shè)計(jì)開發(fā)</td>91 </tr>92 </table>二、項(xiàng)目拓展此項(xiàng)目拓展是在鞏固前面所學(xué)知識(shí)的基礎(chǔ)上，結(jié)合簡(jiǎn)單CSS樣式對(duì)文本的字體、字號(hào)、顏色等樣式進(jìn)行設(shè)置，制作如圖所示參賽報(bào)名表。

Step01分析需求首先要?jiǎng)?chuàng)建一個(gè)表格，觀察上圖完成單元格行列的合并、單元格背景顏色的設(shè)置、單元格文字對(duì)齊方式設(shè)置等。Step02新建html網(wǎng)頁(yè)文件，保存文件，輸入【！】按Tab健，修改title標(biāo)簽內(nèi)容為“報(bào)名表”。Step03在body中創(chuàng)建table表格，輸入【table>tr*12>td*7】按Tab鍵，按上圖布局合并單元格，輸入內(nèi)容。代碼如下：1 <center>2 <tableborder="1"cellpadding="0"cellspacing="0"width="670px"bgcolor="#ffffff">3 <caption><h2>參賽報(bào)名表</h2></caption>4 <trheight="40px"class="qianlv">5 <thwidth="120px">姓    名</th>6 <tdcolspan="2"width="200px"></td>7 <thwidth="50px">性別</th>8 <tdwidth="50px"></td>9 <thwidth="100px">出生年月</th>10 <tdwidth="150px"></td>11 </tr>12 <trheight="40px">13 <th>學(xué)    校</th>14 <tdcolspan="2"></td>15 <th>班級(jí)</th>16 <tdcolspan="3"></td>17 </tr>18 <trheight="40px"class="qianlv">19 <throwspan="2">參賽項(xiàng)目</th>20 <tdwidth="100px"class="juz">創(chuàng)意征文大賽</td>21 <tdcolspan="5"><inputtype="radio"name="zw"value="Wzhongxuezu">中學(xué)組<inputtype="radio"name="zw"value="Wxiaoxuezu">小學(xué)組</td>22 </tr>23 <trheight="40px"class="qianlv">24 <tdwidth="100px"class="juz">兒童繪畫大賽</td>25 <tdcolspan="5"><input

type="radio"name="hh"value="Hzhongxuezu">中學(xué)組<inputtype="radio"name="hh"value="Hxiaoxuezu">小學(xué)組</td>26 </tr>27 <trheight="40px">28 <th>繪畫作品種類</th>29 <tdcolspan="6">30 <inputtype="checkbox"name="item"value="item1">國(guó)畫31 <inputtype="checkbox"name="item"value="item2">油畫32 <inputtype="checkbox"name="item"value="item3">水彩畫33 <inputtype="checkbox"name="item"value="item4">水粉畫34 <inputtype="checkbox"name="item"value="item5">版畫35 <inputtype="checkbox"name="item"value="item6">彩鉛畫36 <inputtype="checkbox"name="item"value="item7">蠟筆畫37 <inputtype="checkbox"name="item"value="item8">漫畫38 </td> 39 </tr>40 <trheight="40px"class="qianlv">41 <th>監(jiān)護(hù)人姓名</th>42 <tdcolspan="2"></td>43 <thcolspan="2">移動(dòng)電話</th>44 <tdcolspan="2"></td> 45 </tr>46 <trheight="40px">47 <th>推薦人姓名</th>48 <tdcolspan="2"></td>49 <thcolspan="2">移動(dòng)電話</th>50 <tdcolspan="2"></td> 51 </tr>52 <trheight="40px"class="qianlv">53 <th>聯(lián)系地址</th>54 <tdcolspan="6"></td> 55 </tr>56 <trheight="40px">57 <th>郵

    編</th>58 <tdcolspan="2"></td>59 <thcolspan="2">E-mail</th>60 <tdcolspan="2"></td> 61 </tr>62 <trheight="200px">63 <th>創(chuàng)作說明</th>64 <tdcolspan="6"></td>65 </tr>66 <trheight="40px">67 <th>作者真實(shí)性說明</th>68 <tdcolspan="6"class="shengming">我自愿參加少兒繪畫大賽暨創(chuàng)意征文大賽，服從組委會(huì)關(guān)于比賽的各項(xiàng)規(guī)則條款，此次報(bào)名的參賽作品是原創(chuàng)作品，不涉及任何版權(quán)問題，如果所呈報(bào)的作品有虛假欺詐行為，我愿意承擔(dān)法律責(zé)任。</td> 69 </tr>70 <trheight="40px"class="qianlv">71 <th>監(jiān)護(hù)人簽字</th>72