当前位置：网站首页>《通信软件开发与应用》课程结业报告

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

2022-07-07 10:00:00 【cxy1999120】

一、构建一个静态网站

二、开发过程

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

四、总结

一、构建一个静态网站

任务：构建一个静态或动态网站。

. 静态网站

采用纯 CSS 或你喜欢的任何 CSS 框架如 Bootstrap、MDB、Tailwind 等构建一个主题自选且不少于5个页面（Web Page）的网站

做一个静态的网站，使用MDB的模板。以咖啡为主题，分为五个模块，主页、咖啡选购、咖啡制作、咖啡引用利弊，和一个放置报告链接的网页。并且最后做完网页后，还要将网页挂到了github上。

二、开发过程

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

该页面是包含了其他页面的链接以及相关主要内容。
1.首先就是首页，如下：

该页面主要设计了一个导航及图片背景，并且导航条可以进行跳转至下面的各个内容。其中该页面还设置了三个超链接，分别跳转至选购，制作以及引用利弊界面。
主要代码如下：

<main class="mt-5">
    <!--Main container-->
    <div class="container">
      <!--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="img/1/coffee.png" 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> 咖啡 [kā fēi] </h2>
          <hr>
          <p>
            咖啡(coffee)，是用经过烘焙磨粉的咖啡豆制作出来的饮料。作为世界三大饮料之一，其与可可、茶同为流行于世界的主要饮品。
            咖啡树是属茜草科多年生常绿灌木或小乔木，日常饮用的咖啡是用咖啡豆配合各种不同的烹煮器具制作出来的，而咖啡豆就是指咖啡树果实里面的果仁，再用适当的方法烘焙而成，一杯标准的咖啡品尝起来的味道不应该是苦涩的，一名合格的咖啡师在制作咖啡时会严谨地进行每一步操作，最后为客人呈上的咖啡在味觉上会呈现出不同程度的甜度、酸度、香醇度或是干净度。
             </p>
         
          <a href="https://jiaoyue666.github.io/MyCoffee/HTML-coffee/" class="btn btn-indigo">详情</a>
        
        </div>
        <!--Grid column-->
      </div>
      <!--Grid row-->
      <!--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="img/coffeep/T1.png" 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">咖啡的选购</h4>
              <!--Text-->
              <p class="card-text">不论是哪一种咖啡，新鲜度都是影响品质的重要因素。选购时，抓一两颗咖啡豆在嘴中嚼一下，要是清脆有声，表示咖啡豆未受潮，而唇齿留香的咖啡豆才是上品，但最好还是用手捏捏，感觉一下是否实心，千万不要买空壳的咖啡。
                刚炒好的咖啡豆并不适合马上饮用，一般来说，咖啡的最佳饮用期为炒后一周后，此时的咖啡最新鲜，香味口感的表现最佳。</p>
              <a href="https://jiaoyue666.github.io/MyCoffee/HTML-coffeep/" class="btn btn-indigo">详情</a>
            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-6 mb-4">

          <!--Card-->
          <div class="card">

            <!--Card image-->
            <div class="view overlay">
              <img src="img/coffeem/T2.png" class="card-img-top"
                alt="">
              <a href="#">
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>

            <!--Card content-->
            <div class="card-body">
              <!--Title-->
            <br>
            <br>

              <h4 class="card-title">制作方式</h4>
              <!--Text-->
              <p class="card-text">设备用法：滴滤咖啡：德国人发明的冲煮方法。虹吸壶：坊间咖啡馆最普及的咖啡煮法之一。摩卡壶：摩卡壶基本原理利用加压的热水快速通过咖啡粉萃取咖啡液。电动咖啡机：常见的有美式咖啡滴漏机、意大利式蒸汽咖啡机。
                </p>
              <br>
              <br>
            
              <a href="https://jiaoyue666.github.io/MyCoffee/HTML-coffeem" class="btn btn-indigo">详情</a>
            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-6 mb-4">

          <!--Card-->
          <div class="card">

            <!--Card image-->
            <div class="view overlay">
              <img src="img/coffeev/T3.png" 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">饮用利弊</h4>
              <!--Text-->
              <p class="card-text">医生提醒，切忌在空腹时喝咖啡，因为咖啡会刺激胃酸分泌，尤其是有胃溃疡的人更应谨慎。咖啡作为一种饮品，饮用时，要根据个体情况适可而止，总的来说在营养学中还是强调均衡饮食而少用辛辣刺激食物。
                此外，值得注意的是，高血压患者应避免在工作压力大的时候喝含咖啡因的饮料。因为咖啡中的咖啡因可能导致血压上升，若再加上情绪紧张，就会产生危险的相乘效果。</p>
              <a href="https://jiaoyue666.github.io/MyCoffee/HTML-renwen" class="btn btn-indigo">详情</a>
            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->

      </div>
      <!--Grid row-->
    </div>
    <!--Main container-->
  </main>

2.下面是各个界面的主要内容展示：

一、咖啡界面：

其中每一个点击详情都可以跳转到对应代码中挂载的百度资料连接

其中部分代码展示：

<main>

  <!--Section: about-->
<section id="about" class="py-5">

  <!-- Container -->
  <div class="container">
    <!-- Section heading -->
    <h2 class="h1-responsive font-weight-bold text-center mb-5">咖啡的口感</h2>
    <!-- Section description -->
    <p class="lead grey-text text-center w-responsive mx-auto mb-5">咖啡豆通过适当的方法烘焙而成，一杯标准的咖啡品尝起来的味道不应该是苦涩的，一名合格的咖啡师在制作咖啡时会严谨地进行每一步操作，最后为客人呈上的咖啡在味觉上会呈现出不同程度的甜度、酸度、香醇度或是干净度。
    </p>
    <!-- Grid row -->

    <!-- Grid row -->

  </div>
  <!-- Container -->

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

  <!--Section: projects-->
<section id="projects" class="text-center py-5" style="background-color: #eee;">

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

    <!-- Section heading -->
    
    <!-- Grid row -->
    <div class="row text-center">

      <!-- Grid column -->
      <div class="col-lg-4 col-md-12 mb-lg-0 mb-4">
        <!--Featured image-->
        <div class="view overlay rounded z-depth-1">
          <img src="img/c2.png" 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">中国云南咖啡</h4>
            <p class="grey-text">，云南普洱。这座以茶出名、给茶命名、为茶更名的城市，在2012年又被中国果品流通协会命名为“中国咖啡之都”。而放眼全省，2018年中国咖啡总产量13.79万吨，云南就占了其中的99.55%。
            </p>
            <br>
            <br>
            <br>
            <a href="https://baike.baidu.com/tashuo/browse/content?id=b990360a3b08355a452ace11" class="btn btn-indigo">详情</a>
      
          </div>
        </div>
      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-lg-4 col-md-6 mb-md-0 mb-4">
        <!--Featured image-->
        <div class="view overlay rounded z-depth-1">
          <img src="img/c3.png" 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">咖啡的历史</h4>
            <p class="grey-text">咖啡”一词源自阿拉伯语“قهوة”，意思是“植物饮料”。在世界各地，人们越来越爱喝咖啡。随之而来的“咖啡文化”充满生活的每个时刻。无论在家里、还是在办公室、或是各种社交场合，人们都在品着咖啡、它逐渐与时尚、现代生活、工作和休闲娱乐联系在一起。
              咖啡树原产于非洲埃塞俄比亚西南部的高原地区。据说一千多年以前一位牧羊人发现羊吃了一种植物后，变得非常兴奋活泼，进而发现了咖啡。还有说法称是因野火偶然烧毁了一片咖啡林，烧烤咖啡的香味引起周围居民注意。
            </p>
            <br>
            <a href="https://baike.baidu.com/item/%E5%92%96%E5%95%A1/29518?fr=aladdin" class="btn btn-indigo">详情</a>

          </div>
        </div>
      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-lg-4 col-md-6">
        <!--Featured image-->
        <div class="view overlay rounded z-depth-1">
          <img src="img/SOE.png" 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">豆子分类</h4>
            <p class="grey-text">在高海拔地区，阿拉比卡种咖啡生长得最好，这种咖啡的风味比其它咖啡要精致得多，这种咖啡中咖啡因的含量只占咖啡全部重量的1%。其全球产量约80-85%。
              罗布斯塔种咖啡滋味醇厚，抵抗病虫害的能力强，单株产量也很高。该种咖啡生长在低海拔地区，因其能够萃取出丰富且稳定的crema，所以多半被用在意式拼配豆中，用以制作Espresso。其全球产量约15-20%。
            </p>
            <a href="https://baike.baidu.com/item/%E5%92%96%E5%95%A1/29518?fr=aladdin" class="btn btn-indigo">详情</a>

          </div>
        </div>
      </div>
      <!-- Grid column -->

    </div>
    <!-- Grid row -->

  </div>
  <!-- Container -->

2.咖啡的选购

然后在下面依次列举出了一些精品咖啡的选购以及咖啡机的选购，还有一些基本信息

部分代码展示：

 <div class="mask rgba-black-strong">
    <!-- 添加了.container-fluid 容器以利用栅格进行布局 -->
    <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">阿拉比卡种咖啡，这种咖啡的风味比其它咖啡要精致得多，这种咖啡中咖啡因的含量只占咖啡全部重量的1%。其全球产量约80-85%。，罗布斯塔种咖啡滋味醇厚，抵抗病虫害的能力强，单株产量也很高。该种咖啡生长在低海拔地区，因其能够萃取出丰富且稳定的crema，所以多半被用在意式拼配豆中，用以制作Espresso。其全球产量约15-20%。</h4>
         
          <a type="button" class="btn btn-outline-white"href="#about">了解更多<i class="fas fa-book ml-2"></i></a>

        </div>

      </div>

      </div>

  </div>

</div>
<!--/.Mask-->
  </header>
  <!--Main Navigation-->
<!--Main layout-->
<br>
<br>
<main>

  <!--Section: about-->
<section id="about" class="py-5">

  <!-- Container -->
  <div class="container">
    <!-- Section heading -->
    <h2 class="h1-responsive font-weight-bold text-center mb-5">SOE精品咖啡</h2>
    <!-- Section description -->
    <p class="lead grey-text text-center w-responsive mx-auto mb-5">️SOE咖啡是Single Origin Espresso的缩写，意思是单一产地浓缩咖啡，在咖啡冲煮过程中，只用同一个产区的咖啡豆进行冲煮。
    </p>
    <!-- Grid row -->

    <!-- Grid row -->

  </div>
  <!-- Container -->

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

3、制作方式

下面展示了每一种咖啡展示

部分内容代码：

<section id="projects" class="text-center py-5" style="background-color: #eee;">

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

    <!-- Section heading -->
    
    <!-- Grid row -->
    <div class="row text-center">

      <!-- Grid column -->
      <div class="col-lg-4 col-md-12 mb-lg-0 mb-4">
        <!--Featured image-->
        <div class="view overlay rounded z-depth-1">
          <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fs2.boohee.cn%2Fhouse%2Fupload_food%2F2018%2F10%2F22%2Fbig_photo_url_8ba80911ce6bb9993bf699a7308ec167.jpg&refer=http%3A%2F%2Fs2.boohee.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659616590&t=c5029e0585c85680a6f49972e9576cf3" 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">拿铁</h4>
            <p class="grey-text">拿铁咖啡是意大利浓缩咖啡（Espresso）与牛奶的经典混合，意大利人也很喜欢把拿铁作为早餐的饮料。意大利人早晨的厨房里，照得到阳光的炉子上通常会同时煮着咖啡和牛奶。喝拿铁的意大利人，与其说他们喜欢意大利浓缩咖啡，不如说他们喜欢牛奶，也只有Espresso才能给普普通通的牛奶带来让人难以忘怀的味道。
            </p>
          
            <!--         
                 <a href="https://baike.baidu.com/item/%E9%87%8D%E5%BA%86%E5%8E%86%E5%8F%B2%E6%96%87%E5%8C%96/19931717?fr=aladdin" class="btn btn-indigo">详情</a>
            -->
      
          </div>
        </div>
      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-lg-4 col-md-6 mb-md-0 mb-4">
        <!--Featured image-->
        <div class="view overlay rounded z-depth-1">
          <img src="https://img0.baidu.com/it/u=3604869445,2918772644&fm=253&fmt=auto&app=138&f=JPEG?w=618&h=402" class="img-fluid"
            alt="Sample project image">
          <a>
            <div class="mask rgba-white-slight"></div>
          </a>
          <!--Excerpt-->
          <div class="card-body pb-2">
            <br>
            <h4 class="font-weight-bold my-3">美式</h4>
            <p class="grey-text">
              “美式咖啡”（英文：Americano，意大利语：Caffè Americano）咖啡的一种，是最普通的咖啡。是使用滴滤式咖啡壶所制作出的黑咖啡，又或者是意式浓缩中加入大量的水制成。
              美式咖啡口味比较淡。因为一般的萃取时间相对较长（大概四五分钟），所以咖啡因含量较高。
              
            </p>
            <br>
            <br>
            <br>
            <br>
            <br>
          </div>
        </div>
      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-lg-4 col-md-6">
        <!--Featured image-->
        <div class="view overlay rounded z-depth-1">
          <img src="https://img2.baidu.com/it/u=248193964,964996888&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" 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">卡布奇诺　</h4>
            <p class="grey-text">
              20世纪初期，意大利人阿奇布夏发明蒸汽压力咖啡机的同时，也发展出了卡布奇诺咖啡。
              卡布奇诺是一种加入以同量的意大利特浓咖啡和蒸汽泡沫牛奶相混合的意大利咖啡。此时咖啡的颜色，就像卡布奇诺教会的修士在深褐色的外衣上覆上一条头巾一样，咖啡因此得名。传统的卡布奇诺咖啡是三分之一浓缩咖啡，三分之一蒸汽牛奶和三分之一泡沫牛奶，并在上面撒上小颗粒的肉桂粉末。
              
            </p>
            <br>
            <br>
            <br>
          </div>
        </div>
      </div>
      <!-- Grid column -->

    </div>
    <!-- Grid row -->

4、饮用利弊

下面内容逐个展示咖啡对人体健康的影响：

主要代码：

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

  <div class="mask rgba-black-strong">
    <!-- 添加了.container-fluid 容器以利用栅格进行布局 -->
    <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 type="button" class="btn btn-outline-white"href="#about">了解更多<i class="fas fa-book ml-2"></i></a>

        </div>

      </div>

      </div>

  </div>

</div>