爱问 爱问共享资料 爱问分类
首页 > > > 开发设计中的SEO技巧.doc

开发设计中的SEO技巧.doc

开发设计中的SEO技巧.doc

上传者: 云飞扬
7次下载 0人收藏 暂无简介 简介 2011-06-26 举报

简介:开发设计中的SEO技巧

开发设计中的SEO技巧开发设计中的SEO技巧在进行网站前端开发设计的时候,如何做到用户与SEO兼得,是每个站长都要考虑的问题,很多时候要做到确实不易,下面整理几个小技巧,大家可以看下。  一、文字替换图片  这种手法在LOGO的处理上最为常见,很多时候人们会把首页的LOGO加上<H1>标签,可是<H1>标签里如果没有文字的话,效果肯定不好,因此很多人会在logo上加上alt描述,但是肯定还是没有直接文字或者锚文本来的效果好,这个时候我们就需要用到这个技巧了,我们来看一下一般人的做法:<h1class="main-logo"><ahref="#"><imgsrc="images/header-image.jpg"alt="淘客站长网"/></a></h1>  下面我们来看下如何运用CSS实现文字替换图片:<h1id="tk"><span>淘客站长网</span></h1>  下面是CSS代码:h1#tk{width:250px;height:25px;background-image:url(logo.gif);}  通过这种方法,我们就可以很好的兼顾用户体验和SEO。  二、文章列表字数截取问题  这是所有网站都会遇到的问题,如上图所示,文章列表如果字数太多,就会分成两排或者把列表挤变形,这个时候就需要截取标题的字数,这样一来对SEO是很不利的,这个时候我们可以用CSS来控制,不截取字数,但是显示的依然是截取字数的,这样一来,在美观及SEO上都能兼顾到。  我们来看下网页代码:<divclass="list"><ul><li><ahref="#">多个启发灵感页面网站设计多个启发多个启发灵感页面网站设计多个启发</a><span>2010-03-14</span></li><li><ahref="#">315个JS广告代码和269个特效</a><span>2010-03-14</span></li><li><ahref="#">SNS网多个启发灵感页面网站设计多个启发多个启发灵感页面网站设计多个启发站</a><span>2010-03-14</span></li><li><ahref="#">阿里巴巴推商人</a><span>2010-03-14</span></li><li><ahref="#">谷歌评估必应搜索算法</a><span>2010-03-14</span></li><li><ahref="#">谷歌评估必应搜索算法谷歌评估必应搜索算法</a><span>2010-03-14</span></li><li><ahref="#">汉王创艺高手+无线0604数位板…</a><span>2010-03-14</span></li><li><ahref="#">跨过后台开发的那道槛</a><span>2010-03-14</span></li><li><ahref="#">09年国外100大最佳设计博客网站</a><span>2010-03-14</span></li><li><ahref="#">阿里巴巴推商人</a><span>2010-03-14</span></li></ul></div>  再来看下CSS代码:body{padding:2em;font-size:12px;font-family:"SimSun";}.list{width:300px;}.listul{margin:0;padding:00030px;list-style:none;background:url(http://blog.owncsser.com/wp-content/uploads/2009/08/bg_li.gif)8px5pxno-repeat;float:left;}.listulli{clear:both;float:left;width:100%;height:20px;}.listullia{float:left;margin-right:60px;padding-right:10px;height:20px;line-height:20px;overflow:hidden;}.listullispan{float:left;margin-left:-60px;width:60px;height:20px;font:11px/20px"TimesNewRoman",Times,serif;color:#ccc;}  再来看下显示效果:  可以看出,标题中多余的字数已经没有显示出来了,而html代码中的标题却很完整。  三、用CSS来控制网页的布局  大家都知道在一个网页中,越重要的东西越靠前越好,而在实际的网页设计中,有的时候因为考虑到用户体验而不得不把重要的内容放到后面,其实,我们还是把重要性强的内容靠前,次要的东西放置靠后一些,然后用CSS来定位实际显示的位置。  上下布局:<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><divid="content">content<!--SEOoptimizedcontenttextgoeshere.--></div><divid="navigation">navigation<!--navigationalelements,adsgohere--></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><divid="content">SEOoptimizedcontenttextgoeshere.</div><divid="navigation">navigationalelements,adsgohere</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><divid="main">optimizedmainbody</div><divid="left">leftpanel</div><divid="top">toppanel</div><divid="right">rightpanel</div></body></html>HYPERLINK"http://www.taoxd.net/"紧急!!50份seo快速排名资料免费抢!!点击此处马上抢!

开发设计中的SEO技巧.doc

开发设计中的SEO技巧.doc

上传者: 云飞扬
7次下载 0人收藏 暂无简介 简介 2011-06-26 举报

简介:开发设计中的SEO技巧

开发设计中的 SEO 技巧 在进行网站前端开发设计的时候,如何做到用户与SEO兼得,是每个站长都要考虑的问题,很多时候要做 到确实不易,下面整理几个小技巧,大家可以看下。 一、文字替换图片 这种手法在LOGO的处理上最为常见,很多时候人们会把首页的LOGO加上<H1>标签,可是< H1>标签里如果没有文字的话,效果肯定不好,因此很多人会在logo上加上alt描述,但是肯定还是没有 直接文字或者锚文本来的效果好,这个时候我们就需要用到这个技巧了,我们来看一下一般人的做法: <h1class="main-logo"> <ahref="#"> <imgsrc="images/header-image.jpg"alt="淘客站长网"/> </a> </h1> 下面我们来看下如何运用CSS实现文字替换图片: <h1id="tk"> <span>淘客站长网</span> </h1> 下面是CSS代码: h1#tk{ width:250px; height:25px; background-image:url(logo.gif); } 通过这种方法,我们就可以很好的兼顾用户体验和SEO。 二、文章列表字数截取问题 这是所有网站都会遇到的问题,如上图所示,文章列表如果字数太多,就会分成两排或者把列表挤变 形,这个时候就需要截取标题的字数,这样一来对SEO是很不利的,这个时候我们可以用CSS来控制,不

第1页

  • 相关资料
  • 该用户的其他资料
  • 名称/格式
  • 下载次数
  • 资料大小
  • 名称/格式
  • 下载次数
  • 资料大小

用户评论

0/200
暂无评论
上传我的资料

资料阅读排行

关闭

请选择举报的类型

关闭

提示

提交成功!

感谢您对爱问共享资料的支持,我们将尽快核实并处理您的举报信息。

关闭

提示

提交失败!

您的举报信息提交失败,请重试!

关闭

提示

重复举报!

亲爱的用户!感觉您对爱问共享资料的支持,请勿重复举报噢!

全屏 缩小 放大
收藏
资料评价:

/ 5
所需积分:0 立即下载
返回
顶部
举报
资料
关闭

温馨提示

感谢您对爱问共享资料的支持,精彩活动将尽快为您呈现,敬请期待!