静态网页相册制作-记录你们的快乐时刻

看到一些情侣，用软件制作炫酷的相册集记录美好时光，煞是让人羡慕！|ू･ω･` )

不巧前段时间，本科的好兄弟透露想专门设计个网站来记录他和他妹子的美好时光，这个是真的强！一时兴起，想看看网上的程序员们都如何展示他们的“骚气”的，结果真的是被秀到了(๑•ω•๑)！

那么作为一只“小白狗”(没技术的单身狗⁄(⁄⁄•⁄ω⁄•⁄⁄)⁄)，我们如何制作炫酷的相册呢？

作为小白，我们肯定是不能完全自己写代码的，我们要学会利用别人已经做好的东西，把它们有机的结合在一起，就可以做出不错的，又具有自我特色的相册了！不多说，先看图！

怎么样？是不是还可以ヽ(•ω•ゞ)。

小编不是学计算机、前端开发的，只是懂一点点HTML，其他什么js,CSS什么的都不懂。所以只要你像小编一样懂点HTML，然后多花点时间，就应该可以做出和这一样甚至更炫酷的相册来！

接下来我就以上面那个相册为例，简单说说我是怎么做的。

只能说思路，代码我不会(*/ω＼*)

整个制作流程如下：

---

收集素材

---

首先我们要在网上收集大量的素材，相册的、背景特效的、字幕的等等。素材最好找些稍微简单的，别弄些复杂的，要不然用不来。素材要有源码，因为我们后面还要稍微改下代码的。就上面的相册我就简单用了两个素材，一个相册的，一个萤火虫背景特效。

找素材其实还是很花时间的，这里列几个我收集素材时发现的几个网站，这上面有很多网页特效：

---

a5下载

http://www.a5xiazai.com

站长素材

懒人之家

---

整合特效

---

收集好素材后，我们就需要将它们整合到一块，然后更换里面的内容。这一步呢，假如你的素材代码简单，你能够很快了解其结构的话，就简单了。我们不需要知道源码的其他东西，我们就把它看成一个函数，找到“输入”就OK了。像上面的相册，我们只需要知道它是如何定位照片的，然后更改一下路径，修改一下文件名就行了。然后将萤火虫特效的整合到相册这一步，就需要知道点HTML的知识了。像这种特效，其结构比较简单，我就把萤火虫特效的代码复制到相册源码的特定位置（关于样式的代码放在样式那块，关于结构的代码放在结构那块），居然就OK了(o°ω°o)！当然这里主要是我选的素材比较简单，假如你的素材复杂一点，那你就要多花点时间研究研究，或者求大佬帮忙了。这里我们还可以加上背景音乐，这个很简单，一句话：

<embed src="music.mp3" hidden="true" autostart="true" loop="true">

反正诀窍就是：把它们当成函数，只需要了解输入。

---

网络发布

---

在做好了相册之后，我们要把它们发布到网上，这样我们只需要提供网址，别人就可以访问你做的相册。这里我是直接把源码上传到Github上，具体流程如下：

1.点“+”，选择“New repository”

2.输入仓库的名字，这里是"Album".

3.勾选“Initialize this repository with README”

4.点击仓库的“settings”选项

5.在跳转的页面中找到“GitHub Pages”,在source选项中选择“master branch”.操作完后界面会刷新出一个连接（见下图红框处https://cugzhanglihao.github.io/Album/），记住这个！

6.返回仓库code页面，点击“Upload files”,将我们静态网页的所有文件上传上来。

7.上传完后，如下图这样。（这里有个文件夹，我是通过"Create new file"创建的，文件夹内是所有的照片）

8.最后在浏览器中输入：前面的链接 + index.html（这里根据你上传的文件输入，我的相册源码在index.html文件里）

大功告成！！！

是不是很简单？赶快动起来，记录你们的美好时光吧！

最后我发现我用手机打开时，好像页面畸形了(つД`)。呃，小白我是不知道怎么改了，你们可以找会的人帮忙解决，我是没啥美好时光需要记录ε(┬┬﹏┬┬)3

PS：（文章是自己早期读大学时写的，现在搬到CSDN上。现在回头想想，感觉当时自己还是很有趣的啊，哈哈哈）