《Web应用基础》课程结业报告

实验准备

做的什么网页

本次实验内容是构建一个以自己的旅行经历和照片为主题的个人静态网站。使用了CSS框架中的BootStap，本网站包含了5个页面，其中有1个主页面和4个子页面。网页由文字，图片等构成。

为什么想到做这个？

经过8周简单的学习，对于js和ts代码了解还欠缺，所以选择做基于模板的静态网页。网页内容是根据自己的喜好选择的。

实验过程

开发过程

本次实验做的是静态网页，开发环境为vscode，把主网页大致分成5个部分，首页采用全屏背景，文本部位的渐出突出层次感，底部实现了向其他页面的跳转。
首页效果：

导航条均可跳转。

遇到的问题

1. 图片
   遇到问题最频繁的就是图片问题，我在首页最开始放图片时，理所当然的插入图片，就遇到了图片本身分辨率和给定的图片不一致的问题。还有图片加载不出来的问题，换成绝对路径就迎刃而解了。
2. Icon
   在页面制作是，很多地方加入图标会让页面变得好看，但是官网给的文档不方便查找，想找一个想要的图标。经过查找找到了一个免费网站，里面有很多直观的图标，且能一键复制代码。
   https://fontawesome.dashgame.com/#top
3. 文件
   我在底部跳转联系我们时就出现了找不到文件的问题，经过查找，把路径更换一下就能解决。

未解决的问题

在页面文字多的地方本来打算采用一个按钮来显示和隐藏一部分内容。
期待效果：


通过CSS代码的加入，效果基本能达到，但是与界面主体格式差别过大，而且遇到一个问题就是格式，我没能有效找到有效解决的方法，我就放弃了这个元素。但我觉得这个成功地话很好用，慢慢试探一定能找出解决办法。

总结

经过8周的学习，对web网页和前端开发有了一定的了解，学习了很多框架，了解到了前端一些强大的功能。通过做这次实验，体会到理论和实践的区别，看上去很简单的东西，其实背后有很多复杂的细节。
通过静态网页的制作，基本上对CSS模板的基本内容和一些基本样式有了个全面的了解，在制作过程中也遇到了一些困难，通过上网搜索得到了解决，学到了很多实践才能解决的问题。
做完这个网页，当网页很好的展示出来时，心里很开心，让我对前端领域渐渐产生兴趣，同时也看到很多优秀的人，知道现在的水平才是刚刚学到点皮毛，还有很多很多的东西要去学习。虽然课程结束了，但是学习web不会停止，希望自己能够做出更加优秀的网页。