《通信软件开发与应用》课程结业报告

前言

此篇文章为我的《通信软件开发与应用》课程结业报告，报告详细展示了我的课程任务完成情况。

课程任务

任务一：构建一个静态或动态网站。以下要求中任选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 构建的一个关于四川小吃店的静态网站，用于宣传小吃店并完成在线下单。网站的以四川街头小吃为主题展开，其中主要界面有特色小吃推荐、四川美食文化介绍、小吃菜谱、简易的在线点菜单，以及留言板，伴有简易的注册、登录和付款界面。网站效果展示如下：

• 网站首页：小吃店特色美食一览
  
  部分css样式展示

body{
	font-family:arial;
	padding:0px;
	margin:auto;
	background:#ada7a7;

}
.food-left{
	height:360px;
	width:180px;
	background:pink;
	padding:30px
}
.food-text{
	text-align:center;
	margin:80px 0px
}
.navMenu{
	width:1200px;
	height:53px;
	color:blue;
	font-size:24px;
    line-height:34px;
	position:relative;
	top:-63px;
	overflow:hidden;
	margin:10px 0px 10px 350px;
}
.navMenu a{
	font-size:20px;
	padding:0px 40px;
	color:black;
	text-decoration:none;
}
.navMenu .navMenu1{
	background:#909090;
	border:dashed 2px #707070;
}

img{
	border:none;
}
ul,li{
	list-style-type:none;
	padding:0px;
	margin:0px;
}
.main-top{
	width:1500px;
	margin:8px;
    border:1px solid #909090;	
}
.top{
	width:1500px;
	height:100px;
	background-color:#707070;
	margin:auto;
	overflow:hidden;
}
.logo{
	width:250px;
	height:100px;
}
.footer{
	width:1500px;
	height:60px;
	text-align:center;
	padding-top:10px;
	font-size:15px;
	background-color:#707070;
	margin:auto;
	overflow:hidden;
	position:relative;
}

.enter{
	height:50px;
	width:150px;
	font-size:24px;
    line-height:34px;
	display:block;
	overflow:hidden;
	float:right;
	position:relative;
	top:-170px;
	margin-top:50px;
	margin-right:2px;
}
p a{
    color:black;
}
p{
	margin-top:4px;
}
.navMenu a:hover{
	color:#FFFFFF;
	font-size:24px;
	text-decoration:underline;	
}

• 美食攻略：特色四川小吃推荐
  

部分css样式展示：

.main{
	width:1500px;
	height:1907px;
	margin:auto;
    border:1px solid #909090;	
}
.top{
	width:1500px;
	height:100px;
	background-color:#707070;
	margin:auto;
	overflow:hidden;
}
.logo{
	width:250px;
	height:100px;
}
.navMenu{
	width:1200px;
	height:53px;
	color:blue;
	font-size:24px;
    line-height:34px;
	position:relative;
	top:-63px;
	overflow:hidden;
	margin:10px 0px 10px 350px;
}
.navMenu a{
	font-size:20px;
	padding:0px 40px;
	color:black;
	text-decoration:none;
}

• 美食菜谱：美食制作方法
  
• 四川美食文化
  
• 美食铺子：实现在线点单
  
• 留言板：在线留言
  

---

二、开发过程

1.开发环境

Visual Studio Code

2.网页制作过程

1、确定网页主题，因为很喜欢四川小吃，于是在网上找了很多关于四川小吃的图片，制作流程，四川美食文化介绍，打算以图文介绍的方式呈现一个四川小吃店的宣传点菜网页。
2、整体内容规划，根据网店宣传特点，首页推荐特色小吃，其次介绍制作方法，介绍四川美食文化，然后提供在线下单的便利，最后留下使用体验，或者建议。
3、界面设计，总体设计颜色为灰色，在网页顶端采用导航栏的形式跳转至其他页面，网页底部也提供了跳转链接，每个页面根据其职能不同，使用不同的内容进行填充，比如首页为特色小吃推荐，美食菜谱则是展示菜谱，美食铺子可以在线下单。
4、前端程序设计，根据界面设计进行代码的编写，实现网页的界面和功能。
程序编写步骤：

1. 先从总体进行布局（一般只用div盒子，表示大区域）。

2. 每个大区域先用背景颜色区分，然后通过css调整位置和大小（内外边距，宽高，位置等）。

3. 对每个大区域进行小区域布局（div或具体标签），然后进行css调整。

4. 依次实现每个大区域的功能，比如在线下单，留言等。

5. 依次实现各个页面的功能。

6. 修改功能或添加功能。

---

三、开发过程中遇到的问题

1、对于标签的使用不够熟练，没有理清各个标签的用途和用法，导致标签的嵌套使用总是出现错误；
2、css样式属性记不清，使用时需一个个搜索了解其功能。
3、表单元素中，提交时，输入框中，不能为空，如何设置？
4、 h1~h6标签 自带外边距。
5、怎么去掉链接下划线。
6、块元素的的第一个子盒子设置margin-top值会作用到父级上。
7、如何解决行内元素与行内块元素，代码换行造成的间隙。
8、如何将web网页部署到公共网站上。
开发过程中遇到的问题千千万，在此我只记录了部分我认为比较有学习意义的问题

四、解决方法

解决方法对应以上开发过程中遇到的问题：
1、标签的嵌套运用，需要根据整体内容设置

对内容布局控制进行区分,需要特别注意的是大部分标签都是成对出现的，因此需要特别注意所有结束标签的位置，结束标签的位置会决定css样式的作用范围。
2、css的样式属性较多，在开发过程中，多多练习就会熟能生巧。
3、验证某个表单元素的内容是否为空，在input中添加属性required/required=“required”即可。
4、将属性margin的值设置为0，margin:0;.
5、在css样式表中在对应链接的样式中加入此语句text-decoration:none;
6、解决这个问题的方法有三种，1、给父级设置border-top；2、给父级设置over-flow:hidden；3、给父级设置padding。
7、给父级元素设置font-size:0; 子级单独设置。
8、在网上搜索了很多教程，一个个试下来，最终使用github仓库成功部署了。
静态网页开发可以直接看到开发结果，因此遇到的问题基本马上就可以解决，不太会存在遗留问题。

总结

这次作业充满了趣味性，自己按照自己的喜好设计开发网站，网站整体设计虽然较为简陋，但是经过自己一步步的设计，美化，最终形成了一个简单的网站，成就感满满。我从这次作业了解了如何利用HTML5来构建Web页面，用CSS来美化Web页面，以及利用JavaScript来进行简单的客户端交互等方面的基础知识。