项目一 第一阶段 任务6 添加会员功能表格-【鹑首文化】HTML5+CSS3网页设计与制作配套电子课件PPT

HTML5+CSS3网页设计与制作 使用HTML5+CSS3制作响应式网页 项目一 项目将通过“制作一个D清单网页广告单页”项目，即通过制作一个HTML页面来承载网页制作知识，完成网页开发环境搭建、HTML5标签、CSS3叠层样式和响应式布局等的学习。 项目目标 D清单是某公司推出的一款跨平台同步的待办事项和任务提醒软件, 旨在协助您完成待办事务比如生日提醒, 旅行安排, 会议准备等以便更好的进行时间和事项管理。 为了方便D清单应用的推广，其公司需要制作一个该应用产品的介绍网页。该页面主要用于手机端进行分享推广，同时也要求能够在电脑端进行访问。 前端工程师小王所在的科技公司已经拿到了设计稿，如图1所示。主管希望他担任本次项目的前端工作，开发完成后将成果交付给程序员完成逻辑制作、测试和发布。 项目情境 图1-1-1 项目移动端和电脑端页面截图 网页制作的一般流程如下： 项目分析 项目发布 需求分析 规划设计 实施 测试 交付 根据“移动优先”原则，我们需要制定项目完成的计划： 项目分析 时间段1 时间段2 时间段3 时间段4 时间段5 分析规划 实施 阶段1 移动端内容制作 阶段2 移动端格式制作 阶段3 响应式制作 测试与交付 D清单前端开发甘特图 时间 进度 任务 制作网页内容 第一阶段 能够表述表格的三个基本元素。 能够根据需要运用表格各个基本元素的属性。 能够综合运用HTML表格标签和属性完成D清单网页会员功能表格内容。 任务目标 任务6 添加会员功能表格 本次任务要求在任务5的基础上添加D清单网页会员功能表格内容。完成后的表格内容效果图如图1-6所示。 任务描述 图1-6 D清单网页的表格内容效果图 任务6 添加会员功能表格 要完成D清单网页表格内容的制作，需要： 学习HTML表格的三个基本元素； 学习HTML表格的语法及表格各个元素的属性； 分析D清单网页会员功能效果图的表格内容，正确选择和使用表格标签完成D清单网页中的表格内容制作。 D清单网页会员功能表格效果如图1-6-1所示。可以看出，表格有4列11行，表格结构包含了描述文字“可以在手机端使用”，以及加粗的表格表头、表格正文等常规内容。 任务分析 任务6 添加会员功能表格 任务分析 图1-6-1 D清单网页会员功能的表格效果 任务6 添加会员功能表格 知识与技能准备 表格通过使用table、tr、th或td标签构成网页中数据的表示方式。 （1）table标签：表格元素都是以<table>标记开始，</table>标记结束，用来定义表格外框。 （2）tr标签：定义表格行，表格的每一行都以<tr>标记开始，</tr>标记结束。 （3）th标签：定义表格的表头。 （4）td标签：定义单元格，即表格的具体数据存储单元，每个单元格都以<td>标记开始，</td>标记结束。 1、表格的元素 表格是网页中最常用的元素，网页中经常使用表格进行显示或者统计数据，表格不仅可以在网页上显示数据，还可以将相互关联的一些信息元素集中定位，从而实现页面布局使页面更加简洁。像Excel数字表格，可以看出表格都是由行和列构成的，而行和列的交汇可以形成一个个单元格。 知识与技能准备 在一个表格中，可以插入多对tr标签表示多行，一对tr代表一行，每对tr标签之间可以插入多对td标签，每一对td标签代表一个单元格，单元格里的内容可以是文字、数据、图像、超链接、表单等元素。 其语法形式如下： 2、表格的语法 <table> <tr> <th>表头1</th> <th>表头2</th> </tr> <tr> <td>单元格1_1</td> <td>单元格1_2</td> </tr> <tr> <td>单元格2_1</td> <td>单元格2_2</td> </tr> </table> 打开Visual Studio Code软件，在<body>标签中输入如下代码： 课堂练习1-6-1 创建一个两行三列表格 1 2 3 4 5 6 7 8 9 10 11 12 13 <!--创建两行三列的表格--> <table> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr> <td>张三</td>