seo观点,维基百科seo来学习seo

seo背景

为了反对美国反盗版立法,维基百科创始人吉米·威尔士将英文版维基百科关闭24小时,以表达抗议,这种大型网站遇到这种特例情况的操作手法,很值得SEO从业者学习借鉴。

在英文维基百科“关闭”期间,任何用户访问该网站,都无法看到原有的内容,而是显示一个抗议SOPA(反网络盗版法)议案的页面,但实际上我们只要在浏览器中停用Javascript,依旧可以正常访问维基百科。

可以看出,英文维基百科并没有大幅修改原始站点的页面,也没有进行重定向跳转操作,而是通过Javascript脚本语言的方式,修改了原来网页的CSS,对原始内容做了隐藏和遮罩,并显示一段新的内容。

seo操作方式

这种修改seo操作方式,有几个好处:1)实施较为简单,只要所有页面都包含同一个Javascript文件,就只需要修改这个JS文件,即可实现“关闭网站”的操作,而不需要修改网站程序或者重建页面。2)最大的好处是,可以避免seo方面的损失,如果采用修改原始文件,或者301或302的方式跳转,会影响全站的排名,英文维基百科在Google中的排名非常高,很多关键字排名第一,如果大幅做这样的修改,很可能会让Google认为这是作弊,从而降低该网站的排名,而因为Google不抓Javascript,因此使用Javascript进行修改所带来的风险较小。

seo

当然,这也只是适合短时间(一两天)内操作,如果长时间通过Javascript修改网页内容,依旧可能会对网站排名seo造成负面影响。

什么是好的优化呢?

一流的思路+二流的态度=烂

二流的思路+一流的态度=好

一流的思路+一流的态度=成功

 

用css网站布局之十步实录!

第一步:规划网站
http://www.52css.com/article.asp?id=175

第二步:创建html模板及文件目录等
http://www.52css.com/article.asp?id=176

第三步:将网站分为五个div 网页基本布局
http://www.52css.com/article.asp?id=177

第四步:网页布局与div浮动等
http://www.52css.com/article.asp?id=178

第五步:网页主要框架之外的附加结构的布局与表现
http://www.52css.com/article.asp?id=179

第六步:页面内的基本文本的样式(css)设置
http://www.52css.com/article.asp?id=180

第七步:网站头部图标与logo部分的设计
http://www.52css.com/article.asp?id=181

第八步:页脚信息的表现设置
http://www.52css.com/article.asp?id=182

第九步:导航条的制作
http://www.52css.com/article.asp?id=183

第十步:解决IE浏览器的显示BUG
http://www.52css.com/article.asp?id=184

div+css实现的导航栏

css文件:

.channel { width:350px; margin:12px 0px 0px 175px; height:30px; line-height:30px; text-align:center; }
.channel ul { list-style:none; margin:0px;}
.channel li { float:left; padding-left:8px; }
.channel a { background:url(arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; font-size:14px; font-weight:bold; }
.channel a:link { background:url(arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; }
.channel a:visited { background:url(arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; }
.channel a:hover { background:url(arrow1.gif) no-repeat left; padding-left:10px; color:#78b4c7; }
.channel a:active { background:url(arrow1.gif) no-repeat left; padding-left:10px; color:#78b4c7; }

页面文件:

<div class="channel">
<ul>
<li><a title="首页" target="none;" href="<%=request.getContextPath()%>/df.jsp">首页</a></li>
<li><a title="相册" href="#">相册</a></li>
<li><a title="好友" href="#">好友</a></li>
<li><a title="留言" href="#">留言</a></li>
</ul>
</div>

页面效果:

div+css命名规则-增强SEO

Div+css命名规则-增强SEO
页头:header
登录条:loginBar
标志:logo
侧栏:sideBar
广告:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
友情链接:friendLink
页脚:footer
版权:copyRight

1.CSS ID 的命名
外 套:  wrap
主导航:  mainNav
子导航:  subnav
页 脚:  footer
整个页面: content
页 眉:  header
页 脚:  footer
商 标:  label
标 题:  title
主导航:  mainNav(globalNav)
顶导航:  topnav
边导航:  sidebar
左导航:  leftsideBar
右导航:  rightsideBar
旗 志:  logo
标 语:  banner
菜单内容1: menu1Content
菜单容量: menuContainer
子菜单:  submenu
边导航图标:sidebarIcon
注释:   note
面包屑:  breadCrumb(即页面所处位置导航提示)
容器:   container
内容:   content
搜索:   search
登陆:   login
功能区:  shop(如购物车,收银台)
当前的   current

2.另外在编辑样式表时可用的注释可这样写
<– Footer –>
内容区
<– End Footer –>

3.样式文件命名
主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css

div+css做的工字型局部改进版

这段通过对div和css的学习,初见成效,解决了 在ff下 浮动格式的问题。

    .contentright{
        height: 250px;
        width: 580px;
        font-size: 14px;
        list-style-type: none;
        border:1px #66CCFF solid;
        float:right;
    }

 

.contentright{
        height: 250px;
        width: 580px;
        font-size: 14px;
        list-style-type: none;
        border:1px #66CCFF solid;
    }

去掉了float:right;中间内容区分为左右两部分,左部分设置了float:left;这时下面的右边部分就会浮动到上面且紧靠左部。以前自己搞错了,以为设置了float:right;才会浮动到右边,其实不是这样的,这一切都是自动的。设置了float:right;反而使右部向右浮动,导致中间出现空档,使footer部分浮动上来。当然也可以对footer部分禁止浮动 clear:both;

好了,下面就是修修补补的小问题了。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <style type="text/css">
      * {
    margin: 0px;
    padding: 0px;
    }

     body {
     text-align:center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px auto;
    height: auto;
    width: 760px;
    border:1px #66CCFF solid;

    }
    .header {
    margin:auto;
    height: 100px;
    width: 760px;
    background-image: url(header.jpg);
    background-repeat: no-repeat;
    margin:0px 0px 3px 0px;
    border:1px #66CCFF solid;

    }
    .logo{
      float:left;
      background-image: url(scltemp.jpg);
      height: 100px;
      width: 75px;

    }
    .content {
    margin:auto;
    width: 760px;
    line-height: 1.5em;
    border:1px #66CCFF solid;
    }
    .content p {
    text-indent: 2em;
    }
    .content h3 {
    font-size: 16px;
    margin: 10px;
    }
    .contentleft {
    height: 250px;
    width: 100px;
    font-size: 14px;
    list-style-type: none;
    float:left;
    border:1px #66CCFF solid;
    }
    .contentleft li {
    float:left;
    }
    .contentleft li a{
    color:#000000;
    text-decoration:none;
    padding-top:4px;
    display:block;
    width:97px;
    height:22px;
    text-align:center;
    background-color: #009966;
    margin-left:2px;
    }
    .contentleft li a:hover{
    border:1px #66CCFF solid;
    color:#FFFFFF;
    }
    .contentright{
        height: 250px;
        font-size: 14px;
        list-style-type: none;
        border:1px #66CCFF solid;
    }
    .footer {
    margin:auto;
    height: 50px;
    width: 760px;
    line-height: 2em;
    text-align: center;
    background-color: #009966;
    border:1px #66CCFF solid;
    }
  </style>
   <! @author 孙程亮 E-mail:sclsch@188.com -->
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <title>http://blog.csdn.net/suncheng_hong</title>
 </HEAD>
 <BODY>
<div class="header">
  <div class="logo"></div>
</div>
<div class="content">
    <ul class="contentleft" >
    <li><a href="#">首 页</a></li>
    <li><a href="#">文 章</a></li>
    <li><a href="#">相册</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">论 坛</a></li>
    <li><a href="#">帮助</a></li>
    </ul>
    <div class="contentright">
    <h3>前言</h3>
    <p>第一段内容</p>
    <h3>理解CSS盒子模式</h3>
    <p>第二段内容</p>
    </div>
</div>
<div class="footer" >
<p>关于华升 ¦ 广告服务 ¦ 华升招聘 ¦ 客服中心 ¦ Q Q留言 ¦ 网站管理 ¦ 会员登录 ¦ 购物车</p><p>Copyright ©2006 - 2008 Tang
Guohui. All Rights Reserved</p>
</div>
 </BODY>
</HTML>

好了,希望对初学都有帮助,一起进步。

div结合css布局bbs首页

最近趁离职,我在做一个论坛系统,练练手,需要一个论坛首页的html页面,深知自己美工极差,心里很苦啊。于是买了本div+css网站布局的书,没想到讲得还不错,感觉长进很快,于是磨拳擦掌非要自己写一个不可,高手末笑。代码伺候。
我把论坛首页分为header区,信息区,内容区,页脚区。首先用一大div把这些包含进来,主要是考虑到页面整体调节方便,比如要调成宽屏的或者是窄屏的,只要设置一下这个大div就可以了。
先把代码贴出来,供朋友们调试使用。

css:

/* CSS Document */
body{
  background-color:#F5F5F5;
  margin:0;
  padding:0;
  font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, ,sans-serif;
  font-size:12px;
}
.pagehoder{
  width:100%;
  margin:auto;
  background-color:#2662DF;
  border-left:2px solid #7197D7;
  border-rigth:2px solid #7197D7;
  border-bottom:2px solid #7197D7;
}
.header{
  border-top:2px solid #7197D7;
  height:60px;
  background-color: #B1C3D9;
}
.logo{
  background:url(../images/logo.png) no-repeat ;
  width:200px;
  height:60px;
  float:left;
}
.img{
  background:url(../images/images1.jpg) repeat-x ;
  height:60px;
}
.navigate {
  padding-left:20px;
  background-color:#F3F8FE;
  height:10px;
}
.navigate li{
  float:left;
}
.navigate li a{
  margin-left:2px;
  padding-top:3px;
  padding-bottom:3px;
  text-align:center;
  display:block;
  text-decoration:none;
  width:70px;
  height:10px;
  background-color:#ececec;
}
.navigate li a:hover{
  color:#ffffff;
  background-color:#bbbbbb;
}
.notice{
  background-color:#ffffff;
  height:20px;
}
.content{
  background-color:#0000FF;
  height:400px;
}
.contentHead{
  text-align:center;
  padding-top:5px;
  padding-bottom:0px;
  height:20px;
  background-color:#71A3CC;
}
.f1{
  width:60%;
  float:left;
    background-color:#71A3CC;
}
.f2{
  width:12%;
  float:left;
    background-color:#71A3CC;
}
.f3{
  width:12%;
  float:left;
    background-color:#71A3CC;
}
.f4{
  width:15%;
    background-color:#71A3CC;
}
.typeHolder{
  width:100%;
  background-color:#D9DBE4;
}
.type{
  width:60%;
  float:left;
}
.boardHolder{
  text-align:center;
  width:100%;
  background-color:#FFFFFF;
}
.boardName{
  width:60%;
  float:left;
}
.subject{
  width:12%;
  float:left;
  background-color:#F7F7F8;
}
.article{ 
  width:12%;
  float:left;
  background-color:#F7F7F8;
}
.last{
  width:15%;
  background-color:#F7F7F8;
}
.msg{
  background-color:#FAFAFA;
  height:60px;
}
.footer{
  background-color:#99CC33;
  height:20px;
  text-align:center;
}

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<title>sclBBS首页</title>
</head>
<body>
<div class="pagehoder">
    <div class="header">
      <div class="logo">
      </div>
      <div class="img"></div>
    </div>
    <div class="navigate">
       <li> <a href="#">首页</a></li>
       <li> <a href="#">搜索</a></li>
       <li> <a href="#">会员列表</a></li>
       <li> <a href="#">热门主题</a></li>
       <li> <a href="#">最新主题</a></li>
    </div>
    <div class="notice">
        <marquee scrollAmount="2" width="100%">
           欢迎光临sclBBS。
        </marquee>
    </div> 
    <div class="content">
       <div class="contentHead">
         <div class="f1">版面</div>
         <div class="f2">主题</div>
         <div class="f3">文章</div>
         <div class="f4">最后发表</div>
       </div>   
       <div class="typeHolder">
         <div class="type">开源项目</div>
         <div class="place"></div>
       </div>
       <div class="boardHolder">
         <div class="boardName">JForum论坛</div>
         <div class="subject">23</div>
         <div class="article">23</div>
         <div class="last">23</div>
       </div>
       <div class="typeHolder">
         <div class="type">开源项目1</div>
         <div class="place"></div>
       </div>
       <div class="boardHolder">
         <div class="boardName">JForum论坛1</div>
         <div class="subject">23</div>
         <div class="article">23</div>
         <div class="last">23</div>
       </div>
       <div class="typeHolder">
         <div class="type">开源项目2</div>
         <div class="place"></div>
       </div>
       <div class="boardHolder">
         <div class="boardName">JForum论坛2</div>
         <div class="subject">23</div>
         <div class="article">23</div>
         <div class="last">23</div>
       </div>
       <div class="typeHolder">
         <div class="type">开源项目3</div>
         <div class="place"></div>
       </div>
       <div class="boardHolder">
         <div class="boardName">JForum论坛3</div>
         <div class="subject">23</div>
         <div class="article">23</div>
         <div class="last">23</div>
       </div>
    </div>
    <div class="msg">
           <div class="typeHolder">
         <div class="type">看谁在线上</div>
         <div class="place"></div>
       </div>
       <div class="boardHolder">

            目前总共发表了 2,806 篇文章
            目前总共有 4,186 位注册会员
            最新注册的会员: mxjccut
            目前总共有 80 位用户在线 :: 1 位会员, 79 位访客   [ 系统管理员 ] [ 版主 ]
            最高在线人数 2,712 人 [ 记录时间 :: 2007-08-13 16:12:34 ]
            目前在线注册会员: Admin  
       </div>

    </div>
    <div class="footer">
         Powered by sclBBS author:sclsch@188.com
    </div>
</div>
</body>
</html>

图片不能上传,没办法了,不影响学习。
这是我设计的第一个布局,从中了解了,div是块状的,默认是占整行的,如果想设计成两列或多列,可以用float属性,它可以向左(float:left)浮动,这时,如果下面的div大小可以放下的话,就会浮动到上面一行,这样就形成了两列的布局,
多列以此类推。理解了基本的,以后就可以向细的方向学习了。希望给像我一样的初学美工的朋友点帮助,做开发的了解美工也很重要,艺多不压身嘛。

div+css做的工字型局部初版

作为一个程序员,深受不会美工之苦,于是发奋图强,学习美工,下面是我小作,还不完美,做一记录,再图更新。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <style type="text/css">
      * {
    margin: 0px;
    padding: 0px;
    }
     body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px auto;
    height: auto;
    width: 760px;
    border:1px #66CCFF solid;

    }
    .header {
    height: 100px;
    width: 760px;
    background-image: url(header.jpg);
    background-repeat: no-repeat;
    margin:0px 0px 3px 0px;
    border:1px #66CCFF solid;

    }
    .contentleft {
    height: 250px;
    width: 150px;
    font-size: 14px;
    list-style-type: none;
    float:left;
    border:1px #66CCFF solid;
    }
    .contentleft li {
    float:left;
    }
    .contentleft li a{
    color:#000000;
    text-decoration:none;
    padding-top:4px;
    display:block;
    width:97px;
    height:22px;
    text-align:center;
    background-color: #009966;
    margin-left:2px;
    }
    .contentleft li a:hover{
    border:1px #66CCFF solid;
    color:#FFFFFF;
    }
    .content {
    height:auto;
    width: 760px;
    line-height: 1.5em;
    padding: 10px;
    border:1px #66CCFF solid;
    }
    .content p {
    text-indent: 2em;
    }
    .content h3 {
    font-size: 16px;
    margin: 10px;
    }
    .footer {
    height: 50px;
    width: 760px;
    line-height: 2em;
    text-align: center;
    background-color: #009966;
    padding: 10px;
    border:1px #66CCFF solid;
    }
    .contentright{
        height: 250px;
        width: 580px;
        font-size: 14px;
        list-style-type: none;
        border:1px #66CCFF solid;
        float:right;
    }
    .logo{
      background-image: url(scltemp.jpg);
      height: 100px;
      width: 75px;
    }
  </style>
      <! @author xxx E-mail:sclsch@188.com -->
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
 <BODY>
<div class="header">
  <div class="logo"></div>
</div>
<div class="content">
    <div class="contentleft">
    <li><a href="#">首 页</a></li>
    <li><a href="#">文 章</a></li>
    <li><a href="#">相册</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">论 坛</a></li>
    <li><a href="#">帮助</a></li>
    </div>
    <div class="contentright">
    <h3>前言</h3>
    <p>第一段内容</p>
    <h3>理解CSS盒子模式</h3>
    <p>第二段内容</p>
    </div>
</div>
<div class="footer">
<p>关于华升 ¦ 广告服务 ¦ 华升招聘 ¦ 客服中心 ¦ Q Q留言 ¦ 网站管理 ¦ 会员登录 ¦ 购物车</p><p>Copyright ©2006 - 2008 Tang
Guohui. All Rights Reserved</p>
</div>
 </BODY>
</HTML>

 

css样式入门(建立样式模板)

从来没有重视过css样式.也从来没有他细研究过,这次改项目的界面,可吃苦头了.好了,现学现卖了.

页面的

在<head>中间加上这个.

<style>
  .nodata{
    font-size:11px;
    color:red;
  }
 </style>

在页面上应用这个样式.

            <tr>
                    <td>
                        今天:
                    </td>
                    <td>
                        API指数为:
                    </td>
                    <td>
                    <c:if test="${cityDay.pollutionIndeces==null}"><div class="nodata">暂无数据</div></c:if>    
                    <c:if test="${cityDay.pollutionIndeces!=null}">${cityDay.pollutionIndeces}</c:if>    
                    </td>
                    <td>
                        级别:
                    </td>
                    <td>
                       <c:if test="${cityDay.grade==null}"><div class="nodata">暂无数据</div></c:if>
                       <c:if test="${cityDay.grade!=null}">${cityDay.grade}</c:if>
                    </td>
                    <td>
                        状态:
                    </td>
                    <td>
                        <c:if test="${cityDay.status==null}"><div class="nodata">暂无数据</div></c:if>
                        <c:if test="${cityDay.status!=null}">${cityDay.status }</c:if>
                    </td>
                    <td>
                        首要污染物:
                    </td>
                    <td colspan="4">
                     <c:if test="${cityDay.mainPollutant==null}"><div class="nodata">暂无数据</div></c:if>
                     <c:if test="${cityDay.mainPollutant!=null}">${cityDay.mainPollutant}</c:if>
                    </td>
                </tr>

先定底义一个样式,然后在页面上引用就可以了.这是最基本的,以后还要加强学习,有什么问题,就不用找美工了.