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

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

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

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

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

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

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

每個瀏覽器都有一個404

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

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

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

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

▲Google Chrome的404網頁。
(筆者使用的是Chrome Plus,跟正版Chrome會有一點點差異)

為什麼要美化404

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

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

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

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

自訂404的辦法?

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

走錯路也要美美的: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網頁美化大展走錯路也要美美的:404網頁美化大展走錯路也要美美的:404網頁美化大展
走錯路也要美美的:404網頁美化大展走錯路也要美美的:404網頁美化大展走錯路也要美美的:404網頁美化大展

estel
作者

使用 Facebook 留言
255e8770f833d2ae3d4757fb643eada4?size=48&default=wavatar
1.  s25g5d4 (發表於 2010年1月24日 21:37)
看到vinta的時候我嚇到了...
他的文章好靠杯

404 那503跟400呢?
500跟403還蠻常見的優~
403就是請求被拒絕的意思(不給你看不給你看不給你看)
500是伺服器錯誤(恭喜你把伺服器搞掛了)
有時候還會遇到503..當太多人的時候
981661e113f88be069d731e55b59557c?size=48&default=wavatar
3.  mival (發表於 2010年1月25日 15:00)
www.mobile09.com點下去以後被導到色情守門員...
estel
4.  estel (發表於 2010年1月25日 19:20)
to mival:
抱歉,範例網址沒打清楚,已更正。
另外,筆者點下去其實是連到一個韓國賣網址的網頁說,為什麼會被導到色情守門員呢(不解……)
5002d2dda67172676d312d1db025866e?size=48&default=wavatar
5.  BugKCY (發表於 2010年2月01日 18:39)
HiNET的色情守門員超級會擋網頁的,跟大陸的綠壩有得比XD
發表回應
謹慎發言,尊重彼此。按此展開留言規則