网页设计（六）表格与表格页面布局-编程知识

在这里插入图片描述

一、设计《TF43: 前端的发展与未来》日程表

《TF43: 前端的发展与未来》日程表
在这里插入图片描述
文字素材：
前端是互联网技术的重要一环，自上世纪80年代万维网技术创立以来，Web成就了大量成功的商业公司，也诞生了诸多优秀的技术解决方案。因其标准性和开放性，前端技术社区非常活跃。前端技术虽然起步较晚，但是发展速度非常快。
今天的Web前端在各个公司都是不可或缺的岗位，职能也从纯粹的Web前端，扩展到小程序、与客户端混合编程、IoT等诸多领域，此次TF邀请到各个顶级互联网公司的前端最高负责人，旨在分享前端团队的管理和发展思路。
在这里插入图片描述

<!-- prj_6_1.html -->
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>TF43: 前端的发展与未来-日程表 </title><style type="text/css">* {padding: 0;margin: 0;}#div0 {width: 720px;height: 626px;margin: 0 auto;position: relative;}p {text-indent: 2em;}#div2 {width: 200px;height: 40px;background-color: #0000CC;color: white;position: absolute;top: 180px;left: -35px;}h3 {font-size: 20px;color: white;padding: 10px 20px;font-family: 微软雅黑;}table {font-size: 12px;width: 720px;height: 420px;}.row1 {background: #E1E1E1;text-align: center;}#row2 {background: #E3E3E3;}#td1 {text-align: center;}</style></head><body><div id="div0" class=""><div id="div1"><h2 align="center">TF43: 前端的发展与未来论坛</h2><p>前端是互联网技术的重要一环，自上世纪80年代万维网技术创立以来，Web成就了大量成功的商业公司，也诞生了诸多优秀的技术解决方案。因其标准性和开放性，前端技术社区非常活跃。前端技术虽然起步较晚，但是发展速度非常快。</p><p>今天的Web前端在各个公司都是不可或缺的岗位，职能也从纯粹的Web前端，扩展到小程序、与客户端混合编程、IoT等诸多领域，此次TF邀请到各个顶级互联网公司的前端最高负责人，旨在分享前端团队的管理和发展思路。</p></div><div id="div2" class=""><h3>CCF TF 技术前线</h3></div><table align="center" border="1" cellspacing="0px"><tr class="row1" height="82px"><td colspan="3"><div><p> 只为技术专家 </p><p> CCF TF第43期 </p><p> 主题　前端的发展与未来 </p><p> 2021年7月31日 9:00-17:30 </p><p> 中科院计算所 四层报告厅（北京海淀区科学院南路6号） </p></div></td></tr><tr id="row2 " height="35px"><th>会议时间</th><th>演讲人</th><th>会议名称</th></tr><tr><td id="td1">09:00-09:10</td><td>张高 CCF TF前端SIG主席</td><td>开场致辞</td></tr><tr><td id="td1">09:10-10:05</td><td>姜凡 淘系技术部前端团队负责人,阿里巴巴经济体前端技术委员会主席</td><td>《淘系前端价值体系的思考》</td></tr><tr><td id="td1">10:05-11:00</td><td>月影 字节跳动技术中台前端团队负责人,ByteTech和掘金社区负责人</td><td>《技术社区与职业成长》</td></tr><tr class="row1"><td id="td1">11:05-11:10</td><td colspan="2">Break</td></tr><tr><td id="td1">11:10-12:05</td><td>贺师俊（hax） 开放原子开源基金会TOC成员,Ecma-TC39特邀专家</td><td>《我们如何参与JS语言标准的制定》</td></tr><tr class="row1"><td id="td1">12:05-13:30</td><td colspan="2">午餐</td></tr><tr><td id="td1">13:30-14:25</td><td>赵锦江 Shopee新加坡前端委员会负责人</td><td>《从海外视角看前端团队的组织与发展》</td></tr><tr><td id="td1">14:25-15:20</td><td>杨永林 贝壳如视技术中心负责人,如视工程部负责人</td><td>《前端三维技术的应用前景》</td></tr><tr class="row1"><td id="td1">15:20-15:30</td><td colspan="2">Break</td></tr><tr><td id="td1">15:30-16:25</td><td>周鹏 软件与体验部 高级前端工程师/小米集团技术委前端技术委员会 委员</td><td>《前端在“手机xAIoT”领域的探索》</td></tr><tr class="row1"><td id="td1">16:30-17:30</td><td colspan="2">圆桌论坛</td></tr></table></div></body>
</html>

二、简易电子政务网

在这里插入图片描述
文字素材：

全省教育电子政务工作座谈会在宁召开

为进一步统一思想、提高认识、振奋精神、明确方向，3月14日，全省教育电子政务工作座谈会在宁召开，来自13个省辖市、3个省管县（市、区）教育门户网站维护保障单位负责人参加了会议，各地就教育电子政务工作开展的情况作了交流，对全省教育门户网站绩效考核指标体系、江苏教育网《视频新闻》栏目筹建和通联站建设管理方案进行深入的研讨。

国务院：运用大数据提高政府服务水平

近日，国务院办公厅印发《关于运用大数据加强对市场主体服务和监管的若干意见》(以下简称《意见》)。
《意见》要求，以社会信用体系建设和政府信息公开、数据开放为抓手，充分运用大数据、云计算等现代信息技术，提高政府服务水平，加强事中事后监管，维护市场正常秩序，促进市场公平竞争，释放市场主体活力，进一步优化发展环境。

简易电子政务中心 ©版权所有
地址：太空市南京南路280号联系电话：99-99999999
苏ICP备：20220116002

简易电子政务网初始首页（未应用样式）
在这里插入图片描述

<!-- prj_6_2.html -->
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>简易电子政务网 </title><style type="text/css">* {margin: 0px;padding: 0px;}table {margin: 0 auto;}#header {background: url(pro62/logo.jpg) no-repeat center center;}h4 {color: red;padding: 10px auto;height: 30px;}td {color: black;font-size: 20px;}tr {text-align: center;}p {text-indent: 2em;font-size: 18px;text-align: left;}#nav {text-align: center;width: 100%;height: 54px;}a {display: inline-block;}a:link,a:visited,a:active {text-decoration: none;color: white;background: #666699;}#nav td a:hover {color: white;background: #9999ff;font-weight: blod;transform: rotate(360deg);/* 旋转360度 */transition: all 0.3s;/* 在所有属性上过度0.3s */}td table tr td a:hover {border-bottom: 5px solid white;}#left,#right {margin: 15px 10px;}</style></head><body><table border="0" width="1002px" cellspacing="0px" cellpadding="0px"><tr><td colspan="3" height="219px" id="header"></td></tr><tr height="50px"><td colspan=3><table border="0" width="100%" width="100%" bgcolor="#666699" cellspacing="0px" cellpadding="0px"><tr id=nav><td><a href="#">新闻资讯</a></td><td><a href="#">领导讲话</a></td><td><a href="#">行政公文</a></td><td><a href="#">成果展示</a></td><td><a href="http://www.edu.cn">中国教育网</a></td><td><a href="#">教育信息网</a></td></tr></table></td></tr><tr><td height="250px"><table width="150px" height="100%" border="0" bgcolor="#666699" cellspacing="0px" cellpadding="0px"><tr><td><a href="#">新闻资讯</a></td></tr><tr><td><a href="#">行政公文</a></td></tr><tr><td><a href="#">领导讲话</a></td></tr><tr><td><a href="#">成果展示</a></td></tr></table></td><td width="400px"><div id="left"><h4>全省教育电子政务工作座谈会在宁召开</h4><p>为进一步统一思想、提高认识、振奋精神、明确方向，3月14日，全省教育电子政务工作座谈会在宁召开，来自13个省辖市、3个省管县（市、区）教育门户网站维护保障单位负责人参加了会议，各地就教育电子政务工作开展的情况作了交流，对全省教育门户网站绩效考核指标体系、江苏教育网《视频新闻》栏目筹建和通联站建设管理方案进行深入的研讨。</p>　　</div></td><td><div id="right"><h4>国务院：运用大数据提高政府服务水平</h4><p>近日，国务院办公厅印发《关于运用大数据加强对市场主体服务和监管的若干意见》(以下简称《意见》)。</p><p> 《意见》要求，以社会信用体系建设和政府信息公开、数据开放为抓手，充分运用大数据、云计算等现代信息技术，提高政府服务水平，加强事中事后监管，维护市场正常秩序，促进市场公平竞争，释放市场主体活力，进一步优化发展环境。</p></div> 　　</td></tr><tr><td colspan="3" align="center" height="35px"><hr color="#c0c0c0">简易电子政务中心&nbsp;&copy;版权所有<br>地址：太空市南京南路280号 联系电话：99-99999999<br>苏ICP备：20220116002<br></td></tr></table></body>
</html>

三、课外拓展训练

1.设计新书推荐页面

(1)页面标题：“新书推荐”。
(2) 书简介内容如下。

数学的世界 I 作者: J.R. 纽曼编，王善平, 李璐译定价: 59.00元推荐理由: 呈现在大家面前的是由J.R. 纽曼花费十五年心血，所精选的迄今为止世界上最天才的数学文献集锦。高 …

现代教育技术 作者: 傅钢善定价: 39.80元推荐理由: 本教材结构新颖，逻辑清晰，图文并茂，内容丰富，易教易学，知行合一。
《生态智慧——生态可持续性》 作者: 伍业钢定价: 29.00 推荐理由: 传统的经济学认为，经济的投入和产出可以简化为“资本+劳动”的投入等于经济增长，而忽略了对劳动者的人文关怀（以人为本）。

中国工程院院士（11） 作者: 中国工程院、高等教育出版社、中国工程物理研究院定价: 500.00 推荐理由: 中国工程院院士是国家在工程技术方面设立的最高学术称号，为终身荣誉。为了展现中国工程院院士的风采、宣传科学家积极投身。
在这里插入图片描述

<!-- project_6_1.html -->
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>新书推荐</title><style type="text/css">img {width: 150px;height: 200px;}</style></head><body><table border="1px" cellspacing="0px" bordercolor="#f0f0f0"><tr><td colspan="4"><h4>总编推荐</h4></td></tr><tr><td><img src="kwtz61/image61.jpg"></td><td><h4>数学的世界 I</h4><p>作者: J.R. 纽曼 编， 王善平, 李璐 译 定价: 59.00元 推荐理由: 呈现在大家面前的是由J.R. 纽曼花费十五年心血， 所精选的迄今为止世界上最天才的数学文献集锦。 高 ...</p></td><td><img src="kwtz61/image62.jpg"></td><td><h4>现代教育技术</h4><p> 作者: 傅钢善 定价: 39.80元 推荐理由: 本教材结构新颖，逻辑清晰，图文并茂，内容丰富，易教易学，知行合一。</p></td></tr><tr><td><img src="kwtz61/image63.jpg"></td><td><h4>《生态智慧——生态可持续性》</h4><p> 作者: 伍业钢 定价: 29.00 推荐理由: 传统的经济学认为，经济的投入和产出可以简化为“资本+劳动”的投入等于经济增长，而忽略了对劳动者的人文关怀（以人为本 ...</p></td><td><img src="kwtz61/image64.jpg"></td><td><h4>中国工程院院士（11）</h4><p> 作者: 中国工程院、高等教育出版社、中国工程物理研究院 定价: 500.00 推荐理由: 中国工程院院士是国家在工程技术方面设立的最高学术称号，为终身荣誉。为了展现中国工程院院士的风采、宣传科学家积极投身 ... </p></td></tr></table></body>
</html>

2.采用表格布局设计区域划分页面

在这里插入图片描述

<!-- project_6_2.html -->
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>表格布局实训</title><style type="text/css">table {margin: 0 auto;}#td1 {background: #F1E2D3;height: 200px;}#td2 {background: red;height: 50px;width: 100%;}#tr3 {background: #F1F1F1;height: 290px;}#td4 {background: #E1F1F3;height: 60px;}td {text-align: center;vertical-align: middle;font-size: 36px;}a {color: white;}a:link,a:visited,a:active {text-decoration: none;}a:hover {text-decoration: underline;}</style></head><body><table width="1000px" height="600px" border="5px"><tr><td id="td1" colspan="4">logo</td></tr><tr><td id="td2" colspan="4"><table width="100%" height="100%"><tr><td><a href="#">menu1</a></td><td><a href="#">menu2</a></td><td><a href="#">menu3</a></td><td><a href="#">menu4</a></td><td><a href="#">menu5</a></td><td><a href="#">menu6</a></td></tr></table></td></tr><tr id="tr3"><td>content1</td><td>content2</td><td>content3</td><td>content4</td></tr><tr><td id="td4" colspan="4">footer</td></tr></table></body>
</html>