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

一.期末结业目标

构建一个静态或动态网站即以下要求中任选A或B，主题自选，要求如下：

A.静态网站。可使用你喜欢的任何CSS框架如BootStrap、MDB、tailwind等，页面不少于5个，最后一个页面放置结业报告的超链接。网站需部署到你喜欢的托管服务器上如github等。
撰写结业报告，要求如下：

A. 题目为《通信软件开发与应用》课程结业报告；

B. 报告需阐述：做的什么、开发过程、遇到的问题、如何解决、哪些未解决、总结；

C. 该报告需表现为HTML格式，从你上面的网站中可访问到。

二.网页整体效果展示

首先附上我制作的网页链接：
链接: link

1.主页面展示

2.子页面展示

三.实现过程

1.关于模板的选择

由于我建立的是静态网页，所以我采用了MDB模板。MDB全名为MDBootstrap，Material Design 是谷歌于2014年推出用于媲美苹果的视觉设计规范。请访问其Material Design 官网了解。以Bootstrap 为基础，同时遵循 MD 规范的靓丽 CSS 框架也不少，构建了许多直接使用的组件。其中以 MDBootstrap 为最佳它有丰富的CSS模板，JS模板，所以只需要进行HTML和CSS的相应改变即可。作为网页学习基础者，我们所学的网页建设知识都是很基础的，所以也并不用学习特别难的知识。选择这些模板的使用即可。

2.主页面导航条的建立

导航条可以快速锁定所需要的内容，是网页开发极其重要的内容。导航条使用了一个< nav >标签，其内容包括三个部分，包括< a >超链接，来实现网页的快速跳转，< button >按钮来实现点击，区块，用于放置各个导航超链接。

我导航条部分代码如下所示：

 <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
      <div class="container">
        <a class="navbar-brand" href="#">Tools</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"
          aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav mr-auto smooth-scroll">
            <li class="nav-item">
              <a class="nav-link" href="#intro">Home
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#projects" data-offset="90">Introduce</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#gallery" data-offset="90">Live</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#testimonials" data-offset="30">Other Bands</a>
            </li>
          </ul>
          <!-- Social Icon  -->
          <ul class="navbar-nav nav-flex-icons">
            <li class="nav-item">
              <a class="nav-link">
                <i class="fab fa-facebook-f light-green-text-2"></i>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link">
                <i class="fab fa-twitter light-green-text-2"></i>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link">
                <i class="fab fa-instagram light-green-text-2"></i>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- Navbar -->

3.主页全屏图片背景显示

主页全屏背景显示如下所示：

构建全图背景其实是十分的简单。我们在添加如下代码在< header >标签中, < nav >标签之后

<!--Mask-->
        <div id="intro" class="view">

          <div class="mask rgba-black-strong">
    
            <div class="container-fluid d-flex align-items-center justify-content-center h-100">
    
              <div class="row d-flex justify-content-center text-center">
    
                <div class="col-md-10">
    
                  <!-- Heading -->
                  <h2 class="display-3 font-weight-bold white-text mb-0 pt-md-5 pt-5">BAND CLUB</h2>
    
                  <!-- Divider -->
                  <hr class="hr-light">
    
                  <!-- Description -->
                  <h4 class="white-text my-4">band introduce</h4>
                  <a href="https://blog.csdn.net/Cai__xukun/article/details/117266802"
                  <button type="button" class="btn btn-outline-white">课程结业报告<i class="fas fa-book ml-2"></i></button>
                </a>
                </div>
    
              </div>
    
            </div>
    
          </div>
    
        </div>
        <!--/.Mask-->

代码中，我们设置了全图背景上相应文字，同时我把我们的课程实验报告附在了首页的按钮上，这个操作很简单，直接使用href来附上链接即可。.view 是我们背景图片的封装器, 同时使我们可以对图片进行明暗等效果的遮罩。.mask 是一个有绝对定位的元素, 它将以某种效果覆盖图片(通常我们将添加一些文字).。
然后我们在style.css文件中附上如下代码，以加入并调整图片背景样式，同时由于浏览器的不同，我们针对不同浏览器写下相应的尺寸代码，以适配不同的浏览器。

  html,
  body,
  header,
  .view {
    height: 100vh;
  }
}
#intro {
    background: url("https://user-images.githubusercontent.com/84569428/119513960-3fa68d80-bda7-11eb-906c-106dacb9662d.jpg")no-repeat center center fixed;
    -webkit-background-size: cover; /* 针对Chrome, Safari, Edge等浏览器 */
    -moz-background-size: cover;    /* 针对Firefox浏览器 */
    -o-background-size: cover;      /* 针对Operallq */
    background-size: cover;         /* 通用 */
}

4.主页乐队介绍部分

整体效果展示如图：



关于乐队介绍，我分了三个部分。其中Introduce部分附上了三个超链接，连接了我制作的三个子页面，进行着重详细介绍三个乐队，然后是附上了一系列的LIVE现场图，同时附上超链接，观众可以进行点击并进行现场视频的观看。然后是滚动式的其他的乐队介绍，这一部分需要使用到JS。
关于Introduce部分：
所有的这一部分都在HTML文件标签< main >中写下的，这也是网页的主体部分。我们使用一个container容器来提取CSS中的样式，加入H2标题，直接在里面加入样式，然后用img标签来放入图片，用h4来加入文字描述，并且使用< a href=“https://ian-lawre.github.io/page1.github.io/” class=“btn btn-unique”>Learn More< /a >这句代码来引入一个按钮，并且附上我的子页面的链接，来实现页面的跳转。具体部分代码如下所示（这里只提取一部分的代码展示）：

<div class="view overlay rounded z-depth-1">
              <img src="https://user-images.githubusercontent.com/84569428/119521633-e9891880-bdad-11eb-9747-2eebde2f1a11.jpg" class="img-fluid"
                alt="Sample project image">
              <a>
                <div class="mask rgba-white-slight"></div>
              </a>
              <!--Excerpt-->
              <div class="card-body pb-2">
                <h4 class="font-weight-bold my-3">Imagine Dragons</h4>
                <p class="grey-text">Imagine Dragons is an American pop rock band from Las Vegas, Nevada, consisting of lead singer Dan Reynolds, 
                  lead guitarist Wayne Sermon, bassist Ben McKee, and drummer Daniel Platzman.Imagine Dragons have sold 35 million RIAA certified singles in the US and 20 million albums worldwide
                </p>
                <a href="https://ian-lawre.github.io/page1.github.io/" class="btn btn-unique">Learn More</a>
              </div>
            </div>

关于Live部分：
MDB Pro版给我们提供了多种灯箱效果的图片展示方式. 所谓灯箱效果(LightBox), 即首先展示的是缩略图, 点击后才显示大图.。这里我们展示了九张现场图片，并且附上一个watch more按钮，附上超链接，点击后可以进入子页面，并进行现场的观看。
代码部分如下所示：

<!--Section: gallery-->
    <section id="gallery" class="text-center py-5">

      <!-- Container -->
      <div class="container">

        <!-- Section heading -->
        <h2 class="h1-responsive font-weight-bold mb-5">Live</h2>
        <!-- Section description -->
        <p class="grey-text w-responsive mx-auto mb-5"></p>

        <div class="row">
          <div class="col-md-12">

            <div id="mdb-lightbox-ui"></div>

            <div class="mdb-lightbox">

              <figure class="col-md-4">
                  <a href="https://user-images.githubusercontent.com/84569428/119816768-aea6f200-bf1f-11eb-938f-69b18a7145e2.jpg" data-size="1600x1067">
                  <img src="https://user-images.githubusercontent.com/84569428/119816768-aea6f200-bf1f-11eb-938f-69b18a7145e2.jpg"
                  class="img-fluid z-depth-1-half" />
                </a>
              </figure>

              <figure class="col-md-4">
                <a href="https://user-images.githubusercontent.com/84569428/119817260-57ede800-bf20-11eb-9350-24afea29da8c.jpg" data-size="1600x1067">
                  <img src="https://user-images.githubusercontent.com/84569428/119817260-57ede800-bf20-11eb-9350-24afea29da8c.jpg"
                    class="img-fluid z-depth-1-half" />
                </a>
              </figure>

              <figure class="col-md-4">
                <a href="https://user-images.githubusercontent.com/84569428/119817349-75bb4d00-bf20-11eb-9786-227c90e49954.jpg" data-size="1600x1067">
                  <img src="https://user-images.githubusercontent.com/84569428/119817349-75bb4d00-bf20-11eb-9786-227c90e49954.jpg"
                    class="img-fluid z-depth-1-half" />
                </a>
              </figure>

              <figure class="col-md-4">
                <a href="https://user-images.githubusercontent.com/84569428/119817701-e19db580-bf20-11eb-8c2b-0d9325195248.jpg" data-size="1600x1067">
                  <img src="https://user-images.githubusercontent.com/84569428/119817701-e19db580-bf20-11eb-8c2b-0d9325195248.jpg"
                    class="img-fluid z-depth-1-half" />
                </a>
              </figure>

              <figure class="col-md-4">
                <a href="https://user-images.githubusercontent.com/84569428/119817777-f417ef00-bf20-11eb-9ce0-0e8728770424.jpg" data-size="1600x1067">
                  <img src="https://user-images.githubusercontent.com/84569428/119817777-f417ef00-bf20-11eb-9ce0-0e8728770424.jpg"
                    class="img-fluid z-depth-1-half" />
                </a>
              </figure>

              <figure class="col-md-4">
                <a href="https://user-images.githubusercontent.com/84569428/119817942-26c1e780-bf21-11eb-815b-89a6ecac60d1.jpg" data-size="1600x1067">
                  <img src="https://user-images.githubusercontent.com/84569428/119817942-26c1e780-bf21-11eb-815b-89a6ecac60d1.jpg"
                    class="img-fluid z-depth-1-half" />
                </a>
              </figure>

              <figure class="col-md-4">
                <a href="https://user-images.githubusercontent.com/84569428/119818191-7b656280-bf21-11eb-848e-69c2ce73ea8c.jpg" data-size="1600x1067">
                  <img src="https://user-images.githubusercontent.com/84569428/119818191-7b656280-bf21-11eb-848e-69c2ce73ea8c.jpg"
                    class="img-fluid z-depth-1-half" />
                </a>
              </figure>

              <figure class="col-md-4">
                <a href="https://user-images.githubusercontent.com/84569428/119818268-920bb980-bf21-11eb-989e-be25449ef8f4.jpg" data-size="1600x1067">
                  <img src="https://user-images.githubusercontent.com/84569428/119818268-920bb980-bf21-11eb-989e-be25449ef8f4.jpg"
                    class="img-fluid z-depth-1-half" />
                </a>
              </figure>

              <figure class="col-md-4">
                <a href="https://user-images.githubusercontent.com/84569428/119818325-a51e8980-bf21-11eb-92cf-ca2c92e13fa7.jpg" data-size="1600x1067">
                  <img src="https://user-images.githubusercontent.com/84569428/119818325-a51e8980-bf21-11eb-92cf-ca2c92e13fa7.jpg"
                    class="img-fluid z-depth-1-half" />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <a href="https://ian-lawre.github.io/page4.github.io/" class="btn btn-unique">Watch More</a>
      </div>
      <!-- Container -->

    </section>
    <!--Section: gallery-->

< a href=“https://ian-lawre.github.io/page4.github.io/” class=“btn btn-unique”>Watch More< /a >这句代码是显示一个按钮，可以点进我的子页面。
关于Other bands部分
这个页面可以看到轮番的乐队介绍，每个乐队都有一张图片展示，并且附上详细的乐队介绍。具体部分代码如下所示：

            <div class="col-md-4">
              <div class="testimonial">
                <!--Avatar-->
                <div class="avatar mx-auto">
                  <img src="https://user-images.githubusercontent.com/84569428/119599548-c85d1200-be17-11eb-8696-9c6b9c207cd4.jpg"
                    class="rounded-circle img-fluid">
                </div>
                <!--Content-->
                <h4 class="font-weight-bold mt-4">Fall Out Boy</h4>
                <h6 class="blue-text font-weight-bold my-3">American rock band</h6>
                <p class="font-weight-normal"><i class="fas fa-quote-left pr-2"></i>Fall Out Boy is an American rock band formed in Wilmette, Illinois, a suburb of Chicago, in 2001. The band consists of lead vocalist and rhythm guitarist Patrick Stump,
                   bassist Pete Wentz, lead guitarist Joe Trohman, and drummer Andy Hurley.</p>
                <!--Review-->
                <div class="grey-text">
                  <i class="fas fa-star"> </i>
                  <i class="fas fa-star"> </i>
                  <i class="fas fa-star"> </i>
                  <i class="fas fa-star"> </i>
                  <i class="fas fa-star"> </i>
                </div>
              </div>
            </div>

5.主页FOOTER部分

footer部分即是页尾的设计，我用了一张图片做背景，并且在上面附上了已故林肯公园主场的台词，并且附上各种联系方式。部分代码如下所示：

    <!--Section: call to action-->
    <div class="streak streak-md streak-photo"
      style="background-image:url('https://user-images.githubusercontent.com/84569428/119821591-52df6780-bf25-11eb-804d-9b4b09e659fa.jpg')">
      <div class="flex-center white-text rgba-black-light pattern-1">
        <ul class="mb-0 list-unstyled">
          <li>
            <h2 class="h2-responsive"><i class="fas fa-quote-left" aria-hidden="true"></i> I've becomse so numb I can't feel you there<i class="fas fa-quote-right"
                aria-hidden="true"></i></h2>
          </li>
          <li class="mb-0">
            <h5 class="text-center font-italic mb-0">~ Chester Bennington(Linkin Park lead singer)</h5>
          </li>
        </ul>
      </div>
    </div>
    <!--Section: call to action-->

6.子页面的设计

我总共设置了五个子页面（包括课程结业报告页面）。他们的排版是差不多的，现在选择其中一个子页面介绍。我取消了导航栏已经其他的繁琐设置，使得网页更加简单化。
全图背景
首先依然是全图背景，这一部分已经在主页介绍中详细描述，这里便不再赘述。
介绍部分
我用的是简单的一张图片加标题和文字描述的HTML排版，介绍部分在插入图片链接后，输入< h2 >标题，然后用P标签进行一大段文字的具体介绍。具体部分代码如下所示：

 <!--Grid row 1-->
      <div class="row">
        <!--Grid column 1-->
        <div class="col-md-7 mb-4">
          <div class="view overlay z-depth-1-half">
            <img src="https://user-images.githubusercontent.com/84569428/119936877-6c7fbe00-bfbc-11eb-9de0-a3d13099af72.jpg" class="card-img-top" alt="">
            <div class="mask rgba-white-light"></div>
          </div>
        </div>
        <!--Grid column-->
        <!--Grid column 2-->
        <div class="col-md-5 mb-4">
          <h2>Introduce</h2>
          <hr>
          <p>Imagine Dragons is an American pop rock band from Las Vegas, Nevada, consisting of lead singer Dan Reynolds, 
            lead guitarist Wayne Sermon, bassist Ben McKee, and drummer Daniel Platzman.
            The band first gained exposure with the release of their single "It's Time", followed by their award-winning debut studio album Night Visions (2012), which resulted in the chart-topping singles "Radioactive" and "Demons". Rolling Stone named "Radioactive", 
            which holds the record for most weeks charted on the Billboard Hot 100, the "biggest rock hit of the year"</p>
        </div>
        <!--Grid column-->
      </div>
      <!--Grid row-->

专辑封面及歌曲点击链接
在介绍部分后面，有关于专辑封面的展示以及歌曲的点击链接，点进去即可享受到歌曲。除了对歌曲的介绍，我一开始是想用audio标签来实现网页的在线播放音频，可是后面没有实现点击后进行播放，所以我采用超链接跳转来连接到网易云音乐，实现歌曲的播放。

具体部分代码如下所示：

<!--Grid row 2-->
      <div class="row">
        <!--Grid column-->
        <div class="col-lg-4 col-md-12 mb-4">
          <!--Card-->
          <div class="card">
            <!--Card image-->
            <div class="view overlay">
              <img src="https://user-images.githubusercontent.com/84569428/119935100-853aa480-bfb9-11eb-9bfd-a0362dca7087.jpg" class="card-img-top"
                alt="">
              <a href="#">
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>

            <!--Card content-->
            <div class="card-body">
              <!--Title-->
              <h4 class="card-title">《Beliver》</h4>
              <!--Text-->
              <p class="card-text">"Believer" is a song by American pop rock band Imagine Dragons. The song was released on February 1, 2017 through Interscope Records 
                and Kidinakorner as the lead single from the band's third studio album, Evolve (2017).</p>
                <a href="https://music.163.com/#/song?id=1470919891&market=baiduqk" class="btn btn-indigo">PLAY</a>
            </div>
          </div>
          <!--/.Card-->
        </div>
        <!--Grid column-->

子页面设计比较简单，完成对主页面的添加内容和详情了解功能。

四.问题解决及未解决

问题一.如何给图片添加一个链接？

开发过程中遇到的第一个问题便是如何给图片添加一个链接。平时的图片都采用保存到本地，然后用绝对路径或相对路径打开，现在需要把图片托管到一个平台，并且实现链接的产生。下面是具体操作：
首先在github上建立一个仓库，如下所示：


输入仓库名称后建立成功，我们点开它，点击issues,点击new issue

然后在里面加入保存到文件夹中的图片

然后就可以看到它自动给你产生了一个链接，只需要复制进你的代码就可以使用啦！

问题二.如何将做的网页托管到平台上？

作为新手，我没有选择使用github的命令来实现仓库的克隆以及托管，我是直接下载了github客户端，实现本地文件仓库的建立，然后进行publish上传到github上。
1.github客户端的下载
直接在网页搜索“github客户端”即可下载，下载安装流程这里不再赘述。
2.本地文件仓库建立
打开客户端后，点击new，选择Add local repository，即可实现本地文件形成一个仓库上传建立

等文件全部上传后点击如下红圈，即可进行publish上传到公共仓库，记住把私有查看取消。

上传到github上需要一段时间，所以需要等待，才能看到文件传输到github上，我们打开刚刚上传好的仓库，可以看见，文件已经全部上传完毕

3.设置的更改
我们在网页点开你的仓库，点击settings

首先需要注意的是仓库名字，一定是"name.github.io"的形式：

其次是pages选项，要选择如图所示的选项：

同时看到如下给出你的网页链接即成功：

4.网页源代码的修改怎么上传更新？
我们打开vscode，修改代码后，点击源代码管理：

可以看到我们的更新，点击√提交，然后在最下面，我们点击如下所示图标进行代码更新，上传需要一段时间调整，所以要等一会才能看到做出的修改：

问题三.如何实现在网页播放音频？

我们采用的是使用audio标签，当然这个只有在html5上才能适应：
代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>  
    <audio src="F:/mp3/1.mp3" controls>
        您的浏览器不支持 audio 标签。
    </audio></body>
</html>

当然也可以使用按钮添加超链接，转到网易云音乐进行播放，代码如下：

          <div class="card-body">
              <!--Title-->
              <h4 class="card-title">《Beliver》</h4>
              <!--Text-->
              <p class="card-text">"Believer" is a song by American pop rock band Imagine Dragons. The song was released on February 1, 2017 through Interscope Records 
                and Kidinakorner as the lead single from the band's third studio album, Evolve (2017).</p>
                <a href="https://music.163.com/#/song?id=1470919891&market=baiduqk" class="btn btn-indigo">PLAY</a>
            </div>

五.总结

本次课程结业实验，我们作为初学者，学会了简单的网页Web制作。学会了HTML的各种标签，学会了CSS进行页面的美化和调整。我们会在页面加入超链接，会加入图片，会加入视频和音频元素，通过用改写MDB模板，来实现网页的制作。实践过程中，我掌握了许多有关网页前端和后端制作的知识，知道了静态网页和动态网页的区别，并且最后的综合作业，制作了自己喜欢的内容相关的网页，可谓寓教于乐，受益匪浅。