HTML5+CSS3网页设计实战 教案 4.9 表格标签-制作简历

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。24.9表格标签该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1）巩固table标签的使用。（2）单元格colspan属性、rowspan属性的应用。（3）使用快捷键快速构建完整的表格。能力目标：具备制作常规个人简历的布局能力。素养目标：设计个人简历，培养学生的准职业人的意识，加强对自我学业能力的认知。利用table标签制作个人简历table标签及子标签，colspan属性、rowspan属性。通过制作简历来强化table标签的掌握。colspan属性、rowspan属性添加的位置。通过绘制单元格合并范围来讲解。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习Table标签所定义的结构如同html结构一般，包括thead、tbody、tfooter三部分。表格的页脚部分一般都不会使用，那什么情况下需要用到页脚部分，我们可以分析一下：只要是与表格数据有密切相关，同样用于后期数据处理的表格行，我们都不采用页脚，而作为表格数据的一些辅助、标注性文字，我们就可以使用tfooter将这些文字放置进去。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入基础的表格，一般不涉及到行列单元格合并的情况，但是对于一些复杂的表格，比如今天要完成的个人简历，就涉及到单元格合并的相关属性。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授colspan和rowspan是HTML表格中的两个属性，用于合并单元格。colspan属性用于指定一个单元格横向合并的列数。例如，如果一个表格有3列，而某个单元格的colspan属性值为2，则该单元格将横跨2列。rowspan属性用于指定一个单元格纵向合并的行数。例如，如果一个表格有3行，而某个单元格的rowspan属性值为2，则该单元格将纵跨2行。使用colspan和rowspan可以创建更复杂的表格布局，使表格更具有可读性和美观性。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【案例23】完成个人简历页面效果，如图4-106所示。图4-106个人简历布局效果☆思政讲解：求职者系统地梳理个人经历、技能与成就，明确职业定位与目标。提前制作简历还能促使求职者不断自我提升，查漏补缺，以更好地匹配市场需求，有助于求职者在激烈的竞争中脱颖而出，实现职业发展的顺利起步。（1）先简单构建一些辅助性观察的代码，测试后观察第一行是否无误。（2）整体复制<tr>代码块，快速搭建其他行。（3）文件保存后，预览的初步效果。（4）制作单元格跨行、跨列（合并）效果。（5）保存文件，预览效果。（6）最后编写对应的样式完成细节。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展如图4-113所示的结构适不适合采用表格来布局，请说出理由。思考提问任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分项目搭建站点结构正确，文件命名合理。10Table基本结构使用快捷键快速完成大体的html结构。30修改部分td标签，增加合并属性准确设置colspan和rowspan属性30表格外观Css样式设置合理、预览效果美观30总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课，要求我们：（1）巩固table标签的使用。（2）单元格colspan属性、rowspan属性的应用。（3）使用