（中职）Web前端设计基础 项目三-2电子教案

（中职）Web前端设计基础项目三-2电子教案（中职）Web前端设计基础项目三-2电子教案（中职）Web前端设计基础项目三-2电子教案教学课题项目3网页中的表格—3.3项目实施、3.4项目拓展授课班级授课时间教学目标知识目标1.掌握在网页中制作表格的方法；2.掌握CSS属性的设置。能力目标1.培养学生自主学习、分析问题和解决问题的能力；2.培养学生熟练运用所学知识的能力。德育目标1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质；2.培养学生的团队合作精神。学情分析通过前面知识的学习，已经代码编辑工具的使用，掌握了HTML的基本结构、网页中各种文本的添加方法以及图文混排的方法。本项目学习使用HTML5的表格制作毕业生档案和参赛报名表，来学习表格的各类标签。教学重点1.网页中表格的基本结构；2.编辑表格的方法；3.完整的表格标签；4.CSS属性设置。教学难点1.编辑表格的方法；2.完整的表格标签；3.CSS属性设置。教学方法项目教学法、多媒体辅助教学法、讲练结合法教学过程教学环节教学内容师生活动新课导入给学生展示网页页面，通过页面中的毕业生档案和参赛报名表，导入本节课的内容。教师提出问题，学生可分组讨论，协作探究。技能学习单元格列行单元格列行单元格列行一、项目实施单元格列行单元格列行单元格列行制作毕业生档案，利用所学的表格知识，制作如图所示的毕业生档案。Step01打开Sublime编辑器，新建一个文件，保存文件名为“3-7.html”。Step02输入【！】或者【html:5】，按Tab键，会自动完成html基本代码填充，更改head标签中的title标签的内容为“北京理工大学毕业生档案”。Step03在body标签中，输入【table>tr*5>td*7】后按Tab键，插入一个5行7列的表格。Step04设置table属性为：单元格边距（cellpadding="0"）；单元格间距（cellspacing="0"）；表格边框（border="1px"）；背景图片（background="images/grjlbg.jpg"），如下代码第1行所示。Step05输入标题“北京理工大学毕业生档案”（使用h3标题），如下代码第2行所示。Step06设置行tr的高度（height）和首行列td的宽度（width），如下代码所示。Step07住址内容和照片所在单元格需要跨行（colspan）、跨列（rowspan）合并，如下代码第10、30行所示。Step08按照效果图输入表格内容。Step09在第10行td标签中，输入【img】后按Tab键，在src属性中输入图片的路径和名称。1 <tablecellpadding="0"cellspacing="0"border="1px"background="images\grjlbg.jpg">2 <caption><h3>北京理工大学毕业生档案</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>学制</td>22 <td>四年制</td>23 <td>学历</td>24 <td>大学本科</td>25 <td>出生年月</td>26 <td>1998年12月</td> 27 </tr>28 <trheight="30px">29 <td>通讯地址</td>30 <tdcolspan="3">北京海淀区中关村南大街5号</td> 31 <td>毕业时间</td>32 <td>2018年6月</td> 33 </tr>34 <trheight="30px">35 <td>毕业学校</td>36 <tdcolspan="3">北京理工大学</td>37 <td>专业</td>38 <tdcolspan="2">计算机技术</td>39 </tr>40 <trheight="30px">41 <td>Email</td>42 <tdcolspan="3">wangmeili@</td>43 <td>联系电话</td>44 <tdcolspan="2">lt;/td>45 </tr>46 <trheight="30px">47 <tdwidth="70px">英语水平</td>48 <tdcolspan="2"width="200px">英语四级</td>49 <tdwidth="">计算机水平</td>50 <tdcolspan="3">国家三级</td>51 </tr>52 <trheight="90px">53 <td>自我评价</td>54 <tdcolspan="6"width="540">55 <p>本人的性格开朗，积极乐观、亲和力强，工作认真负责，时间观念强，能按时完成自己的设计任务。与人和睦相处，团队沟通意识和职业操守观念强，有上进心。</p>56 </td> 57 </tr>58 <trheight="120px">59 <td>所获奖励</td>60 <tdcolspan="6">61 <ul>62 <li>在全国文明风采大赛中荣获三等奖</li>63 <li>在全国大学生技能比赛中荣获一等奖</li>64 <li>荣获北京市优秀学生干部</li>65 <li>荣获校级学生书法比赛第一名</li>66 </ul>67 </td> 68 </tr>69 <trheight="60px">70 <td>兴趣爱好</td>71 <tdcolspan="6"width="540px">72 <p>书法、网页设计、运动</p>73 </td> 74 </tr>75 <trheight="30px">76 <tdrowspan="3">教育经历</td>77 <tdcolspan="2">时间</td>78 <tdcolspan="4">所在学校</td> 79 </tr>80 <trheight="30px">81 <tdcolspan="2">2011.9-2014.6</td>82 <tdcolspan="4">在北京第24中学学习</td> 83 </tr>84 <trheight="30px">85 <tdcolspan="2">2014.9-2018.6</td>86 <tdcolspan="4">在北京理工大学学习</td> 87 </tr>88 <trheight="60px">89 <td>就业方向<br>及单位</td>90 <tdcolspan="6">北京理工大学出版社，从事网站前端设计开发</td>91 </tr>92 </table>二、项目拓展此项目拓展是在巩固前面所学知识的基础上，结合简单CSS样式对文本的字体、字号、颜色等样式进行设置，制作如图所示参赛报名表。Step01分析需求首先要创建一个表格，观察上图完成单元格行列的合并、单元格背景颜色的设置、单元格文字对齐方式设置等。Step02新建html网页文件，保存文件，输入【！】按Tab健，修改title标签内容为“报名表”。Step03在body中创建table表格，输入【table>tr*12>td*7】按Tab键，按上图布局合并单元格，输入内容。代码如下：1 <center>2 <tableborder="1"cellpadding="0"cellspacing="0"width="670px"bgcolor="#ffffff">3 <caption><h2>参赛报名表</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>学    校</th>14 <tdcolspan="2"></td>15 <th>班级</th>16 <tdcolspan="3"></td>17 </tr>18 <trheight="40px"class="qianlv">19 <throwspan="2">参赛项目</th>20 <tdwidth="100px"class="juz">创意征文大赛</td>21 <tdcolspan="5"><inputtype="radio"name="zw"value="Wzhongxuezu">中学组<inputtype="radio"name="zw"value="Wxiaoxuezu">小学组</td>22 </tr>23 <trheight="40px"class="qianlv">24 <tdwidth="100px"class="juz">儿童绘画大赛</td>25 <tdcolspan="5"><inputtype="radio"name="hh"value="Hzhongxuezu">中学组<inputtype="radio"name="hh"value="Hxiaoxuezu">小学组</td>26 </tr>27 <trheight="40px">28 <th>绘画作品种类</th>29 <tdcolspan="6">30 <inputtype="checkbox"name="item"value="item1">国画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>监护人姓名</th>42 <tdcolspan="2"></td>43 <thcolspan="2">移动电话</th>44 <tdcolspan="2"></td> 45 </tr>46 <trheight="40px">47 <th>推荐人姓名</th>48 <tdcolspan="2"></td>49 <thcolspan="2">移动电话</th>50 <tdcolspan="2"></td> 51 </tr>52 <trheight="40px"class="qianlv">53 <th>联系地址</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>创作说明</th>64 <tdcolspan="6"></td>65 </tr>66 <trheight="40px">67 <th>作者真实性说明</th>68 <tdcolspan="6"class="shengming">我自愿参加少儿绘画大赛暨创意征文大赛，服从组委会关于比赛的各项规则条款，此次报名的参赛作品是原创作品，不涉及任何版权问题，如果所呈报的作品有虚假欺诈行为，我愿意承担法律责任。</td> 69 </tr>70 <trheight="40px"class="qianlv">71 <th>监护人签字</th>72 <tdcolspan="2"></td>73 <thcolspan="2">作者签字</th>74 <tdcolspan="2"></td> 75 </tr>76 </table>77 </center>Step04设置CSS内嵌样式，在head标签中加入CSS代码如下：1 <style>2 body{fo