对于DIV+CSS的开发方式我们也要听听另外的声音

2016-02-19 14:20 2 1 收藏

下面,图老师小编带您去了解一下对于DIV+CSS的开发方式我们也要听听另外的声音,生活就是不断的发现新事物,get新技能~

【 tulaoshi.com - Web开发 】

  文: Andy Budd / 译: Jjgod Jiang

  译自 An Objective Look at Table Based vs. CSS Based Design 

  我和作者的观点差不多.标准好,但是未必实用.

  以下是ZT文章:

  经年以来,许多优秀的文章都在赞美着基于 CSS 设计的优越, 哀叹着基于表格设计的没落。但却很少有人换个角度想想,或许是因为你得在了解并运用了基于 CSS 的设计之后才可以批评它, 而一旦了解了之后,你又不愿意回头去用原先的老式设计方法了。

  为了弥补一下这种不平衡,也因为在这场游戏中扮演一个大反派挺酷的,我决定写篇文章,说说为何在某些情况下,传统的表格设计方式就算不比基于CSS 的——或者说基于标准的——设计方式好,也不比它们差。

 一、妖魔化表格

  表格出现以前,Web 本是个相当乏味的地方,正是使用表格排版,才打开了可视化的页面设计的新局面。表格对于 Web 和 Web 设计领域普及的贡献到底有多大或许有争议,但一旦离开表格,我们这些网页设计师们必会失去工作,却是毋庸置疑的。

  近年来基于表格的设计确实被妖魔化了,Web 纯化论者会告诉你,表格对排版毫无意义,因而你绝不能用到它。然而历史证明,许多技术一开始是为了实现某个目标设计的,却在别的领域发现了更大的用场而大展身手。 就像 Web 本身,一开始不也只是为了共享研究数据嘛,现在在娱乐和商业方面的应用却与信息与教育方面的并驾齐驱了。

 二、只为舒服一点

  Web 设计师们多年以来都在使用表格排版页面,这是绝大部分设计师都已掌握的能力。如此地使用表格能保证你获得预想的效果,通过一些简单的 hack,比如间隔 gif, 我们几乎一定能保证我们的站点在最广泛的 Web 浏览器上看起来都一样,从最低版本的 Netscape 4到Safari 这样的现代浏览器。

  尽管先驱者们早已宣传了好久 Web 标准, 大部分的网站还是使用表格和不兼容标准的代码开发的,因此用户代理就不得不在很长一段时间内支持基于表格的排版方式。 这对于 Web 标准的卖点来说,是个致命的打击:标准没有标准应有的地位。不大可能会出现下面这种情况,某个主要的浏览器厂商 (唔,还是说 Microsoft) 突然发布了一个大部分网站都显示不了的浏览器。

  所以网页设计者们总感觉不到开始使用基于  CSS 排版和支持标准的代码的那种危机感和必要性。

 三、降低门槛Web

  正是因为它的门槛低才如此成功的: HTML 是个简单易学的语言,浏览器又能容忍许多标记混乱的文档。 这使在 Web 上发布内容变得难以置信地容易。即便你 12 岁的侄子也能用 Microsoft Office 中附带的 Frontpage 捣鼓出一个简单的网站来。

  基于表格的设计比之基于 CSS 的,当然 CSS 的语法很简单,正常人都会同意:你没必要是火箭科学家才能学会 CSS。尽管如此,其中有些概念还是过于微妙了,不易领会。比如表面上看,Box 模型很简单,但我偶尔还是会在边界折叠 (margin collapsing) 上滑一跤, 浮动(float) 和清除 (clear) 这样的概念也不好理解,较难运用。 以我的经验而言,从了解 CSS 的基本概念到能自如地用 CSS 开发站点,大约需要走过一条为期 6-12 月的学习曲线。

  然后是浏览器支不支持的问题。一旦你正式开始干活,就会慢慢了解哪个浏览器支持什么、不支持什么,和一些常见的浏览器 bug。可惜bug 太多了, 就算“专家”们也难以估量自己花在修整 bug 上的时间。对新手来说就更让人泄气了,因为他们不知道是因为自己误解了CSS 呢,还是某些晦涩的浏览器 bug?也许这就是为何同样的问题一再出现在 CSS-Discuss 等邮件列表上的原因吧。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  如果浏览器厂商们终能步调一致, 用 CSS 开发站点将会容易得多。但我还是觉得——大部分人也会同意——CSS 开发的门槛比基于表格的还是太高了。换个说法, 我觉得这也说明了为何基于 CSS 的设计在Web 专家们之间如此流行。这让他们把自己和那些业余的“Front-page 牛仔”们区分开来,让他们找回当年 Web 只属于自己这个小群体时的感觉。 大概这正式因此,那么多人都把 Web 标准看作不可触及的“象牙塔”, 那么多 Web 标准的鼓吹者却以狂热的态度,带着优越感去看待网页设计。

 四、有些东西还是用表格来做更容易

  我确信我们大家都曾发现,自己为了实现用表格做起来是小菜一碟的功能写了相当复杂的 CSS。比如处理表单 (form) 的外观,形状再复杂怪异的表单也能用表格轻松搞定。 你是可以用 CSS 的浮动元素实现类似的结果,但就麻烦多了。 如果你是个 CSS guru,这种麻烦也是快乐的事。可毫无疑问,如果你只是个普通人,还有个会掐住你的喉咙问你怎么做个小表单也花了这么久的老板,事情就不那么好玩了。

  如果你有足够的知识,又有足够的耐心,习惯于用表格做的大部分事情还是都能用 CSS 实现的。 虽说花的时间长点吧,还是有个限度的(或者被打击得放弃了尝试)。关键是确实有些无论你怎么努力,还是无法实现的东西,其中一项便是页脚栏 (page footer)。我常常见到来自灰心失望的 CSS 作者的贴子, 他们试图创建那种可以粘在窗口底端的页脚栏,使即便那个窗口没伸展到整个屏幕也能保证效果。如果用到了表格,要做出这种效果简单得很, 可单独用 CSS 来做就是另一回事了。 为什么还有 Web 开发者们不愿意用 CSS?就是因为一旦不用表格,简单的事情反而变复杂了。

 五、夸大收益

  有很多理由让你丢掉表格、去适应基于 CSS 的排版, 可在推动 Web标准的洪流中,许多人夸大了收益。 大的站点改用 CSS 排版确实能节省不少带宽。可对大部分的其他站点来说,受益小得庶几可以忽略不计。

  大家都希望页面载入得更快, 而标准鼓吹者们也说 CSS 能帮你做到这一点。大多数站点的“设计”都是均匀分布在整个站点上的,但基于 CSS 的“设计”是放在一个到更多的文件中的。 这些文件会很快变得很复杂、很大,即便一个小站点也是如此。我最近设计的一个站点用了 4 个样式表,加起来有 12k 之大 (虽说包括了空白和注释)。使用 CSS其实是在先集中地载入然后再浏览,而不是把要载入的数据平均分布到整个站点各处。也就是说,相比用表格排版,首页需要花更长的时间来下载。只不过如果样式表已经下载了,它们会被缓存起来而不需要重新下载。可毕竟一个站点的首页是你最不希望载入得那么慢的一页呀。

 六、招揽客户

  即便有时网页设计者们觉得把符合  Web 标准搭售给客户是有必要的,但令人遗憾的事实是,大多数的客户对站点的代码好坏并不在意。我们一般用的是胡萝卜加大棒的方式,胡萝卜是诸如对搜索引擎的友好度之类,而大棒才是网页的亲和力 (accessibility)。

  确然,搜索引擎是比较喜欢语义化标记的页面,而且大家也都认为搜索引擎喜欢短小的代码,通过 CSS 和 Web 标准来建构站点可以大大增进对搜索引擎友好的站点的开发。然而没有银弹。许多基于表格的站点照样获得了很高的搜索引擎排名。 用 CSS 开发的站点照样也可能只获得一个很糟糕的排名。高排名的关键是内容和来自别处的链接,而不是用表格还是用 CSS 来排版。

  另外关于利用客户对“亲和力”这个词的敬畏来搭售 Web  标准特别是 CSS 设计, 其实基于表格的设计没有什么天生的亲和力缺陷,表格只要线性化了,就有意义,内容也就具有亲和力了。现时的读屏器技术已经不错,而且大部分的读屏器都能很好的支持基于表格的站点。当然你的站点的语法最好被认证通过 AA 亲和力等级,即便对更严格的 AAA 等级,不用表格设计也不过是个建议罢了,并非必备。

  另一个经常提到的受益是可以让客户独立于设计提供商。在人人都依照标准开发的世界里,客户要换个开发伙伴是很容易的事情,新的开发人员可以很快明白站点的组织结构,而不需趟过先前某人的标记泥淖。但这得要大量的设计提供商都精通 Web 标准才行。 不幸的是,现在的情况并非如此。 虽然经验丰富的 CSS 开发者在增多,但这还是个相对比较专业的领域,因此,大公司要锁定在这种开发方式上还是比较有风险的——缺少熟练的开发者。我个人的经验是如果一个组织要用 CSS 开发站点, 得长期保持至少一个经验丰富的设计师才够用。 所以现在转向 Web 标准不是降低了客户对开发者的依赖,而是增加了。

 七、总结

  毫无疑问地,Web 标准和基于 CSS 的设计是未来之路。 可在我们奔向它们、鼓吹新技术的过程中,也会怀疑自己鼓吹的东西是否太夸张了。比较现实地做点东西却往往达不到我们的期望。而教条地推行这些很可能疏远了我们最应该赢得的伙伴。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  基于表格的设计还会存在好长一段时间。要吸引开发者,我们可以用实例来教人上手,并降低门槛。更别弄出新的门槛来了。我们得诚实地正视利益和代价。 开发 CSS 站点可能比较困难、耗时,而在某些情况下用表格来排版比 CSS 有意义得多。

来源:http://www.tulaoshi.com/n/20160219/1606768.html

延伸阅读
标签: Web开发
单行一列 以下是引用片段: body { margin: 0px; padding: 0px; text-align: center; }  #content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }  两行一列 以下是引用片段: body { margin: ...
标签: Web开发
你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadd...
标签: Web开发
“重构”的春风吹遍大江南北,互联网一时间风声鹤唳,“div+CSS”俨然已成为一种“时尚”,难以尽数的网站都不约而同地开始了自己的“重构”。然而打开这形形色色网站的源代码,却时常令人哑然失笑—— 我们看到有嵌套6、7层的div布局,有不用table的表格,有纯div+a构成的页面,有成百上千的表现层class……现在关于标准的书籍越来越...
标签: Web开发
当DIV+CSS平地起惊雷突然出现在网页设计行业的时候,官方、民间无不推崇备至,仿佛Table设计的时代就要终结,马上就要步入DIV+CSS的时代,不懂得DIV+CSS你都不好意思说你会网页设计,不知DIV+CSS你都不好意思说你是站长,你要还是用TABLE来设计站点,无数鄙夷之光就投射而来。 然而DIV+CSS真的有这么神吗?该怎么真正的利用DIV+CSS优化站点...
标签: Web开发
在做导航条或产品目录的样式都差不时习惯用到ul,在做圆角这样的图形我也喜欢,用到他们可以最小化减少DIV的套用。但有几个地方需要在CSS控制,不然会出现左边会出现很大的空边。 下面是登陆窗口的CSS代码,为了避免DIV的嵌套,所以运用了DIV.开始未对ul进行定义,只对ul li进行定义,结果左边空出很大的空隔,看来偷懒是不行的。 ...

经验教程

28

收藏

5
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部