免费创建个人相册网站（基础篇）

前言

作为 IT 时代社会主义接班人，拥有一个个人网站应该是大多数人的梦想，无奈构建一个网站所需要的技术却让很多人都望洋兴叹。但事实并非如此，如果仅仅只是想拥有一个简易的网站，充分利用互联网上的资源，每个人都可以实现这个梦想。这篇文章将带领大家零基础免费构建属于自己的个人相册网站。这篇文章分为基础篇和进阶篇。基础篇主要实现网站的搭建，进阶篇会讲解网站的优化。

注意事项

• 编辑完代码后一定要记得保存（Ctrl+S）
• 因为是免费空间和域名，所以可能手机会提示不安全，但电脑不会，这点忽略即可
• 这里主要利用网站模板，并不涉及多少代码

准备工作

1. 获取域名以及网站空间

进入 曼曼科技 注册

主界面

注册界面

注册完毕后进行登录，登录后点击免费空间，免费空间会有一条广告，不过不影响使用。

免费空间

点击立即申请后进入下面界面，这里 FTP 用户名必须填，而且需要记住。如果自己有域名的话可以绑定自己的域名。会自动进行解析，没有的话系统会赠送。

填写信息

开通后点击左侧的空间管理，可以看到自己的主机信息，包括域名，FTP账号及密码还有IP地址。

空间管理

这时点击你的域名会出现如下界面，代表空间申请成功，只是没有放内容。

网页界面

接下来到电脑访问申请到的网站空间，打开 我的电脑 在地址栏输入ftp://+IP地址

IP地址登录

回车输入下面界面，输入空间管理界面的 FTP 名和密码

登录界面

FTP界面

点开 web 文件夹，可以看到如下界面（后续的网站模板文件就需要放到 web 文件夹中），将 index.htm 文件删除。

web 文件夹

2.模板下载

下载网站模板 ：模板下载
下载模板后解压，然后将解压的文件复制到 web 文件夹下。

模板文件

这时再访问自己的域名，就可以看到模板的效果，鼠标放到照片上可以放大查看。模板效果如下：

模板效果

3.修改模板

接下来就要打造属于自己的相册了，点开模板文件里面的 img 文件夹和应用编辑器打开 index.html 文件 （注：编辑器可以选用 Sublime Text3）

img 文件夹

index.html

注意观察上面两幅图片红色框标记处，可以理解为代码 src 里的是 img 文件夹里的对应的文件名，所以可以把自己的照片放到 img 文件夹里，并把代码里的文件名改成自己照片的文件名，注意后缀名要正确。

比如我将 img 文件夹里的第一张图片删除，换成自己找的图片 枫叶.jpg，并改动 index.html 代码，注意保存

图片

代码改动

然后再次刷新网站，即可看到改变，第一张图片已经变成自己定义的了。

特别强调：文件改动记得在网站空间同步也就是 web 文件夹需要做出同样改变。

改动后

最后在说明一处可以改动的地方，可以改动红色框里面蓝色框的值，这是颜色的十六进制表示方式，可以自己搜索想要的背景颜色，如我比较喜欢淡蓝色，可以改为下面这样。

背景颜色

淡蓝色

刷新网页，可以看到背景颜色变了。

改变后背景

这篇文章给大家分享了如何获取免费域名和空间，但大家会发现仅仅靠这个，页面加载会非常的慢，下一篇会给大家介绍一个新的免费工具，对网站加载进行加速。还会涉及背景音乐以及视频播放。

所需链接

• 曼曼科技

• 相册模板下载

致谢

感谢 孙天骁 学长让我知道了有曼曼科技这个网站。