走錯路也要美美的：404網頁美化大展

404網頁是什麼？學理派的說法應該是這樣的——「HTTP 404」以及「File not Found」訊息是HTTP狀態碼中的一種，屬於「標準回應訊息」。看到這個訊息，表示伺服器可能無法提供客戶端所要瀏覽的網頁，或是伺服器因為不明原因而無法回應。

相信多數人看到這裡都會有同樣的反應：「先生，請你說人話好嗎？」從善如流的筆者當然也很樂意用比較正常的語言來跟大家溝通。其實這個所謂的「404網頁」，就是一般我們偶爾會在網站上看到的「找不到檔案」（File not Found）頁面，相信有上網的人應該都見過。

它的意義正如字面所傳達的——伺服器找不到你要看的網頁，而且伺服器也不知道原因是什麼。有可能是這個網頁本來就不存在，也可能是這個網頁後來被人刪掉了，當然還有一種可能就是讀者諸君打錯網址了。總之，它的意思就是「沒有你想看的東西，抱歉啦～」這樣。

▲Firefox的404網頁。隨手打個不存在的網址就可以看到了，
例如這裡筆者打的是「http://www.mobile09.com/index.php」。

每個瀏覽器都有一個404

前面也說過了，404是HTTP規範的回應代碼之一，所以應該不難想像，每一種瀏覽器都會有自己的404網頁。只要隨便打進一個不存在的網址，就可以看到瀏覽器預設的404網頁。底下就是IE跟Chrome的404頁面。不過基本上，瀏覽器預設的404網頁是沒辦法修改的，如果要修改，只能由網站本身自己下功夫。至於要怎麼修改，這個我們後面再談。

▲IE8的404網頁。
（如果在IE上加裝Google工具列，404頁面就會變成跟下面一樣）

▲Google Chrome的404網頁。
（筆者使用的是Chrome Plus，跟正版Chrome會有一點點差異）

為什麼要美化404

看到這裡，應該很多人都會想問這個問題。既然404是標準回應，而且沒事又不會出現，修改它幹嗎？自從網路時代來臨之後，網站越來越多，慢慢就有人開始研究如何建立一個比較親切、比較友善的網站，「美化404網頁」正好也是方法之一，而且還算是相當被重視的一環。

從瀏覽網站的過程來看，會看到404網頁，必然是你輸入一個網址或點選一個連結之後的結果，而且通常是後者居多。也就是說，看到404網頁的瞬間，就像順著路標（各種連結）開車開到一半，突然前面跳出來一個「對不起，不知道為什麼，但反正前面沒路了」的標誌。當然，你可能覺得無所謂，直接倒車（按下「上一頁」或「Backspace」鍵），回頭再去找別的路（連結），但你也可能一氣之下就把網站關掉（下車回家）。對404網頁進行美化的用意，就是希望能夠減少瀏覽者的不適感，免得瀏覽者就這麼一去不回頭了。

▲Yahoo!是用重新導向的方式來處理404網頁。
（當你看到這一頁的時候，10秒內就會被送回網站首頁）

自訂404的辦法？

前面已經說過，要自訂404，得要從網站本身下手。也就是說，不管你是用虛擬主機架站，或是在自己家裡搞了一台主機來架站，想自訂404的前提就是，那得是你自己架設的網站才行。如果你是在無名小站、痞客邦或Xuite之類的地方架站，通常是沒辦法自己修改404網頁的。

▲這就是痞客邦的404頁面，不管是在誰的網站上，
只要找不到連結，都會看到這個頁面。

那麼，如果你有自己的網站，又該怎麼修改呢？基本上，根據網站類型以及虛擬主機的不同，作法也不太一樣，但基本原理還是相通的，首先你要製作一個自己的404網頁，例如404.html或404.php之類的。（該怎麼寫網頁請去拜Google，怎麼樣的404比較有趣請看下文）

如果你是用Apache伺服器架站的，請去修改httpd.conf設定檔的內容（詳細操作可以參考永遠的真田幸村這篇文章）；如果你用的是虛擬主機，那請到網站的後台管理頁面，去找找看有沒有「Error pages」或「錯誤頁面」之類的設定選項，再按照後台的指示進行即可（可以參考這個網站的教學……對不起，請恕筆者不方便引述網站名稱……）。如果後台沒地方設定的話，則可以考慮修改.htaccess來自訂404頁面。（http://www.vixual.net/的這篇文章寫得很清楚了，筆者就不在這邊騙稿費了）

404美化大展

那麼，最後我們大概只剩下一個問題，怎麼樣建立一個漂亮、有特色的404頁面。坦白承認，筆者其實是個沒什麼sense的人，所以在這方面大概很難提出什麼有用的建議，不過筆者倒是可以推薦大家去看看這幾個404網頁大集合，參考一下別人的創意跟構想。噢，對了，最後一個連結是一篇想要深入探討「如何透過404頁面做好損害管理（免得讀者跑掉）」的英文文章，就筆者個人意見，除非你是網站設計師，而且對這個話題也有些想法，不然應該不用點進去看。至於底下的幾張404頁面，都是來自「The 100 most funny and unusual 404 error pages」的作品，有意思吧？

• 404 Research Lab（404實驗室）
  http://www.plinko.net/404/
• The 100 most funny and unusual 404 error pages（一百個最有趣和不尋常的404頁面）
  http://blogof.francescomugnai.com/2008/08/the-100-most-funny-and-unusual-404-error-pages/
• 404 Error Page Best Of（最棒的404頁面）
  http://www.ghacks.net/2008/12/06/404-error-page-best-of/
• 60 Really Cool and Creative Error 404 Pages（60個真的很酷而且很有創造性的404頁面）
  http://www.hongkiat.com/blog/60-really-cool-and-creative-error-404-pages/
• How To Build A 404 Page That’s Worth It（如何建立一個有價值的404頁面）
  http://www.puttingblogsfirst.com/how-to-build-a-404-page-thats-worth-it