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

《（中职）Web前端设计基础 项目三-2电子教案.docx》由会员分享，可在线阅读，更多相关《（中职）Web前端设计基础 项目三-2电子教案.docx（10页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、（中职）Web前端设计基础 项目三-2电子教案教学课题项目3 网页中的表格3.3项目实施、3.4项目拓展授课班级授课时间教学目标知识目标1.掌握在网页中制作表格的方法；2.掌握CSS属性的设置。能力目标1.培养学生自主学习、分析问题和解决问题的能力；2.培养学生熟练运用所学知识的能力。德育目标1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质；2.培养学生的团队合作精神。学情分析通过前面知识的学习，已经代码编辑工具的使用，掌握了HTML的基本结构、网页中各种文本的添加方法以及图文混排的方法。本项目学习使用HTML5的表格制作毕业生档案和参赛报名表，来学习表格的各类标签。教学重点1.网页中表

2、格的基本结构；2.编辑表格的方法；3.完整的表格标签；4.CSS属性设置。教学难点1.编辑表格的方法；2.完整的表格标签；3.CSS属性设置。教学方法项目教学法、多媒体辅助教学法、讲练结合法教学过程教学环节教学内容师生活动新课导入给学生展示网页页面，通过页面中的毕业生档案和参赛报名表，导入本节课的内容。教师提出问题，学生可分组讨论，协作探究。技能学习单元格列行单元格列行单元格列行一、项目实施制作毕业生档案，利用所学的表格知识，制作如图所示的毕业生档案。Step01 打开Sublime编辑器，新建一个文件，保存文件名为“3-7.html”。Step02 输入【！】或者【html:5】，按Tab键

3、，会自动完成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的

4、宽度（width），如下代码所示。Step07 住址内容和照片所在单元格需要跨行（colspan）、跨列（rowspan）合并，如下代码第10、30行所示。Step08 按照效果图输入表格内容。Step09 在第10行td标签中，输入【img】后按Tab键，在src属性中输入图片的路径和名称。1 2 北京理工大学毕业生档案3 4 姓名5 王美丽6 性别7 女8 民族9 汉10 11 12 13 身高14 177CM15 体重16 56kg17 政治面貌18 中共党员19 20 21 学制22 四年制23 学历24 大学本科25 出生年月26 1998年12月27 28 29 通讯地址30 北京

5、海淀区中关村南大街5号31 毕业时间32 2018年6月33 34 35 毕业学校36 北京理工大学37 专业38 计算机技术39 40 41 Email42 wangmeili43 联系电话44 1388888888845 46 47 英语水平48 英语四级49 计算机水平50 国家三级51 52 53 自我评价54 55 本人的性格开朗，积极乐观、亲和力强，工作认真负责，时间观念强，能按时完成自己的设计任务。与人和睦相处，团队沟通意识和职业操守观念强，有上进心。56 57 58 59 所获奖励60 61 62 在全国文明风采大赛中荣获三等奖63 在全国大学生技能比赛中荣获一等奖64 荣获北

6、京市优秀学生干部65 荣获校级学生书法比赛第一名66 67 68 69 70 兴趣爱好71 72 书法、网页设计、运动73 74 75 76 教育经历77 时间78 所在学校79 80 81 2011.9-2014.682 在北京第24中学学习83 84 85 2014.9-2018.686 在北京理工大学学习87 88 89 就业方向及单位90 北京理工大学出版社，从事网站前端设计开发91 92 二、项目拓展此项目拓展是在巩固前面所学知识的基础上，结合简单CSS样式对文本的字体、字号、颜色等样式进行设置，制作如图所示参赛报名表。Step01 分析需求首先要创建一个表格，观察上图完成单元格行列

7、的合并、单元格背景颜色的设置、单元格文字对齐方式设置等。Step02 新建html网页文件，保存文件，输入【！】按Tab健，修改title标签内容为“报名表”。Step03 在body中创建table表格，输入【tabletr*12td*7】按Tab键，按上图布局合并单元格，输入内容。代码如下：1 2 3 参赛报名表4 5 姓    名 6 7 性别8 9 出生年月10 11 12 13 学    校14 15 班级16 17 18 19 参赛项目20 创意征文大赛21 中学组小学组22 23 24 儿童绘画大赛2

8、5 中学组小学组26 27 28 绘画作品种类29 30 国画31 油画32 水彩画33 水粉画34 版画35 彩铅画36 蜡笔画37 漫画38 39 40 41 监护人姓名42 43 移动电话44 45 46 47 推荐人姓名48 49 移动电话50 51 52 53 联系地址54 55 56 57 邮    编58 59 E-mail60 61 62 63 创作说明64 65 66 67 作者真实性说明68 我自愿参加少儿绘画大赛暨创意征文大赛，服从组委会关于比赛的各项规则条款，此次报名的参赛作品是原创作品，不涉及任何版权问题，如果所呈报的作品有虚假

9、欺诈行为，我愿意承担法律责任。69 70 71 监护人签字72 73 作者签字74 75 76 77 Step04 设置CSS内嵌样式，在head标签中加入CSS代码如下：1 2 bodyfont-family:微软雅黑;font-size: 12px;background-image: url(images/webbg.gif);3 .juztext-align: center;4 inputmargin-left:10px;5 .shengmingcolor:red;6 .qianlvbackground-color:#ccddff;7 tr:hover tdbackground-colo

10、r: #ff9900;8 教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。知识归纳本节课通过项目实施和项目拓展制作了求职简历和带有CSS样式的参赛报名表两个案例，学习了HTML中表格的基本结构、编辑表格和完整的表格标签，掌握了创建表格、单元格的左右、上下合并、表格和单元格的背景颜色以及简单的CSS代码等知识和编辑器快速输入技巧。教师讲授，学生归纳总结，并作适当的笔记。课后作业一、上机实训1.上机完成项目实施中毕业生档案的实例操作。2.上机完成项目拓展中参赛报名表的实例操作。二、技能训练对本项目涉及的英文单词进行重复练习，既可以熟悉html标签的单词组合，也可以提高代码输入的速度和正确率。学生上机完成任务并提交，进行分组互评。教学反思感谢您的支持与使用如果内容侵权请联系删除仅供教学交流使用