如何給網(wǎng)站制作合格的404錯(cuò)誤頁(yè)面
如何給網(wǎng)站制作合格的404錯(cuò)誤頁(yè)面
無(wú)論是出于網(wǎng)站優(yōu)化還是用戶體驗(yàn)，網(wǎng)站都應(yīng)具備404自定義的錯(cuò)誤頁(yè)面。給網(wǎng)站制作合格的404錯(cuò)誤頁(yè)面的方法其實(shí)很簡(jiǎn)單，下面由學(xué)習(xí)啦小編告訴你!
給網(wǎng)站制作合格的404錯(cuò)誤頁(yè)面的方法
步驟一：了解404錯(cuò)誤的含義
原來(lái)正常，后來(lái)失效的鏈接，稱(chēng)之為死鏈接。根本不存在的鏈接，稱(chēng)之為錯(cuò)誤鏈接。無(wú)論哪種鏈接在訪問(wèn)時(shí)，都無(wú)法正常打開(kāi)頁(yè)面，這時(shí)服務(wù)器返回404錯(cuò)誤頁(yè)面，告知頁(yè)面不存在，如下圖所示：
步驟二：制作404自定義頁(yè)面的注意點(diǎn)
美工風(fēng)格與網(wǎng)站統(tǒng)一模版、設(shè)計(jì)風(fēng)格、logo及名稱(chēng)。
醒目位置顯示錯(cuò)誤信息、提示用戶頁(yè)面不存在。
帶有指向首頁(yè)、分類(lèi)頁(yè)、網(wǎng)站地圖等的鏈接。
不要使用跳轉(zhuǎn)(meta refresh)。
增加一定的趣味性。如上圖所示：
步驟三：制作404自定義錯(cuò)誤頁(yè)面
1、登錄空間主機(jī)控制面板進(jìn)入主機(jī)控制臺(tái)找到設(shè)置404的功能，如下圖所示
2、設(shè)計(jì)自定義404錯(cuò)誤頁(yè)面。將下述代碼粘貼到記事本中，并命名為404.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ".w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=".w3.org/1999/xhtml">
<head>
<meta -equiv="content-type" content="text/html; charset=utf-8" />
<title>404錯(cuò)誤頁(yè)面-83教育網(wǎng)</title>
<style type="text/css">
body{margin:0;padding:0;font:14px/1.6 Arial,Sans-serif;background:#fff url(img/body.png) repeat-x;}
a:link,a:visited{color:#007ab7;text-decoration:none;}
h1{
position:relative;
z-index:2;
width:540px;
height:0;
margin:110px auto 15px;
padding:230px 0 0;
overflow:hidden;
xxxxborder:1px solid;
background-image: url(.sitexia.com/zb_users/THEME/baijia/style/images/404.jpg);
background-repeat: no-repeat;
}
h2{
position:absolute;
top:55px;
left:233px;
margin:0;
font-size:0;
text-indent:-999px;
-moz-user-select:none;
-webkit-user-select:none;
user-select:none;
cursor:default;
width: 404px;
height: 90px;
}
h2 em{display:block;font:italic bold 200px/120px "Times New Roman",Times,Serif;text-indent:0;letter-spacing:-5px;color:rgba(216,226,244,0.3);}
.link a{margin-right:1em;}
.link,.texts{width:540px;margin:0 auto 15px;color:#505050;}
.texts{line-height:2;}
.texts dd{margin:0;padding:0 0 0 15px;}
.texts ul{margin:0;padding:0;}
.portal{color:#505050;text-align:center;white-space:nowrap;word-spacing:0.45em;}
.portal a:link,.portal a:visited{color:#505050;word-spacing:0;}
.portal a:hover,.portal a:active{color:#007ab7;}
.portal span{display:inline-block;height:38px;line-height:35px;background:url(img/portal.png) repeat-x;}
.portal span span{padding:0 0 0 20px;background:url(img/portal.png) no-repeat 0 -40px;}
.portal span span span{padding:0 20px 0 0;background-position:100% -80px;}
.STYLE1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 65px;
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
h2 em{color:#e4ebf8;}
</style>
<![endif]-->
</head>
<body>
<h1></h1>
<h2><em><span class="STYLE1">404 Error </span></em>:所查找的頁(yè)面不存在,可能已被刪除或您輸錯(cuò)了網(wǎng)址!</h2>
<p class="link">
<a href="你的鏈接1">◂網(wǎng)站首頁(yè)</a> |
<a href="你的鏈接2">◂欄目導(dǎo)航</a> |
<a href="你的鏈接3">◂欄目導(dǎo)航</a> |
<a href="你的鏈接4">◂欄目導(dǎo)航</a> |
<a href="你的鏈接5">◂欄目導(dǎo)航</a> |
<a href="你的鏈接6">◂欄目導(dǎo)航</a> |
<a href="你的鏈接7">◂欄目導(dǎo)航</a> |
<a href="你的鏈接8">◂欄目導(dǎo)航</a> |
<a href="你的鏈接8">◂返回上一頁(yè)</a> |
</p>
<dl class="texts">
<dt>正在聯(lián)系火星總部查找您所需要的頁(yè)面.請(qǐng)返回等待信息..</dt>
<dd>
<ul>
<li>不要返回嗎?</li>
<li>確定不要返回嗎?</li>
<li>真的真的確定不要返回嗎?</li>
<li>好吧.還是隨便你要不要真的確定返回吧</li>
</ul>
</dd>
</dl>
</span></span></span></p>
</body>
</html>
步驟四：404錯(cuò)誤頁(yè)面的編碼格式為utf-8
將代碼中網(wǎng)站標(biāo)題更改為自己網(wǎng)站的標(biāo)題，鏈接導(dǎo)航更改為自己網(wǎng)站的導(dǎo)航。由于SDCMS和Zblog網(wǎng)頁(yè)編碼都是utf-8，所以保存時(shí)格式為utf-8，命名格式為：404.html，如下圖所示，否則會(huì)出現(xiàn)亂碼。
步驟五：將404錯(cuò)誤頁(yè)面上傳至遠(yuǎn)程空間
通過(guò)FTP軟件將制作好的404.html文件上傳覆蓋：網(wǎng)站根目錄4.html。并在控制面板中404頁(yè)面設(shè)置中找到上傳的文件，然后點(diǎn)擊設(shè)置404錯(cuò)誤頁(yè)面
步驟六：刷新網(wǎng)站后臺(tái)，演示404錯(cuò)誤頁(yè)面效果
刷新網(wǎng)站后臺(tái)，在瀏覽器中輸入錯(cuò)誤網(wǎng)址即可顯示404自定義錯(cuò)誤頁(yè)面，而并非是系統(tǒng)默認(rèn)頁(yè)面。
END
看了“如何給網(wǎng)站制作合格的404錯(cuò)誤頁(yè)面”的人還看了
1.IE瀏覽器網(wǎng)頁(yè)排版錯(cuò)誤混亂的解決方法
2.打開(kāi)網(wǎng)頁(yè)提示錯(cuò)誤代碼ERR
3.Win7系統(tǒng)瀏覽網(wǎng)頁(yè)彈出Adobe Flash player錯(cuò)誤窗口的解決辦法