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

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

一.做的什么

本次网页项目做的是一个关于动漫《青春变形记》的网页分享。介绍了动漫的主角，情节，和一些基本信息。

二.开发过程

一)确定网站主题

1、分析网站的功能，实现五个页面之间的相互跳转。
2、分析网站的主题，选择符合网站的主题，确定要写动漫主题

二)搜集材料

1、收集相关图片、文字、视频等资料

2、在文件夹下images文件夹存放网页界面图片(图片类型
为jpg、jpeg、gif、png)。

三)规划网站

1、网站的结构(即目录结构)，首页名称(index.html)、子页面名称。

2、版面布局，决定答题页面呈现结构样式。

四）网页编写

1.创建一个文件夹，命名为项目名字，然后在文件夹里再创建一个首页文件：index.html，一个装css的文件夹：css：文件夹内再创建两个文件一个装首页样式的css文件、一个装公共样式的css文件，一个装图片的文件夹：images，如果还需要js，再创建一个js文件夹。一个设计字体的文件夹font。
2.从头部开始，设计网页的目录，这个目录是公用的。
3.分析页面的结构，划分页面区域。确定版心宽度，后面布局以版心宽度为基础。
4.编写公共样式css文件，如清除外边距、清除a标签下划线
5.编写网页，引入css文件，边写边添加css样式。

三.遇到的问题

1.主题的选取也是浪费了很多时间，很多主题都是做到一半又放弃了。
2.设计网页时，用原本的字体感觉并不符合我的动漫主题，想设置一个特殊的符合主题的字体。
3.区域布局：对于盒子的宽度、内边距、外边距设置有一些问题，想要把目录定位在页面最上方。
4.css特性，优先级层叠性：设置的一些css样式会继承，或者没有考虑到优先级，导致呈现的效果不好。
5.图片格式大小和清晰度，在网上下载的图片放到网页中变得很模糊，或者是太大了。展示图片的时候，因为每张图片的大小不一致，导致在网站上面，文案和图片都没有对齐，很难看。
6.有些内容写了但没有显示出来。在写一些内容的时候并没有出现在页面中，又重新设置了一个标签尝试，可以显示，但换回原本标签后有没有显示。
7.英语水平不高，在github上面挂载网站困难。

四.如何解决

1.字体问题：为了解决这个问题，查询了一些关于特殊字体的设置的资料，参考CSS 引入字体。发现可以通过使用外部的一些特殊字体样式来设置，然后在网络上寻找了字体文件，将其放入了font文件夹，然后在css中引入。
2.css特性：对一些继承的特性，我在当前的标签中直接设置了样式，对于一些确定重要的样式增添了！important。使其不用受优先级的影响。
3.网页布局：通过查询资料参考定位解决了。
4.挂载网页解决办法：使用github一直不能解决，重新查询资料多种方法手把手教你如何将自己做的网页做成网络链接，用七牛云解决了这个问题。

五.哪些未解决

1.图片问题一直没有解决：只能重新找一些大概符合的照片放到网页中。例如网页中在基本信息——演艺经历中的一张关于《包宝宝》的图片，一直找不到合适的清晰的照片，只能不了了之。
2.一些内容写了但不显示，比如我在写作者介绍时，用的div的类名本来与基本信息的div的类名不同，但写出来后却没有显示在页面上，没找到问题，所以改了和基本信息的div的类名一样。
3.在首页的图片显示中图片的大小不一致没有得到解决，最终找了大小差别不大的图片。

六.总结

     通过这为期8周的web学习，让我对前端的编程有了一定了解，前端虽然入门容易但是想要深入学习也需要为之付出巨大努力。学习网页设计需要耐心，如果你没有耐心，你学不好网页设计，因为当你碰到一个问题时，如果不能立刻得到问题的答案，你可能需要很长时间去解决。
    同时对网页制作的过程与有了一些基本了解，对网页制作的基础知识也有了一定的掌握。知道了在设计网页时的一些重要内容，例如：
  1.确定网页设计的内容。一个优秀的网站要有个明确的主题，所有页面都是围绕着这个内容来制作，有了明确的内容对网站有很重要的作用。
  2.制作网站：具体的规划网站时，尤其有很多页面的时候，特别需要把这个架构规划好，还必须考虑每个页面之间的链接关系。
    当然，在设计过程中还出现了很多的问题，但通过看书，上网查询，请教同学等方式，不断的学习、解决、提高，设计出的网页不论是外观还是内容，都在不断的进步、改善。可以说在自己动手，搜索的过程中，网页设计水平得到了很大的提高。希望今后可以设计出更加精美的网页。