《通信软件开发与应用》课程结业报告
目标要求
构建一个静态或动态网站即以下要求中任选A或B，主题自选，要求如下：
A. 静态网站。可使用你喜欢的任何CSS框架如BootStrap、MDB、tailwind等，页面不少于5个，最后一个页面放置结业报告的超链接。网站需部署到你喜欢的托管服务器上如github等。
B. 动态网站。使用任何一个前端框架如Angular等进行某应用网站的开发如英雄之旅等，需要有CRUD即增删改查功能并有一定的样式，网站内放置结业报告的超链接。网站需部署到你喜欢的托管服务器上如github等（可参阅https://angular.io/guide/deployment#deploy-to-github-pages）。
撰写结业报告，要求如下：
A. 题目为《通信软件开发与应用》课程结业报告；
B. 报告需阐述：做的什么、遇到的问题、如何解决、哪些未解决、总结；
C. 该报告需表现为HTML格式，从你上面的网站中可访问到。
做的什么
经过一学期的学习，我基本掌握一些基础的网站编写知识期末大作业是让我们自己设计一个与自己相关的网页，我们都知道任何一个网站都需要确定一个主题，也就是网站的题材，本网站围绕成都美食、旅游、文化为主题做的一个简单的静态网页。重庆跟成都相距不远，高铁过去也就不到两小时，但是我还没有去过成都，因此我这次做了一个关于成都的网页。
开发过程
模板选择
我采用了MDB模板。MDB全名为MDBootstrap，Material Design 是谷歌于2014年推出用于媲美苹果的视觉设计规范。以Bootstrap 为基础，同时遵循 MD 规范的靓丽 CSS 框架也不少，构建了许多直接使用的组件。其中以 MDBootstrap 为最佳它有丰富的CSS模板，JS模板，所以只需要进行HTML和CSS的相应改变即可。
网页布局
首先我用了一个logo，如图：
代码如下：
</head>
<body>
<div class="head">
<div class="main"><span class=""><img src="images/logo.jpg" width="150"/></span>
<p class="clear"></p>
</div>
</div>
然后是导航条，导航条可以快速锁定所需要的内容，是网页开发极其重要的内容。导航条其内容包括三个部分，包括< a >超链接，来实现网页的快速跳转，< button >按钮来实现点击，区块，用于放置各个导航超链接。
代码如下：
<div class="menu">
<div class="main">
<ul class="center">
<li><a href="index.html">首页</a></li>
<li><a href="jieshao.html">简介</a></li>
<li><a href="chihewanle.html">美食</a></li>
<li><a href="tupian.html">风景</a></li>
<li><a href="zhuce.html">注册</a></li> <li><a href="denglu.html">登录</a></li>
<li><a href="">报告</a></li>
</ul>
</div>
</div>
在首页里面主要做了以下内容
1、做了个图片的切换。
部分代码：
<div class="main">
<div class="banner ">
<div class="top_img">
<div class="focus" id="focus">
<div id="focus_m" class="focus_m">
<ul>
<li style="display:block"> <img src="images/banner1.jpg" width="100%" /> </li>
<li style="display:none"> <img src="images/banner2.jpg" width="100%" /> </li>
<li style="display:none"> <img src="images/banner3.jpg" width="100%" /> </li>
</ul>
</div>
<a href="javascript:;" class="focus_l" id="focus_l" title="上一张"><b></b><span></span></a> <a href="javascript:;" class="focus_r" id="focus_r" title="下一张"><b></b><span></span></a> </div>
</div>
</div>
2、对要做的另外三个页面做了简要介绍。
<div class="bar">
<h3>旅游风光</h3>
</div>
<div class="scrollleft">
<ul>
<li> <a href="tupian.html"><img src="images/0.jpg" width="100%" height="200"/> </a></li>
<li> <a href="tupian.html"><img src="images/1.jpg" width="100%" height="200"/></a> </li>
<li> <a href="tupian.html"><img src="images/2.jpg" width="100%" height="200"/></a> </li>
<li> <a href="tupian.html"><img src="images/3.jpg" width="100%" height="200"/> </a></li>
<li> <a href="tupian.html"><img src="images/4.jpg" width="100%" height="200"/> </a></li>
<li> <a href="tupian.html"><img src="images/5.jpg" width="100%" height="200"/> </a></li>
<li> <a href="tupian.html"><img src="images/6.jpg" width="100%" height="200"/> </a></li>
<li> <a href="tupian.html"><img src="images/7.jpg" width="100%" height="200"/> </a></li>
<div class="clear"></div>
</ul>
</div>
3、用了js做了个图片的滚动。
js部分代码：
auto=null;
timer=null;
var focus=new Function();
focus.prototype={
init:function(){
this.aTime=this.aTime || 10;
this.sTime=this.sTime || 5000;
this.oImg=document.getElementById('focus_m').getElementsByTagName("ul")[0];
this.oImgLi=this.oImg.getElementsByTagName("li");
this.oL=document.getElementById('focus_l');
this.oR=document.getElementById('focus_r');
this.createTextDom();
this.target=0;
this.autoMove();
this.oAction();
},
createTextDom:function(){
var that=this;
this.oText=document.createElement("div");
this.oText.className="focus_s";
var ul=document.createElement('ul');
var frag=document.createDocumentFragment();
for (var i=0;i<this.oImgLi.length;i++) {
var li=document.createElement("li");
li.innerHTML='<b></b>';
if (i==0) {
li.className="active";
};
frag.appendChild(li);
};
ul.appendChild(frag);
this.oText.appendChild(ul);
this.o.insertBefore(this.oText,this.o.firstChild);
this.oTextLi=this.oText.getElementsByTagName("li");
},
在简介页面做了以下内容
1、做了一个视频简介。
代码如下：
<div class="content">
<div class="bar">
<h2>介绍</h2>
</div>
<div class=""><video controls="" autoplay="" name="media" style="float:left; width:500px"><source src="video/v.mp4" type="video/mp4"></video>
<p>
2、做了一个成都行政区划表格
部分代码如下：
</div>
<div class="">
<table log-set-param="table_view" data-sort="sortDisabled" width="100%" border="1">
<tbody>
<tr>
<td align="center" width="118"><strong>地名</strong></td>
<td align="center" width="115"><strong>区划代码</strong></td>
<td align="center" width="210"><strong>面积（平方千米）</strong></td>
<td align="center" width="162"><strong>人口（万人）</strong></td>
<td align="center" width="142"><strong>*驻地</strong></td>
</tr>
<tr>
<td align="center" width="118">成都市</td>
<td align="center" width="115">510100</td>
<td align="center" width="210">14312</td>
<td align="center" width="162">1319</td>
<td align="center" width="142">武侯区</td>
</tr>
<tr>
美食页面主要是美食图片
代码如下：
<div class="main">
<div class="inban"><img src="images/b.jpg" width="100%" /> </div><br>
<div class="content">
<div class="imglist" >
<ul>
<li> <img src="images/a1.jpg" width="100%" height="240"/> </li>
<li> <img src="images/a2.jpg" width="100%" height="240"/></li>
<li> <img src="images/a3.jpg" width="100%" height="240"/></li>
<li> <img src="images/a4.jpg" width="100%" height="240"/> </li>
<li> <img src="images/a5.jpg" width="100%" height="240"/></li>
<li> <img src="images/a6.jpg" width="100%" height="240"/></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
风景页面
代码如下：
<div class="main">
<div class="content"><div class="bar">
<h2 align="center">——旅游风光——</h2>
</div>
<div class="ass" >
<ul>
<li> <img src="images/0.jpg" width="100%" height="300"/> </li>
<li> <img src="images/1.jpg" width="100%" height="300"/></li>
<li><img src="images/2.jpg" width="100%" height="300"/></li>
<li><img src="images/3.jpg" width="100%" height="300"/></li>
<li><img src="images/4.jpg" width="100%" height="300"/></li>
<li><img src="images/5.jpg" width="100%" height="300"/></li>
<li><img src="images/6.jpg" width="100%" height="300"/></li>
<li><img src="images/7.jpg" width="100%" height="300"/></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
注册页面
代码如下：
<div class="main"> <div class="inban"><img src="images/img.jpg" width="100%" /> </div>
<div class="content">
<div class="bar">
<h2 align="center">——欢迎注册成为会员——</h2>
</div>
<div class="form">
<form id="zhuce" class="zhuce inp" name="zhuce" method="post" action="denglu.html" >
<div class="nam">
<label>姓名</label>
<div class="div">
<input id="first_name" name="first_name" type="text" value="请输入您的姓名" class="inp">
</div>
</div>
<div class="nam">
<label>密码</label>
<div class="div">
<input name="psw" type="password" size="20" maxlength="8" class="inp">
</div>
</div>
<div class="nam">
<label>性别</label>
<div class="div">
<input type="radio" name="radio" id="nan" value="radio">
<span>男</span>
<input type="radio" name="radio" id="nv" value="radio">
<span>女</span></div>
</div>
<div class="nam">
<label>电子邮箱</label>
<div class="div">
<input type="text" name="email" id="email" size="30" class="inp">
</div>
</div>
<div class="nam">
<label style="vertical-align:top">备注</label>
<div class="div">
<textarea name="bei" cols="30" rows="10" class="inp"></textarea>
</div>
</div>
<div class="nam" style="text-align:center">
<input name="sleep" type="submit" value="立即注册">
</div>
</form>
</div>
<div class="clear"></div>
</div>
登陆页面
代码如下
<div class="main">
<div class="content">
<div class="inban"><img src="images/dl.jpg" width="100%" /> </div>
<div class="bar">
<h2 align="center">——欢迎登录——</h2>
</div>
<div class="form">
<form id="zhuce" class="zhuce inp" name="zhuce" method="post" action="index.html">
<div class="nam">
<label>用户名</label>
<div class="div">
<input id="first_name" name="first_name" type="text" value="请输入您的姓名" class="inp">
</div>
</div>
<div class="nam">
<label>密码</label>
<div class="div">
<input name="psw" type="password" size="20" maxlength="8" class="inp">
</div>
</div>
<div class="nam" style="text-align:center">
<input name="sleep" type="submit" value="立即登录">
</div>
</form>
</div>
<div class="clear"></div>
</div>
</div>
遇到的问题
问题一、介绍页面嵌入视频遇到困难。
问题二、在主页做那个页面滚动速度控制遇到困难。
问题三、上传GitHub时，首先英语不太好，加上GitHub进不去，进去了上传不成功等问题。
解决问题
问题一、
在body标签对的之间插入标签，在video标签之间添加source播放源及其地址运行后就会出现视频窗口
代码如下
<div class="main">
<div class="content">
<div class="bar">
<h2>介绍</h2>
</div>
<div class=""><video controls="" autoplay="" name="media" style="float:left; width:500px"><source src="video/v.mp4" type="video/mp4"></video>
问题二
通过百度，复习老师讲的js,解决问题。
代码如下：
window.onload=function(){
focusRun.init();
var content = document.getElementById("content")
var ul = content.getElementsByTagName("ul")[0]
var li = ul.getElementsByTagName("li")
var speed = 2;
ul.innerHTML += ul.innerHTML
ul.style.width = li.length * li[0].offsetWidth + "px"
function run() {
if (ul.offsetLeft < -ul.offsetWidth / 2) {
ul.style.left = 0
} else if (ul.offsetLeft > 0) {
ul.style.left = -ul.offsetWidth / 2 + "px"
}
ul.style.left = ul.offsetLeft + speed + "px"
}
timer = setInterval(run, 30)
content.onmouseover = function() {
clearInterval(timer)
}
content.onmouseout = function() {
timer = setInterval(run, 30)
}
};
问题三上传GitHub
解决方法：
查了很多原因发现是网的问题移动网进不去GitHub，最后找同学借校园网成功进去GitHub。
托管网页学习链接：
GitHub托管网页
总结
通过这次网站前端的学习，让我明白了学习一门新东西，永远不要妄想有速成这一说，告诉你了一个方式，但是缺少努力这一环节，那也是白搭。
项目是根据自己想法构思的，因此在总体设计的整个系统中也就占有很大比重，耗费较长时间。为能够很好的实现系统设计目标，在开发过程中，由于自己开始没有思考全面导致后来开发程序的过程中出现了一些偏差。由于自己开发经验不足知识有限，过程中出现了许多的代码的冗余现象。在设计中同样遇到很多之前调试系统所没有遇到过的异常、错误信息。
这次项目也收获很多东西，学会了简单的网页Web制作。学会了HTML的各种标签，学会了CSS进行页面的美化和调整。我们会在页面加入超链接，会加入图片，会加入视频和音频元素。实践过程中，我掌握了许多有关网页前端和后端制作的知识，知道了静态网页和动态网页的区别，我从当初一个完全不懂网站前端的人，变成了一个独立完成网站前端设计项目。