网站规划书(Our)

隔离在家,每天就想着怎么折腾 。之前在做 blog 主题的时候看过了不少的网站找参考样式,当时就想着,这些网站可真是好看,如果我也能做一个就好了。最近又赶上了老婆的生日,于是两者一结合,就打算做一个纪念网站,当作生日礼物(虽然后来因为自己半调子的能力,没有能够在生日之前上线 )。网页规划需求确认在开始准备施工之前,我其实已经看了好多差不多类型的页面,也大概搞清楚了自己心里想要一个什么样子的产品。页面简洁,不要有大量的装饰。个人感觉这样比较大气 能够自适应移动端,有设计感,不要太简陋,如果可能,适当加一些动画。因为自己对前端一点也不懂,只能靠自己半调子的认知瞎搞搞,很多的需求也是自己看了别人的网站,觉得自己也应该有这样如此云云。内容规划在确认了网页的样式需求之后,就是考虑在网页上放点什么。自己之前在情人节的时候,给老婆做了一个小小的纪念页面[1]。现在又要搞一个,就想着把这两个整合起来,放到一个框架下面,也方便日后再有其它的项目可以加进来。另外就是我们两个人一直想把自己这一年做过的菜,整理出来,做成一个类似菜单的东西,到时候可以展示出来,算是给自己的生活增加一些仪式感。再加上我们两个日常拍的照片,平时也就是偶尔发一下朋友圈,可能也需要一个集中的地方。于是心里也就有了个数,要在这上面展示啥。情话版 项目展示照片区旅游照片日常照片大概就是这样一些内容,其后就是开始做施工准备。知识储备响应式Web设计对的,你没有看错,我做好了需求与内容确认之后,首先做的就是找了一本讲自适应网页编写的书看了一遍 。 书名是:《响应式Web设计+HTML5和CSS3实战 第2版》大体上了解了下一些术语和常见的操作,省得自己在做的时候,在一些小问题上花费大时间(其实后面在操作的时候,还是在几个小问题上,浪费了不少时间,由此可见术业有专攻不假)。Bootstrap 响应式框架为了实现响应式的网页,我这次使用了 Bootstrap 这个框架,因为对新手比较友好,容易上手且外行也能做出一个像样的网页出来。为了方便使用,也在开始施工之前去学习了一下。学习比较快,主要是 Bootstrap 一些类的定义。具体施工过程中的坑很详细的网页编写我就不写在这里了,有需要的朋友可以点击这里查看。这里我主要记录一下自己在学习以及编写这个网页的时候用到的一些 Js 库和遇到的一些坑,为以后再做相同工作减少阻碍。用到的 Js 库因为我毕竟是一个彻头彻尾的外行人,所以在开始施工的时候,采用的最原始方法就是选定一个网站,开始照着这个网站做。就在我分析这些网站的代码时,发现其中有一些部分很奇怪,非常像是「生成」的内容。仔细研究之后发现,对于同样的需求,已经有很多成熟的解决方,很多网站也没有自己去「造轮子」而是直接使用了这些 Js 库。但是由于我自己是一个非常彻底的外行,看到一些效果的时候,不知道是基于其它库实现的,结果我就掉进了一个大坑:扒 js 代码去研究咋实现的…… 我大概看了几天的 Tween、fullpage 的代码。 此事不表,我列一下我主要用到的库有哪些:Bootstrap 用来实现响应式的框架Fullpage 用来实现那种整页展示效果nanogallery2 实现图片排版,轮播ScrollMagic 整页滚动效果 可能和 fullPage 效果差不多,就用 fp 代替了slick 用于图片轮播, 后来使用 nanogallery2 代替。使用这些库之后完成的效果分别是这样的:Fullpage:nanogallery2:其实如果一开始就知道使用这几个库,那整个过程相当简简单单,读完每个库的 Documents 之后,就可以非常快速的完成自己想要的结果,毕竟这几个库都是使用广泛且完成度相当高。几个坑完成比完美更重要第一个坑就是 Tween(GSAP) 这个动画插件,看到了别人成品极其炫丽的样子(我参照的网站可以点这里查看,我不禁也动了念头,但是搞了半天,发现这个库的入门成本还是挺高的,比较光是画 svg 的路径可能就直接搞死我。最终的结局就是我在研究了两天之后,被迫放弃。这个库可以放到以后网站升级的时候去研究。我当时已经在这个库上花了不少时间,并且我感觉自己不是一时半会就能使用它,所以不得以放弃。先确定是什么,更确定怎么做再一个坑就是我一头插进 Tween 和 Fullpage 的 js 代码中去看具体实现的方法,其实不是我自己对自己的能力高估了,只是我没有想到,这些代码竟然是这样一个庞大的库里的 (主要是这些网站不是引入 js 文件,而是把所有的 js 文件都整合成了一个文件,所以我也不知道其中的代码哪一部分是啥)。后来我发现,这些库里的代码其实都是有比较明显的特征,或者是函数名,或者是报错信息。从这里我得到一个教训,以后再做类似的事情,我得先找到这些特征的地方,搜索一下,确定这是什么,再去想怎么解决。Fullpage 与 nanogallery2 冲突其实这个问题是一个真正的技术问题 上面两个都是我自己血的教训。但是这个问题也已经被很多人发现,并且官方也给了解决方法。这就是使用受众多的库的好处之一,很多坑别人都已经趟过一遍 。简单点说就是 Fullpage 和其它使用 Scroll 监听器的插件会冲突。解决方法个人感觉不太优雅,但是官方也就只给了这一种方法。具体可以见此处。我自己也没有心情去看看 nanogallery2 的代码做修改,就按照官方的解决方法来了。如果没有记,这个纪念页面的开发者应该是我当时学校计院的一个学长。当时此网页一出,就引大众羡慕。但其后事情发展实在让人叹息。当时在日月光华上也是十大,我虽然围观过,但是对内情知之不详,此处不表。 ↩︎

本文出自快速备案,转载时请注明出处及相应链接。

本文永久链接: https://kuaisubeian.cc/40576.html

kuaisubeian