版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領
文檔簡介
教案名稱任務7制作學生信息表計劃學時4學時知識目標掌握創(chuàng)建表格的HTML標記掌握合并單元格的方法掌握表格的CSS樣式定義方法能力目標能根據(jù)用戶需求制作各式各樣的表格能夠對制作的表格進行美化素質目標小組探究學習、培養(yǎng)團隊合作能力教學重點創(chuàng)建表格的HTML標記教學難點表格的樣式設置教學模式任務驅動教學法線上+線下混合教學模式教學活動及主要環(huán)節(jié)思政元素切入點第1、2學時(表格基本標記、合并單元格)課前發(fā)布任務:觀看學習通平臺相關學習視頻。做課前測試題。=1\*ROMANI.學生討論:(10分鐘)表格的標記有哪些?如何創(chuàng)建表格?=2\*ROMANII.重難點內容講授:一、表格標記(35分鐘)代碼如下:<h2>學生情況表</h2><tableborder="1"><!—border屬性給表格添加邊框--><tr><th>學號</th><th>姓名</th><th>性別</th><th>專業(yè)</th><th>入學成績</th></tr><tr><td>2021021506</td><td>王大震</td><td>男</td><td>計算機應用技術</td><td>390</td></tr><tr><td>2021021507</td><td>于雪</td><td>女</td><td>計算機應用技術</td><td>412</td></tr><tr><td>2021021508</td><td>馬文文</td><td>女</td><td>計算機應用技術</td><td>376</td></tr></table>(1)<table></table>(2)<tr></tr>(3)<th></th>(4)<td></td>實例7-2:創(chuàng)建學生情況表(35分鐘)代碼如下:<h2>學生成績表</h2> <tableborder="1"> <tr> <thcolspan="4">基本信息</th><!--列合并4個單元格--> <thcolspan="3">成績信息</th><!--列合并3個單元格--> </tr> <tr> <th>學號</th> <th>姓名</th> <th>性別</th> <th>班級</th> <th>Web前端開發(fā)</th> <th>信息技術基礎</th> <th>C語言</th> </tr> <tr> <td>2021021506</td> <td>王大震</td> <td>男</td> <td>2021級計應1班</td> <td>90</td> <td>47</td> <td>88</td> </tr> <tr> <td>2021021507</td> <td>于雪</td> <td>女</td> <td>2021級計應1班</td> <td>89</td> <td>76</td> <td>90</td> </tr> <tr> <td>2021021508</td> <td>馬麗</td> <td>女</td> <td>2021級計應1班</td> <td>79</td> <td>93</td> <td>53</td> </tr></table>合并單元格的方法:給標記<td>或<th>添加colspan或rowspan屬性。=3\*ROMANIII.課堂小結:(10分鐘)掌握創(chuàng)建表格的各種標記及合并單元格的方法;課后作業(yè):課后實訓7超星學習通平臺作業(yè)第3、4學時(使用CSS定義表格樣式、制作學生信息表格)課前發(fā)布任務:觀看學習通平臺相關學習視頻。做課前測試題。=1\*ROMANI.學生討論:(10分鐘)表格樣式定義主要用到哪些屬性?=2\*ROMANII.重難點內容講授:一、實例7-3,定義表格CSS樣式(30分鐘)樣式代碼:<styletype="text/css">h2{text-align:center;}table{border:1pxsolid#000; /*設置表格的邊框*/border-collapse:collapse; /*表格的邊框合并*/margin:0auto; text-align:center;}th,td{border:1pxsolid#000; /*設置單元格的邊框*/}tr:first-child{ /*設置表格第一行的樣式*/background:#dedede;height:40px;}.redTd{ /*設置成績不及格的單元格的樣式*/background:#F4696B;}</style>二、練習:對上面的表格自己靈活改變一下樣式。(5分鐘)三、任務實現(xiàn):制作學生信息表(40分鐘)結構搭建:<h2>學生信息表</h2> <tableclass="gridtable"> <tr> <throwspan="2">學號</th> <thcolspan="3">個人信息</th> <thcolspan="3">入學信息</th> </tr> <tr> <th>姓名</th> <th>性別</th> <th>年齡</th> <th>班級</th> <th>入學年月</th> <th>宿舍號</th> </tr> <tr> <td>2021010201</td> <td>王大震</td> <td>男</td> <td>19</td> <td>2021計應1班</td> <td>2021年9月</td> <td>201</td> </tr> <tr> <td>2021010202</td> <td>于雪鯤</td> <td>男</td> <td>19</td> <td>2021計應1班</td> <td>2021年9月</td> <td>201</td> </tr> <tr> <td>2021010203</td> <td>王攀巖</td> <td>男</td> <td>18</td> <td>2021計應1班</td> <td>2021年9月</td> <td>202</td> </tr> <tr> <td>2021010204</td> <td>劉雪紅</td> <td>女</td> <td>17</td> <td>2021計應1班</td> <td>2021年9月</td> <td>502</td> </tr> <tr> <td>2021010205</td> <td>李子海</td> <td>男</td> <td>29</td> <td>2021計應1班</td> <td>2021年9月</td> <td>202</td> </tr> <tr> <td>2021010206</td> <td>張君玉</td> <td>女</td> <td>18</td> <td>2021計應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{ /*定義類選擇器的樣式,應用到表格上*/ width:700px; height:200px; margin:0auto; /*讓表格在瀏覽器中水平居中*/ border:1pxsolid#666; /*給表格加邊框線*/ border-collapse:collapse; /*合并表格的邊框線,雙線變單線*/ font-family:"微軟雅黑"; font-size:14px; } .gridtableth,.gridtabletd { /*設置表格單元格的樣式*/ border:1pxsolid#666; /*給單元格加邊框線*/ padding:2px; /*設置單元格中的內容與邊框線的距離*/ } .gridtableth{ background:#ddd; /*設置表頭單元格的背景色
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 外貿(mào)售貨合同范例
- 流動訂餐服務合同范例
- 合同范例電腦排版
- 冷飲供銷合同范例
- 氣買賣合同范例
- 居間服務合同范例債權轉讓
- 會務項目提成合同范例
- 拆遷過戶合同范例
- 擔保公證合同范例
- 對沖基金合同范例
- 2024年可行性研究報告投資估算及財務分析全套計算表格(含附表-帶只更改標紅部分-操作簡單)
- 國家開放大學《初級經(jīng)濟學》形考任務1-3參考答案
- 創(chuàng)業(yè)修煉智慧樹知到期末考試答案章節(jié)答案2024年同濟大學
- 行政執(zhí)法考試試卷及參考答案
- 2024春期國開電大《應用寫作(漢語)》形考任務1-6參考答案
- MOOC 英文技術寫作-東南大學 中國大學慕課答案
- 企業(yè)EHS風險管理基礎智慧樹知到期末考試答案2024年
- 國開2024年《獸醫(yī)基礎》形考任務1-4答案
- 2023年福建省考評員考試題
- 激光原理與激光技術習題全解(北工大)
- 中央空調設備運行管理方案課案
評論
0/150
提交評論