《Web前端开发》教学讲义 Web前端设计基础 项目三-2.docxVIP

教学课题 项目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标签中，输入【tabletr*5td*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 table cellpadding=0 cellspacing=0 border=1px background=images\grjlbg.jpg 2 captionh3北京理工大学毕业生档案/h3/caption 3 tr height=30px 4 td width=70px姓名/td 5 td width=80px王美丽/td 6 td width=70px性别/td 7 td width=80px女/td 8 td width=70px民族/td 9 td width=80px汉/td 10 td width=100px rowspan=4img src=images\wangmeili.jpg alt=照片 width=100px height=120px/td 11 /tr 12 tr height=30px 13 td身高/td 14 td177CM/td 15 td体重/td 16 td56kg/td 17 td政治面貌/td 18 td中共党员/td 19 /tr 20 tr height=30px 21 td学制/td 22 td四年制/td 23 td学历/td 24 td大学本科/td 25 td出生年月/td 26 td1998年12月/td 27 /tr 28 tr height=30px 29 td通讯地址/td 30 td colspan=3北京海淀区中关村南大街5号/td 31 td毕业时间/td 32 td2018年6月/td 33 /tr 34 tr height=30px 35 td毕业学校/td 36 td colspan=3北京理工大学/td 37 td专业/td 38 td colspan=2计算机技术/td 39 /tr 40 tr hei