提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
《通信软件开发与应用》课程结业报告
一、实验要求
任务一：构建一个静态或动态网站。以下要求中任选A或B，要求如下：
A. 静态网站
采用纯 CSS 或你喜欢的任何 CSS 框架如 Bootstrap、MDB、Tailwind 等构建一个主题自选且不少于5个页面（Web Page）的网站
B. 动态网站
使用任何一个前端框架如 Angular 等进行某应用（如英雄之旅、代办事项、图书管理等）的开发，需要有 CRUD 即增删改查功能并有一定的样式。
无论你选择静态还是动态网站，该网站都需部署到你喜欢的网站托管服务器上如 Gitpage 等（Angular项目可参阅 https://angular.cn/guide/deployment）。
该网站需放置你的结业报告（要求见任务二）。
任务二：撰写结业报告，要求如下：
（1） 题目为《通信软件开发与应用》课程结业报告；
（2） 报告需阐述：做的什么、开发过程、遇到的问题、如何解决、哪些未解决、总结；
（3） 该报告以 Web 页面的形式呈现，从你上面开发的网站中可访问到。
二、主题选取
本次实验我选取的是世界读书日相关主题，其中包括了五个页面：读书日简介、读书主题、世界读书日、读书活动、联系交流。
其中主要是用的纯css实现页面展示。
三、开发过程
1.开发工具
Visual Studio Code
2.导航栏的设计
（1）导航栏样式
（2）导航栏代码
<div class="wrapper">
<div class="header">
<ul class="nav clearfix">
<li class="fl"><a href="pro.html">读书日简介</a></li>
<li class="fl"><a href="sub.html">读书主题</a></li>
<li class="logo">
<a href="index.html">
<img src="images/g.png" alt="">
</a>
</li>
<li class="fr"><a href="contact.html">联系交流</a></li>
<li class="fr"><a href="active.html">读书活动</a></li>
</ul>
</div>
3.页面设计
①读书日简介
1）界面展示
2）代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>世界读书日简介</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="wrapper">
<div class="header">
<ul class="nav clearfix">
<li class="fl"><a href="pro.html">读书日简介</a></li>
<li class="fl"><a href="sub.html">读书主题</a></li>
<li class="logo">
<a href="index.html">
<img src="images/g.png" alt="">
</a>
</li>
<li class="fr"><a href="contact.html">联系交流</a></li>
<li class="fr"><a href="active.html">读书活动</a></li>
</ul>
</div>
<!-- <div class="banner"></div> -->
<div class="main w">
<div class="main_three">
<div class="link"><a href="index.html">首页</a>><a href="pro.html">简介</a></div>
<div class="main_top">
<span></span>
<a href="#">世界读书日简介</a>
<span></span>
</div>
<div class="main_three_con ">
<p class="pb50">4月23日世界读书日全称“世界图书与版权日”，又称“世界图书日”。最初的创意来自于国际出版商协会。1995年11月15日正式确定每年4月23日为“世界图书与版权日”。
</p>
</div>
</div>
<div class="main_one clearfix">
<ul>
<li>
<span class="quan">1</span>
<h5>历史</h5>
<p>1972年联合国教科文组织向全世界发出了“走向阅读社会”的号召，要求社会成员人人读书，让读书成为人们日常生活中不可或缺的部分。1995年联合国教科文组织宣布4月23日为“世界读书日”，致力于向全世界推广阅读、出版和对知识产权的保护。</p>
</li>
<li class="main_one_m">
<span class="quan">2</span>
<h5>目的</h5>
<p>世界读书日设立目的是希望散居在世界各地的人，无论你是年老还是年轻，无论你是贫穷还是富裕，无论你是患病还是健康，都能享受阅读的乐趣，都能尊重和感谢为人类文明做出过巨大贡献的文学、文化、科学、思想大师们，都能保护知识产权。</p>
</li>
<li>
<span class="quan">3</span>
<h5>宣言</h5>
<p>“希望散居在全球各地的人们，无论你是年老还是年轻，无论你是贫穷还是富有，无论你是患病还是健康，都能享受阅读带来的乐趣，都能尊重和感谢为人类文明做出巨大贡献的文学、文化、科学思想大师们，都能保护知识产权。”</p>
</li>
<div class="cl"></div>
</ul>
</div>
<div class="main_top">
<span></span>
<a href="pro.html">具体发展历史</a>
<span></span>
</div>
<div class="main_con">
<p>1972年，联合国教科文组织向全世界发出了“走向阅读社会”的号召，要求社会成员人人读书，让读书成为人们日常生活中不可或缺的部分。</p>
<p>1995年，国际出版商协会在第二十五届全球大会上提出“世界图书日”设想，并由西班牙政府将方案提交联合国教科文组织。后俄罗斯认为，“世界图书日”还应当增加版权的概念。设立世界读书日的建议是由西班牙提出的，其灵感源自西班牙加泰罗尼亚地区的“圣乔治节”。另据图书馆杂志，世界读书日来源于西班牙加泰罗尼亚地区的一个传说：“美丽的公主被恶龙困于深山，勇士乔治只身战胜恶龙，解救了公主；公主回赠给乔治的礼物是一本书。”从此书成为胆识和力量的象征。4月23日成为“圣乔治节”。节日期间，加泰罗尼亚地区的居民有赠送玫瑰和图书给亲友的习俗。</p>
<p>1995年，联合国教科文组织宣布4月23日为“世界读书日”。1616年4月23日是西班牙著名作家塞万提斯和英国著名作家莎士比亚的辞世纪念日。</p>
</div>
<div class="img"><img src="images/2-3.jpg" width="1000"></div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
②读书主题
1）界面展示
2）代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>世界读书日主题</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="wrapper">
<div class="header">
<ul class="nav clearfix">
<li class="fl"><a href="pro.html">读书日简介</a></li>
<li class="fl"><a href="sub.html">读书主题</a></li>
<li class="logo">
<a href="index.html">
<img src="images/g.png" alt="">
</a>
</li>
<li class="fr"><a href="contact.html">联系交流</a></li>
<li class="fr"><a href="active.html">读书活动</a></li>
</ul>
</div>
<!-- <div class="banner"></div> -->
<div class="link1"><a href="index.html">首页</a>><a href="sub.html">主题</a></div>
<div class="pdt">
<div class="pdt_top">
<span>历年活动主题</span>
<p class="p1">生活里没有书籍，好像没有阳光。智慧里没有书籍，就好像鸟儿没有翅膀。---莎士比亚</p>
</div>
</div>
<div class="p">
<div class="p_box">
<ul class="clearfix">
<li>
<div class="p_img"><img src="images/3-1.jpg" alt=""></div>
<div class="p_con">
<h5>2009年</h5>
</div>
</li>
<li>
<div class="p_img"><img src="images/3-2.jpg" alt=""></div>
<div class="p_con">
<h5>2010年</h5>
</div>
</li>
<li>
<div class="p_img"><img src="images/3-3.jpg" alt=""></div>
<div class="p_con">
<h5>2012年</h5>
</div>
</li>
<li><div class="p_img"><img src="images/3-4.jpg" alt=""></div>
<div class="p_con">
<h5>2013年</h5>
</div></li>
<li>
<div class="p_img"><img src="images/3-5.jpg" alt=""></div>
<div class="p_con">
<h5>2014年</h5>
</div>
</li>
<li>
<div class="p_img"><img src="images/3-6.jpg" alt=""></div>
<div class="p_con">
<h5>2016（中国）</h5>
</div>
</li>
<li class="cl"></li>
</ul>
</div>
</div>
<div class="main_two">
<div class="main_top main_two_top">
<span></span>
<a href="sub.html">2016年中国主题</a>
<span></span>
</div>
<div class="main_two_con clearfix">
<ul>
<li>
<div class="zi_div">
<h5>23页第四行--2016（中国）</h5>
<span></span>
</div>
</li>
<li>
<div class="pic">
<a href="active.html"><img src="images/1-1.jpg" alt class="vcenter"></a>
</div>
</li>
<li>
<div class="pic">
<a href="active.html"><img src="images/1-2.jpg" alt class="vcenter"></a>
</div>
</li>
<li>
<div class="pic">
<a href="active.html"><img src="images/1-3.jpg" alt class="vcenter"></a>
</div>
</li>
<li>
<div class="pic">
<a href="active.html"><img src="images/1-4.jpg" alt class="vcenter"></a>
</div>
</li>
<li>
<div class="pic">
<a href="active.html"><img src="images/1-5.jpg" alt class="vcenter"></a>
</div>
</li>
<li>
<div class="pic">
<a href="active.html"><img src="images/1-6.jpg" alt class="vcenter"></a>
</div>
</li>
<li>
<div class="pic">
<a href="active.html"><img src="images/1-7.jpg" alt class="vcenter"></a>
</div>
</li>
<div class="cl"></div>
</ul>
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
③世界读书日
1)界面展示
2）代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>世界读书日活动</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="wrapper">
<div class="header">
<ul class="nav clearfix">
<li class="fl"><a href="pro.html">读书日简介</a></li>
<li class="fl"><a href="sub.html">读书主题</a></li>
<li class="logo">
<a href="index.html">
<img src="images/g.png" alt="">
</a>
</li>
<li class="fr"><a href="contact.html">联系交流</a></li>
<li class="fr"><a href="active.html">读书活动</a></li>
</ul>
</div>
<!-- <div class="banner"></div> -->
<div class="link1"><a href="index.html">首页</a>><a href="active.html">活动</a></div>
<div class="all">
<ul class="all_ul">
<li>
<div class="all_left">
<a href="active.html"><img src="images/4-1.jpg" alt=""></a>
</div>
<div class="all_right">
<h4>国外活动</h4>
<p>据资料表明，自“世界读书日”宣布以来，已有超过 100个国家和地区参与此项活动。很多国家在这一天或者前后一周、一个月的时间内都会开展丰富多彩的活动，图书馆、媒体、出版商、学校、商店、社区等机构团体在这一段的时间里,都会做一些赠书、读书等鼓励人们阅读的事情，把读书的宣传活动变成一场热热闹闹的欢乐节庆。 </p>
</div>
</li>
<li>
<div class="all_left">
<a href="active.html"><img src="images/4-2.jpg" alt=""></a>
</div>
<div class="all_right">
<h4>中国</h4>
<p>1997年1月，中央宣传部、文化部、国家教委、国家科委、广播影视部等九个部委共同发出了《关于在全国组织实施“知识工程”的通知》</p>
<p>2004年，中国图书馆学会为了实施“倡导全民读书，建设阅读社会”为宗旨的“知识工程”，在全国范围内举办大型活动让全国公众都知道“世界读书日”。 </p>
</div>
</li>
<li>
<div class="all_left">
<a href="active.html"><img src="images/7.jpeg" alt=""></a>
</div>
<div class="all_right">
<h4>英国</h4>
<p>当地往往把“读书日”庆祝活动提前到3月6日举行，据统计，每年单是学校、图书馆、书店所举办的庆祝活动便已超过1000项，其中包括故事人物模仿大赛、午间故事时间、各类型的书展等。有些教育机构和书店还会向小朋友发出面值1英镑的图书日代用券，让他们到图书日成员书店换购一本喜欢的书。 </p>
</div>
</li>
<li>
<div class="all_left">
<a href="active.html"><img src="images/4-3.jpg" alt=""></a>
</div>
<div class="all_right">
<h4>墨西哥</h4>
<p>与“世界读书日”关系最密切的，是创立于20年前的瓜达拉哈拉国际图书博览会，是在以西班牙为母语的国家中最大的图书市场。每年集中于此的大量出版商、文学经纪人、阅读公关、翻译家、图书馆管理员等，都会进行商业或专业性的交流，超过35万人（包括10万儿童）会在书展的9天里来到瓜达拉哈拉市参观这个全拉美最大的文化节庆。</p>
</div>
</li>
<li>
<div class="all_left">
<a href="active.html"><img src="images/4-4.jpg" alt=""></a>
</div>
<div class="all_right">
<h4>韩国</h4>
<p>发行“世界阅读日”邮票，将推动阅读和版权的讯息宣扬开去。当地2004年会特别为“世界阅读日”出版一本历奇故事书，向小孩讲解甚么是版权，希望藉此提高年青一代对版权的认识。除此之外，当局也发行“世界阅读日”邮票，将推动阅读和版权的讯息宣扬开去。出版社在4月23日当天寄出35,000册图书，免费送给当地学校。</p>
</div>
</li>
<li>
<div class="all_left">
<a href="active.html"><img src="images/4-5.jpg" alt=""></a>
</div>
<div class="all_right">
<h4>以色列</h4>
<p>以色列人爱读书，爱买书，爱写书。在以色列，无论是街头还是巷尾，无论是车站还是广场，专心致志读书的人随处可见。在每个家庭里，书房是必需的。在安息日期间，犹太人开的一切商店、饭店、娱乐场所都停业，交通全部中断，每一个人都必须在家中安息和祈祷，严禁走亲访友和外出郊游，但只有一点是允许的，那就是读书和买书。每个书店里都挤满了人，没有大声喧哗，人们都静悄悄地购买图书。 </p>
</div>
</li>
</ul>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
④读书活动
⑤联系交流
1）界面展示
2）代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>联系交流</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="wrapper">
<div class="header">
<ul class="nav clearfix">
<li class="fl"><a href="pro.html">读书日简介</a></li>
<li class="fl"><a href="sub.html">读书主题</a></li>
<li class="logo">
<a href="index.html">
<img src="images/g.png" alt="">
</a>
</li>
<li class="fr"><a href="contact.html">联系交流</a></li>
<li class="fr"><a href="active.html">读书活动</a></li>
</ul>
</div>
<!-- <div class="banner"></div> -->
<div class="link1"><a href="index.html">首页</a>><a href="contact.html">联系交流</a></div>
<!-- 作品 -->
<div class="pdt">
<div class="pdt_top">
<span>欢迎留言交流</span>
<p class="p1"> 书籍是人类进步的阶梯。---高尔基</p>
</div>
<div class="con_box">
<div class="log">
<p>欢迎留言</p>
<form action="index.html">
<ul>
<li><label>姓名：</label><input type="text" class="txt" placeholder="请输入"></li>
<li><label>电话：</label><input type="text" class="txt"></li>
<li class="texli"><label>留言：</label><textarea name="" cols="" rows="" class="textarea"></textarea></li>
</ul>
<br>
<div class="btnbox">
<input type="submit" value="登录" class="btn">
<input type="reset" value="重置" class="btn">
</div>
</form>
</div>
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
四、问题解决
1.遇到的问题
1）因为这次设置的是五个静态页面，所以主要以图片和文字展示，就会碰到排版困难的情况
2）第一次部署不太了解，所以这方面出现的问题也蛮多
3）找到相关主题且没有水印的照片也是一件比较困难的事情
2.解决的问题
1）排版困难主要是通过b站搜索相关视频和csdn学习相关标签来解决的
2）部署困难也是通过网上学习和询问同学来解决的
3） 在我锲而不舍的寻找和一些拙劣的p图技巧下，还是成功的都找到了相关主题的图片
五、总结
通过此次实验，不仅加深了我对前端网页制作的理解，也让我的自学能力得到了提高，这既有赖于老师上课的耐心讲解，也是因为老师提供的学习资料和网站的帮助。同时也意识到了前端制作的魅力所在，每一次代码的改动都能直接展示出效果，这种清晰的变化是我认为比较易于接受且好及时修改错误的最大优点，希望在以后也能有更多机会学习相关知识。
407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
