前言
作为 IT 时代社会主义接班人,拥有一个个人网站应该是大多数人的梦想,无奈构建一个网站所需要的技术却让很多人都望洋兴叹。但事实并非如此,如果仅仅只是想拥有一个简易的网站,充分利用互联网上的资源,每个人都可以实现这个梦想。这篇文章将带领大家零基础免费构建属于自己的个人相册网站。这篇文章分为基础篇和进阶篇。基础篇主要实现网站的搭建,进阶篇会讲解网站的优化。
注意事项
- 编辑完代码后一定要记得保存(Ctrl+S)
- 因为是免费空间和域名,所以可能手机会提示不安全,但电脑不会,这点忽略即可
- 这里主要利用网站模板,并不涉及多少代码
准备工作
1. 获取域名以及网站空间
进入 曼曼科技 注册
注册完毕后进行登录,登录后点击免费空间,免费空间会有一条广告,不过不影响使用。
点击立即申请后进入下面界面,这里 FTP 用户名必须填,而且需要记住。如果自己有域名的话可以绑定自己的域名。会自动进行解析,没有的话系统会赠送。
开通后点击左侧的空间管理,可以看到自己的主机信息,包括域名,FTP账号及密码还有IP地址。
这时点击你的域名会出现如下界面,代表空间申请成功,只是没有放内容。
接下来到电脑访问申请到的网站空间,打开 我的电脑 在地址栏输入ftp://+IP地址
回车输入下面界面,输入空间管理界面的 FTP 名和密码
点开 web 文件夹,可以看到如下界面(后续的网站模板文件就需要放到 web 文件夹中),将 index.htm 文件删除。
2.模板下载
下载网站模板 :模板下载
下载模板后解压,然后将解压的文件复制到 web 文件夹下。
这时再访问自己的域名,就可以看到模板的效果,鼠标放到照片上可以放大查看。模板效果如下:
3.修改模板
接下来就要打造属于自己的相册了,点开模板文件里面的 img 文件夹和应用编辑器打开 index.html 文件 (注:编辑器可以选用 Sublime Text3)
注意观察上面两幅图片红色框标记处,可以理解为代码 src 里的是 img 文件夹里的对应的文件名,所以可以把自己的照片放到 img 文件夹里,并把代码里的文件名改成自己照片的文件名,注意后缀名要正确。
比如我将 img 文件夹里的第一张图片删除,换成自己找的图片 枫叶.jpg,并改动 index.html 代码,注意保存
然后再次刷新网站,即可看到改变,第一张图片已经变成自己定义的了。
特别强调:文件改动记得在网站空间同步也就是 web 文件夹需要做出同样改变。
最后在说明一处可以改动的地方,可以改动红色框里面蓝色框的值,这是颜色的十六进制表示方式,可以自己搜索想要的背景颜色,如我比较喜欢淡蓝色,可以改为下面这样。
刷新网页,可以看到背景颜色变了。
这篇文章给大家分享了如何获取免费域名和空间,但大家会发现仅仅靠这个,页面加载会非常的慢,下一篇会给大家介绍一个新的免费工具,对网站加载进行加速。还会涉及背景音乐以及视频播放。
所需链接
致谢
感谢 孙天骁 学长让我知道了有曼曼科技这个网站。