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

一、课程任务要求

构建一个静态或动态网站即以下要求中任选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格式，从你上面的网站中可访问到。

二、网页内容及效果

网页链接：

1、内容介绍

静态小说内容介绍网站，使用MDB+Bootstrap进行开发，主要内容为纯爱小说介绍，包括编辑强推、新书推荐、人气完本、作家专区几个主要内容，同时设计了8个可以跳转的页面进行内容补充：6本书籍介绍，2个作家介绍。

2、主页面

1）首页

2）编辑强推

3）新书推荐

4）人气完本

5）作家专区

附：结业报告

3、子页面

1）全球高考

2）AWM[绝地求生]

3）伪装学渣

4）地球上线

5）死亡万花筒

6）子夜鸮

7）木苏里

8）巫哲

三、开发过程

开放工具：Visual Studio Code
模板的选择：MDB模板下载

1、主页面

1）导航条

使用了一个 < nav>标签, 其内部实际包含了2个部分：
< a> 超链接, 网站名称
` 区块, 用于放置各个导航超链接

相关代码：

<header>
    
    <nav class="navbar navbar-expand-lg navbar-pink text-color fixed-top scrolling-navbar">
      <div class="container">
        <a class="navbar-brand" href="#">纯爱小说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="首页">首页
              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="30">作家专区a>
            li>
            <li class="nav-item">
              <a class="nav-link" href="#结业报告" data-offset="30">结业报告a>
            li>
          ul>
        div>
      div>
    nav>

2）全屏背景

.view 是我们背景图片的封装器, 同时使我们可以对图片进行明暗等效果的遮罩.
.mask 是一个有绝对定位的元素, 它将以某种效果覆盖图片(通常我们将添加一些文字).
id=“intro” 这是.view元素的ID

①将背景图像的所有父元素高度设置为100％，只有这样，图像才能覆盖整个屏幕
②通过ID(intro)为该元素设置的背景图像的 URL
③使用cover来设置背景的尺寸, 它将覆盖屏幕所有可用的空间
④webkit-, -moz- , -o-前缀是为了确保在所有浏览器都正常工作.

相关代码：

 
    <div id="intro" class="view">
      <div class="container-fluid d-flex align-items-center justify-content-center h-92">
        <div class="row d-flex justify-content-center text-center">
          <div class="col-md-10">
          div>
        div>
      div>

      
      <div id="intro" class="view">

        <div class="mask cblack">

          <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">

                
                <h2 class="display-3 font-weight-bold purple-text pt-7 mb-4">欢迎来到原耽的世界h2>
              div>

            div>

          div>

        div>

      div>

3）内容页面
①使用< section>将页面主题总共分为六个部分, 与导航条对应.
②为每个< section>都设置了 ID, 以能够进行页内导航
③在< section>之间我们设置了py-5上下内边距
④通过style="background-color: #f5b2da;"style="background-color: ##f1c3df;"的section设置了两种不同的粉色背景来进行区分
⑤每个section中我们都使用了container, 拟使用Bootstrap的网格系统来进行布局

相关代码（一部分）：

  <section id="编辑强推" class="text-center py-5" style="background-color: #f5b2da;" ;>

    
    <div class="container">

      
      <h2 class="h1-responsive font-weight-bold mb-5">编辑强推h2>
      <hr class="hr-light my-4 w-85">
      
      <div class="row text-center">

        
        <div class="col-lg-4 col-md-12 mb-lg-0 mb-4">
          
          <div class="view overlay rounded z-depth-1">
            <li data-rid="1">
              <div class="">
                <img src="https://i.loli.net/2021/06/20/9uRT7vSgLrokMP1.jpg" class="img-fluid" alt="全球高考">a>
              div>
              <div class="book-info">
                <h4><a href="D:\1\王勇\小说网站\MDB-Pro-4.12\全球高考.htmlD:\1\王勇\小说网站\MDB-Pro-4.12\quanqiugaoakao.html" data-eid="qd_F24"
                    data-bid="18564028701039304" target="_blank" title="全球高考">全球高考a>h4>
                <div class="state-box cf"><i>现代言情i><a class="author default" data-eid="qd_F25" target="_blank">
                    木苏里a>div>
              div>
              <p class="lead black-text text-center  mb-5">
                全球大型高危险性统一考试，简称全球高考。真身刷题，及格活命。
                考制一月一改革，偶尔随机。用于体能筛选训练的人工智能系统突然有了自主意识，一切事情开始超出控制范畴。
              p>
              <div class="card-body pb-2">div>
            li>
          div>
        div>
        

        
        <div class="col-lg-4 col-md-6 mb-md-0 mb-4">
          
          <div class="view overlay rounded z-depth-1">
            <li data-rid="1">
              <div class="">
                <img src="https://i.loli.net/2021/06/20/P3z9HLbNoIkpMgv.jpg" class="img-fluid" alt="全球高考">a>
              div>
              <div class="book-info">
                <h4><a href="D:\1\王勇\小说网站\MDB-Pro-4.12\AWM[绝地求生].html" data-eid="qd_F24" data-bid="18564028701039304"
                    target="_blank" title="AWM [绝地求生]">AWM [绝地求生]a>h4>
                <div class="state-box cf"><i>现代电竞i><a class="author default" data-eid="qd_F25" target="_blank">
                    漫漫何其多a>div>
              div>
              <p class="lead black-text text-center  mb-5">
                AWMPUBG游戏中伤害最高获取最难的怪物大狙，空投终极梦想，威力足伤害高，无视任何头部防具爆头一枪倒地，唯一缺点几率产出，获取极难，全凭运气。
                你是我的AWM的意思就是你是我的可遇不可求。
              p>
            li>
          div>
        div>
        

        
        <div class="col-lg-4 col-md-6">
          
          <div class="view overlay rounded z-depth-1">
            <li data-rid="1">
              <div class="">
                <img src="https://i.loli.net/2021/06/20/KpQ5Fn9a67JEWIx.jpg" class="img-fluid" alt="全球高考">a>
              div>
              <div class="book-info">
                <h4><a href="D:\1\王勇\小说网站\MDB-Pro-4.12\伪装学渣.html" data-eid="qd_F24"
                    data-bid="18564028701039304" target="_blank" title="伪装学渣">伪装学渣a>h4>
                <div class="state-box cf"><i>现代校园i><a class="author default" data-eid="qd_F25" target="_blank">
                    木瓜黄a>div>
              div>
              <p class="lead black-text text-center  mb-5">
                分班后，两位风靡校园的“问题少年”不止分进一个班还成为同桌。
                明明是学霸却要装学渣，浑身都是戏，在表演的道路上越走越远。
                -818我们班里每次考试都要争倒数第一的两位大佬。
              p>
              <div class="card-body pb-2">
            li>
          div>
        div>
        

      div>
      

    div>
  section>

2、子页面

子页面的内容均设置了方框将页面每个部分的相关内容框起来
相关代码：

#list dt
.box_con{
    border:2px solid #cf54d348; overflow:hidden;width:1125px;margin:10px auto;
}

.main-content table {
    clear: both;
    border-collapse: collapse;
    border-spacing: 0;
}

1）书籍子页面
分成两部分内容：书籍内容基本介绍，章节列表
主要介绍章节列表的内容：外置方框，内容分成三列均匀排布
①列表题目居中显示，通过css设置

#list dt
{background:none repeat scroll 0 0 #db82ccc5;
    display:inline;float:left;font-size:14px;line-height:28px;
    overflow:hidden;text-align:center;vertical-align:middle;width:100%;
    margin:auto auto 5px;padding:5px 10px;}

②章节内容三列排布

#list dd{border-bottom:1px dashed #CCC;display:inline;float:left;height:25px;line-height:200%;margin-bottom:5px;overflow:hidden;text-align:left;text-indent:10px;vertical-align:middle;width:33%;}
#list dd a:link{color:#444;}

2）作者子页面
与书籍子页面排布大体一致，使用表格来进行作者的作品内容介绍
部分代码：

 <table class="table table-bordered">
            <thead>
              <tr>
                <th scope="center" width="139">
                  <div class="para" label-module="para">系列div>
                th>
                <th scope="center" width="244">
                  <div class="para" label-module="para">作品div>
                th>
                <th scope="center" width="184">
                  <div class="para" label-module="para">状态div>
                th>
                <th scope="center" width="168">
                  <div class="para" label-module="para">类型div>
                th>
                <th scope="center" width="119">
                  <div class="para" label-module="para">发表时间div>
                th>
              tr>
            thead>

四、遇到的问题

1、已解决

①生成图片的url；通过

https://sm.ms/

可以直接将需要的图片转换出url
②制作网站的icon图标；通过

https://www.bitbug.net/

可以直接进行制作，最后在我们的.html文件的< head>中进行替换，就可以看到我们自己的网站图标
③制作表格；首先对于表格的制作不是特别的了解，花费了许多时间，最后在MDB上找到了表格的制作方法，成功解决了表格的相关问题

2、未解决

①界面不能自动对齐；在做编辑强推这部分的内容时，我发现每本书籍的对应内容下框不能自动对齐，检查代码也没有真正的发现问题所在，但做前一个“铜梁”的网站的内容时，有一部分代码与这部分代码完全相同，且没有出现问题，图片下方文字也自动对齐了的。
②托管到github网站上，不能直接在网页上进行托管，只能下载一个桌面版的github，然后在进行托管操作，且github不能十分顺利的进入，每次进去都需要花费大量的时间。

五、总结

本次的通信软件开发与运用课程，让我们自己按照自己的构思来设计网页，总的来说是比较有趣的，毕竟你设计的网页相关内容都是自己感兴趣的内容。同时通过对网页的设计，我对于对网页制作的基础知识也有了一定的掌握，前端方面的编程有了一定的了解。同时，将自己喜欢的东西用网页的方式展现了出来，是一件很有成就感的事情。总的来说，这次的网页制作让我感觉我是真的学到了知识，而不仅仅只是为了完成作业。虽然但是，我仅仅只是做了静态网站，对于更加复杂的动态网站却没有进行一次完整的尝试，这是我做的不足的地方，有机会的话一定要花时间去做一个动态网站。相信已经有了做静态网站的经验，动态网站的建立会容易许多，同时，这次的经理为我以后相关方面的学习也打下了坚实的基础。