不懂代码，如何制做漂亮的404页面【新手简易教程】

404是用户在访问页面时，搜索引擎常返回的状态码，常见的还有200，301，302，500等。搜索引擎经过http状态码识别网页状态，404状态码，常指所访问的页面不存在或已被删除。

 

404页面，是用户访问不存在内容或者已删除网页时，呈现给用户的界面，又称404错误页面/404-Not Found。

 

 

404页面常见误区

 

①网站没有设置404页面

 

404错误页面对用户而言：告诉浏览者其所请求的页面不存在或连接错误，同时引导用户使用网站其余页面而不是关闭窗口离开，消除用户的挫败感。

 

对SEO而言，没有404页面，会增长搜索引擎蜘蛛的丢失率，也会增长网站的跳出率，形成糟糕的用户体验。

 

②404页面没有返回网站的连接

 

好比某多多的404页面，只有404 Not Found，没有任何返回网站的连接。

 

搜索引擎蜘蛛是顺着超级连接爬取的，不管是横向爬取仍是纵向爬取，没有返回连接，用户回不去，蜘蛛也回不去。只能进不能出，有来无回，蜘蛛就是这样被坑死的。

 

对搜索引擎友好的页面，须要有返回网站的连接，能够是首页、栏目页、活动页，也能够网站的导航栏。

 

③404页面使用了强制跳转

 

某品会的404页面使用了强制跳转，跳转到首页。实现跳转功能的方式有多种，meta标签、30一、js等，但不管你用什么方式实现跳转，都对搜索引擎不友好。

 

404页面也是一个页面，搜索引擎蜘蛛在爬取页面的过程当中，尚未爬完就被强制拽回到其余页面。就像你在吃饭，才吃两口，就被人强行拽走，是否是超级不爽。

 

综上所述，优秀的404页面应该具有以下条件：

①必须有返回连接；

②不建议使用跳转代码，尤为是强制跳转；

③符合目标群体的趣味性。

 

 

王者荣耀网站的404页面设置很暖心，看到后，想从新回归了。

 

 

若是比较幸运，有程序员支持，就能够省过调代码的过程。画好404页面的原型后，把404图片和原型效果图交由程序员处理。这里推荐款好用的原型设计软件Mockplus。

 

 

原型预览连接：https://run.mockplus.cn/4xBue9UmTpFLvaUy/index.html

 

若是没有程序员的支持，你是新手小白不懂代码，也不要紧，下面【新手简易教程】正式开始，教你如何制做漂亮的404页面。

 

第一步：选取你喜欢的404页面，右键查看源代码，全选复制。

 

这里以某个小型博客的404页面为例，地址：http://www.luokuangtui.com/404。你能够任意选取本身喜欢的404页面，步骤都是同样的。

 

 

第二步：新建文本文件（txt文件），命名404.html，扩展名改为.html。而后以记事本方式打开，粘贴刚才复制的代码。

 

 

第三步：制做404图片，保存到桌面。

 

或者把刚选取的404页面的图片，右键图片另存为，保存到桌面；也能够百度搜索404图片，选取一个本身喜欢的，保存到桌面。

 

第四步：在保存的代码中，Ctrl+F搜索，404页面中出现的汉字，找到须要修改的文本。

 

 

更改对应的跳转连接，文字，以及页面的标题，404图片的地址，不须要的也能够删掉。

 

第五步：修改完之后，文件-另存为，选择弹窗下方的编码方式，选择UTF-8，点击保存，替换原文件。

 

 

若是没有更改编码方式，则打开是乱码。网页编码经常使用的两种方式为：UTF-8国际通用版、GBK中文简体版。通常来说UTF-8用的最多，出现乱码时，在UTF-8和ANSI总来回切换就行。

 

第六步：把html和404图片放在一个文件夹中，双击打开html查看效果，不满意的地方继续调整。

 

 

我在源代码基础上，调整了图片的尺寸大小，就是h1标签中的内容，以下。在改代码的过程当中，零基础的朋友，能够多多百度。好比以为文字和图片太紧，想加个空行，就能够搜索html加空行。

 

 

第七步：效果调整满意后，把html文件和404图片上传到网站的根目录下。

 

第八步：在主机管理后台-基础环境设置-404页面设置-选择404文件（/404.html），点击设置404错误页面。

 

成功后，等待几秒（后台反应时间），网站的404页面就设置成功了。若是操做过程当中有任何疑问，欢迎留言哦。

 

好文推荐：

用户体验之如何设计一个完美的新手引导流程？(附带案例)

干货！让人一见倾心的网站header设计

创意进度条设计-12个优秀做品分享【附实例分析】

史上最全的Android开发学习教程集锦【初学者】