HTML5+CSS3网页设计与制作课件：添加会员功能表格_第1页
HTML5+CSS3网页设计与制作课件：添加会员功能表格_第2页
HTML5+CSS3网页设计与制作课件：添加会员功能表格_第3页
HTML5+CSS3网页设计与制作课件：添加会员功能表格_第4页
HTML5+CSS3网页设计与制作课件：添加会员功能表格_第5页
已阅读5页，还剩27页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML5+CSS3网页设计与制作添加会员功能表格项目将通过“制作一个D清单网页广告单页”项目，即通过制作一个HTML页面来承载网页制作知识，完成网页开发环境搭建、HTML5标签、CSS3叠层样式和响应式布局等的学习。项目目标D清单是某公司推出的一款跨平台同步的待办事项和任务提醒软件,旨在协助您完成待办事务比如生日提醒,旅行安排,会议准备等以便更好的进行时间和事项管理。为了方便D清单应用的推广，其公司需要制作一个该应用产品的介绍网页。该页面主要用于手机端进行分享推广，同时也要求能够在电脑端进行访问。前端工程师小王所在的科技公司已经拿到了设计稿，如图1所示。主管希望他担任本次项目的前端工作，开发完成后将成果交付给程序员完成逻辑制作、测试和发布。项目情境图1-1-1项目移动端和电脑端页面截图网页制作的一般流程如下：项目分析项目发布需求分析规划设计实施测试交付根据“移动优先”原则，我们需要制定项目完成的计划：项目分析时间段1时间段2时间段3时间段4时间段5分析规划实施阶段1移动端内容制作阶段2移动端格式制作阶段3响应式制作测试与交付D清单前端开发甘特图时间进度任务制作网页内容能够表述表格的三个基本元素。能够根据需要运用表格各个基本元素的属性。能够综合运用HTML表格标签和属性完成D清单网页会员功能表格内容。任务目标

添加会员功能表格本次任务要求在的基础上添加D清单网页会员功能表格内容。完成后的表格内容效果图如图1-6所示。任务描述图1-6D清单网页的表格内容效果图

添加会员功能表格要完成D清单网页表格内容的制作，需要：学习HTML表格的三个基本元素；学习HTML表格的语法及表格各个元素的属性；分析D清单网页会员功能效果图的表格内容，正确选择和使用表格标签完成D清单网页中的表格内容制作。D清单网页会员功能表格效果如图1-6-1所示。可以看出，表格有4列11行，表格结构包含了描述文字“可以在手机端使用”，以及加粗的表格表头、表格正文等常规内容。任务分析

添加会员功能表格任务分析图1-6-1D清单网页会员功能的表格效果

添加会员功能表格知识与技能准备表格通过使用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>打开VisualStudioCode软件，在<body>标签中输入如下代码：课堂练习1-6-1创建一个两行三列表格12345678910111213<!--创建两行三列的表格--><table><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>张三</td><td>男</td><td>20</td></tr></table> 显示效果如下：课堂练习1-6-1创建一个两行三列表格图1-6-3简单的两行两列表格知识与技能准备表格中可以用标题来对表格做一个简单的说明，caption表格标题就是用来描述表格的特征，但caption元素必须紧跟table元素开始标签才有效，而且一个表格只能包含一个表格标题。其语法形式如下：1、caption元素：表格的标题<table><caption>表格标题文字说明</caption></table>打开VisualStudioCode软件，在<body>标签中输入如下代码：课堂练习1-6-2添加表格标题1234567891011121314<!--创建两行四列的表格--><table><caption>早餐单</caption><tr><td>周一</td>

<td>周二</td> <td>周三</td></tr><tr><td>皮蛋粥</td>

<td>炒粉</td>

<td>汤粉</td></tr></table>显示效果如下：课堂练习1-6-2添加表格标题图1-6-3添加表格标题知识与技能准备表格经常会有行、列合并进行数据输入的，网页中的表格行、列合并都是对单元格进行设置的。（1）rowspan：行合并，指单元格所占的行数。其语法形式如下：（2）colspan：列合并，指单元格所占的列数。其语法形式如下：2、表格的行、列合并<tdrowspan=“跨的行数”><tdcolspan=”跨的列数”>在<body>标签中输入如下代码：课堂练习1-6-3设置单元格行合并1234567891011121314151617181920<!--创建四行六列的表格--><table>

<caption>课程表</caption> <tr> <td></td>

<td>周一</td> <td>周二</td> <td>周三</td> <td>周四</td> <td>周五</td>

</tr>

<tr>

<tdrowspan="2">上午</td><!--合并单元格--> <td>网页布局</td> <td>Photoshop</td> <td>Axure</td> <td>网页UI设计</td> <td>AI设计</td>

</tr>21222324252627282930313233343536<tr> <td>英语</td> <td>高数</td> <td>C语言</td> <td>网络基础</td> <td>网页布局</td>

</tr> <tr> <td>下午</td> <td>体育</td> <td>德育</td> <td>Photoshop</td> <td>C语言</td> <td>网络基础</td> </tr></table>显示效果如下：课堂练习1-6-3设置单元格行合并图1-6-4设置单元格行合并在<body>标签中输入如下代码：课堂练习1-6-4设置单元格列合并1234567891011121314<!--创建五行三列的表格--><table><caption>成绩登记表</caption><tr><thcolspan="3">第一学期</th><!--合并单元格--></tr><tr><td>姓名</td> <td>网页布局</td> <td>Photoshop</td></tr><tr><td>张三</td>1516171819202122232425262728<td>90</td><td>92</td></tr><tr><td>李四</td> <td>80</td> <td>72</td></tr><tr><td>王五</td> <td>84</td> <td>78</td></tr></table>显示效果如下：课堂练习1-6-4设置单元格列合并图1-6-5设置单元格列合并知识与技能准备3、table标签的常用属性属性说明width定义表格的总宽度。height定义表格的总高度。border定义表格边框的宽度，默认值为0，值为0时边框线隐藏，值越大边框线越粗。bordercolor定义表格边框的颜色。cellpadding定义单元格的补白，即单元格内容与单元格边框线之间的距离。cellspacing定义单元格的边界，即单元格与单元格之间的间距。align定义整个表格的水平对齐方式，参数有left、center、right。bgcolor定义表格整体的背景颜色。表1-6-1table元素的常用属性在<body>标签中输入如下代码：课堂练习1-6-5设置表格table的各个属性1234567891011121314<!--创建五行三列的表格--><table><caption>成绩登记表</caption><tr><thcolspan="3">第一学期</th><!--合并单元格--></tr><tr><td>姓名</td> <td>网页布局</td> <td>Photoshop</td></tr><tr><td>张三</td>1516171819202122232425262728<td>90</td><td>92</td></tr><tr><td>李四</td> <td>80</td> <td>72</td></tr><tr><td>王五</td> <td>84</td> <td>78</td></tr></table>打开课堂练习1-6-4的代码，对<table>标签中的代码进行修改：课堂练习1-6-5设置表格table的各个属性12<tableborder="1"width="300"height="100"bordercolor="#FFF"cellpadding="5"cellspacing="5"align="center"bgcolor="#CCC">显示效果如下：图1-6-6table标签的属性设置效果知识与技能准备4、tr标签的常用属性属性说明height定义表格行的高度。bgcolor定义表格行的背景颜色。align定义行内文字的水平对齐方式，参数有left、center、right。valign定义行内文字的垂直对齐方式，参数有top、middle、bottom。表1-6-2tr元素的常用属性知识与技能准备5、td标签的常用属性属性说明width定义单元格的宽度，设置后对当前一列的单元格都有效。height定义单元格的高度，设置后对当前一行的单元格都有效。bgcolor定义单元格的背景颜色。align定义单元格的文字水平对齐方式，参数有left、center、right。valign定义单元格的文字垂直对齐方式，参数有top、middle、bottom。colspan合并水平方向的单元格，即列合并。rowspan合并垂直方向的单元格，即行合并。表1-6-3td元素的常用属性打开课堂练习1-6-56的代码，对单元格<td>标签中的代码进行修改：课堂练习1-6-6设置表格行tr的各个属性123456789<trbgcolor="#FFCCFF"height="50"valign="bottom"><thcolspan="3">第一学期</th><!--合并单元格--></tr><tralign="center"><tdwidth="80"height="30"bgcolor="#aa00ff"align="left"valign="top">姓名</td> <td>网页布局</td> <td>Photoshop</td></t

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论