搜索
首页web前端html教程对于DIV+CSS的开发方式,我们也要听听另外的声音.(转贴)_html/css_WEB-ITnose

我和作者的观点差不多.标准好,但是未必实用.
以下是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 等邮件列表上的原因吧。

如果浏览器厂商们终能步调一致, 用 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 的设计是未来之路。 可在我们奔向它们、鼓吹新技术的过程中,也会怀疑自己鼓吹的东西是否太夸张了。比较现实地做点东西却往往达不到我们的期望。而教条地推行这些很可能疏远了我们最应该赢得的伙伴。

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

文: Andy Budd / 译: Jjgod Jiang

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

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
了解HTML,CSS和JavaScript:初学者指南了解HTML,CSS和JavaScript:初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色:构建Web内容HTML的角色:构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容,使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码:仔细观察术语HTML和代码:仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent,而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1)htmldefineswebpagertuctureduseTags.2)“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML,CSS和JavaScript:Web开发人员的基本工具HTML,CSS和JavaScript:Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构,使用标签如、等。2.CSS控制网页样式,使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互,通过事件监听和DOM操作。

HTML,CSS和JavaScript的角色:核心职责HTML,CSS和JavaScript的角色:核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

HTML容易为初学者学习吗?HTML容易为初学者学习吗?Apr 07, 2025 am 12:11 AM

HTML适合初学者学习,因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓,易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高,可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML中起始标签的示例是什么?HTML中起始标签的示例是什么?Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

如何利用CSS的Flexbox布局实现菜单中虚线分割效果的居中对齐?如何利用CSS的Flexbox布局实现菜单中虚线分割效果的居中对齐?Apr 05, 2025 pm 01:24 PM

如何设计菜单中的虚线分割效果?在设计菜单时,菜名和价格的左右对齐通常不难实现,但中间的虚线或点如何...

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。