404是什麼？如何設計404錯誤頁面？
一、什麼是 404？
歡迎來到黑貓城，我是時雨の町站長 ─ 時雨。
相信大家都知道 404 是什麼，每次跑到失效的連結就會看到瀏覽器上顯示 404 或 HTTP 404 、 Not Found 等，總而言之 404 就是指 HTTP 的一種回應訊息，代表伺服器無法正常回應網頁。
二、為何要設計404錯誤頁面？
404 錯誤頁面雖然看起來好像不重要，但長遠來看它其實是扮演著一個重要的角色，普通的錯誤頁面會直接讓訪客按下 x 離你而去，然而事實上 404 頁面就是一個登入網頁，這是訪客接觸你的一個難得機會，不應該白白讓他直接離開，雖然他找不到這個頁面了，但我們可以讓他可以回到首頁看看還有哪些東西，更重要的是，如果能設計有趣的 404 頁面，就能讓對方留下深刻的印象，也就是說，404 頁面也是一個打廣告的地方啊！
404 錯誤頁面並沒有規範一定要怎麼做，基本上只要達成兩件事即可：
- 告訴對方這個網頁已經不存在了。
- 讓對方可以回到首頁，而不是按 x 離開。
請謹記一點，太過於複雜或是難懂的內容是無法讓訪客第一時間知道這個是 404 錯誤頁面，所以建議無論如何都要寫上「404」或「無法找到網頁」等訊息，讓訪客可以馬上知道這是錯誤頁面而不需要花時間閱讀不必要的資訊，因為他要的資訊已經不在這裡了，多餘的內容反而會讓人對你網站的印象很差。
三、如何設計 404 錯誤頁面
一個好的404頁面應具備以下內容：
- 錯誤訊息：基本款必備
- 引導連結：至少讓訪客可以返回首頁，基本款必備
- 品牌識別：可以的話就放一個能夠識別你網站的LOGO
- 風格一致：404 頁面盡量不要與原本的網站差異過大
- 個性設計：有特色的 404 頁面才能讓人留下印象
- 相關連結：讓失去頁面的訪客可以有其他選項彌補遺憾
- 簡潔俐落：不要塞太多不必要的資訊，反而本末倒置
參考範例：
三、實際動手做看看（實作範例）
如果是用 Wordpress 或 Joomla 就看使用的 template 所設定的 404 頁面，再另外手動去變更即可，有的 template 提供的 404 已經很完善，只要變更 Logo 即可（甚至有的根本不用再手動調整了），如果你的 tempalte 沒有提供後台操作功能，那就去伺服器的目錄中找到它的 404 頁面檔案即可。如果是自己寫的 HTML 網頁，可以參考以下基本架構再補充設計即可：
<!DOCTYPE html>
<html>
<head>
<!-- 編碼 -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- 響應式網頁-支援行動裝置瀏覽 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>瀏覽器上的標題</title>
</head>
<body>
<!-- 獨立設置CSS，也可以在CSS檔案中建立 -->
<style type="text/css">
/* 背景設計 */
body{
background:#FFF url('圖片1')no-repeat; /*背景顏色-圖片：不重複 */
background-size: cover; /* 滿屏 */
color:#000; /*文字顏色*/
}
/* 行動裝置版的背景設計 */
@media screen and (max-width: 768px){
body{
background:#FFF url('圖片2')no-repeat; /*換張手機板圖片*/
background-size: cover;
color:#000;
}
}
</style>
<!-- 內容區塊：內容置中，距離頂部10% -->
<div style="position: relative;top: 10%; text-align: center;">
<!-- 網站Logo，width是寬度(px)-->
<p><img src="LOGO圖片" width="50"></p>
<p>這裡放404訊息內容</p>
<p>返回 <a href="首頁網址">首頁</a></p>
</div>
</body>
</html>
範例：
這只是基本 HTML 架構而已，要如何設計樣式主要是靠 CSS 去作調整，這部分就不再細說請自行摸索，例如想要怎樣的圖片呈現（大小寬度、是否滿屏）等等請參考CSS各類教學。
或者也可以在我網站的網址後面亂打些字ENTER看看我的 404 怎麼做，再自行修改即可，不要全照抄啊～拜偷XD。
最後，要怎麼讓訪客在找不到網頁時能夠自動連到這個 404 頁面呢？請參考：如何自動連到404的錯誤頁面
時雨，時雨の町-日文學習園地站長，為了紀錄網站維護的日誌而架設本網站，並以家中黑貓命名為黑貓城，順道分享各種架站知識與相關的網頁程式語言，如果你喜歡我的文章，請幫我按讚哦(*´ω｀*)。也歡迎各位到我的日語教學網站學習日文 :)
LEAVE A REPLY
COMMENTS