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

阿布布啊

已于 2022-07-09 15:51:41 修改

阅读量393

点赞数

文章标签：大数据 web

于 2022-07-09 09:49:50 首次发布

本文链接：https://blog.csdn.net/weixin_45970808/article/details/125689442

版权

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

一、项目介绍
二、开发过程
三、问题反思
四、总结

一、项目介绍

本次所设计的项目以阿布巴工作室为主题设计了一个静态网站，使用HTML和css语言，一共设计六个简单的网页，包括工作室介绍、美食、美景、个人信息、登陆、注册六个页面，而且每个页面可以通过点击一些图片或者是模块文字进行跳转。

二、开发过程

1、项目总体设计

本次项目所设计的web静态网页，以阿布巴工作室为主题，设计了导航，在每个页面都有导航显示，每个页面可以相互跳转，如注册和登陆页面之间可以跳转。为了方便整理修改设计，所以为这六个页面分别使用一个html文件进行设计，通过超链接的使用，实现这六个页面的相互之间的跳转转换。使用一个总的HTML文件即首页文件，将这六个页面链接起来，然后再分别设计各个页面部分。在工作室介绍部分展示工作室内容，设计动态动画、给网站添加音乐；在个人信息页面设计表单，可以输入修改信息；在hometown页面即包含了美食和美景的两个页面，通过图片和文字进行介绍；在用户页面部分，有注册和登陆两个页面，注册成功之后可以跳转到登陆页面，登陆页面有注册可以跳转到注册页面进行注册，登陆页面可以跳转到工作室介绍这个首页。

2、导航设计

使用nav标签设置导航页面，使用超链接将其他页面链接在导航中，可以进行跳转，本质是将打开的新页面覆盖在原来的页面，将每个页面的导航设置都一样就可以实现在每个页面显示的导航一致。使用ul标签无序列表、span 来组合行内元素、li标签签定义列表项目，在hometown导航和用户页面下均设置两个二级列表项目。
实现代码：

  <nav class="sidebar sidebar-offcanvas" id="sidebar">
      <ul class="nav">
        <li class="nav-item sidebar-category">
          <p>阿布工作室</p>
          <span></span>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="../../index.html">
            <i class="mdi mdi-view-quilt menu-icon"></i>
            <span class="menu-title">工作室介绍</span>
            <div class="badge badge-info badge-pill">2</div>
          </a>
        </li>
        <li class="nav-item sidebar-category">
          <p>阿布阿布</p>
          <span></span>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
            <i class="mdi mdi-palette menu-icon"></i>
            <span class="menu-title">Hometown</span>
            <i class="menu-arrow"></i>
          </a>
          <div class="collapse" id="ui-basic">
            <ul class="nav flex-column sub-menu">
              <li class="nav-item"> <a class="nav-link" href="../../pages/ui-features/buttons.html">美食</a></li>
              <li class="nav-item"> <a class="nav-link" href="../../pages/ui-features/typography.html">美景</a></li>
            </ul>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="../../pages/forms/basic_elements.html">
            <i class="mdi mdi-view-headline menu-icon"></i>
            <span class="menu-title">个人信息</span>
          </a>
        </li>
        <li class="nav-item sidebar-category">
          <p>User</p>
          <span></span>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth">
            <i class="mdi mdi-account menu-icon"></i>
            <span class="menu-title">用户页面</span>
            <i class="menu-arrow"></i>
          </a>
          <div class="collapse" id="auth">
            <ul class="nav flex-column sub-menu">
              <li class="nav-item"> <a class="nav-link" href="../../pages/samples/login.html"> 登陆 </a></li>
              <li class="nav-item"> <a class="nav-link" href="../../pages/samples/register.html"> 注册 </a></li>
            </ul>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://blog.csdn.net/weixin_45970808/article/details/125689442?spm=1001.2014.3001.5502">
            <button class="btn bg-danger btn-sm menu-title">课程设计报告</button>
          </a>
        </li>
      </ul>

    </nav>

实现效果：

3、工作室介绍页面设计

首页设计：利用html中class元素，添加图片连接以及显示，再添加要输入的文字，文字的样式、位置、大小、颜色等属性同样是通过css样式列表实现。

<div class="content">
<div class="stars"></div>
<img class="bgc" src="https://img.freepik.com/free-photo/high-angle-people-world-map_23-2149407885.jpg?t=st=1657273650~exp=1657274250~hmac=b4c54d24fde69cc4c946ded4aafd6fe29b4abf5fe1917dc94fd421e9578cd272" width="100%" alt="">
<h3 class="title">欢迎来到阿布巴工作室......</h3>
<img class="icon" src="images/book.png" alt="">
</div>

内容介绍设计：进行背景图添加、图片添加、文字、以及文字和图片之间的位置为绝对模式、文字的排版的控制。

<div class="icons">
              <div class="icons_items">
                  <img class="icons_items_imgs" src="https://pic.quanjing.com/lk/jz/QJ8673228338.jpg@!350h" alt="">
                  <span>stm32
                  </span>
              </div>
              <div class="icons_items">
                  <img class="icons_items_imgs" src="https://pic.quanjing.com/mt/ut/QJ6673897195.jpg@!350h" alt="">
                  <span>yolo5</span>
              </div>
              <div class="icons_items">
                  <img class="icons_items_imgs" src="https://pic.quanjing.com/lk/jz/QJ8673228338.jpg@!350h" alt="">
                  <span>ARDUINO</span>
              </div>
              <div class="icons_items">
                  <img class="icons_items_imgs" src="https://pic.quanjing.com/mt/ut/QJ6673897195.jpg@!350h" alt="">
                  <span>Web</span>
              </div>
          </div>
          <div class="introduce">
              <div class="introduce_item">
                  <img class="introduce_item_img" src="https://pic.quanjing.com/6g/12/QJ6999096291.jpg@!794ws" alt="">
                  <span class="introduce_item_title">在STM32F105和STM32F107互连型系列微控制器之前，意法半导体已经推出STM32基本型系列、增强型系列、USB基本型系列、互补型系列；新系列产品沿用增强型系列的72MHz处理频率。内存包括64KB到256KB闪存和 20KB到64KB嵌入式SRAM。</span>
  
              </div>
              <div class="introduce_item">
  
                  <span class="introduce_item_titles">YOLOv5是一种单阶段目标检测算法，该算法在YOLOv4的基础上添加了一些新的改进思路，使其速度与精度都得到了极大的性能提升。</span>
                  <img class="introduce_item_img" src="https://pic.quanjing.com/1p/sc/QJ9127035502.jpg@!350h" alt="">
              </div>
              <div class="introduce_item">
                  <img class="introduce_item_img" src="https://pic.quanjing.com/gk/5n/QJ6396830271.jpg@!350h" alt="">
                  <span class="introduce_item_title">Arduino能通过各种各样的传感器来感知环境，通过控制灯光、马达和其他的装置来反馈、影响环境。板子上的微控制器可以通过Arduino的编程语言来编写程序，编译成二进制文件，烧录进微控制器。</span>
              </div>
              <div class="introduce_item">
                  <span class="introduce_item_titles">Web应用程序是一种可以通过Web访问的应用程序，程序的最大好处是用户很容易访问应用程序，用户只需要有浏览器即可，不需要再安装其他软件。</span>
                  <img class="introduce_item_img" src="https://pic.quanjing.com/zb/jm/QJ6779434701.jpg@!350h" alt="">
              </div>
          </div>

设置动态雪花：在首页第一个页面设置动态动画

//html
<!-- 使用stars属性生成动态雪花飘落 -->
 <div class="stars"></div>

//css

.stars {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    z-index: 999;
    border-radius: 50%;
    box-shadow: -447px 387px #c4c4c4, -401px 118px #fafafa, -109px 217px #d9d9d9, -680px -436px #e3e3e3, 514px 360px #cccccc, -708px 298px #e8e8e8, -696px -270px #ededed, 116px -128px #f7f7f7, 179px 35px white, -404px -90px whitesmoke, -331px -309px #c4c4c4, -363px -24px #d1d1d1, 277px 416px #fafafa, -145px -244px whitesmoke, 123px 62px #d4d4d4, -407px 418px #d9d9d9, 535px 237px #d9d9d9, -466px -78px #f7f7f7, 257px 287px #dedede, 327px -398px #e0e0e0, -602px -38px #c2c2c2, 128px 398px #e6e6e6, 274px -446px #d1d1d1, -602px -298px #c7c7c7, 526px -5px #c4c4c4, -90px -158px #fcfcfc, 5px 294px whitesmoke, -633px 229px #c4c4c4, -475px 427px #dedede, 586px -453px #f2f2f2, 180px -432px #c7c7c7, -637px -88px #cfcfcf, -453px 308px #d6d6d6, -111px 1px #d9d9d9, 573px -450px #ededed, 198px 300px #d6d6d6, -355px 166px #dedede, -715px 13px #e3e3e3, 262px -104px #d1d1d1, 147px 325px #dbdbdb, 1px 399px #dbdbdb, 286px -100px white, 43px -329px #e8e8e8, 617px 55px #d9d9d9, -168px -392px #cccccc, 84px 219px #c9c9c9, 507px -226px #d9d9d9, -327px -70px #e6e6e6, 386px -212px #c4c4c4, -717px 4px #cfcfcf, 502px -231px #e3e3e3, 302px 56px #ededed, 649px 341px #c7c7c7, 569px 350px #c9c9c9, 516px -31px #e6e6e6, 689px 447px #c2c2c2, 591px -206px #fafafa, 422px -137px #e6e6e6, -510px -324px #cccccc, -649px 287px #c2c2c2, -194px -48px #f7f7f7, -279px -329px #d1d1d1, -406px 478px #dbdbdb, -735px -87px #c9c9c9, 30px -197px #dedede, -564px 233px #e6e6e6, -486px -324px #ededed, -54px -7px #ededed, -441px -194px #e3e3e3, -133px -95px #e0e0e0, -722px -73px #d6d6d6, 595px 423px #ededed, 568px -39px #ededed, 370px 377px #d1d1d1, -419px -102px #fcfcfc, -450px 109px #c4c4c4, -57px -119px #d1d1d1, -582px 150px #e6e6e6, 206px -263px #cfcfcf, 582px -461px #c9c9c9, -268px -141px #d9d9d9, -148px 291px #c7c7c7, 254px -179px #c9c9c9, 725px 424px #f0f0f0, 391px -150px #ebebeb, 89px -299px #d4d4d4, 170px 1px #c9c9c9, 243px 209px #c7c7c7, 27px 460px #c9c9c9, -465px -380px #d4d4d4, 530px -360px whitesmoke, -626px 53px #e0e0e0, 706px 218px #d9d9d9, 40px -82px #cccccc, -5px -212px #e6e6e6, -742px 33px #ebebeb, -714px 478px #e0e0e0, -585px -125px #cccccc, -216px 348px #cfcfcf, 601px 332px #ededed, 344px -88px #c4c4c4, 659px -22px #d1d1d1, -411px 188px #d6d6d6, -423px -206px #fcfcfc, -359px -136px #cfcfcf, 612px 406px whitesmoke, 725px 96px whitesmoke, 363px -446px white, -204px 325px #c9c9c9, 740px 176px #fafafa, -489px -352px white, -638px 64px #dbdbdb, 537px -65px #dbdbdb, 151px -32px #ebebeb, 681px 212px #fcfcfc, 604px -149px #e6e6e6, -542px -398px #c4c4c4, -707px 66px whitesmoke, -381px 258px #cfcfcf, -30px 332px #d6d6d6, 512px -381px #c9c9c9, 195px 288px #cccccc, -278px 479px #c7c7c7, 27px -208px #d6d6d6, -288px 15px white, -680px 248px #dedede, 433px 31px #c9c9c9, 150px -206px #d4d4d4, -79px 247px white, -594px 115px #e0e0e0, 99px 292px #e0e0e0, 673px -269px #dedede, -257px -64px #d1d1d1, 449px 81px #f2f2f2, 18px -99px #d1d1d1, -694px 415px #f7f7f7, 240px 264px #e0e0e0, 450px -172px white, 383px 7px #e8e8e8, 338px -73px #c9c9c9, 291px -19px #ebebeb, 659px 137px #d1d1d1, 602px -6px #fcfcfc, 554px 249px #ebebeb, 625px 356px #d9d9d9, 579px -183px #d6d6d6, -20px 250px white, -401px 431px #c4c4c4, -645px -232px #cccccc, -265px -148px white, 553px 258px #d1d1d1, 166px -360px #ebebeb, 719px 51px #ededed, 612px -129px #ebebeb, -465px -104px #f2f2f2, -154px -121px #d9d9d9, -1px 330px #f2f2f2, -666px 248px #f7f7f7, -720px 264px #ededed, 148px -365px #e6e6e6, -388px -349px #c4c4c4, 128px -88px #e3e3e3, -683px -274px #fafafa, -341px 41px #c9c9c9, -59px -471px #f0f0f0, -3px -427px #c2c2c2, 418px 167px #d6d6d6, 343px 247px #c7c7c7, 623px -347px #d1d1d1, 716px -217px white, 243px -409px whitesmoke, -75px -126px #d6d6d6, -730px -91px #c9c9c9, -210px -397px #cfcfcf, -349px 180px #c9c9c9, -567px -281px #e0e0e0, -460px 381px #fcfcfc, -310px -22px #ededed, 450px -1px #dbdbdb, -405px -328px #e3e3e3, 5px 332px #d6d6d6, -294px 302px #fcfcfc, -398px 97px whitesmoke, -696px 325px #cfcfcf, -589px 110px #d6d6d6, 353px -411px #dbdbdb, -697px -318px #ebebeb, -114px -72px #f0f0f0, 259px -193px #fcfcfc, 60px 26px #e6e6e6, -63px -232px white, 205px -372px #f7f7f7, -464px -333px #f2f2f2, -374px 123px white, -377px -386px #c7c7c7, -80px 337px #cccccc, 478px -178px #dbdbdb, 222px 420px #ebebeb, -707px 99px #c4c4c4, 716px -132px #fafafa, -253px -286px #e3e3e3, 646px 178px #f0f0f0, 201px 24px #d1d1d1, 178px -58px #c7c7c7, -557px 368px #ededed, 0px 219px #d9d9d9, -266px -269px #cccccc, 242px -197px #c9c9c9, -419px 193px #c2c2c2, -47px 91px #c7c7c7, -109px 75px #c2c2c2, -146px -453px #d6d6d6, 671px -350px #f2f2f2, 421px -91px #d9d9d9, 738px 19px #ededed, -316px -155px #dedede, 419px 244px #fcfcfc, -278px -418px #d6d6d6, -581px -181px #fcfcfc, 139px 264px #d9d9d9, 691px -11px #ebebeb, -622px 402px #c2c2c2, 219px 396px #f0f0f0, -149px -423px white, -716px -78px #d9d9d9, -590px 341px #e6e6e6, -208px 79px #d6d6d6, -227px -24px #f7f7f7, 239px 262px #d1d1d1, 740px 443px #f7f7f7, 509px 134px #d6d6d6, -555px 232px #e8e8e8, -67px -427px #cfcfcf, -368px 250px #f7f7f7, 715px -415px #fafafa, 411px -301px #f0f0f0, -322px 287px #d9d9d9, -429px -90px #f2f2f2, -327px -387px #f0f0f0, -491px 183px #c2c2c2, -133px 250px #d4d4d4, 538px 139px #e3e3e3, -417px -125px #f0f0f0, 653px -351px #e6e6e6, -549px 38px #d4d4d4, 602px 110px whitesmoke, 415px 105px #e0e0e0, -733px -371px #cfcfcf, 286px 403px #d4d4d4, 11px 320px #c4c4c4, -597px 158px whitesmoke, 716px -350px whitesmoke, 321px 67px #fafafa, -237px -300px #cfcfcf, 74px 152px #c9c9c9, 587px -123px #fcfcfc, 699px -332px whitesmoke, 399px 355px #f7f7f7, -323px 314px #dbdbdb, 89px 416px #c7c7c7, 445px 38px #e3e3e3, 572px 122px #c4c4c4, -258px 372px white, 49px 306px #d9d9d9, 437px -35px #dedede, 566px 174px #f2f2f2, 732px -299px whitesmoke, -410px 394px #ededed, 131px -415px white, 19px -326px #e8e8e8, -700px -188px #d1d1d1, 96px -1px #e0e0e0, -328px -396px #f0f0f0, -117px -214px #fcfcfc, -53px 261px #ebebeb, 80px 134px #d6d6d6, -364px -216px white, -636px -125px #dbdbdb, -639px -265px #e3e3e3, 208px 98px #c7c7c7, 172px 467px #e0e0e0, 435px 309px #e3e3e3, 194px -259px #f0f0f0, 209px -186px #c9c9c9, -312px 418px #fafafa, 229px 407px #c9c9c9, -449px -357px #fafafa, 674px 121px #e8e8e8, 608px -429px #ebebeb, -431px -428px #cfcfcf, 105px 462px #e3e3e3, -179px -372px #e3e3e3, 143px -317px #d6d6d6, -449px -149px #fafafa, -544px 250px #dedede, -220px -323px whitesmoke, 658px 8px whitesmoke, -656px -244px #e8e8e8, 347px 11px whitesmoke, 694px -230px #f7f7f7, -317px 1px #c4c4c4, 28px 23px #fcfcfc, -382px 321px #dbdbdb, 632px -74px #c4c4c4, 154px -245px #c2c2c2, -553px 337px #d6d6d6, -48px -243px #d1d1d1, 92px -391px #cccccc, -71px -256px #cfcfcf, -372px 57px #d9d9d9, 369px -140px #fcfcfc, 675px 81px #c2c2c2, -663px 254px #cccccc, 703px -203px #ededed, 74px -363px #c2c2c2, 643px -458px #d1d1d1, 198px 359px #cccccc, 265px 309px #d4d4d4, -353px -368px #e8e8e8, -465px 439px whitesmoke, 693px 360px #c9c9c9, 634px -397px #d1d1d1, 467px 25px whitesmoke, -558px -272px #e6e6e6, 671px 69px #dbdbdb, 407px 357px #cfcfcf, 379px 80px white, 10px -203px #c9c9c9, 104px -292px #f0f0f0, -667px -29px #d1d1d1, 557px -155px #e6e6e6, -505px 115px #cfcfcf, -605px 164px #f2f2f2, -108px -223px #e0e0e0, 523px -156px #ebebeb, 691px 230px white, -507px -13px #d1d1d1, -349px 332px #dedede, 520px 266px whitesmoke, -66px -250px #e6e6e6, -496px -449px #ebebeb, 414px -170px #dedede, -649px 230px #ebebeb, 598px -92px #c7c7c7, -638px 113px #c2c2c2, 151px 363px #f7f7f7, -445px -241px #f0f0f0, 527px -14px #dedede, 203px -61px #cfcfcf, -716px -284px #ebebeb, -525px 134px #c2c2c2;
    animation: fly 15s linear infinite;
    transform-style: preserve-3d;
}

.stars:before,
.stars:after {
    content: "";
    position: absolute;
    width: inherit;
    height: inherit;
    box-shadow: inherit;
}

.stars:before {
    transform: translateZ(-300px);
    opacity: .6;
}

.stars:after {
    transform: translateZ(-600px);
    opacity: .4;
}

添加音乐：在整个网站添加背景音乐，不管是点击那个页面都可以听到音乐，而且一进入网站就开始播放音乐

/css
audio {
    position: fixed;
    bottom: 50px;
    right: 0;
}

.music_img {
    position: fixed;
    bottom: 50px;
    right: 50px;
    width: 40px;
    height: 30px;
    animation: muscis 5s linear infinite;
}

//html
</div>
          <!-- 添加音乐 -->
          <audio autoplay="autoplay" id="audio" loop="loop">
                  <source src="./video/music1.mp3" type="audio/MP3">  
                </audio>
          <!--设置音乐播放图标 -->
          <img class="music_img" src="images/book.png">
            " alt="">

工作室介绍界面效果图

4、美食/美食页面设计

页面头部设计：可以点击图片跳转到工作室介绍页面，设计了搜索框，提示内容“search”，
然后再是简单的文本框模块设计，插入图片以及文字进行排版，设置相关的大小、位置、颜色、点击等属性内容


<div class="content-wrapper">
          <div class="row">
            <div class="col-12 grid-margin stretch-card">
              <div class="card">
                      <h4 class="card-title">螺蛳粉</h4>
                          <div class="icons_items">
                            <img  src="https://pic2.zhimg.com/v2-b3547ac367d6adb59c6f0627c15b2fb1_r.jpg?source=172ae18b" width ="600"  heinght="500"  alt="">

                  </div>
                  <div class="col-md-6">
                    <div class="card-body">
                      <h4 class="card-title">老友粉</h4>              
                      <div class="icons_items">
                        <img  src="https://ts1.cn.mm.bing.net/th/id/R-C.79e34406e97fdd811ed87dcd14479c96?rik=bOD5ShyBOCFG8w&riu=http%3a%2f%2fpic152.huitu.com%2fres%2f20201109%2f2532668_20201109221841314070_1.jpg&ehk=Y0DKf%2bojzeRWk8QbQsmAooL46iRdvNNUDg%2b6GL7%2f%2fyI%3d&risl=&pid=ImgRaw&r=0" width ="600"  heinght="500"  alt="">
                        
          
              </div>
            </div>

跳转首页效果图：
请添加图片描述

美食页面整体实现效果图：
在这里插入图片描述
风景界面跟美食页面设计差不多，同样是先设计网页头部那边，添加了一些图标，参考了平时登陆的一些网站的页面进行设计，主体部分同样是添加图片和文字，再进行排版设计，

请添加图片描述

5、个人信息页面设计

在个信息页面设计中，重要利用表单中各种属性来进行设置，如上传本地文件，保存信息上传到服务器；如下拉列表可以选择内容，点击取消可以撤销输入内容
主要实现代码：

<div class="main-panel">        
        <div class="content-wrapper">
          <div class="row">
            <div class="col-12 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">
                  <h4 class="card-title">基本信息</h4>
               
                  <form class="forms-sample">
                    <div class="form-group">
                      <label for="exampleInputName1">Name</label>
                      <input type="text" class="form-control" id="exampleInputName1" placeholder="Name">
                    </div>
                    <div class="form-group">
                      <label for="exampleInputEmail3">Email address</label>
                      <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
                    </div>
                    <div class="form-group">
                      <label for="exampleInputPassword4">Password</label>
                      <input type="password" class="form-control" id="exampleInputPassword4" placeholder="Password">
                    </div>
                    <div class="form-group">
                      <label for="exampleSelectGender">Gender</label>
                        <select class="form-control" id="exampleSelectGender">
                          <option>Male</option>
                          <option>Female</option>
                        </select>
                      </div>
                    <div class="form-group">
                      <label>File upload</label>
                      <input type="file" name="img[]" class="file-upload-default">
                      <div class="input-group col-xs-12">
                        <input type="text" class="form-control file-upload-info" disabled placeholder="Upload Image">
                        <span class="input-group-append">
                          <button class="file-upload-browse btn btn-primary" type="button">Upload</button>
                        </span>
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="exampleInputCity1">City</label>
                      <input type="text" class="form-control" id="exampleInputCity1" placeholder="Location">
                    </div>
                    <div class="form-group">
                      <label for="exampleTextarea1">Textarea</label>
                      <textarea class="form-control" id="exampleTextarea1" rows="4"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary mr-2">保存</button>
                    <button class="btn btn-light">取消</button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>

界面效果图：
请添加图片描述

6、登陆页面设计

首先是设计页面，我这里是使用无版权的网站上面的图片，然后设置位置、大小、透明度等属性
再是设置登陆页面，密码使用password字符进行隐藏，输入框就是使用input实现
然后设置sign in可以跳转到工作室介绍首页，如果没有创建用户可以点击Create跳转到注册页面：
主要实现html代码：


  <body>
  <div id="login_box">
    <h2>LOGIN</h2>
    <form class="pt-3">
      <div class="form-group">
        <input type="email" class="form-control form-control-lg" id="exampleInputEmail1" placeholder="Username">
      </div>
    <div class="form-group">
      <input type="password" class="form-control form-control-lg" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="mt-3">
      <a class="btn btn-block btn-primary btn-lg font-weight-medium auth-form-btn" href="../../index.html">SIGN IN</a>
    </div>
    <div class="text-center mt-4 font-weight-light">
      Don't have an account? <a href="register.html" class="text-primary">Create</a>
    </div>
</body>

跳转到首页效果图：
请添加图片描述

跳转到注册页面效果图：
请添加图片描述

7、注册页面设计

首先是设计页面，我这里是使用无版权的网站上面的图片，然后设置位置、大小、透明度等属性
再是设置登陆页面，密码使用password字符进行隐藏，输入框就是使用input实现，设置一个“loginDiv“注册文本框属性，包括不透明度、大小、颜色、位置、边款等

#loginDiv {
        width: 37%;
        margin-top: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 500px;
        background-color: rgba(75, 81, 95, 0.3);
        box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
        border-radius: 5px;  
    }
        #name_trip {
        margin-left: 50px;
        color: red;
    }
    
    p,
    .sexDiv {
        margin-top: 10px;
        margin-left: 20px;
        color: azure;
    }
    
    .sexDiv>input,
    .hobby>input {
        width: 30px;
        height: 17px;
    }
    
    input,
    select {
        margin-left: 15px;
        border-radius: 5px;
        border-style: hidden;
        height: 30px;
        width: 140px;
        background-color: rgba(216, 191, 216, 0.5);
        outline: none;
        color: #f0edf3;
        padding-left: 10px;
    }
    
    .button {
        border-color: cornsilk;
        background-color: rgba(100, 149, 237, .7);
        color: aliceblue;
        border-style: hidden;
        border-radius: 5px;
        width: 100px;
        height: 31px;
        font-size: 16px;
    }
    
    .introduce {
        margin-left: 110px;
    }
    
    .introduce>textarea {
        background-color: rgba(216, 191, 216, 0.5);
        border-style: hidden;
        outline: none;
        border-radius: 5px;
    }

然后使用标签type="submit"提交可以跳转到登陆页面，还可以点击重置将输入的消息清除重新输入；
跳转到登陆页面效果图：

重置信息效果图：
请添加图片描述

8、网站发布

将本地与github进行关联，将文件上传到仓库中，属性设置为public，然后发布自己的网页，能够进行访问

三、问题反思

在本次静态网站的设计中，我遇到了不少的问题，但也慢慢的一一解决了，完成了整个静态网站的设计。
其一：一开始不知道如何把多个网页连接在一起，可以在同一个页面进行访问，虽然知道可以使用超链接，但是一开始没有想到可以直接连接文件，然后在网页上面点击，就可以直接跳转到html文件所生成的网页。
其二：是调用本地文件目录，上传文件，后面查阅资料的指在html中的文件读取要利用到的API是FileReader，FileWriter可以用于写入文件等等，最后使用了file这个属性来进行读取本地目录文件
其三：是实现音频在网页全局的播放，一开始使用audio这个标签来播放音乐，但是实现不了自动播放，有的时候还播放不了，后面不断尝试发现，要设置成自动模式才行，而且格式也要进行控制，最号是设置为mp3格式，进行全局播放的时候，可以设置播放的长度之类
其四：因为对html和css这两门语言使用的熟练度还不够，经常输漏标签结束符什么的，元素用错，设置的属性搞混的，解决方法就是在这种基础错误纠错花了不少时间。
总得来说，我在这次静态网站的设计过程中，遇到的问题说大不大，说小也不是很小，都很重要，其实很多时候是自己不熟练这些语言然后犯了低级错误，自己又难以发现，因此也给予我惊醒，在学习编程语言的时候，一定要自己多加练习，熟悉这门语言，然后再进行项目设计，问题应该会少很多，减少在纠正低级错误时所花的时间。

四、总结

本次web网站设计，我因为目前能力和时间有限，选择了制作一个相对简单的静态网站。我所制作的主题为阿布工作室，进行了工作室首页介绍、个人信息、登陆注册等页面的设计，设计的比较简单，但也较美观。做为一个工科生，在页面设计的时候，对于图片排版、文字排版什么的，很无奈，一开始的时候只是有想法但是不知道怎么去布局比较好看，后面参考网络上的一些网站页面设计，然后设计自己简单工作室页面。在整个过程设计下来，我应该是在排版布局的时候，花费了很多时间，不管怎么排版自己都看不顺眼，后面就是一切从简，设计的页面布局比较简介，整体上是美观。本次web设计我主要是利用了HTML脚本语言和css样式表来进行编写，这两个语言都比较简单，很容易上手，给我的感觉就是，比面向对象的c++这种语言好理解，也更直观。我也通过本次web网站的开发设计，对所学的html和css这两门的语言进行复习巩固，我也希望闲下来了的，自己去制作一个动态网站，深入学习web开发。