智软工作室主要是为宁波公司提供宁波网站建设,宁波网站制作,宁波做网站公司,宁波外贸网站建设公司,宁波网站优化等项目,以优质的服务,优惠的价格,深的客户信赖。相信有你的加入我们的明天会更有动力!期待与你合作!
  • 宁波智软设计工作室,打造宁波网站制作工作室顶级品牌
  • 智软拥有专业的设计团队
  • 多年网站建设团队为你服务
  • 智软期待与你合作
  • 我们的技能
  • 我们掌握的技能有:dreamweaver,flash,photoshop
  • 宁波高端网站建设服务公司
    2014已经悄然到来,在新的一年我们恭贺所有客户事业蒸蒸日上,同事庆祝智软设计工作室成立5周年,在5周年为众多客户提供了保质量的网站设计与网站制作。 我们在新的一年质量与服务将会更加进一步为更多的客户带来高端的网站设计与服务!期待与你合作
  • 企业网站制作建设原因与服务介绍

    智软设计工作室多年为宁波企业网站制作建设服务一直以来我们以最优惠价格,最优质的质量,最突出的设计!得到了客户的一致认可,我们的服务包括:宁波网站设计,宁波网站建设,宁波网站制作,宁波网站优化,宁波英文网站制作我们会以优质的服务,最低的价格来报答客户!

  • 点击链接网站优化推广介绍

    点击连接网站优化推广-对企业的网站优化和网站推广--对企业的重要性-点击进行详细了解

  • 2014开幕,宁波网站设计服务全面优惠.

    2014开幕,宁波智软设计为宁波企业提供更加优秀的设计和实惠的价格

  • 链接到网站案例展示平台
    智软设计工作为宁波客户网站设计案例展示平台-案例均为定期更新,让新老客户更好的看到我们做的案例,点击查看我们做的网站案例吧!
  • 我们宁波网络公司提供网站一站式解决方案
    智软(宁波网络公司)帮你轻松解决网络问题,网站一站式解决方案
你当前的位置:智软工作室 > 营销与网络 >

网站制作之前端开发设计的seo小知识

2011-02-10 12:32

在进行网站前端开发设计的时候,如何做到用户与SEO兼得,是每个站长都要考虑的问题,很多时候要做到确实不易,下面整理几个小技巧,大家可以看下。

  一、文字替换图片

  这种手法在LOGO的处理上最为常见,很多时候人们会把首页的LOGO加上<H1>标签,可是<H1>标签里如果没有文字的话,效果肯定不好,因此很多人会在logo上加上alt描述,但是肯定还是没有直接文字或者锚文本来的效果好,这个时候我们就需要用到这个技巧了,我们来看一下一般人的做法:

 

<h1 class="main-logo">

   <a href="#">

       <img src="images/header-image.jpg" alt="淘客站长网" />

   </a>

</h1>

 

  下面我们来看下如何运用CSS实现文字替换图片:

 

<h1 id="tk">

        <span>淘客站长网</span>

</h1>

 

  下面是CSS代码:

 

h1#tk {

        width: 250px;

        height: 25px;

        background-image: url(logo.gif);

        }

 

  通过这种方法,我们就可以很好的兼顾用户体验和SEO。

  二、文章列表字数截取问题

列表字数截取

  这是所有网站都会遇到的问题,如上图所示,文章列表如果字数太多,就会分成两排或者把列表挤变形,这个时候就需要截取标题的字数,这样一来对SEO是很不利的,这个时候我们可以用CSS来控制,不截取字数,但是显示的依然是截取字数的,这样一来,在美观及SEO上都能兼顾到。

   我们来看下网页代码:

 

<div class="list">
<ul>
<li><a href="#">多个启发灵感页面网站设计多个启发多个启发灵感页面网站设计多个启发</a><span>2010-03-14</span></li>
<li><a href="#">315个JS广告代码和269个特效</a><span>2010-03-14</span></li>
<li><a href="#">SNS网多个启发灵感页面网站设计多个启发多个启发灵感页面网站设计多个启发站</a><span>2010-03-14</span></li>
<li><a href="#">阿里巴巴推商人</a><span>2010-03-14</span></li>
<li><a href="#">谷歌评估必应搜索算法</a><span>2010-03-14</span></li>
<li><a href="#">谷歌评估必应搜索算法谷歌评估必应搜索算法</a><span>2010-03-14</span></li>
<li><a href="#">汉王创艺高手+无线0604数位板…</a><span>2010-03-14</span></li>
<li><a href="#">跨过后台开发的那道槛</a><span>2010-03-14</span></li>
<li><a href="#">09年国外100大最佳设计博客网站</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.com/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;
}

 

  再来看下显示效果:

CSS控制标题长度

  可以看出,标题中多余的字数已经没有显示出来了,而html代码中的标题却很完整。

  三、用CSS来控制网页的布局

  大家都知道在一个网页中,越重要的东西越靠前越好,而在实际的网页设计中,有的时候因为考虑到用户体验而不得不把重要的内容放到后面,其实,我们还是把重要性强的内容靠前,次要的东西放置靠后一些,然后用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>

<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>

更多

【责任编辑:小戴工程师】

上一篇:设计师之语 更多非设计的事 让你成为一名更好的设计师 下一篇:曝光过度照片处理方法-ps润色方法

最新文章

2011-02-10 12:32

相关文章

2011-02-10 12:32
网站制作咨询:
QQ:277728291
电话:18668277799
邮箱:277728291@qq.com
期待你来电咨询
回顶部
Copyright 2010 智软工作室 版权所有    智软为宁波公司提供最优惠的网络服务【宁波网站建设,宁波网站制作公司,宁波做网站公司,宁波外贸网站建设公司】我们竭诚为你服务!