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

一.设计思路

本次实验内容是构建一个以历史为主题的静态网站。使用了CSS框架中的MDB，本网站包含了7个页面，其中有1个主页面和6个子页面。网页由文字，图片，视频等构成。

二.开发过程

网页设计伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得越来越重要。通过棋歌网的学习以及老师的讲解，我学习了建立网站和制作网页的知识，对网页制作的基础知识也有了一定的掌握。本次实验我选择的是静态网页的开发，使用的是VSCode开发环境。该网页的制作首先是建立HTML（超文本标记语言）文件，HTML文件的内容决定了我网页需要展示的东西，任何网页的背后都是一个HTML文档。HTML文件中包含head头部和body正文部分，该网页的主页的HTML文件名为index.html，在该文件的头部，我放置了网页的title以及布局排版将要用到的CSS文件和跳转页面需要用到的javascript脚本；在该网页的主体部分，我将它分为三个部分，一个是该页面的主页部分，在该部分，我使用了h3和h4标题用于展示该网页的主题内容；第二部分使用了h2二级标题和pre（保留预设格式的文本标签）展示一首《中国华夏史》；第三部分使用卡片用于展示朝代的一部分信息，每个标签都添加一个按钮，用于跳转到每个朝代的单独页面展示，在这里我使用了onclick="window.open()"语句用于跳转，在这里卡片展示的大小，我使用了响应式，在大屏幕时，可以两个卡片展示在同一行，而在中等及以下屏幕时，一行只能展示一个卡片，为了达到这种效果，我在类中使用了col-lg-6，col-md-12等语句。在该页面的展示中我引用了bootstrap.min.css, bootstrap.css, mdb.css, mdb.lite.css, mdb,lite.min.css等文件，同时新建了一个style.css文件用于添加自己需要的一些CSS样式。除了主页面以外，另外的6个子页面存放在javascript文件里面，和主页面共用CSS文件，在这些页面中，我运用了大量图片，这些图片统一存放在img文件夹下，在这6个子页面的排位布局中，我使用了同主页面相同的方式，都包含了一个导航条，用于定位页面不同的板块，定位的实现基于锚点的设计，锚点也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以在长页面内实现跳转，使用过程为先使用id（id值必须唯一）属性生成某元素的锚点，再使用超链接指向该锚点即可。在该网页中我还添加了视频，通过网络学习，使用

<video width="1204px" height="690px" controls="controls">

<source src="../img/mda-kjj6f1r171hv57yg.mp4"type="video/mp4"></source>
<source src="public/video/test.ogg"type="video/ogg"></source>
</video>

语句用于将视频放置在页面中。

三.遇到的问题及解决方法

在页面的制作过程当中，我原本打算这些页面跳转的时候能够保持导航条不变，只在页面的下面部分进行跳转，结果没找到办法解决，于是，我在每个页面的body部分都使用了相同的代码，用于导航条的展示。由于我将子页面的html放在了javascript文件夹中，而图片统一放在img文件夹下，因此，我在使用图片时由于地址写错了，导致无法加载图片，通过这个问题，我对./（本级目录）和../（上级目录）的印象更加深刻。在一些文字介绍中，我想要使文字能够包围图片，使得显示能够更加美观，但没能找到合适的方法，于是我在显示时，根据该页面在浏览器的实时现实中，观察文字和图片显示的位置，通过对文字的截取，将图片和文字安排在同一行中，在显示时会有一些违和感。在页面现实的时候，由于图片太多，页面加载不及时，会需要等待很长时间，图片大多为网图，大小已经不大了，但加载还是需要很长的反应时间，这个还需要深入学习图片的编码可能会解决这个问题。

四.总结

通过8周的学习，我们基本了解了web开发的框架。但理论和实践是有着区别的，每次都是听着看着老师怎么做，当自己要将这些知识运用起来时，发现根本不熟系。本次静态网页的制作沿用了老师的布局风格，缺乏创新，在制作过程中，虽然遇到了一些困难，但在网络上有很多学习资料，通过查找学习，就能够解决大部分问题。通过这次的学习，我对web设计的知识有了更加深刻的了解，我对web开发产生了浓厚的兴趣，尽管自身依然存在着很多不足，但我相信通过进一步学习，我能制作更加复杂更加美观更具创新的web页面。web课程虽然结束了，但它绝不止步于此，我会继续学习web的相关知识，以后能更加熟练地运用web技术。