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

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、任务要求

任务一：构建一个静态或动态网站。以下要求中任选A或B，要求如下：
（选择 A）
A. 静态网站
采用纯 CSS 或你喜欢的任何 CSS 框架如 Bootstrap、MDB、Tailwind 等构建一个主题自选且不少于5个页面（Web Page）的网站

无论你选择静态还是动态网站，该网站都需部署到你喜欢的网站托管服务器上如 Gitpage 等（Angular项目可参阅 https://angular.cn/guide/deployment）。

该网站需放置你的结业报告（要求见任务二）。

任务二：撰写结业报告，要求如下：

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

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

（3） 该报告以 Web 页面的形式呈现，从你上面开发的网站中可访问到。

二、页面展示

1.主页面

2.“专辑”页面

3.MV展示页面

4.歌曲页面

三、具体实现

1.导航条

导航条中可以使页面跳转，采用的标签为< nav >, 通过在头部引用的bootstrap的css类，我们可以利用< li >里的item类。为导航条里设置上超链接，从而实现主页面内容定位的功能
具体代码如下：

 <nav class="navbar navbar-expand-md navbar-dark indigo">
      <div class="container">
        <!-- Navbar brand -->
        <a class="navbar-brand" href="#">Navbar</a>
        <!-- Collapse button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
          aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <!-- Collapsible content -->
        <div class="collapse navbar-collapse" id="basicExampleNav">
          <!-- Links -->
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="index.html">简介
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="zuopin.html">主要专辑</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="sing.html">MV</a>
              <span class="sr-only">(current)</span>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="ccc.html">歌曲</a>
              </li>
            
          </ul>
          <!-- Links -->
          <form class="form-inline">
            <div class="md-form my-0">
              <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            </div>
          </form>
        </div>
        <!-- Collapsible content -->
      </div>
    </nav>

2.布局

布局采用弹性盒子和栅栏布局。
以专辑页面为例，采用了三行，每行均分为三部分，每部分4列

3.音乐播放

<audio controls="controls" height="100" width="100">
          <source src="img/陈奕迅-孤勇者.mp3" type="audio/mp3" />				
           <embed height="100" width="100" src="song.mp3" />
 </audio>

4.视频播放

<video width=auto height=auto controls="controls" >
  <source src="img/_ade56e391f73ea52be21290cfef2ccj-1-64.MP4" 	  type="video/mp4">
</video>

四、遇到的问题

1.视频内存过大，无法部署

解决方案：裁剪视频，降低清晰度

2.导航条点击之后阴影区未改变（未解决）

五、总结

通过本次的网页设计与规划，学到了很多东西，与其他课程不同，设计很有趣，并且网页的制作相对于其他语言来说，比较简单一些，但是还是充满了挑战，虽然本次设计大致完成了，多多少少会有一些功能没有实现，这些遗憾会使我更加努力吧！