不懂代碼，如何製做漂亮的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開發學習教程集錦【初學者】