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

JLCQ

于 2021-06-17 16:51:03 发布

阅读量274

点赞数

文章标签： web

本文链接：https://blog.csdn.net/URJYTR/article/details/117980402

版权

文章目录

一、构建一个静态网站
二、开发过程
三、遇到的问题和解决办法
四、总结

一、构建一个静态网站

做一个静态的网站，使用MDB的模板。以动漫为主题，分为五个模块，主页、人物介绍、音乐网页、视频网页和一个放置报告链接的网页。并且最后做完网页后，还要将网页挂到了github上。

二、开发过程

首先先要下载一个MDB的模板，如MDB-Pro-4.12种子项目，下完后用Code打开该文件夹，并用网页打开index.html，可以看到网页的雏形。之后也是在这个html文件下进行修改，并且还可以在模板中的css文件下为网页添加样式。

1、主页面

该页面是包含了其他页面的链接以及相关主要内容。
1.首先就是首页，如下：
在这里插入图片描述
该页面主要设计了一个导航及全屏图片背景，并且导航条可以进行跳转至下面的各个内容。其中该页面还设置了两个超链接，分别跳转至音乐以及报告的网页面。
主要代码如下：

<header>
   <!--Navbar-->
   <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
    <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="#navbarTogglerDemo02"
      aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <!-- Links -->
      <ul class="navbar-nav mr-auto smooth-scroll">
        <li class="nav-item active">
          <a class="nav-link" href="#intro">首页
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#草帽团人物介绍" data-offset="90">人物介绍</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#海贼团" data-offset="90">海贼团</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#海贼团旗帜" data-offset="90">旗帜</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#图片" data-offset="90">图片</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contact" data-offset="90">Contact</a>
        </li>
        <!-- Dropdown -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
      <a href="4.html" target="_self" class="btn btn-outline-white fas fa-book ml-2">结课报告</a>
      <!-- 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>  <!-- 请注意, 这是额外加的 div 结束标签 -->
  </nav>
  <!--Mask-->
  <div id="intro" class="view">
    <div class="mask rgba-black-strong">
      <!-- 新添加的div -->
      <div class="container-fluid d-flex align-items-center justify-content-center h-100"> 
        <!-- 新添加的 div, 表示栅格中的行 -->
      <div class="row d-flex justify-content-center text-center">
        <!-- 新添加的 div, 表示栅格中的列 -->
      <div class="col-md-10">
      <!-- Heading -->
      <h2 class="display-4 font-weight-bold white-text pt-5 mb-2">海贼王</h2>
     <!-- Divider -->
      <hr class="hr-light">
     <!-- Description -->
      <h4 class="white-text my-4">将过去和羁绊全部丢弃，不要吝惜那为了梦想流下的泪水。</h4>
      <a href="2.html" target="_self" class="btn btn-outline-white fas fa-book ml-2">主题音乐</a>
    </div>
      </div>
      </div>
    </div>
</div>
<!--/.Mask-->
  <!--/.Navbar-->
</header>

2.下面就是各个主要内容。
①
在这里插入图片描述
这里主要就是各个人物的介绍，下面的Read more按钮链接至一个专门人物介绍的网页。

②
在这里插入图片描述
这里描述了各个海贼团的信息，左边设置了一个轮播(Carousel)来进行类似幻灯片的展示，轮播的基本思路是: 找到轮播元素(通过id), 传递相关参数对象给它. 将如下代码添加到靠近底部自定义 JS 代码块中 :

<!-- Your custom scripts (optional) -->
<script type="text/javascript">
  // Carousel options
  $('#carousel-example-2').carousel({
    interval: 2000, // 间隔时间, 默认5000毫秒, 如果设置为false则不会自动播放
    pause: false,   // 鼠标移上后是否暂停, 默认暂停
    wrap: false,    // 是否循环轮播, 默认循环
  })
</script>

轮播设置完后，又在底下设置一个跳转顶上战争视频与简介的网页的链接按钮。

③ 在这里插入图片描述
这里做了一个海贼旗帜的页面，添加了图片与相关的介绍，并在上面的按钮可以进行翻页，设置的背景是灰色。这里也是轮播效果。

④ 在这里插入图片描述
这里是一个精美图片合集的页面，其中我设置了两种尺寸的图片:
大的, 高质量的图片(原始图)以及小的, 低分辨率的缩略图(thumbnail)。这种方式现在非常常见, 主要是为了页面性能考虑. 用户需要查看时才获取该图片, 而不是全部都下载, 提高了页面加载速度.

⑤ 在这里插入图片描述

最后加了一个用户可以填信息的反馈面板以及给底部加了一些样式。

2、人物介绍网页

这里是基本模仿前面首页的样式，只是进行展示内容的修改
在这里插入图片描述

3、音乐网页

首页依然不变，下面的内容改成如下：
在这里插入图片描述
包含了音乐名字，创作时间，作者以及部分歌词。这部分最主要的就是下面的播放音乐的按键，并且还支持下载。
音乐部分代码：

 <div class="container">
        <div class="d-block d-md-flex podcast-entry bg-white mb-5" data-aos="fade-up">
          <div class="image" style="background-image: url('images/2.jpg');"></div>
          <div class="text">

            <h3 class="font-weight-light"><a href="#">(主题曲）ウィーアー!</a></h3>
            <div class=" mb-3 text-black"><span class="text-black-opacity-05"><small>By きただにひろし <span class="sep"></span>  <span class="sep"></span></small></span></div>
            <p class="mb-4 text-black">

                ありったけの夢をかき集め
                聚集起大家的梦想
                捜し物を探しに行くのさ ONE PIECE
                追寻宝藏勇往直前 ONE PIECE
                羅針盤なんて 渋滞のもと
                舍弃让船停滞不前的罗盘
                熱にうかされ 舵をとるのさ
                心怀一股热情驾驭著船舵
                ホコリかぶってた 宝の地図も
                被尘埃覆盖的藏宝地图
                確かめたのなら 伝説じゃない!
                若可靠的话就不再是传说！
                個人的な嵐は 誰かのバイオリズム乗っかって
                一个人的热情 是大伙生命的节奏
                思い過ごせばいい!
                深思后便无所畏惧!</p>

            <div class="player">
              <audio id="player2" preload="none" controls style="max-width: 100%">
                <source src="./img/1.mp3" type="audio/mp3">
              </audio>
            </div>

          </div>
        </div>
    </div>
    <div class="container">
        <div class="d-block d-md-flex podcast-entry bg-white mb-5" data-aos="fade-up">
          <div class="image" style="background-image: url('images/2.jpg');"></div>
          <div class="text">

            <h3 class="font-weight-light"><a href="#">宾克斯的美酒</a></h3>
            <div class=" mb-3 text-black"><span class="text-black-opacity-05"><small>By V.A.
                -
                最新热歌慢摇19酒 <span class="sep"></span>  <span class="sep"></span></small></span></div>
            <p class="mb-4 text-black">

               这是一首纯音乐，在海贼王中由草帽海贼团中的布鲁克；人称鼻歌布鲁克弹奏出来的。现为草帽海贼团音乐家。</p>

            <div class="player">
              <audio id="player2" preload="none" controls style="max-width: 100%">
                <source src="./img/2.mp3" type="audio/mp3">
              </audio>
            </div>

          </div>
        </div>
    </div>

4、视频网页

这部分主要就是以一个视频作为网页背景，并在视频上面添加解释文字。
在这里插入图片描述
主要代码：
html

<header>
    <!--Navbar-->
    <!--/.Navbar-->
    <!--Mask-->
    <video  autoplay loop muted>
        <source src="img/1.mp4" type="video/mp4"  />
    </video>
      <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-4 font-weight-bold white-text pt-5 mb-2">顶上战争</h2>

              <!-- Divider -->
              <hr class="hr-light">

              <!-- Description -->
              <h4 class="white-text my-4">是以白胡子海贼团&旗下43个海贼团与海军十万精锐&王下七武海联合军为主要交战双方的大型战争。
                白胡子海贼团为救出第2编队长波特卡斯·D·艾斯而向海军发动战争，战争最后以海军十万精锐&王下七武海联合军取得胜利、白胡子海贼团&旗下43个海贼团战败而告终。
                该场战争为大海贼时代开幕以来涉及规模最庞大的战争，且对于世界格局影响巨大，并加剧了大海贼时代之进程。</h4>


            </div>

          </div>

        </div>

      </div>
    <!--/.Mask-->
  </header>

css

*{  
    margin: 0px;  
    padding: 0px;  
}  
video{  
    position: fixed;  
    right: 0px;  
    bottom: 0px;  
    min-width: 100%;  
    min-height: 100%;  
    height: auto;  
    width: auto;  
    /*加滤镜*/
    /*filter: blur(15px); //背景模糊设置 */
    /*-webkit-filter: grayscale(100%);*/  
    /*filter:grayscale(100%); //背景灰度设置*/  
    z-index:-11
}  
source{  
    min-width: 100%;  
    min-height: 100%;  
    height: auto;  
    width: auto;  
}

最后网页就是一个简单的可以转到报告页面的网页链接，这里不做详解。

三、遇到的问题和解决办法

整个制作网页的过程中，由于使用的是模板，所以没有什么太大的问题。只有在最后做视频网页时，明明代码没有什么问题，打开的网页却一直都是白板。之后经查阅发现这是视频编码的问题，应该把视频转码为H264编码的mp4视频格式就可以了。于是我下载了一个格式工厂进行转码。如下：
选择MP4：
在这里插入图片描述
选择需要转码的视频文件，并在输出配置里将视频编码改为AVC（H264）。

之后开始转码即可。

转码成功后的视频便可以正常在网页上作为背景显示了。

另一方面就是将网页挂在github上也是花费许多时间。

四、总结

这次开发是在之前的实验基础上继续添加完善的，所以在整个开发过程还是很简单的，只有音乐与视频部分的网页需要费时间去解决一些问题。此次开发还是让我对HTML的开发有了极大的了解，了解了如何在网页中添加音乐、视频等一些内容。并且最后还知道了如何将网页挂上github服务器，这样可以让其他人通过网页链接访问我的网页。