通常，对于页面上包含文章正文或大段文字的那些区域，我们总是自然而然地认为它们应该适合任何长度和大小的文本。然后是用于登录的搜索栏，页面标题信息栏，页面路径导航栏等。水平页面组件我们还应该使它们具有这种适应性，这就是我们今天要讨论的网站页面组件优化。
我们要在网站上实现下面的设计，怎么才能优化网站呢?
根据以往SEO代码优化的经验，我们将通过如下内容阐述：
用一系列的嵌套的表格来构造。
图片(例如每行两端的圆角)和文字处理位于表单元格，使用表格和gif小图来定位页面图文，是一种已经抱怨很久的技术同时也是一种没有考虑网站优化的技术。大多数web站点都是用这样的方式来构建的。我们公司在重构以前的主站时遇到了导般栏上的小圆角很难定位，最后采取了表格来固定，然后用include语句包含到文件中。
这不是完美的重构，因为有一些地方可以用css简单定义，却用了表格，导致臃肿代码。这并没有最大地优化了网站。
用网站优化的眼光看这种常见方法，它是存在缺点的。
1.非必要的图片(横行两端的圆角效果图也和文本内容一起写在了页面代码中)
这些非必要的图片给搜索引擎的蜘蛛爬行您的网站带来了麻烦。因为这些本来不必要的图片出现在页面代码中，蜘蛛在检索网页时，需要花费一定的时间去过滤这些无关紧要的代码。同时也增加了网页的代码容量，搜索引擎对一个网页的容量一般是有要求的。
2.固定行高如果改变文字处理大小就会发现横行设计效果被破坏，这不利于网站的维护和修改。
3.臃肿的代码和大多数传统的web设计方法一样，这两行使用了大量的代码来构建，嵌套的表格会增加相当的冗余HTML代码。这些臃肿的代码会耗费服务器空间，塞满带宽，当浏览者浏览网站时可能要等很长的时间，对用户不友好。
下面用css div同时考虑网站优化来实现上述设计
/*CSSDocument*/
#register{
float:left;
width:100%;
margin:0;
padding:0;
list-style:none;
color:#690;
background:#BDDB62url(image/re_bottom.gif)no-repeatbottomleft;//上面组件的下面圆角图(
圆角效果图是用一些白色阶梯状排列的像素点附在行的每个角来实现的。
)
}
#registera{
text-decoration:none;
color:#360;
}
#reg{
float:left;
margin:0px;
padding:8px14px;
}
#find{float:right;
margin:0px;
padding:8px14px;
}
#message{
clear:both;//清除#message上的层浮动对#message层的影响
font-weight:bold;
font-size:110%;
color:#FFF;
text-align:center;
background:#92B91Curl(image/mess_top.gif)no-repeattopleft;//下面组件的上面的圆角图
}
#messagep{
margin:0px;
padding:8px14px;
background:url(image/re_bottom.gif)no-repeatleft;//上面组件的下面的圆角图
}
#messagestrong{
text-transform:uppercase;//让