一、网站主题
我给该餐厅取名为“Restaurant”,进入网站后,将看到餐厅主页
二、网站介绍
本网站是以一个虚拟的西餐厅官网,在网站主页上可以查看菜单以及展示这个餐厅的一些菜品的基本信息以及介绍。
第二个页面“About”页面则是对餐厅的介绍
第三个页面“Menu”为菜单页面,这里将菜品进行了分类,可通过上方的导航栏进行分类切换
第四个页面“Blog”记录的是一些美食博客
“Reservation”记录了餐厅的预定事宜
“Contact”页面可以填写信息与餐厅联系
三、开发过程
参考了多个国外比较知名的西餐厅的官网,对官网的布局,页面的设计进行了拙劣的模仿,做出来一个页面简约的餐厅官网。
在构建网站初期,先对页面的布局进行了大致的设计,在纸上画出了各个页面的布局,以及大致计划了各部分所需要的图片和图片数量
而后在国外的图片网站进行了素材的的检索,选择了Bootstrap框架以及一些页面css模板来进行设计。
四、遇到的问题及解决方法
-
html中有些标签带有默认的内外边距或者间距,这些间距是我不需要的,同时在尝试用不同的浏览器中打开后发现大小还不一致,这就极大的影响我对页面的布局,
解决方法:取消他们的默认margin、padding值,将他们的值设置为0等。
-
嵌套关系出现了问题,打乱了整个页面的布局结构
解决方法:按照顺序将每个模块的div逐个注释掉,直到注释掉某个模块后页面显示正常,则最后注释掉的模块就是错误发生的模块
总结
通过本学期在《web应用基础》课程上的学习,我对web开发的基本知识有了更多的了解,了解了HTML,CSS,JAVASCRIPT在web中分别扮演者怎样的角色以及是如何生效的。
学习web课程需要大量的实践才能看出学习效果,在完成这个网站的过程中,暴露了我诸多知识的不足,即使是课上的讲过的内容,在实践开发的过程中没能清楚该如何达到我想要的效果,所以在不断试错,不断摸索 ,最终能够制作出自己的网页。而我对于动态网站的学习相对来说比较浅略,对Angular框架只有一个大致的了解,还不懂在开发中的运用,这是在以后的学习中需要补充的