通信软件开发与应用

一、创作主题——音乐

1、Home页面

整个页面的背景颜色我选为灰色，整体上颜色大致相似，比较融合。
在本页面主要介绍了和音乐相关的一些信息，在页面的开头有Turn On The Feeling With Music的标语，

随着页面的滑动依次展示的是即将到来的音乐节的时间和音乐的种类

接下来是对音乐节的种类的英文介绍和音乐节的种类

然后是对音乐人的一些介绍及他们名言的引用。我做了六个，这里会随时间的推移依次进行滑动。

2、DJs页面

本页面主要是介绍DJ的。主要分为两个部分，第一个部分分为两个小部分，在第一个部分的页面的左侧是对DJ这个名词进行了相关解释，右边附上了DJ的工作环境。

而第二部分我主要是插入了一些著名的DJ照片

3、Shows页面

在本页面主要展示了四个音乐，包括了创作人和其照片，音乐名，发行时间还有歌词，比如

点击播放按钮，就会播放该音乐，显示其音乐时长和播放的时长，此外还有音量控制和下载功能。

4、Scene页面

本页面用了六张照片主要展示了大型音乐节中DJ和人群的氛围。从照片中我们可以看到，音乐节是一个让人们欢乐抛弃烦恼的活动。

5、About页面

在本页面主要设置了一个背景视频，展示了逃跑计划乐队。并在视频的上方穿插了一些关于逃跑计划的介绍。

6、LAB REPORT页面

这个页面是用来存放实验报告的。

二、开发过程

首先要有一个所要进行设置的模板，在此基础上，更改或添加所要实现的功能。将模板导入Visual Studio Code进行自己页面的设置。
在我们所学的知识基础上，为了实现页面间实现跳转，我做了多个页面，在每个页面内用个一超链接即可实现，在每个页面都链到各个网页在每个页面的导航栏内就可实现页面的相互跳转。

音乐的功能的实现代码：

<div class="player">
              <audio id="player2" preload="none" controls style="max-width: 100%">
                <source src="./images/1.mp3" type="audio/mp3">
              </audio>
            </div>

背景视频的实现：

<video id="v1" autoplay loop muted>   
<source src="./images/1.mp4"
type="video/mp4"  /> </video>

另外，还要编写CSS

*{  
            margin: 0px;  
            padding: 0px;  
        }  
        video{  
            position: fixed;  
            right: 0px;  
            bottom: 0px;  
            min-width: 100%;  
            min-height: 100%;  
            height: auto;  
            width: auto;  
            /*加滤镜*/
            /*filter: blur(15px); //背景模糊设置 */
            /*-webkit-filter: grayscale(100%);*/  
            /*filter:grayscale(100%); //背景灰度设置*/  
            z-index:-11
        }  
        source{  
            min-width: 100%;  
            min-height: 100%;  
            height: auto;  
            width: auto;  
        } 

其余功能的实现，课程中我们都所学过。

三、问题及解决

在开始时，我对网页间的跳转以及音乐的添加有所不懂。经过网上资料的查阅，对其设置以及实现有了学习，其实就是在建立在我们课堂上所学的内容上，只要将其格式进行更改就大致可以实现自己想要的功能。
所未解决的问题：在其所示的照片中，我只显示了其鼠标点在上面变换其照片颜色。原本想点击照片时，跳转到别的页面上去，由于网上所给的代码还没有看懂，所以就没有加上去。

总结

经过一个学期的学习，在老师的讲解下对网页的制作有了一定的认识和了解。再加上对教程有一个实践操作，基本上熟悉了html、css、JavaScript、bootstrap等各部分在网页制作中的功能。其唯一让我觉得有点遗憾的是，未能学会动态网页的制作，即Angular。在配置环境中遇到了太多问题，由于自身原因未能坚持学下去。但学无止境，我会在接下来的时间里继续学习对网页的制作包括自己还没学习到的知识，通过这中途径来加强自己的前端制作能力。