模板建站动态

　　一般对于页面上那些包含文章正文或者大段文字的区域，我们一直自然地认为它们应该适应任何篇幅和大小的文字，那么对于登录、页头的信息条、页面路径导航条以有搜索条等其他横向页面组件我们同样应该使它们具备这样的适应性，这就是今天我们要讲的网站页面组件优化。 　　我们要在网站上实现下面的设计，怎么才能优化网站呢? 　　根据以往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;//让这部分文字显示为大写格式 　　} 　　#messagea{ 　　background:url(image/mag_g.gif)no-repeat050%; 　　margin:0px0px0px6px; 　　padding:2px15px; 　　text-decoration:none; 　　font-weight:normal; 　　color:#FFF; 　　} 　　#find{ 　　background:url(image/mag_glass.gif)no-repeat050%;//对齐值为050%水平靠左侧垂直方向离行的上边50%行高的距离(垂直居中) 　　} 　　考虑网站优化来实现上述设计优点： 　　1.代码结构与设计效果的分离。 　　2.不再有固定不变的高度：文字尺寸增大了，设计效果没有被破坏。 　　3.#message行中加上第二行文字，不需要设计师们再做任何样式修改。 　　4.无用代码减少，代码容量减少，不仅能加快用户访问网站的速度而且减少百度蜘蛛爬行网站的障碍。 　　如果您有什么想法,欢迎一起交流.

培恋网原创版权，网站建设提供网站代运营、模板网站制作转载请注明出处,本文地址：https://www.xiaopeijx.com/news/media/75032.html