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

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

1、YCF（中职）Web前端设计基础 项目三-2电子课件网页中的表格项目三授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练三 项目实施图文混排的HTML 5网页；图文并茂的商品列表网页。三 项目实施利用所学的表格知识，制作如图所示的毕业生档案。制作毕业生档案三 项目实施打开Sublime编辑器，新建一个文件，保存文件名为“3-7.html”。第一步第二步输入【！】或者【html:5】，按Tab键，会自动完成html基本代码填充，更改head标签中的title标签的内容为“北京理工大学毕业生档案”。第三步在body标签中，输入【

2、tabletr*5td*7】后按Tab键，插入一个5行7列的表格。三 项目实施设置table属性为：单元格边距（cellpadding=0）；单元格间距（cellspacing=0）；表格边框（border=1px）；背景图片（background=images/grjlbg.jpg）。第四步第五步输入标题“北京理工大学毕业生档案”（使用h3标题）。第六步设置行tr的高度（height）和首行列td的宽度（width）。三 项目实施住址内容和照片所在单元格需要跨行（colspan）、跨列（rowspan）合并。第七步第八步按照效果图输入表格内容。第九步在第10行td标签中，输入【img】后按T

3、ab键，在src属性中输入图片的路径和名称。三 项目实施北京理工大学毕业生档案姓名王美丽性别女民族汉 身高177CM体重56kg政治面貌中共党员学制四年制学历大学本科出生年月1998年12月三 项目实施通讯地址北京海淀区中关村南大街5号毕业时间2018年6月毕业学校北京理工大学专业计算机技术E联系电话13888888888英语水平英语四级计算机水平国家三级自我评价本人的性格开朗，积极乐观、亲和力强，工作认真负责，时间观念强，能按时完成自己的设计任务。与人和睦相处，团队沟通意识和职业操守观念强，有上进心。三 项目实施所获奖励在全国文明风采大赛中荣获三等奖在全国大学生技能比赛中荣获一等奖荣获北京市

4、优秀学生干部荣获校级学生书法比赛第一名兴趣爱好书法、网页设计、运动教育经历时间所在学校2011.9-2014.6在北京第24中学学习2014.9-2018.6在北京理工大学学习就业方向及单位北京理工大学出版社，从事网站前端设计开发四 项目拓展通过项目实施，表格基本结构已经基本掌握，但对表格中内容的格式设置还未涉及，此项目拓展是在巩固前面所学知识的基础上，结合简单CSS样式对文本的字体、字号、颜色等样式进行设置，制作如图所示参赛报名表。四 项目拓展首先要创建一个表格，观察上图完成单元格行列的合并、单元格背景颜色的设置、单元格文字对齐方式设置等。第一步 分析需求第二步 新建html网页文件，保存文

5、件，输入【！】按Tab健，修改title标签内容为“报名表”。第三步在body中创建table表格，输入【tabletr*12td*7】按Tab键，按上图布局合并单元格，输入内容。四 项目拓展第三步参赛报名表姓    名 性别出生年月学    校班级四 项目拓展第三步参赛项目创意征文大赛中学组小学组儿童绘画大赛中学组小学组绘画作品种类国画油画水彩画水粉画版画彩铅画蜡笔画漫画使用了单选按钮表单元素。使用了复选框表单元素。四 项目拓展第三步 代码解析单选按钮主要是让网页浏览者在一组选项里只能选择一个。代码格式如下：其中

6、，type=”radio”定义单选按钮，name属性定义单选按钮的名称，单选按钮都是以组为单位使用的，在同一组中的单选按钮都必须用同一个名称；value属性定义单选按钮的值，在同一组中，它们的域值必须是不同的。四 项目拓展第三步 代码解析复选框主要是让网页浏览者在一组选项里可以同时选择多个选项，每个复选框都是独立的元素，都必须有一个唯一的名称。代码格式如下：其中，type=”checkbox”定义复选框，name属性定义复选框的名称，在同一组中的复选框都必须用同一个名称；value属性定义复选框的值。四 项目拓展第三步 代码解析单选按钮和复选框都是表单元素，类似的形式还有很多，常见的有文本框、

7、密码框、按钮等，它们的定义形式是由type的值来决定，如表所示。type值值含义含义type=”text”单行文本输入框type=”textarea”多行文本输入框type=”password”密码域type=”radio”单选按钮type=”checkbox”复选框type=”button”普通按钮type=”submit”提交按钮type=”reset”重置按钮四 项目拓展第四步bodyfont-family:微软雅黑;font-size:12px;background-image:url(images/webbg.gif);.juztext-align:center;inputmargi

8、n-left:10px;.shengmingcolor:red;.qianlvbackground-color:#ccddff;tr:hover tdbackground-color:#ff9900;CSS代码开始的声明标签。设置CSS内嵌样式，在head标签中加入CSS代码如下：CSS代码结尾的声明标签。设置网页文本的字体、字号和背景图片。设置文本的对齐方式为居中。设置每个表单元素的左边距。设置“作者真实性说明”的内容的文本颜色。设置行的背景颜色。设置当鼠标移到哪一行，那一行显示的颜色。五 项目小结本项目通过项目实施和项目拓展制作了求职简历和带有CSS样式的参赛报名表两个案例，学习了HTML

9、中表格的基本结构、编辑表格和完整的表格标签，掌握了创建表格、单元格的左右、上下合并、表格和单元格的背景颜色以及简单的CSS代码等知识和编辑器快速输入技巧。五 项目小结本项目主要知识点总结如表所示。表格基本知识总结知识点知识点内容内容基本结构基本结构、和是HTML表格最基本的3个标签，其他标题标签、表头单元格可以没有，但是这3者必须要有。编编辑辑表表格格合并行合并列设置背景颜色、设置背景图片Background=”图像地址”表格完整结构表格完整结构表格完整结构应该包括表格标题（caption）、表头（thead）、主体（tbody）和脚注（tfoot）4部分。th表示表头单元格，每一对表示一行。

10、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文件，单击“开始测试按钮”，在文本框输入上面的单词，输入完成后，单击“结束/计算速度”按钮即可显示所用时间、错误数量和输入速度等信息，如图所示。作业一、上机实训1.上机完成项目实施中毕业生档案的实例操作。2.上机完成项目拓展中参赛报名表的实例操作。二、技能训练对本项目涉及的英文单词进行重复练习，既可以熟悉html标签的单词组合，也可以提高代码输入的速度和正确率。End