一.设计思路
本次实验内容是构建一个以历史为主题的静态网站。使用了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技术。