本身怎么建网站?转载

标签:本身,怎么,建网,网站,转载 发布时间:2017年12月17日 点击1883

今天介绍的是一位仅18岁,年纪不大但艺惊四座的有为少年@DandyWeng ,是一个真正的 Homeschooler。兴趣摄影、计算机和数码产品,他的小我简介上写着:整个世界都是我的黉舍,学本身之所想所爱。自由的身心定能使我成为一个一向朝前行走的行者 : )这是他的文章,分享关于本身创建第一个网站的过程:


 

我小我网站(www.esmo.cn/dandyweng3564)的 2013 版上线已经两个多月了,没想到这个网站受到了不少人的喜好和专业设计师的抬爱。上线第一天,单日访问量超过了建站三年以来的总和。上线后,我一向都想写一篇博文,简述一下网站的建设过程。但由于种种缘故原由,直到今天才偶然间写这篇博文。

上线以来,常常都有人通过 Email 或微博问我:”你的网站是怎么做出来的?”,如许的题目,还真不是言简意赅就能说清楚的,盼望这篇博文能够提供一些答案吧。

 

某一天的搜索引擎入口记录里,还见到了如许的关键词

我有个风俗,做网站到每一个关键点时都会截图留念,所以如今将所有图片贴在一路就可以展示出一个比较延续的建设过程。

建设过程

基本构想

国内外许多网页设计师都建议在开工之前先画草稿(线框)图,但我一样平常不用这种方法,只是在一个记事本里记下在脑海里一闪而过的想法。由于每次计划做 一个网站的时候,我脑子里就已经浮现出了它也许的样子,虽然很模糊,但我觉得它没需要太清晰。许多创意的灵感都是在做的过程中发现的,所以只要脑子里有一 个也许的方向就可以开工了,详细的细节部份一边做一边想即可,没需要一开始就把本身的思维给框住。根据也许的构想,我先整顿出了一个也许的制作流程:

基本构想 → 设计规划 → 框架构建 → 优化笔墨 → 细节粗调 → Retina 处理 → 相应式处理 → 动画制作 → 细节微调 → 回迁上线 → 离线缓存和 Web App → 多语言版本

设计规划

谈到这个网站的设计,就必然要谈到 Bootstrap。这是我首次使用 Bootstrap 框架制作网站。其实开始我一向在夷由要不要用它,由于它预置了许多 CSS 样式和框架,用起来太方便了,以致于我觉得会削减那种完全本身设计制作的成就感。后来因为开发时间有限,就采用了它,但重要只使用了它的框架体系,界面元 素部份以本身写的为主。页面由七个自力模块组成百度关键词,按顺序分别是:简述、旅行、摄影、创造、Apple、联系和关于,每个模块都有它本身的特点。这种模块化 的设计也方便做相应式处理。

框架构建

解析测试版域名,挂一个简单的页面测试

引入 Bootstrap,测试

研究了一下 Bootstrap 的文档,做出了也许的框架,开始做地图的部份

细节粗调

这一步把所有的元素都摆到位,实现各元素基本的功能。

渐渐录入地图的坐标点数据

坐标点数据录入完成,简单做一下完美地图的细节

给 header 换个背景看看

用简单的笔墨先拼出各个模块也许的样子

当时的记事本草稿

Retina 处理

Retina 也就算高清视网膜屏幕的支撑,作为一个”果粉”,这点当然不能放过。技术方面,我先试用了一些 jQuery Retina 插件,但普遍都有加载速度慢的题目。看来照旧不能偷懒,只有本身写。思路是用 javascript 检测 devicePixelRatio,若是 Retina 屏幕就将值写入 Cookie,然后刷新页面,再用 PHP 读取该 Cookie,输出对应的图片(高清或通俗)。在 Retina 的 Macbook Pro 上测试还碰到了各种各样的奇葩题目,逐个修复后最终结果确实不错。后来发现 iPhone 等小屏幕 Retina 设备不必要使用针对 Retina Macbook / iPad 制作的大尺寸图片北京楼顶大字制作,只要将通俗尺寸的图片缩小即可,所以再给 JS 增长了检测 screenwidth,PHP 再做响应的调整,进步了小屏幕 Retina 设备的加载速度。

相应式处理

其实我在相应式设计开始流行之前,就已经在试着应用了,到如今可以说已经比较认识了,所以没有碰到太多技术题目。

动画制作

动画的设计和制作花费了不少时间,既要有特色,又要够酷炫,又不可浮夸,还要考虑性能和兼容性等等。原本还设计了一些动画,但经过反复调试,发现容 易使在某些设备和欣赏器崩溃,于是又移除掉了。但这个联系体例的交互照旧我比较喜好的,在一个邮箱地址中隐蔽了几个不同的联系信息,可以分别切换表现。

细节微调

这里优化了不少细节,譬如字体、字色、阴影、纹理、滚动条等等,均是使用 CSS 3 来实现的,包括题目笔墨的渐变和倒影。最后 header 背景照旧选了我在甘南的尕海拍的一幅作品。

有一些略为浮夸的设计也换掉了,比如下面这两个就是被换掉的头像彩色阴影和 Apple 模块的角标

回迁上线

测试完成,从测试服务器迁回主服务器,解析域名。把网站发给身处各地、使用不同网络的同伙们测试。

离线缓存和 Web App

说真话,这俩功能其实没有什么现实的意义。这毕竟不是什么功能型网站,绝大多数访客都只会访问一次,而这两个功能都是经常访问时才能发挥作用。但是 考虑到这两项技术我已经在别的网站已经应用过了,相对比较认识,搬到这上面来也用不了多少时间,所以顺手就做了,让大家体验一下 HTML 5 离线缓存在一秒内加载完一个网页是多爽的一件事。考虑到旅行模块的地图必要动态更新,所以没有缓存它,而是用 AJAX 在页面载入完成后再加载并渲染地图。

多语言版本

一开始的计划是要做多语言版本的,包括香港粤语繁体版、台湾正体版和英文版,但到如今还没偶然间制作(其实也没啥需要,嘿嘿)。

常见题目 FAQ

最近常常有人问我一些题目,我在这里按题目出现的频率排序,一路回答一下吧。
假如你还有其他题目,也可以在此评论提出。不过假如是技术方面的题目,建议照旧先在网上搜索一下吧陶瓷加工机械,如许可以找到更周全的答案。

网页设计是怎么学的?

在这方面,我没怎么读过相干的书,只是先学习好基础知识之后,参考一些良好网站的代码,碰到不懂题目的就上网搜索一下。我对感爱好的事物有着较大的 好奇心,而且由于我是一个 homeschooler,能有比较多的时间来学习这方面的知识。不过,我毕竟不是专业设计师或程序猿,只是兴趣而已,并没有体系地学习过这方面的知识, 在学习其他的知识和技能也占用了我不少时间,所以我的程序代码(分外是 JS 和 PHP)写得真是一样平常般,还需进步,见笑了,嘿嘿。

网站用了多长时间开发?

我的小我网站每年都会彻底地重新设计和制作一次。前几年的更新一样平常是在过年前完成,但今年事情太多,拖至四月中旬才开工,直到五月中旬才上线。平均天天也许忙活一两个小时,这期间还心血来潮做了一个智能手表 Pebble 的应用下载平台”Pebbapps“,后来发实际际意义不大,虚耗了不少时间。真正花在小我网站制作上的时间应该在 20 多小时。

网站是用什么软件做的?

其实,理论上只要能进行文本编辑的软件都可以用作网站开发。我曩昔是用 Windows / Mac 自带的记事本,简简单单,没有复杂的功能,没有代码提醒器也养成了我写代码比较严谨的风俗。后来做的网站程序类的代码多了,记事本就有点不太够用了,就开 始用 Office FrontPage,至少代码能上色和纠错了。后来在 Mac 上用 Dreamweaver 风俗之后,在 PC 上也开始用了,但也很少用那些高级功能,最喜好它的一点就是可以把编辑器调成黑色背景,珍爱视力。

网站的加载速度怎么这么慢?

这有两个缘故原由:
其一,网站自己的前端性能确实不够好,也是网站采用大量图片和动画的代价之一。我曾在加载速度和展示结果间做过权衡,后来考虑到这毕竟不是功能型网站,大 多数访客只会访问一次,所以照旧将结果放在第一位。后来我也发现一些可以进步加载速度的改进方法,但如今临时还没偶然间实现;
其二,由于我照旧未成年无法备案,无法将服务器放在国内,所以只能放在国外,并且它只有一个节点,所以我所有网站的访问速度都普遍较慢。

增补:9 月 8 日做了一个小更新,启用镜像 CDN 加速,优化了前端性能,加载速度如今基本上已经没有什么题目了。

网站能开源吗?

因为这个网站没有多少必要动态更新的内容,重要是曩昔端为主,没有多么复杂的后台,数据库也只是用于统计访问数据而已,所以用欣赏器的开发者工具就能几乎看到悉数有效的代码。
这个网站的代码可供学习或参考,但最好不要直接整个复制喔,那样学不到什么东西。并且盼望你能注明来源、不要外链图片。

网站的地图里为什么没有台湾?

曾经主页上的地图里没有台湾,后来考虑到这个本来用地图为背景的模块、仅用于标示我旅行足迹的”地图”会刺激一部分爱国人士的神经,照旧把宝岛台湾加上去了。

你真的才 17 岁?

忸捏忸捏,我也盼望能再大一点。但这个照旧假不了的,我又不是天一关键词优化,嘿嘿嘿。