Completion report of communication software development and Application

Catalog

One 、 Build a static website

Two 、 The development process  

3、 ... and 、 Problems encountered and solutions

Four 、 summary

---

One 、 Build a static website

Mission ： Build a static or dynamic website .

    . Static website

          Adopt pure CSS Or whatever you like CSS The frame is like Bootstrap、MDB、Tailwind Wait to build a theme of your choice and no less than 5 A page （Web Page） Website

Make a static website , Use MDB The template of . Take coffee as the theme , It is divided into five modules , Home page 、 Coffee shopping 、 Coffee making 、 Advantages and disadvantages of coffee quotation , And a web page that places links to reports . And finally finish the web page , And hang the web page to github On .
 

Two 、 The development process  

First, download one MDB The template of , Use after the next Code Open the folder , And open it with a web page index.html, You can see the prototype of the web page . Then it was here html Make changes under the document , And it can also be in the template css Add styles for web pages under the file .
1、 The main page

This page contains links to other pages and related main contents .
1. The first is the home page , as follows ：

This page mainly designs a navigation and picture background , And the navigation bar can jump to the following contents . There are also three hyperlinks on this page , Jump to shopping , Make and quote the pros and cons interface .
The main codes are as follows ： 

<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>  coffee  [kā fēi] </h2>
          <hr>
          <p>
             coffee (coffee), It is a drink made of roasted and ground coffee beans . As one of the three major beverages in the world , It is similar to cocoa 、 Tea is also the main drink popular in the world .
             Coffee tree is a perennial evergreen shrub or small tree of Rubiaceae , Coffee for daily consumption is made with coffee beans and various cooking utensils , Coffee beans refer to the nuts in the coffee tree fruit , Then bake it in a proper way , A cup of standard coffee should not taste bitter , A qualified barista will strictly carry out every step of the operation when making coffee , Finally, the coffee presented to the guests will show different degrees of sweetness in taste 、 acidity 、 Mellow degree or cleanliness .
             </p>
         
          <a href="https://jiaoyue666.github.io/MyCoffee/HTML-coffee/" class="btn btn-indigo"> details </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"> Purchase of coffee </h4>
              <!--Text-->
              <p class="card-text"> No matter what kind of coffee , Freshness is an important factor affecting quality . When shopping , Grab oneortwo coffee beans and chew them in your mouth , If it's clear and loud , It means that the coffee beans are not affected by moisture , And the coffee beans with fragrant lips and teeth are the best , But it's better to squeeze it with your hands , Feel whether it is solid , Never buy empty coffee .
                 Freshly fried coffee beans are not suitable for immediate drinking , Generally speaking , The best drinking time of coffee is one week after frying , At this time, the coffee is the freshest , The performance of aroma and taste is the best .</p>
              <a href="https://jiaoyue666.github.io/MyCoffee/HTML-coffeep/" class="btn btn-indigo"> details </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"> How it was made </h4>
              <!--Text-->
              <p class="card-text"> Device usage ： Drip filter coffee ： The brewing method invented by the Germans . Siphon pot ： One of the most popular coffee making methods in coffee shops . Mocha pot ： The basic principle of mocha pot uses pressurized hot water to quickly extract coffee liquid through coffee powder . Electric coffee machine ： The common ones are American coffee drippers 、 Italian style steam coffee machine .
                </p>
              <br>
              <br>
            
              <a href="https://jiaoyue666.github.io/MyCoffee/HTML-coffeem" class="btn btn-indigo"> details </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"> Advantages and disadvantages of drinking </h4>
              <!--Text-->
              <p class="card-text"> The doctor remind , Never drink coffee on an empty stomach , Because coffee will stimulate gastric acid secretion , Especially people with gastric ulcer should be more cautious . Coffee as a drink , When drinking , According to the individual situation, enough is enough , In general, nutrition emphasizes a balanced diet and less spicy food .
                 Besides , It is worth noting that , People with high blood pressure should avoid drinking caffeinated drinks when they are under high pressure at work . Because caffeine in coffee may cause blood pressure to rise , If you add emotional tension , There will be a dangerous multiplication effect .</p>
              <a href="https://jiaoyue666.github.io/MyCoffee/HTML-renwen" class="btn btn-indigo"> details </a>
            </div>

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

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

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

2. The following is the main content of each interface ：

One 、 Coffee interface ：

 

Each click details can jump to the baidu data connection attached in the corresponding code

Some of the codes are shown ：

<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"> The taste of coffee </h2>
    <!-- Section description -->
    <p class="lead grey-text text-center w-responsive mx-auto mb-5"> Coffee beans are baked in a proper way , A cup of standard coffee should not taste bitter , A qualified barista will strictly carry out every step of the operation when making coffee , Finally, the coffee presented to the guests will show different degrees of sweetness in taste 、 acidity 、 Mellow degree or cleanliness .
    </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"> Yunnan coffee, China </h4>
            <p class="grey-text">, Yunnan Pu'er . This is famous for its tea 、 Name the tea 、 The city that changed its name for tea , stay 2012 In, it was named by China Fruit Circulation Association “ The capital of coffee in China ”. And look at the whole province ,2018 Total coffee production in China 13.79 Ten thousand tons of , Yunnan accounts for 99.55%.
            </p>
            <br>
            <br>
            <br>
            <a href="https://baike.baidu.com/tashuo/browse/content?id=b990360a3b08355a452ace11" class="btn btn-indigo"> details </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"> The history of coffee </h4>
            <p class="grey-text"> coffee ” The word comes from Arabic “قهوة”, intend “ Plant drinks ”. Around the world , People are drinking coffee more and more . And then “ Coffee culture ” Fill every moment of life . At home 、 Still in the office 、 Or various social occasions , People are drinking coffee 、 It is gradually in line with fashion 、 Modern life 、 Work and leisure are linked .
               Coffee trees are native to the highlands of southwestern Ethiopia in Africa . It is said that more than a thousand years ago, a shepherd found that the sheep ate a plant , Become very excited and lively , And found coffee . It is also said that a wild fire accidentally burned down a coffee forest , The smell of barbecue coffee attracted the attention of the surrounding residents .
            </p>
            <br>
            <a href="https://baike.baidu.com/item/%E5%92%96%E5%95%A1/29518?fr=aladdin" class="btn btn-indigo"> details </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"> Bean classification </h4>
            <p class="grey-text"> At high altitude , Arabica coffee grows best , The flavor of this coffee is much more refined than other coffees , The content of caffeine in this kind of coffee only accounts for half of the total weight of coffee 1%. Its global output is about 80-85%.
               Robusta coffee has a mellow taste , Strong resistance to diseases and pests , The yield per plant is also very high . This kind of coffee grows in low altitude areas , Because it can extract rich and stable crema, Therefore, most of them are used in the care type matching beans , Used to make Espresso. Its global output is about 15-20%.
            </p>
            <a href="https://baike.baidu.com/item/%E5%92%96%E5%95%A1/29518?fr=aladdin" class="btn btn-indigo"> details </a>

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

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

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

2. Purchase of coffee

  Then the following lists the purchase of some fine coffee and coffee machine , There is also some basic information

 

 

 

  Part of the code shows ：

 <div class="mask rgba-black-strong">
    <!--  Added .container-fluid  Containers are laid out using grids  -->
    <div class="container-fluid d-flex align-items-center justify-content-center h-100">
      <!--  Newly added  div,  Represents rows in the grid  -->
      <div class="row d-flex justify-content-center text-center">
        <!--  Newly added  div,  Represents the column in the grid  -->
        <div class="col-md-10">

          <!-- Heading -->
          <h2 class="display-4 font-weight-bold white-text pt-5 mb-2"> Coffee shopping </h2>

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

          <!-- Description -->
          <h4 class="white-text my-4"> Arabica grows coffee , The flavor of this coffee is much more refined than other coffees , The content of caffeine in this kind of coffee only accounts for half of the total weight of coffee 1%. Its global output is about 80-85%., Robusta coffee has a mellow taste , Strong resistance to diseases and pests , The yield per plant is also very high . This kind of coffee grows in low altitude areas , Because it can extract rich and stable crema, Therefore, most of them are used in the care type matching beans , Used to make Espresso. Its global output is about 15-20%.</h4>
         
          <a type="button" class="btn btn-outline-white"href="#about"> Learn more 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 Fine coffee </h2>
    <!-- Section description -->
    <p class="lead grey-text text-center w-responsive mx-auto mb-5">️SOE Coffee is Single Origin Espresso Abbreviation , It means espresso from a single origin , During coffee brewing , Only coffee beans from the same producing area are used for brewing .
    </p>
    <!-- Grid row -->

    <!-- Grid row -->

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

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

3、 How it was made

  The following shows each kind of coffee

 

 

  Part of the content code ：

<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"> Latte </h4>
            <p class="grey-text"> Latte is Italian Espresso （Espresso） Classic blend with milk , Italians also like lattes as breakfast drinks . In the Italian kitchen in the morning , Coffee and milk are usually brewed on a sunny stove at the same time . Italian people who drink lattes , Rather than say they like Italian Espresso , Rather, they like milk , There is only a Espresso To bring unforgettable taste to ordinary milk .
            </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"> details </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"> American </h4>
            <p class="grey-text">
              “ Cafe Americano ”（ english ：Americano, Italian ：Caffè Americano） A kind of coffee , It's the most common coffee . It's black coffee made from a drip filter coffee pot , Or it is made by adding a lot of water to Italian concentrate .
               American coffee tastes light . Because the general extraction time is relatively long （ About fourorfive minutes ）, So the caffeine content is high .
              
            </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"> Cappuccino 　</h4>
            <p class="grey-text">
              20 At the beginning of the century , When Italian archibouchard invented the steam pressure coffee machine , Cappuccino coffee has also been developed .
               Cappuccino is a kind of Italian coffee mixed with the same amount of Italian espresso and steam foam milk . At this time, the color of coffee , It's like the monks of cappuccino church covering their dark brown coats with a headscarf , Therefore, coffee is named . Traditional cappuccino coffee is one third espresso , One third steam milk and one third foam milk , And sprinkle small particles of cinnamon powder on it .
              
            </p>
            <br>
            <br>
            <br>
          </div>
        </div>
      </div>
      <!-- Grid column -->

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

4、 Advantages and disadvantages of drinking

  The following content shows the impact of coffee on human health one by one ：

 

  Main code ：

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

  <div class="mask rgba-black-strong">
    <!--  Added .container-fluid  Containers are laid out using grids  -->
    <div class="container-fluid d-flex align-items-center justify-content-center h-100">
      <!--  Newly added  div,  Represents rows in the grid  -->
      <div class="row d-flex justify-content-center text-center">
        <!--  Newly added  div,  Represents the column in the grid  -->
        <div class="col-md-10">

          <!-- Heading -->
          <h2 class="display-4 font-weight-bold white-text pt-5 mb-2"> Drinking guidelines </h2>

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

          <!-- Description -->
          <h4 class="white-text my-4"> Never drink coffee on an empty stomach , Because coffee will stimulate gastric acid secretion , Especially people with gastric ulcer should be more cautious . Coffee as a drink , When drinking , According to the individual situation, enough is enough , In general, nutrition emphasizes a balanced diet and less spicy food .</h4>
         
          <a type="button" class="btn btn-outline-white"href="#about"> Learn more about <i class="fas fa-book ml-2"></i></a>

        </div>

      </div>

      </div>

  </div>

</div>

3、 ... and 、 Problems encountered and solutions

The whole process of making web pages , Because the template is used , So there is no big problem .

In fact, what we encounter in the production process is , stay code The information under each picture is arranged one by one , Need some patience , And that is Because there are many referenced image resources, they are in GIThub Uploading files is a little cumbersome when uploading , Not enough, and finally upload successfully , Successfully mount .

deficiencies ：

In this web design , There is no reference to video and audio , And mount to Github On .

Four 、 summary

This development is based on the previous experiments to continue to add perfect , So the whole development process is still very smooth , And the production of web pages is done according to our own ideas , All kinds of materials cited are their own interests , So in the process of completion , Can raise a lot of interest , And put it in , It is a very pleasant design experience .