在進(jìn)行網(wǎng)站前端開發(fā)設(shè)計(jì)的時(shí)候，如何做到用戶與SEO兼得，是每個(gè)站長(zhǎng)都要考慮的問題，很多時(shí)候要做到確實(shí)不易，下面整理幾個(gè)小技巧，大家可以看下。
一、文字替換圖片
這種手法在LOGO的處理上最為常見，很多時(shí)候人們會(huì)把首頁(yè)的LOGO加上<H1>標(biāo)簽，可是<H1>標(biāo)簽里如果沒有文字的話，效果肯定不好，因此很多人會(huì)在logo上加上alt描述，但是肯定還是沒有直接文字或者錨文本來的效果好，這個(gè)時(shí)候我們就需要用到這個(gè)技巧了，我們來看一下一般人的做法：
|
<h1 class="main-logo"> <a href="#"> <img src="images/header-image.jpg" alt="淘客站長(zhǎng)網(wǎng)" /> </a> </h1> |
下面我們來看下如何運(yùn)用CSS實(shí)現(xiàn)文字替換圖片：
|
<h1 id="tk"> <span>淘客站長(zhǎng)網(wǎng)</span> </h1> |
下面是CSS代碼：
|
h1#tk { width: 250px; height: 25px; background-image: url(logo.gif); } |
通過這種方法，我們就可以很好的兼顧用戶體驗(yàn)和SEO。
二、文章列表字?jǐn)?shù)截取問題
這是所有網(wǎng)站都會(huì)遇到的問題，如上圖所示，文章列表如果字?jǐn)?shù)太多，就會(huì)分成兩排或者把列表擠變形，這個(gè)時(shí)候就需要截取標(biāo)題的字?jǐn)?shù)，這樣一來對(duì)SEO是很不利的，這個(gè)時(shí)候我們可以用CSS來控制，不截取字?jǐn)?shù)，但是顯示的依然是截取字?jǐn)?shù)的，這樣一來，在美觀及SEO上都能兼顧到。
我們來看下網(wǎng)頁(yè)代碼：
| <div class="list"> <ul> <li><a href="#">多個(gè)啟發(fā)靈感頁(yè)面網(wǎng)站設(shè)計(jì)多個(gè)啟發(fā)多個(gè)啟發(fā)靈感頁(yè)面網(wǎng)站設(shè)計(jì)多個(gè)啟發(fā)</a><span>2010-03-14</span></li> <li><a href="#">315個(gè)JS廣告代碼和269個(gè)特效</a><span>2010-03-14</span></li> <li><a href="#">SNS網(wǎng)多個(gè)啟發(fā)靈感頁(yè)面網(wǎng)站設(shè)計(jì)多個(gè)啟發(fā)多個(gè)啟發(fā)靈感頁(yè)面網(wǎng)站設(shè)計(jì)多個(gè)啟發(fā)站</a><span>2010-03-14</span></li> <li><a href="#">阿里巴巴推商人</a><span>2010-03-14</span></li> <li><a href="#">谷歌評(píng)估必應(yīng)搜索算法</a><span>2010-03-14</span></li> <li><a href="#">谷歌評(píng)估必應(yīng)搜索算法谷歌評(píng)估必應(yīng)搜索算法</a><span>2010-03-14</span></li> <li><a href="#">漢王創(chuàng)藝高手+無線0604數(shù)位板…</a><span>2010-03-14</span></li> <li><a href="#">跨過后臺(tái)開發(fā)的那道檻</a><span>2010-03-14</span></li> <li><a href="#">09年國(guó)外100大最佳設(shè)計(jì)博客網(wǎng)站</a><span>2010-03-14</span></li> <li><a href="#">阿里巴巴推商人</a><span>2010-03-14</span></li> </ul> </div> |
再來看下CSS代碼：
| body{ padding:2em; font-size:12px; font-family:"SimSun"; } .list{ width:300px; } .list ul{ margin:0; padding:0 0 0 30px; list-style:none; background:url(http://blog.owncsser/wp-content/uploads/2009/08/bg_li.gif) 8px 5px no-repeat; float:left; } .list ul li{ clear: both; float:left; width:100%; height:20px; } .list ul li a{ float:left; margin-right:60px; padding-right:10px; height:20px; line-height:20px; overflow:hidden; } .list ul li span{ float:left; margin-left:-60px; width:60px; height:20px; font:11px/20px "Times New Roman", Times, serif; color:#ccc; } |
再來看下顯示效果：
可以看出，標(biāo)題中多余的字?jǐn)?shù)已經(jīng)沒有顯示出來了，而html代碼中的標(biāo)題卻很完整。
三、用CSS來控制網(wǎng)頁(yè)的布局
大家都知道在一個(gè)網(wǎng)頁(yè)中，越重要的東西越靠前越好，而在實(shí)際的網(wǎng)頁(yè)設(shè)計(jì)中，有的時(shí)候因?yàn)榭紤]到用戶體驗(yàn)而不得不把重要的內(nèi)容放到后面，其實(shí)，我們還是把重要性強(qiáng)的內(nèi)容靠前，次要的東西放置靠后一些，然后用CSS來定位實(shí)際顯示的位置。
上下布局：
|
<html> <head> <style> #navigation {position: absolute;top: 10px;left: 50%;width: 800px;margin-left: −400px;text-align: left;} #content {position: absolute;top: 150px;left: 50%;width: 800px;margin-left: −400px;text-align: left;} body { text-align: center; min-width: 600px;} </style> </head> <body> <div id="content">content<!-- SEO optimized content text goes here.--></div> <div id="navigation">navigation<!-- navigational elements, ads go here--></div> </body> </html> |
左右布局：
|
<html> <head> <style> #navigation {position: absolute;top: 0px;left: 400;width: 200px;margin-left: −400px;text-align: left;} #content {position: absolute;top: 0px;left: 600;width: 600px;margin-left: −400px;text-align: left;} body { text-align: center; min-width: 800px;} </style> </head> <body> <div id="content">SEO optimized content text goes here.</div> <div id="navigation">navigational elements, ads go here</div> </body> </html> |
混合布局：
|
<html> <head> <style> #top {position: absolute;top: 10px;left: 50%;width: 800px;margin-left: −400px;text-align: left;} #left {position: absolute;top: 150px;left: 50%;width: 200px;margin-left: −400px;text-align: left;} #main {position: absolute;top: 150px;left: 50%;width: 600px;margin-left: −200px;text-align: left;} #right {position: absolute;top: 150px;left: 50%;width: 200px;margin-left: 0px;text-align: left;} body { text-align: center; min-width: 800px;} </style> </head> <body> <div id="main">optimized main body</div> <div id="left">left panel</div> <div id="top">top panel</div> <div id="right">right panel</div> </body> </html> |
上一條： 企業(yè)做網(wǎng)站 多數(shù)企業(yè)的網(wǎng)絡(luò)營(yíng)銷部門不給力
下一條： 四種鏈接誘餌妙用助外鏈快速增加
湘公網(wǎng)安備 43010302001803號(hào)