工信版（中职）Web前端设计基础 项目三电子课件.pptx

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

1、YCF（中职）Web前端设计基础 项目三电子课件网页中的表格项目三授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练一 项目描述本项目学习要点表格的基本结构；编辑表格；CSS属性设置。完整的表格标签；二 知识准备表格基本结构；编辑表格；完整的表格标签。表格基本结构在HTML文档中，使用表格可以清晰地排列数据和布局，但不建议使用表格布局，在web2.0时代，表格定位已经过时了，现在使用的是“DIV+CSS”模式。表格一般由行、列和单元格组成，如图所示。行行列列单元格单元格表格基本结构表格由 标签来定义。每个表格均有若干行（由

2、标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容，数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。在HTML5中，用于创建表格的标签如表所示。标签标签说明说明注意事项注意事项用于标记一个表格对象的开始一个表格中，只允许出现一对标签用于标记一个表格对象的结束用于标记表格一行的开始表格内有多少对标签，就表示有多少行用于标记表格一行的结束用于标记表格某行中的一个单元格的开始标签应写在标签内，一对标签内有多少对标签，就表示有多少个单元格用于标记表格某行中的一个单元格的结束表格基本结构在Sublime中创建表格的快速

3、输入方法是输入【table】后按Tab键可以生成一对标签，但不能构成一个有行有列的表格，最基本的表格必须包含一对标签、一对或几对标签以及一对或几对标签。例如在Sublime编辑器中输入【tabletr*2td*2】后按Tab键可以生成一个2行2列的表格代码，如图所示。表格的行高和列宽会根据表格内容发生变化，如果想控制表格的行高和列宽，需要在和标签中用width和height来定义行高和列宽。表格基本结构例3-1创建一个4行3列的表格，网页主体代码如下所示（示例文件3-1.html）。图书统计表序号名称出版社1Web前端设计基础北京理工大学出版社2Photoshop CS5图像处理项目教程北京理

4、工大学出版社3计算机应用基础北京理工大学出版社border用来设置表格边框，默认情况下表格是没有边框的，加入边框是让读者更清楚地看到表格结构，如值为0则表格无边框，如值为1表格边框为1像素；cellpadding用来设置单元格内容与其边框之间的距离；cellspacing用来设置单元格之间的距离。height用来设置表格行的高度。width用来设置表格行宽。表格基本结构例3-1创建一个4行3列的表格，网页主体代码如下所示（示例文件3-1.html）。图书统计表序号名称出版社1Web前端设计基础北京理工大学出版社2Photoshop CS5图像处理项目教程北京理工大学出版社3计算机应用基础北京理

5、工大学出版社在chrome浏览器中预览表格基本结构表格一般都有一个标题，表格标题使用标签，表格的标题一般位于整个表格的第1行，一个表格只能含有一个表格标题。标签和在本质上都是单元格，但是不能互换使用，两者根本区别在于语义上。th（table header）为表头单元格，td（table data cell）为单元格。对于表头，可以用td标签代替th标签，但是不建议这样做。为了清楚地表示表格中数据类别，需要使用表格的表头。表头是单元格的一种变体，它的本质还是一种单元格，一般位于第一行或列，用来表明这一行或列的内容类别。表头有一种默认样式，浏览器会以粗体和居中的样式显示元素中的内容。表格基本结构例

6、3-2创建一个带有标题和表头的表格（示例文件3-2.html）。销量表销量一季度二季度三季度华北657868西北989792华南1009593表格基本结构例3-2创建一个带有标题和表头的表格（示例文件3-2.html）。销量表销量一季度二季度三季度华北657868西北989792华南1009593在chrome浏览器中预览编辑表格1.合并单元格在实际应用中并非所有的表格都是规范的几行几列，而是需要将某些单元格进行合并，以符合某种内容上的需求。在HTML中合并的方向有两种，一种是上下合并，一种是左右合并，这两种合并只需要使用td标签的colspan和rowspan两个属性即可。要合并左右单元格使

7、用td标签的colspan属性来实现，格式如下：单元格内容其中colspan属性的取值为数值型整数数据，代表几个单元格进行左右合并。要合并上下单元格使用td标签的rowspan属性来实现，格式如下：单元格内容其中rowspan属性的取值为数值型整数数据，代表几个单元格进行上下合并。编辑表格1.合并单元格【例3-3】创建如图所示报名表（示例文件3-3.html）。上图中的“姓名”、“学校”、“班级”、“创作说明”后的单元格进行了左右合并，使用了colspan；“参赛项目”单元格进行了上下合并，使用了rowspan。编辑表格1.合并单元格参赛报名表姓    

8、名 性别出生年月学    校班级参赛项目征文大赛 中学组小学组绘画大赛 中学组小学组创作说明编辑表格1.合并单元格合并单元格以后，相应的单元格标签就应该减少，例如上面例题中的表格应有7列，代码的第11-16行，共有6个列标签，其中第12行列标签中colspan的值为2，说明在此左右合并了两个单元格，减少了1个列标签；第19-22行的代码中，第20行和22行分别进行了2列和3列的左右合并，减少了3个列标签。减少了的单元格就应该丢掉，否则单元格就会多出来一个，并且后面的单元格依次向右位移。通过上面对左右单元格和上下单元格合并的操作，合并单元格就是减少某些单元

9、格。对于左右合并，就是以左侧为准，将右侧要合并的单元格减少；对于上下合并，就是以上方为准，将下方要合并的单元格减少。编辑表格1.合并单元格【例3-4】将上例中的报名表修改为如图所示，“参赛项目”单元格既进行了左右合并又进行了上下合并（示例文件3-4.html）。编辑表格1.合并单元格修改上例代码的第24-32行，如图所示。编辑表格2.设置表格、单元格背景创建好表格后，为了美观还可以设置表格、单元格背景。如为表格、单元格添加背景颜色及定义背景图片等。背景颜色用bgcolor=”颜色”来表示，设置表格背景颜色时bgcolor放在table标签中，设置行背景颜色时bgcolor放在tr标签中，设置单

10、元格背景颜色时放在td标签中。在HTML中颜色有3中表示方式，最常用的是6位16进制的代码表示法。如bgcolor=#ff0000，其中#表示使用6位16进制的颜色代码声明颜色，代码的头两位表示三原色中的红色，中间两位表示绿色，最后两位表示蓝色，范围是16进制的00ff，00表示没有颜色，ff表示颜色最强。所以000000表示黑色，ffffff表示白色，同样ff0000表示纯红色，00ff00表示纯绿色，0000ff表示纯蓝色。编辑表格2.设置表格、单元格背景颜色还可以用rgb(r,g,b)表示，括号中的r、g、b分别用0-255的十进制数或百分比表示红绿蓝，例如rgb(255,0,0)以及r

11、gb(100%,0%,0%)都表示红色，在HTML5中也使用rgba来表示颜色，a表示前面rgb所显示颜色的透明度，取值范围在0-1之间，不可为负值。如图所示。编辑表格2.设置表格、单元格背景颜色的表示还可以用颜色的关键字表示，共16个，如表所示。关键字关键字颜色颜色16进制值进制值关键字关键字颜色颜色16进制值进制值black黑色#000000silver银色#C0C0C0maroon深褐色#800000red红色#FF0000green绿色#008000lime酸橙色#00FF00olive橄榄色#808000yellow黄色#FFFF00navy海军蓝#000080blue蓝色#0000

12、FFpurple紫色#800080fuchsia品红#FF00FFteal水鸭绿#008080aqua水蓝#00FFFFgray灰色#808080white白色#FFFFFF编辑表格2.设置表格、单元格背景【例3-5】设置表格、单元格背景（示例文件3-5.html），效果如图所示。编辑表格2.设置表格、单元格背景表格结构标签说明table表格caption标题thead表头（语义划分）tbody表身（语义划分）tfoot表尾（语义划分）tr行th表头单元格td表格单元格这一行使用background=images/tablebg.jpg显示背景图片完整的表格标签按照表格结构，可以把表格的行分组

13、，称为“行组”。不同的行组具有不同的意义。行组分为3类：表头、主体和脚注，三者相应的HTML标签依次为、和。完整的表格标签【例3-6】完整表格标记制作的销量表（3-6.html），效果如图所示。完整的表格标签销量表（单位：万元）销量一季度二季度三季度总计889085华北667870西北989792华南1009593是代码的内容，虽然把这段代码放在了表格第一行（表头行）的后面，但是最终显示效果还是将代码的内容显示在了标签下面。给标签添加了align属性，整个中的内容就居中了。三 项目实施图文混排的HTML 5网页；图文并茂的商品列表网页。三 项目实施利用所学的表格知识，制作如图所示的毕业生档案。

14、制作毕业生档案三 项目实施打开Sublime编辑器，新建一个文件，保存文件名为“3-7.html”。第一步第二步输入【！】或者【html:5】，按Tab键，会自动完成html基本代码填充，更改head标签中的title标签的内容为“北京理工大学毕业生档案”。第三步在body标签中，输入【tabletr*5td*7】后按Tab键，插入一个5行7列的表格。三 项目实施设置table属性为：单元格边距（cellpadding=0）；单元格间距（cellspacing=0）；表格边框（border=1px）；背景图片（background=images/grjlbg.jpg）。第四步第五步输入标题“北

15、京理工大学毕业生档案”（使用h3标题）。第六步设置行tr的高度（height）和首行列td的宽度（width）。三 项目实施住址内容和照片所在单元格需要跨行（colspan）、跨列（rowspan）合并。第七步第八步按照效果图输入表格内容。第九步在第10行td标签中，输入【img】后按Tab键，在src属性中输入图片的路径和名称。三 项目实施北京理工大学毕业生档案姓名王美丽性别女民族汉 身高177CM体重56kg政治面貌中共党员学制四年制学历大学本科出生年月1998年12月三 项目实施通讯地址北京海淀区中关村南大街5号毕业时间2018年6月毕业学校北京理工大学专业计算机技术E联系电话13888

16、888888英语水平英语四级计算机水平国家三级自我评价本人的性格开朗，积极乐观、亲和力强，工作认真负责，时间观念强，能按时完成自己的设计任务。与人和睦相处，团队沟通意识和职业操守观念强，有上进心。三 项目实施所获奖励在全国文明风采大赛中荣获三等奖在全国大学生技能比赛中荣获一等奖荣获北京市优秀学生干部荣获校级学生书法比赛第一名兴趣爱好书法、网页设计、运动教育经历时间所在学校2011.9-2014.6在北京第24中学学习2014.9-2018.6在北京理工大学学习就业方向及单位北京理工大学出版社，从事网站前端设计开发四 项目拓展通过项目实施，表格基本结构已经基本掌握，但对表格中内容的格式设置还未涉

17、及，此项目拓展是在巩固前面所学知识的基础上，结合简单CSS样式对文本的字体、字号、颜色等样式进行设置，制作如图所示参赛报名表。四 项目拓展首先要创建一个表格，观察上图完成单元格行列的合并、单元格背景颜色的设置、单元格文字对齐方式设置等。第一步 分析需求第二步 新建html网页文件，保存文件，输入【！】按Tab健，修改title标签内容为“报名表”。第三步在body中创建table表格，输入【tabletr*12td*7】按Tab键，按上图布局合并单元格，输入内容。四 项目拓展第三步参赛报名表姓    名 性别出生年月学   

18、 校班级四 项目拓展第三步参赛项目创意征文大赛中学组小学组儿童绘画大赛中学组小学组绘画作品种类国画油画水彩画水粉画版画彩铅画蜡笔画漫画使用了单选按钮表单元素。使用了复选框表单元素。四 项目拓展第三步 代码解析单选按钮主要是让网页浏览者在一组选项里只能选择一个。代码格式如下：其中，type=”radio”定义单选按钮，name属性定义单选按钮的名称，单选按钮都是以组为单位使用的，在同一组中的单选按钮都必须用同一个名称；value属性定义单选按钮的值，在同一组中，它们的域值必须是不同的。四 项目拓展第三步 代码解析复选框主要是让网页浏览者在一组选项里可以同时选择多个选项，每个复选框都是独

19、立的元素，都必须有一个唯一的名称。代码格式如下：其中，type=”checkbox”定义复选框，name属性定义复选框的名称，在同一组中的复选框都必须用同一个名称；value属性定义复选框的值。四 项目拓展第三步 代码解析单选按钮和复选框都是表单元素，类似的形式还有很多，常见的有文本框、密码框、按钮等，它们的定义形式是由type的值来决定，如表所示。type值值含义含义type=”text”单行文本输入框type=”textarea”多行文本输入框type=”password”密码域type=”radio”单选按钮type=”checkbox”复选框type=”button”普通按钮type=

20、”submit”提交按钮type=”reset”重置按钮四 项目拓展第四步bodyfont-family:微软雅黑;font-size:12px;background-image:url(images/webbg.gif);.juztext-align:center;inputmargin-left:10px;.shengmingcolor:red;.qianlvbackground-color:#ccddff;tr:hover tdbackground-color:#ff9900;CSS代码开始的声明标签。设置CSS内嵌样式，在head标签中加入CSS代码如下：CSS代码结尾的声明标签。设置

21、网页文本的字体、字号和背景图片。设置文本的对齐方式为居中。设置每个表单元素的左边距。设置“作者真实性说明”的内容的文本颜色。设置行的背景颜色。设置当鼠标移到哪一行，那一行显示的颜色。五 项目小结本项目通过项目实施和项目拓展制作了求职简历和带有CSS样式的参赛报名表两个案例，学习了HTML中表格的基本结构、编辑表格和完整的表格标签，掌握了创建表格、单元格的左右、上下合并、表格和单元格的背景颜色以及简单的CSS代码等知识和编辑器快速输入技巧。五 项目小结本项目主要知识点总结如表所示。表格基本知识总结知识点知识点内容内容基本结构基本结构、和是HTML表格最基本的3个标签，其他标题标签、表头单元格可以

22、没有，但是这3者必须要有。编编辑辑表表格格合并行合并列设置背景颜色、设置背景图片Background=”图像地址”表格完整结构表格完整结构表格完整结构应该包括表格标题（caption）、表头（thead）、主体（tbody）和脚注（tfoot）4部分。th表示表头单元格，每一对表示一行。CSS属属性性CSS声明标签字体类型font-family:字体名;字体大小font-size:像素值;字体颜色color:关键字/颜色值;文本水平对齐text-align:属性值;对齐方式：左对齐（left）、居中对齐（center）、右对齐（right）背景图片background-image:url(图像地址);背景颜色background-color:颜色值;外边距margin分为四个方向的外边距：margin-top:像素值;margin-right:像素值;margin-bottom:像素值;margin-left:像素值;六 技能训练通过测试练习环节，对本项目涉及的英文单词进行重复练习，既可以熟悉html标签的单词组合，也可以提高代码输入的速度和正确率。在浏览器中打开素材中的Exercise3.html文件，单击“开始测试按钮”，在文本框输入上面的单词，输入完成后，单击“结束/计算速度”按钮即可显示所用时间、错误数量和输入速度等信息，如图所示。End