注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

奕克

爱家人爱工作爱生活

 
 
 

日志

 
 

网页布局DIV+CSS vs TABLE  

2010-05-12 10:01:15|  分类: 技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
        DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。

  CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。 

  自从CSS出现之后,HTML终于摆脱了杂乱无章的恶梦,开始将页面内容与样式分离

  DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。

  在可以预计的将来,table的地位依然十分重要,于是,如google之流依然会生意兴隆。但是div代表的是网络世界发展的方向。它们一个简单,一个先进,萝卜白菜,您选什么都是有可取只处的.我们都很按您的要求认真服务的!

  div是html(超文本语言)中的一个元素,div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的table布局,真正地达到了w3c内容与表现相分离.

   DIV+CSS高级布局已逐渐流行,但面对所谓DIV+CSS布局的叫法让人更为担心,不要让DIV成为Table的替代品,多层嵌套的DIV会严重影响代码的可阅读性,活用HTML为我们提供的标签吧。
           使用DIV+CSS布局网站的优点和缺陷  随着WEB2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用DIV+CSS制作方法,从实际应用情况来看,此种方法绝对好于表格制作页面的方法。

  如今大部分网站仍然采用表格嵌套内容的方式来制作网站,虽然此方法对于我们来说比较熟悉、比较上手;但是,它却阻碍了一种更好的、更有亲和力的、更灵活的,而且功能更强大的网站设计方法——DIV+CSS。 

  CSS网页布局的意义体现在如下方面: 

  一、使页面载入得更快

  由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小。相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的时候,逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里,使得加载速度很慢。 

  二、降低流量费用

  页面体积变小,浏览速度变快,这就使得对于某些控制主机流量的网站来说是最大的优势了。 

  三、修改设计时更有效率

  由于使用了DIV+CSS制作方法,在修改页面的时候更加容易省时。根据区域内容标记,到CSS里找到相应的ID,使得修改页面的时候更加方便,也不会破坏页面其他部分的布局样式。 

  四、保持视觉的一致性

  DIV+CSS最重要的优势之一:保持视觉的一致性;以往表格嵌套的制作方法,会使得页面与页面,或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法,将所有页面,或所有区域统一用CSS文件控制,就避免了不同区域或不同页面体现出的效果偏差。 

  五、更好地被搜索引擎收录

  由于将大部分的HTML代码和内容样式写入了CSS文件中,这就使得网页中正文部分更为突出明显,便于被搜索引擎采集收录。 

  六、对浏览者和浏览器更具亲和力

  我们都知道网站做出来是给浏览者使用的,对浏览者和浏览器更具亲和力,DIV+CSS在这方面更具优势。由于CSS富含丰富的样式,使页面更加灵活性,它可以根据不同的浏览器,而达到显示效果的统一和不变形。 

  说了这么多CSS网页布局的意义与优点,同时也不能轻视CSS网页布局的副作用:


  一、DIV+CSS尽管不是高不可及,但至少要比表格定位复杂的多,即使对于网站设计高手也很容易出现问题,更不要说初学者了。 

  二、CSS网站制作的设计元素通常放在1个外部文件中,或几个文件,有可能相当复杂,甚至比较庞大,如果CSS文件调用出现异常,那么整个网站将变得惨不忍睹。 

  三、虽然说DIV+CSS解决了大部分浏览器兼容问题,但是也有在部分浏览器中使用出现异常,比如火狐浏览器,在IE中显示正常的页面,到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题,但是可以说在目前来看,DIV+CSS还没有实现所有浏览器的统一兼容。 

  四、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。DIV+CSS网页设计并不能保证网页对搜索引擎的优化,甚至不能保证一定比HTML网站有更简洁的代码设计,何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量,这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前,而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言,网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。 

  综合以上讨论的DIV+CSS优势和略势,我认为不可盲目跟风,如何更有效、更合理的运用WEB2.0设计标准,这需要很长时间的学习和锻炼。而如何将DIV+CSS运用的更好,我觉得这需要通过不断的实践和体检,积累丰富的设计经验,才能很好的掌握这门技术。

       最后我们来看看2006年CSS世界大赛得奖作品,看看什么叫做W3C下的完美艺术吧!
       http://awards.cssmania.com/2006/07/07/css-world-awards-winners-2006.php
  评论这张
 
阅读(129)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017