​

《web应用基础》结业报告

​

1、实验内容

本次实验的内容是一个介绍RNG的静态网页，包括：

1.关于RNG的简单介绍；

2.RNG的战队历史；

3.RNG战队现役队员简单介绍；

4.RNG战队的文化发展；

5.RNG战队退役和现役的重要成员介绍。

2、开发过程

使用html基本知识、MDB框架和自定义css进行开发：

1.首先分析实验内容需要拆分为几个部分，以便于确定制作页面的数量；

2.确定页面数量后制作导航栏(每个页面都相同)，每个导航栏的元素对应一个页面；

3.开始制作第一个页面：将一张图片作为背景放入css并调整在各种浏览器中显示的方式，使用遮罩使背景变暗以方便文字的显示；

4.制作第二个页面：列举出RNG战队建队初至今的队史，每一段都配有一个图标，能明显看出当年战绩如何；

5.制作第三个页面：该部分使用图片加上文字的说明，简单明了；

6.制作第四个网页：该部分制作了一个轮播来轮播RNG的几场胜利场面；

7.制作第五个网页：该部分采用与第二个网页相同的制作方式较为详细地介绍了RNG建队至今地两个重要人物；

8.制作除第一个网页外的其他网页时都使用了弹性格子的布局方式，使得页面看起来更舒畅。

3、遇到的问题与解决方案

1.问题1：在制作第二个网页时，页面标题被导航栏遮住，影响页面美观；解决方案：将标题的padding上边距调整为50px；

 

2.问题2：刚开始做好所有页面后出现无法跳转的情况；解决方案：删除<script type="text/javascript" src="js/mdb.min.js"></script>后问题解决，但原因未知。 

4、未解决的问题

图片的分辨率未统一。

5、总结

1.实验总结：

本次实验内容较简单，但原理理解不是很容易，套用模板就能做出来；而关于动态网页的制作，因为学习时间尚短，而且难度较高，所以在做本次实验时未有考虑，但接下来的数个其他课程的实验中会用到动态网页，所以我也会加紧练习，以备不时之需。

2.课程总结：

对我来说，本课程难度较易，除了js和动态网页的内容外，其他内容还是比较简单的；在本课程的学习中，我掌握了vs code的使用，html，css等的基本用法和MDB框架的基本应用，接下来也将尽快掌握动态网页的开发与全栈开发。