企业网站页面组件,我们该如何去优化?

一般来说,对于页面上那些包含文章文本或大段落文本的区域,我们一直很自然地认为它们应该适应任何长度和大小的文本,所以我们也应该让它们对登录、标题信息栏、页面路径导航栏和搜索栏等其他横向页面组件具有这样的适应性,这就是我们今天要讨论的网站页面组件优化。

我们想在网站上实施以下设计,如何优化网站?

根据以往SEO代码优化的经验,我们将阐述以下内容:

由一系列嵌套表构成。

图片(如每行两端的圆角)和文字处理位于表格单元格中。利用表格和gif小图片定位页面图文是一项被抱怨了很久的技术,也是一项不考虑网站优化的技术。大多数网站都是这样建立的。我公司在对原主站进行改造时,在导杆上遇到一个小圆角,很难定位。最后,我们采用了一个表来修复它,然后用一个include语句将它包含在文件中。

这不是完美的重构,因为有些地方可以用css简单定义,但是用了表,导致代码臃肿。这并没有最大程度的优化网站。

从网站优化的角度来看这种常见的方法,有不足之处。

1.不必要的图片(横线两端的圆角渲染也和文字内容一起写在页面代码中)

这些不必要的图片给爬你网站的蜘蛛带来了麻烦。由于这些不必要的图片出现在页面代码中,蜘蛛在搜索网页时需要花费一定的时间过滤这些无关的代码。同时也增加了网页的代码容量。搜索引擎通常对网页的容量有要求。

2.固定行高如果改变文字处理的大小,会发现横向设计效果被破坏,不利于网站的维护和修改。

3.臃肿的代码与大多数传统的网页设计方法相同。这两行是用大量代码构造的,嵌套的表格会增加相当冗余的HTML代码。这些臃肿的代码会消耗服务器空,填满带宽,浏览网站可能要等很长时间,对用户不友好。

使用css+div,考虑网站优化实现以上设计

/* CSsDocument */

# register {

float:左;

宽度:100%;

边距:0;

填充:0;

列表样式:无;

颜色:# 690;

背景:# bddb 62 URl(image/re _ bottom . gif)no-repeat bottomleft;//以上组件的底部圆角图(

圆角渲染是通过将一些白色阶梯像素附加到行的每个角来实现的。

)

}

# register a {

文字装饰:无;

颜色:# 360;

}

#reg{

float:左;

边距:0px

填充:8px14px

}

# find { float:right;

边距:0px

填充:8px14px

}

# message {

clear:两者都有;//清除层浮动对#消息层

的影响

字体粗细:粗体;

字体大小:110%;

颜色:# FFF;

文本对齐:居中;

背景:# 92b 91 curl(image/mess _ top . gif)no-repeattopleft;//下组件

顶部的圆角图

}

# message p {

边距:0px

填充:8px14px

背景:URL(image/re _ bottom . gif)no-repeattle ft;//在

上面的组件下面的圆角图

}

# message strong {

文本转换:大写;//let

}

# message a {

背景:URL(image/mag _ g . gif)no-repeat 050%;

边距:0px 0px 0px 6 px;

填充:2px15px

文字装饰:无;

font-weight:正常;

颜色:# FFF;

}

#find{

背景:URL(image/mag _ glass . gif)no-repeat 050%;//对齐值为在垂直方向(垂直中心)从线条顶部向左水平距离的050%和线条高度的50%

}

考虑网站优化实现以上设计优势:

1.代码结构与设计效果分离。

2.不再有固定的高度:文字尺寸加大,设计效果不被破坏。

3.将第二行文本添加到# message行,这样设计人员就不需要进行任何样式修改。

4.减少无用代码,减少代码容量,既能加快用户访问网站的速度,又能减少百度蜘蛛抓取网站的障碍。

有什么想法请分享。

蝙蝠侠IT https://www.batmanit.com/h/1634.html 转载需授权!

为您推荐

发表评论

电子邮件地址不会被公开。