目录
一、任务要求
本课程结业需完成以下两个任务，提交可浏览的网址（URL）。
任务一：构建一个静态或动态网站。以下要求中任选A或B，要求如下：
A. 静态网站
采用纯 CSS 或你喜欢的任何 CSS 框架如 Bootstrap、MDB、Tailwind 等构建一个主题自选且不少于5个页面（Web Page）的网站
B. 动态网站
使用任何一个前端框架如 Angular 等进行某应用（如英雄之旅、代办事项、图书管理等）的开发，需要有 CRUD 即增删改查功能并有一定的样式。
无论你选择静态还是动态网站，该网站都需部署到你喜欢的网站托管服务器上如 Gitpage 等（Angular项目可参阅 https://angular.cn/guide/deployment）。
该网站需放置你的结业报告（要求见任务二）。
任务二：撰写结业报告，要求如下：
（1） 题目为《通信软件开发与应用》课程结业报告；
（2） 报告需阐述：做的什么、开发过程、遇到的问题、如何解决、哪些未解决、总结；
（3） 该报告以 Web 页面的形式呈现，从你上面开发的网站中可访问到。
二、制作成果
本次的制作成果是利用MDB构建的，主题为游戏《艾尔登法环》的网站。
主页面
三、开发过程
整个开发过程是基于MDB的模板进行的。
1. 导航条
导航条主要是让访问网站的人先了解网站的大致构成，并且可以通过导航条快速跳转到想要访问的位置。因为本次实验主要是基于MDB模板完成的，因此采用了<nav>标签来完成这一功能。
具体代码如下:
<nav class="navbar navbar-expand-lg navbar-dark bg-transparent fixed-top">
<!-- Navbar brand -->
<a class="navbar-brand" href="#"><img src="./img/Eldenring_min.jpg" alt=""></a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="basicExampleNav">
<!-- Links -->
<ul class="navbar-nav mr-auto smooth-scroll">
<li class="nav-item">
<a class="nav-link" href="#intro">开始旅程</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Birth">选择出身</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Maps">地图背景</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">图片展示</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#NPC">NPC们</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Report">课程报告</a>
</li>
</ul>
<!-- Links -->
<!-- Social Icon -->
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item">
<a class="nav-link"><i class="fab fa-facebook-f"></i></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fab fa-twitter"></i></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fab fa-instagram"></i></a>
</li>
</ul>
</div>
<!-- Collapsible content -->
</nav>
<!--/.Navbar-->2. 全屏页面设计
全屏页面设计的主要思路就是利用背景图片和蒙版阴影来完成的。
具体的HTML代码如下:
<!--Mask-->
<div id="intro" class="view">
<div class="mask rgba-black-light">
<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-12">
<!-- Heading -->
<h2 class="display-4 font-weight-bold white-text mt-5 mb-2">开始艾尔登法环之旅</h2>
<!-- Divider -->
<hr class="hr-light">
<!-- Description -->
<h4 class="white-text my-4">即使引导早已破碎，也请你成为艾尔登之王.</h4>
<ul class="smooth-scroll">
<li class="nav-item">
<a class="nav-link" href="#Birth"><button type="button"
class="btn btn-outline-white">选择你的出身<i
class="fas fa-book ml-2"></i></button></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--/.Mask-->还有css代码:
#intro {
height: 100%;
}
#intro {
background: url("../img/fengmiantihuan1.jpg")no-repeat center center fixed;
-webkit-background-size: cover; /* 针对Chrome, Safari, Edge等浏览器 */
-moz-background-size: cover; /* 针对Firefox浏览器 */
-o-background-size: cover; /* 针对Operallq */
background-size: cover; /* 通用 */
}实现效果：
3. 网页具体内容
（1）各种初始人物展示
这一功能主要使用了MDB模板教程里的幻灯片设计，通过css样式的操控可以让图片不停地进行切换，利用js也可以控制切换的间隔或者不自动切换。
具体代码如下：
<!--Section: Gallery-->
<section id="Birth">
<!-- Heading -->
<h2 class="mb-5 font-weight-bold text-center white-text">请选择你的出身</h2>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6 mb-4">
<!--Carousel Wrapper-->
<div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-2" data-slide-to="1"></li>
<li data-target="#carousel-example-2" data-slide-to="2"></li>
<li data-target="#carousel-example-2" data-slide-to="3"></li>
<li data-target="#carousel-example-2" data-slide-to="4"></li>
<li data-target="#carousel-example-2" data-slide-to="5"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="view overlay z-depth-l-half">
<img class="img-fluid w-100" src="./img/rule1.jpg" alt="Second slide">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
</div>
<div class="carousel-item">
<!--Mask color-->
<div class="view overlay z-depth-l-half">
<img class="img-fluid w-100" src="./img/rule2.jpg" alt="Second slide">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
</div>
<div class="carousel-item">
<!--Mask color-->
<div class="view overlay z-depth-l-half">
<img class="img-fluid w-100" src="./img/rule3.jpg" alt="Second slide">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
</div>
<div class="carousel-item">
<!--Mask color-->
<div class="view overlay z-depth-l-half">
<img class="img-fluid w-100" src="./img/rule4.jpg" alt="Second slide">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
</div>
<div class="carousel-item">
<!--Mask color-->
<div class="view overlay z-depth-l-half">
<img class="img-fluid w-100" src="./img/rule5.jpg" alt="Second slide">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
</div>
<div class="carousel-item">
<!--Mask color-->
<div class="view overlay z-depth-l-half">
<img class="img-fluid w-100" src="./img/rule6.jpg" alt="Second slide">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
</div>
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->
</div>
<!--Grid column-->
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4" style="left: 80px;">
<!--Excerpt-->
<a href="" class="teal-text">
<h4 class="pb-4 white-text"><strong>初始角色 </strong></h4>
</a>
<h4 class="mb-3 white-text"><strong>你选中的英雄将会陪伴你整个冒险</strong></h4>
<h5 class="white-text">1. 流浪骑士</h5>
<p class="white-text mb-5">被故乡放逐而开始流浪的骑士，身穿厚实盔甲，十分可靠。</p>
<h5 class="white-text">2. 武士</h5>
<p class="white-text mb-5">来自异国他乡芦苇之地的武士，擅长使用武士刀和弓箭。</p>
<h5 class="white-text">3. 观星者</h5>
<p class="white-text mb-5">能够占卜解读命运之轮者，继承了辉石魔法。</p>
<h5 class="white-text">4. 勇者</h5>
<p class="white-text mb-5">蛮荒之地的后裔，擅长使用战斧。</p>
<h5 class="white-text">5. 囚犯</h5>
<p class="white-text mb-5">被审判的贵族精英，铁面具束缚着面孔，曾学习过辉石魔法。</p>
<h5 class="white-text">6. 盗贼</h5>
<p class="white-text mb-5">危险的匪盗，善于寻找敌人弱点，惯用弓箭进行远距离战斗。</p>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<script type="text/javascript">
// Carousel options
$('#carousel-example-2').carousel({
interval: 3000, // 间隔时间, 默认5000毫秒, 如果设置为false则不会自动播放
pause: false, // 鼠标移上后是否暂停, 默认暂停
wrap: true, // 是否循环轮播, 默认循环
});
</script>实现效果：
（2）游戏地图和背景设定的展示
这部分利用了img的展示图片以及一些文字和背景格式的css样式，算是对知识的一个综合利用吧。
具体代码如下：
<section id="Maps">
<h2 class="m-5 font-weight-bold text-center white-text">地图背景</h2>
<div class="view">
<img src="./img/Map.jpg" height="auto" width="1150px" alt="">
</div>
<div class="text-center py-5 white-text streak streak-md streak-photo m-5"
style="background-image:url('https://images.alphacoders.com/116/1169017.jpg')">
<div>
<p>The fallen leaves tell a story. </p>
<p>The great Elden Ring was shattered. In our home, across the fog, the Lands Between. </p>
<p>Now, Queen Marika the Eternal is nowhere to be found, and in the Night of the Black Knives,
Godwyn the Golden was first to perish.</p>
<p>Soon, Marika’s offspring, demigods all, claimed the shards of the Elden Ring. The mad taint
of their newfound strength triggered the Shattering. A war from which no lord arose. A war
leading to abandonment by the Greater Will.</p>
<p>Arise now, ye Tarnished. Ye dead, who yet live. The call of long-lost grace speaks to us all.
Hoarah Loux, chieftain of the badlands. The ever-brilliant Goldmask. Fia, the Deathbed
Companion. The loathsome Dung Eater. And Sir Gideon Ofnir, the All-knowing.</p>
<p>And one other. Whom grace would again bless. A Tarnished of no renown. Cross the fog, to the
Lands Between, to stand before the Elden Ring. And become the Elden Lord.</p>
</div>
</div>
<a class="nav-link" style="text-align: center;"
href="https://www.bilibili.com/video/BV1ku411v7bE/?vd_source=5ce37ffef8b26b46c0e75ac69418ce70"><button
type="button" class="btn btn-outline-white">观看完整视频<i class="fas fa-book ml-2"></i></button></a>
</section>
实现效果：
（3）图片展示
这个部分展示了一些游戏中的截图以及同人创作，主要利用了MDB中的灯箱技术，将图片按照九宫格的缩略图保存在了一起，点击的同时调用js函数将大图单独展示。
具体代码如下：
<section id="gallery" class="text-center py-5">
<!-- Container -->
<div class="container">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold mb-5 white-text">图片展示</h2>
<!-- Section description -->
<p class="grey-text w-responsive mx-auto mb-5"></p>
<div class="row">
<div class="col-md-12">
<div id="mdb-lightbox-ui"></div>
<div class="mdb-lightbox">
<figure class="col-md-4">
<a href="https://images3.alphacoders.com/115/1151247.jpg" data-size="1080x607">
<img src="https://images3.alphacoders.com/115/1151247.jpg"
class="img-fluid z-depth-1-half">
</a>
</figure>
<figure class="col-md-4">
<a href="https://images4.alphacoders.com/115/1151246.jpg" data-size="1080x607">
<img src="https://images4.alphacoders.com/115/1151246.jpg" class="img-fluid z-depth-1-half" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://images5.alphacoders.com/112/1123842.jpg" data-size="1080x607">
<img src="https://images5.alphacoders.com/112/1123842.jpg" class="img-fluid z-depth-1-half" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://images4.alphacoders.com/115/1151244.jpg" data-size="1080x607">
<img src="https://images4.alphacoders.com/115/1151244.jpg" class="img-fluid z-depth-1-half" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://images.alphacoders.com/121/1216158.jpg" data-size="1080x607">
<img src="https://images.alphacoders.com/121/1216158.jpg" class="img-fluid z-depth-1-half" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://images8.alphacoders.com/121/1216465.jpg" data-size="1080x607">
<img src="https://images8.alphacoders.com/121/1216465.jpg" class="img-fluid z-depth-1-half" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://images2.alphacoders.com/116/1169018.jpg" data-size="1080x607">
<img src="https://images2.alphacoders.com/116/1169018.jpg" class="img-fluid z-depth-1-half" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://images2.alphacoders.com/121/1214927.jpg" data-size="1080x607">
<img src="https://images2.alphacoders.com/121/1214927.jpg" class="img-fluid z-depth-1-half" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://images6.alphacoders.com/123/1230148.jpg" data-size="1080x607">
<img src="https://images6.alphacoders.com/123/1230148.jpg" class="img-fluid z-depth-1-half" />
</a>
</figure>
</div>
</div>
</div>
</div>
<!-- Container -->
</section>
<!--Section: gallery-->
<script type="text/javascript">
// MDB Lightbox Init
$(function () {
$("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
});
</script>实现效果：
（4）NPC
这个部分展示了游戏中的部分npc，点击下方的“查看”就可以前往百科查看具体信息。
具体代码如下：
<!--Section: articles-->
<section id="NPC" class="text-center py-5">
<!-- Container -->
<div class="container">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold mb-5 white-text">NPC们</h2>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<!-- Card Narrower -->
<div class="card card-cascade narrower" style="background-color: rgb(246, 247, 187);">
<!-- Card image -->
<div class="view view-cascade overlay">
<img class="card-img-top" src="https://images8.alphacoders.com/122/1221176.jpg"
alt="Card image cap">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!-- Card content -->
<div class="card-body card-body-cascade">
<!-- Label -->
<h5 class="pb-2 pt-1"> 梅琳娜 </h5>
<!-- Title -->
<h4 class="font-weight-bold card-title">谜之少女</h4>
<!-- Text -->
<p class="card-text">与失去了自己的指头女巫的褪色者达成了契约，一同开始了在交界地的冒险</p>
<!-- Button -->
<a class="btn btn-unique" href="https://zh.moegirl.org.cn/%E6%A2%85%E7%90%B3%E5%A8%9C(%E8%89%BE%E5%B0%94%E7%99%BB%E6%B3%95%E7%8E%AF)#">查看</a>
</div>
</div>
<!-- Card Narrower -->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<!-- Card Narrower -->
<div class="card card-cascade narrower" style="background-color: rgb(172, 177, 241);">
<!-- Card image -->
<div class="view view-cascade overlay">
<img class="card-img-top" src="https://images2.alphacoders.com/122/1221232.jpg"
alt="Card image cap">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!-- Card content -->
<div class="card-body card-body-cascade">
<!-- Label -->
<h5 class="blue-text pb-2 pt-1"> 菈妮 </h5>
<!-- Title -->
<h4 class="font-weight-bold card-title">星星的代言人</h4>
<!-- Text -->
<p class="card-text">作为神人的菈妮参与策划了“黑刀阴谋之夜”来杀死第一位半神，只为了让所有人都能为自己思考的时代降临</p>
<!-- Button -->
<a class="btn btn-unique" href="https://zh.moegirl.org.cn/%E8%8F%88%E5%A6%AE">查看</a>
</div>
</div>
<!-- Card Narrower -->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<!-- Card Narrower -->
<div class="card card-cascade narrower" style="background-color: rgb(233, 203, 203);">
<!-- Card image -->
<div class="view view-cascade overlay">
<img class="card-img-top" src="https://images2.alphacoders.com/103/1037695.jpg"
alt="Card image cap">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!-- Card content -->
<div class="card-body card-body-cascade">
<!-- Label -->
<h5 class="pink-text pb-2 pt-1">玛莲妮亚</h5>
<!-- Title -->
<h4 class="font-weight-bold card-title">女武神、米凯拉的锋刃</h4>
<!-- Text -->
<p class="card-text">战无不胜的女武神与最强半神碎星将军在破碎战争中相遇，在那盛开的猩红之花与圣树之下，是什么在支撑着她舞动手中的义手剑？</p>
<!-- Button -->
<a class="btn btn-unique" href="https://zh.moegirl.org.cn/%E7%8E%9B%E8%8E%B2%E5%A6%AE%E4%BA%9A">查看</a>
</div>
</div>
<!-- Card Narrower -->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Container -->
</section>
<!--Section: articles-->
效果如下：
（5）课程报告
这部分一是为了庆祝我有全成就通关游戏，当上了“艾尔登之王”，也是为了给报告提供一个接口，方便让老师查看。
具体代码如下：
<section id="Report">
<h2 class="m-5 font-weight-bold text-center white-text">课程报告</h2>
<!--Section: call to action-->
<div class="streak streak-md streak-photo m-5"
style="background-image:url('https://images5.alphacoders.com/115/1151243.jpg')">
<div class="flex-center white-text rgba-black-light pattern-1">
<ul class="mb-0 list-unstyled">
<li>
<h2 class="h2-responsive"><i class="fas fa-quote-left" aria-hidden="true"></i>
落叶捎来讯息，褪色者成为了艾尔登之王. <i class="fas fa-quote-right" aria-hidden="true"></i></h2>
</li>
<li class="nav-item">
<a class="nav-link"
href="https://blog.csdn.net/autismhealer/article/details/125687767?spm=1001.2014.3001.5502"><button
type="button" class="btn btn-outline-white">查看课程报告<i
class="fas fa-book ml-2"></i></button></a>
</li>
</ul>
</div>
</div>
<!--Section: call to action-->
</section>效果如下：
（6）底部栏
底部栏主要是放置了一个音频播放模块，可以在进入页面的同时播放游戏的主题曲。
具体代码如下：
<!-- Footer -->
<footer class="page-footer font-small pt-4">
<div style="text-align:center">
<audio src="./img/01_Elden Ring.mp3" autoplay loop preload="auto" controls></audio>
</div>
<!-- Footer Elements -->
<div class="container">
<!-- Social buttons -->
<ul class="list-unstyled list-inline text-center">
<li class="list-inline-item">
<a class="btn-floating btn-fb mx-1">
<i class="fab fa-facebook-f"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-tw mx-1">
<i class="fab fa-twitter"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-gplus mx-1">
<i class="fab fa-google-plus-g"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-li mx-1">
<i class="fab fa-linkedin-in"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-dribbble mx-1">
<i class="fab fa-dribbble"> </i>
</a>
</li>
</ul>
<!-- Social buttons -->
</div>
<!-- Footer Elements -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">BCMX:autismhealer/EldenRing
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
三、遇到的问题
1. 音频播放器的问题（未解决）
HTML应该也是考虑到肯定有用户有关掉音乐的需求，所以一定要有控制器才能正常播放音乐。但是播放器的样式怎么改变我并没有找到太好的方法。目前这个播放器放在最下面算是一种无奈之举，和我的网站风格非常不搭。
2. 图片有会有偏移（未解决）
该问题主要出在选择出身那个部分，可以看到有几张图片会有白边，但是图片我调整过像素都是436*700的大小。目前尚未清楚为什么会这样。
总结
虽然因为之前都有别的任务，是到最后比较匆忙地赶完了本次课程报告。但是确实是一次不一样的体验。我可以完全按照我的想法来搭建我自己的Web，让我比起设计什么桥梁监测系统之类的更有动力来完成这次课程设计。同时也切实帮我学习回顾了一次这学期所学到的知识点，收获很大。
但是遗憾也总是有的，因为目前的能力和时间有限，很多心里的想法都没能真正实现，只能是想得美了。以后要多多加强学习，前端现在也是互联网的重要部分，与后端平分天下。
741
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
