上面，我們講到了要充分的語意化，其中我們提到了嵌套的問題，這個(gè)也是我們做到結(jié)構(gòu)化的一個(gè)重要部分。個(gè)人認(rèn)為一個(gè)最基本的原則就是盡量減少嵌套。至于為什么這么做，我剛才也給大家做了一個(gè)簡(jiǎn)單的介紹，結(jié)構(gòu)清晰，瀏覽器解析快。其實(shí)結(jié)構(gòu)清晰（夠簡(jiǎn)單，嵌套少），對(duì)我們的搜索引擎同樣是做起到了SEO的效果。怎么講？大家想想，嵌套N多層，跟我們以前使用table設(shè)計(jì)時(shí)，table套table的區(qū)別就不大了，而那種含有大量冗余信息的頁面，搜索引擎解析的時(shí)候也很費(fèi)力啊。所以我們現(xiàn)在有了WEB標(biāo)準(zhǔn)，就不要再去犯以前的錯(cuò)誤了。
說到SEO優(yōu)化，讓我們來看看我的例子中對(duì)LOGO的處理，XHTML代碼如下：
<div id="topbar">
<h1><a href="http://www.yaohaixiao.com/" target="_blank" title="海嘯的地盤--享受生活，享受每一天！">海嘯的地盤--享受生活，享受每一天！</a></h1>
<div id="search-bar">
<form name="frmsearch" id="frmsearch" action="" method="post">
<label for="keyword">站內(nèi)搜索：</label>
<select id="topics">
<option value="0">全部主題</option>
<option value="1">(X)HTML</option>
<option value="2">CSS</option>
<option value="3">Javascript</option>
<option value="4">XML</option>
<option value="5">ASP/ASP.NET</option>
</select>
<input type="text" name="keyword" id="keyword" value="請(qǐng)輸入搜索關(guān)鍵字" maxlength="60" />
<input type="reset" name="btnsearch" id="btnsearch" value="開始搜索" />
</form>
</div>
呵呵，當(dāng)大家用瀏覽器瀏覽時(shí)，可能會(huì)以為這里是一個(gè)<img />標(biāo)簽吧？其實(shí)我這里做了一個(gè)簡(jiǎn)單的SEO優(yōu)化（當(dāng)然只是我個(gè)人比較喜歡這個(gè)方法，可能有朋友跟我有不同觀點(diǎn)。），做了關(guān)鍵字的優(yōu)化。
對(duì)SEO有些了解的朋友都知道，搜索引擎搜索關(guān)鍵字的時(shí)候，是先對(duì)XHTML標(biāo)簽里的<meta>標(biāo)簽的keyword部分的文字，然后就是標(biāo)題里的文字，接著就是正文中的h1~h6標(biāo)簽，然后是strong標(biāo)簽中的文字。而我們網(wǎng)站的名稱，毫無疑問的會(huì)作為關(guān)鍵字的。
所以我這里用h1標(biāo)簽?zāi)M了<img />標(biāo)簽的效果，將網(wǎng)站名稱這個(gè)關(guān)鍵字在頁面里出現(xiàn)了一次，而且是以正文中搜索引擎分析的優(yōu)先級(jí)最好的h1標(biāo)簽，以說明該內(nèi)容在頁面中的關(guān)鍵性。具體的實(shí)現(xiàn)代碼這里就直接寫出來：
#topbar h1{
float:left;
width:220px;
height:58px;
line-height:58px;
overflow:hidden;
font-size:18px;
color:#060;
text-indent:-999px;
background-image:url(../img/logo.png);
}
#topbar h1 a:link,
#topbar h1 a:visited,
#topbar h1 a:hover{
display:block;
width:220px;
height:58px;
line-height:58px;
overflow:hidden;
background-color:transparent;
}
<h1><a href="http://www.yaohaixiao.com/" target="_blank" title="海嘯的地盤--享受生活，享受每一天！">海嘯的地盤--享受生活，享受每一天！</a></h1>
看了代碼，我想大家也很明白了，我們這里利用了text-indent、overflow:hidden;屬性以及display:block。我們把LOGO圖片作為h1標(biāo)簽的背景，然后用text-indent設(shè)置一個(gè)超大的負(fù)值，然后結(jié)合overflow:hidden;屬性，讓h1標(biāo)簽里面的字都超出到它的布局范圍內(nèi)，overflow:hidden后就在h1標(biāo)簽里看不到文字了，而LOGO圖片背景顯示出來了。
接著一個(gè)關(guān)鍵就是將a標(biāo)簽?zāi)M成圖片鏈接的效果。我們首先將a標(biāo)簽display屬性設(shè)置為block,強(qiáng)制將a標(biāo)簽顯示成塊級(jí)元素（塊級(jí)元素和行內(nèi)元素的知識(shí)我們下面馬上給大家介紹），給它設(shè)置布局大小，這樣我們a標(biāo)簽里就是一個(gè)塊了，而這個(gè)塊剛好是我們背景l(fā)ogo圖片的大小，讓你點(diǎn)擊的時(shí)候感覺是點(diǎn)的一個(gè)圖片鏈接，而我們的a標(biāo)簽是嵌套在h1標(biāo)簽里的，繼承了H1的text-indent屬性，里面的文字超出了a標(biāo)簽的布局范圍，沒有顯示出來，而顯示了圖片（其實(shí)是背景圖）。呵呵，圖片鏈接就這樣被我們模擬出來了，不過為了更像圖片鏈接，我們又給a標(biāo)簽添加了title屬性，來模仿img標(biāo)簽的alt屬性，呵呵，模擬得夠像吧。
上面介紹了，一個(gè)技巧，其實(shí)主要是利用我們的CSS控制來實(shí)現(xiàn)的，不過我這里還不打算介紹CSS的技巧，接著我們的結(jié)構(gòu)化的話題說下去。看看，其實(shí)在制作一個(gè)結(jié)構(gòu)化充分的頁面的時(shí)候，我們同時(shí)也在做SEO的優(yōu)化。

最新評(píng)論