任務(wù)7制作學(xué)生信息表

教案名稱任務(wù)7制作學(xué)生信息表計(jì)劃學(xué)時(shí)4學(xué)時(shí)知識(shí)目標(biāo)掌握創(chuàng)建表格的HTML標(biāo)記掌握合并單元格的方法掌握表格的CSS樣式定義方法能力目標(biāo)能根據(jù)用戶需求制作各式各樣的表格能夠?qū)χ谱鞯谋砀襁M(jìn)行美化素質(zhì)目標(biāo)小組探究學(xué)習(xí)、培養(yǎng)團(tuán)隊(duì)合作能力教學(xué)重點(diǎn)創(chuàng)建表格的HTML標(biāo)記教學(xué)難點(diǎn)表格的樣式設(shè)置教學(xué)模式任務(wù)驅(qū)動(dòng)教學(xué)法線上+線下混合教學(xué)模式教學(xué)活動(dòng)及主要環(huán)節(jié)思政元素切入點(diǎn)第1、2學(xué)時(shí)(表格基本標(biāo)記、合并單元格)課前發(fā)布任務(wù)：觀看學(xué)習(xí)通平臺(tái)相關(guān)學(xué)習(xí)視頻。做課前測(cè)試題。=1\*ROMANI.學(xué)生討論：（10分鐘）表格的標(biāo)記有哪些？如何創(chuàng)建表格？=2\*ROMANII.重難點(diǎn)內(nèi)容講授：一、表格標(biāo)記（35分鐘）代碼如下：<h2>學(xué)生情況表</h2><tableborder="1"><!—border屬性給表格添加邊框--><tr><th>學(xué)號(hào)</th><th>姓名</th><th>性別</th><th>專業(yè)</th><th>入學(xué)成績(jī)</th></tr><tr><td>2021021506</td><td>王大震</td><td>男</td><td>計(jì)算機(jī)應(yīng)用技術(shù)</td><td>390</td></tr><tr><td>2021021507</td><td>于雪</td><td>女</td><td>計(jì)算機(jī)應(yīng)用技術(shù)</td><td>412</td></tr><tr><td>2021021508</td><td>馬文文</td><td>女</td><td>計(jì)算機(jī)應(yīng)用技術(shù)</td><td>376</td></tr></table>（1）<table></table>（2）<tr></tr>（3）<th></th>（4）<td></td>實(shí)例7-2：創(chuàng)建學(xué)生情況表（35分鐘）代碼如下：<h2>學(xué)生成績(jī)表</h2> <tableborder="1"> <tr> <thcolspan="4">基本信息</th><!--列合并4個(gè)單元格--> <thcolspan="3">成績(jī)信息</th><!--列合并3個(gè)單元格--> </tr> <tr> <th>學(xué)號(hào)</th> <th>姓名</th> <th>性別</th> <th>班級(jí)</th> <th>Web前端開(kāi)發(fā)</th> <th>信息技術(shù)基礎(chǔ)</th> <th>C語(yǔ)言</th> </tr> <tr> <td>2021021506</td> <td>王大震</td> <td>男</td> <td>2021級(jí)計(jì)應(yīng)1班</td> <td>90</td> <td>47</td> <td>88</td> </tr> <tr> <td>2021021507</td> <td>于雪</td> <td>女</td> <td>2021級(jí)計(jì)應(yīng)1班</td> <td>89</td> <td>76</td> <td>90</td> </tr> <tr> <td>2021021508</td> <td>馬麗</td> <td>女</td> <td>2021級(jí)計(jì)應(yīng)1班</td> <td>79</td> <td>93</td> <td>53</td> </tr></table>合并單元格的方法：給標(biāo)記<td>或<th>添加colspan或rowspan屬性。=3\*ROMANIII.課堂小結(jié)：（10分鐘）掌握創(chuàng)建表格的各種標(biāo)記及合并單元格的方法；課后作業(yè)：課后實(shí)訓(xùn)7超星學(xué)習(xí)通平臺(tái)作業(yè)第3、4學(xué)時(shí)(使用CSS定義表格樣式、制作學(xué)生信息表格)課前發(fā)布任務(wù)：觀看學(xué)習(xí)通平臺(tái)相關(guān)學(xué)習(xí)視頻。做課前測(cè)試題。=1\*ROMANI.學(xué)生討論：（10分鐘）表格樣式定義主要用到哪些屬性？=2\*ROMANII.重難點(diǎn)內(nèi)容講授：一、實(shí)例7-3，定義表格CSS樣式（30分鐘）樣式代碼：<styletype="text/css">h2{text-align:center;}table{border:1pxsolid#000; /*設(shè)置表格的邊框*/border-collapse:collapse; /*表格的邊框合并*/margin:0auto; text-align:center;}th,td{border:1pxsolid#000; /*設(shè)置單元格的邊框*/}tr:first-child{ /*設(shè)置表格第一行的樣式*/background:#dedede;height:40px;}.redTd{ /*設(shè)置成績(jī)不及格的單元格的樣式*/background:#F4696B;}</style>二、練習(xí)：對(duì)上面的表格自己靈活改變一下樣式。（5分鐘）三、任務(wù)實(shí)現(xiàn)：制作學(xué)生信息表（40分鐘）結(jié)構(gòu)搭建：<h2>學(xué)生信息表</h2> <tableclass="gridtable"> <tr> <throwspan="2">學(xué)號(hào)</th> <thcolspan="3">個(gè)人信息</th> <thcolspan="3">入學(xué)信息</th> </tr> <tr> <th>姓名</th> <th>性別</th> <th>年齡</th> <th>班級(jí)</th> <th>入學(xué)年月</th> <th>宿舍號(hào)</th> </tr> <tr> <td>2021010201</td> <td>王大震</td> <td>男</td> <td>19</td> <td>2021計(jì)應(yīng)1班</td> <td>2021年9月</td> <td>201</td> </tr> <tr> <td>2021010202</td> <td>于雪鯤</td> <td>男</td> <td>19</td> <td>2021計(jì)應(yīng)1班</td> <td>2021年9月</td> <td>201</td> </tr> <tr> <td>2021010203</td> <td>王攀巖</td> <td>男</td> <td>18</td> <td>2021計(jì)應(yīng)1班</td> <td>2021年9月</td> <td>202</td> </tr> <tr> <td>2021010204</td> <td>劉雪紅</td> <td>女</td> <td>17</td> <td>2021計(jì)應(yīng)1班</td> <td>2021年9月</td> <td>502</td> </tr> <tr> <td>2021010205</td> <td>李子海</td> <td>男</td> <td>29</td> <td>2021計(jì)應(yīng)1班</td> <td>2021年9月</td> <td>202</td> </tr> <tr> <td>2021010206</td> <td>張君玉</td> <td>女</td> <td>18</td> <td>2021計(jì)應(yīng)1班</td> <td>2021年9月</td> <td>502</td> </tr></table> 定義樣式：<styletype="text/css"> body,h2,table,th,td{ margin:0; padding:0 } h2{ text-align:center; } .gridtable{ /*定義類選擇器的樣式，應(yīng)用到表格上*/ width:700px; height:200px; margin:0auto; /*讓表格在瀏覽器中水平居中*/ border:1pxsolid#666; /*給表格加邊框線*/ border-collapse:collapse; /*合并表格的邊框線，雙線變單線*/ font-family:"微軟雅黑"; font-size:14px; } .gridtableth,.gridtabletd { /*設(shè)置表格單元格的樣式*/ border:1pxsolid#666; /*給單元格加邊框線*/ padding:2px; /*設(shè)置單元格中的內(nèi)容與邊框線的距離*/ } .gridtableth{ background:#ddd; /*設(shè)置表頭單元格的背景色