这篇文章纯粹是由CSDN的这个讨论而发起的:
http://community.csdn.net/Expert/TopicView.asp?id=3265752
在此帖中,我竭力游说大家放弃表格布局,而采用XHTML+CSS的方法。可是有很多人不理解,因为表格布局相当简单,前期开发相当快捷,大家乐此不疲。
为了让大家更加体会到Web标准开发的好处,我特意将我的一个私活用XHTML+CSS来布局,而与此比较的是我在本科期间开发过的另一个站点。
各位在观看实例时候请一定注意仔细观察每一个细节,并且实际的打开源码看看,到底是哪个更复杂?
利用表格排版的站点页面(这都该马上被淘汰,不包庇自己):
http://www.swjtu.net/index.htm
http://www.swjtu.net/tw/index.asp
利用XHTML+CSS排版的页面:
http://www.ceocio.net/test/index.html
http://www.ceocio.net/test/main.html
这两个实例都包含一个欢迎页和一个内页。
如果你的网速比较慢,你可以发现两个内页下载时候明显的差别,利用表格排版的页面需要等待表格中所有内容加载完成后才显示,而利用XHTML+CSS排版的页面则一边下载一边显示出来。
而从代码的复杂度,由于利用XHTML+CSS,将所有的页面布局全部集中到CSS文件中,所以html页面的代码非常简洁。
在CSDN的讨论中,很多人都说:“利用XHTML+CSS只能做简单的页面,稍微复杂美观的页面还是得靠表格布局”,实际不然,可以参看我的第二个内页,用表格能实现的几乎都实现了。
总结:
使用XHTML、CSS的好处:
- 后期维护方便,几乎只需要更改站点的CSS文件就可以对站点进行改版。
- 如果你要创建一个打印页面,只需要不连接到CSS或者使用其他CSS文件。同样,这样的文档可以被各种需求的人所阅读到。
- 节约站点所占空间和站点流量。
- 在ASP.Net基于模板的开发中。最好的例子就是.TEXT系统。
- ....
实际上XHTML、CSS布局是相当简单的,但是也有一些需要改变的地方:
- 使用div而不使用表格布局,当然如果你有一个数据列表之类的东东,必须得画个表格框起来,那是例外,除此之外千万不要使用table标签。
- 使用li标签格式化数据,可以参看:http://www.ceocio.net/test/main.html中的新闻列表,就是用li实现,其中的图片和下面的线条都通过CSS内置属性植入了li中。
- 把所有的公共图片都利用CSS中标签的背景属性写入CSS文件,而不在html页面中出现,这样的话,可以大大方便日后改版。比如:http://www.ceocio.net/test/main.html的html页面中除了第一条新闻后面根的一个new图标,其他所有图片都定义在CSS中,并没有在html中出现。
- ....
可能有人会觉得这样做是不是很麻烦?开发周期很长?
答案是否,我仅仅用了两个多小时就完成了从切图(当然,图片是预先设计好的啦)到html页面设计,css设计的全部工作。而且这仅仅是两个页面,如果是一个实际的项目,当我的主体css文件写好后,我后面的工作简直就是....爽!相比之下,如果还是用传统的表格布局,那么重复工作简直太多,累!
关于这个页面的标准性可以点击:http://validator.w3.org/check?uri=http://www.ceocio.net/test/main.html (XHTML)和http://jigsaw.w3.org/css-validator/validator?uri=http://www.ceocio.net/test/main.html (CSS2.0)查看,你也可对自己站点进行测试,看看是否符合标准。
为了体验XHTML、CSS,你可下载这两个文件进行参考:
http://www.ceocio.net/test/main.html
http://www.ceocio.net/test/main.css
打印 | 张贴于 2004-09-03 02:27:00 | Tag:暂无标签
留言反馈
用CSS完成所有的外观上的东西不好吗?
如果你回答好的话, 那么以前HTML中用于描述外观的标签还有必要保留吗?
让HTML成为一个简洁易学的东西不好吗?
<img src="" /> 这样些会比<img src="" ></img>省事吗? 而且还明显浪费了5个字节!如果10张就浪费了50字接! 为什么还以浪费为溶?
虽然进步不大但有进步总比没进步好! 不可能因为这次的成绩比以前的只好了一点点而说不如以前吧....
1,table :用表格来控制元素的位置!
2,table+css :table是是一个容器,算不上table布局!
3,div+css:div也是是一个容器,也算不上div布局!
我个人理解只有两中布局方式:
1,table
2,容器+css (容器可以是div/table/span)
我不敢说哪种才是正确的,可我比较喜欢第2种
XHTML 并不是新的技术而是"建议"别人遵从的新标准而已! 它去掉(一些是建议)了一些没用的标签.自从(多少年了?)IE支持CSS以来,那些(被建议去掉的用来描述外观的)标签我都没用过了,我觉得那些去掉的确实没必要再用了...上网为的是内容,如果用户的游览器不支持CSS那么我就干脆只给他想要的东西.如果支持CSS那么我就他美好的视觉!
DIV+CSS布局和TABLE+CSS布局是一样的! 你喜欢哪个就用哪个. 先标准没有说,DIV+CSS才是正确的或者说TABLE+CSS才是正确的. 它只表明了一个观点-----"结构于表现分开"
请大家注意! 单用TABLE(不是TABLE和CSS组合使用)的方法是落后的!如果你支持CSS的话,那么你的观点和我一样.
IE没有反对新标准! IE已经支持先标准可IE也同样支持旧标准(因为考虑到利益);
Firefox只支持新标准是而没有错误的;
1,CSS 样式与标签分离后, 维护性是否增大?
传统的样式是放在标签里的, 我们很明确哪个标签用了哪个样式, 很直观. 如
果样式与标签分离的话, 当需要改变一个DIV样式时, 必需要从样式表中按照相关标
识查找, 内容页里面看看, 样式表中又找找, 一个标签对应一个样式, 无疑是花了更
大时间, 对于纯文本手写网页的用户无疑加大了压力. 比如, 我有100个 DIV , 每个DIV 并不都尽是相同的样式, 那么我是否要有 100 个样式呢? 或者 50 个呢?
2,关于残疾人的浏览
WEB标准声称能方便残障人士浏览网页. 这里打个比方, 假如幼儿园要建一个网
站, 残障人士有这个阅读必要吗? 相反地, 关于残障人士的生活方式, 如上网, 是有
专门的机构, 专业人士为他们提供服务. 理论上就我们而言, 是不需要的, 除非是专
门为残障人士服务的机构
3,关于便于打印
这方面完全可由第三方软件提供这种服务, 退一步来说, 在网页上"复制"->"
粘贴"也不是一件痛苦的事情.
4,关于统一标准
我们不可能, 也不需要做到面面俱圆. 我们不能指望编一个网页, 在 DOS 上, 在WINDOW1.0 上, 在WINDOW 98 上, 在 苹果机 上, 在 UNIX 上, 在 LINUX 上, 甚至在 手机 上也能正确显示. 不同的环境有不同的需要, 不同的需要自然有不同的标准, 这个想法本身就是夸张的做法. 标准上还提到"电冰箱"也能读懂, 这明显是夸张了. 假如我要编个人网站, 我也需要"电冰箱"知道我的想法吗?
5,关于浏览速度
我们并不指望在ADSL宽带和56K猫有着相同的浏览网页速度. 速度, 除了网页本身复杂度以外, 还有很多因素, 诸如:网络状态, 系统配置, 当前程序打开数, 服务器是否忙碌......方方面面. 退一步来说, 我肯定WEB标准是快的, 但能快多少? 10毫秒? 20毫秒? 1秒? 2秒? 1分钟? 10分钟?..... 我们付出那么多的努力, 只是换得那么一点儿的速度?
6,HTML代码非常简洁?!
HTML代码非常简洁, 但 CSS 样式亦相当复杂. 当我们需要修改页面时, 还要逐行逐行地去查阅究竟哪个标签对应了哪个样式, 这个样式里面又包含了什么样式, 它们之间有什么关系......
7,建议并用方案
杀鸡不需要用牛刀, 小刀亦杀不到牛. 应该根据特定要求适用具体的方案. TABLE 明显是简单易用, 再适当加入 CSS, 有"如虎添翼"之感. WEB标准亦为我们阐述了一个网页制作的新概念, 新方法, 新思想, 我们也应当去学习里面的优点. 我们不可能, 亦不必要全部按照WEB标准或不按照WEB标准来写网页.
此外, 个人认为, 以目前状况来看, WEB标准的优势暂时还不明朗, 前景比较模糊.
我们就不要理标准不标准的了,一个字,学吧.只要能把我们想要的东西,以最快最好的方式表现出来就行了.学多种网页结构设计的方式又何妨!!
table 和 div+CSS各有各的特色.本来他们就可以一起用的啊.只是我们的想象力不同而以.
我们就不要理标准不标准的了,一个字,学吧.只要能把我们想要的东西,以最快最好的方式表现出来就行了.学多种网页结构设计的方式又何妨!!
table 和 div+CSS各有各的特色.本来他们就可以一起用的啊.只是我们的想象力不同而以.
我现在也在学这个技术 但我不会把它当作唯一的选择 希望那位朋友能告诉我一些教程的链接好么? 在此谢谢!!
美观不美观不是你说了算也不是我们说了算 何谓美观大家的审美观念不同罢了 问题是网页是给其他人看的 不是自己看的 一个再有本事整天衣裳不整也不会获得别人的好感的 美观也好 也要实用才是正理 缺一不可 毕竟我们大家面对的都是人而不是网页 考虑的也是人 对不对 技术再好 你后台做的再好 用户是不会知道的 他看的到也仅仅是外表 这么说其实也算是以人为本吧 呵呵
我也认为所谓技术标准就是人们都爱使用的东西 越傻瓜才是越容易被人接受的 如果说花的时间精力和所获得的回报不符的话 这个标准也会被人淘汰的 XHTML+CSS+DIV至少在国外很多大公司都未成为标准技术 那么肯定有他的理由 至少也说明其中有缺陷 不是么?
简明\直观是永恒的,真正的主题,有那些时间,工夫,应该用在后台的逻辑里,不要金玉其外,败絮其内.当然,界面要尽可能的使用css(最好一定要使用)
如果在前期,DIV设计不合理根本谈不上后期的维护。
合理地使用TABLE + CSS,始终是一种不错的选择。
在某种意识形态下,所谓的标准,只不过是受某些利益驱动下的章条。
我觉得真正能成为标准应该是那些效率高、易用性强、并且被广泛人接受的模式。例如:微软。
试想,现在有多少人用 Firefox 来浏览网页,不是不习惯,而是根本 Firefox 就是一个天生残缺的怪胎。IE才是顾全大局的勇士。
反对“好看的站点就是烂的站点”,如果那样的话,我就失业了。
我是做美工的。
尽管如此,我看法是没有什么好不好的,在表达层xml能做html也能够做,div能够做的tablel一样能够做,速度一样的快,如果象版主一样整个版面嵌进一个表格里,那是他不会用table而已。
div的好处是适于后期定制,不用修改程序文件,所以可以让界面的菜鸟去维护外观。如果不是部门分得这些仔细或者准备用户自已修改的话,老实说,我觉得div没什么好的。而且,有多少个博客之类的用户能自已改css,也是深表怀疑中。
至于用xml代替html,最反对了。
<table>
<tr>
<td>
<!--此处为站点头部-->
</td>
</tr>
<tr>
<td>
<!--此处为站点主体-->
</td>
</tr>
<tr>
<td>
<!--此处为站点尾部-->
</td>
</tr>
</table>
如果把最外面这个table拿掉,直接用3个不嵌套的table你会发现是边下载边显示的。
另外,所谓的xhtml+css比html4速度快是因为xhtml+css把结构部份放在css里,xhtml文件本身容量就小了,而css会先从缓存读取,所以速度会快些。
简单、流量更小、更容易布局、工作量更小、界面设计更容易的标准就好标准,而不是将网页设计弄得更复杂、更抽象、更难学。
因为我也关注WEB标准
WEB标准在国外已经推广好一段时间了
在国内却不是很长时间
看到这么多人支持标准 我们应该不会落后很多
这里所说下载速度是指下载完成而且显示给用户的时间,就是说table必须整体下载完成后才向客户输出内容,而div+CSS是边下载边显示。
而是代码的下载顺序和内容的查询速度决定的,
一万个空内容的嵌套表格也比一副*.gif 下载快!
下载顺序从最外层标签开头开始,标签结尾结束,然后显示,
至于将背景图加在CSS里,在文件主体下载前就在head里开始下载了.
xhtml(DIV+CSS)的优点在于,把结构层和纯表现层分看,
程序员只关系结构层就可以了.
只要用心解决,DIV可以作出比TABLE一样的复杂页面.
W3C的标准是推广的国际标准,网页开发者的责任就是向国际化靠齐,不管这个标准有多烂,只有共同遵守一个标准,网络才能走向国际化的完美.
标准终归是标准,关键要看实现标准的东西到底是什么样子。
标准就像一个接口 interface,主要还是要看它的 implement。
其实不就是把样式表和内容分开来嘛。。。
有人说DIV比TABLE快,我觉得不见得。
有人说符合标准,那无非是一个技术标准,如果标准别人(如微软)认可了,那标准就有用,否则就没用,就跟联合国一样。
有人说DIV比TABLE好,我觉得关键在于CSS,你同样可以不在TABLE定义,就把TABLE当数据使用,然后用CSS来定义。一样。XHTML无非就是把标签换了罢了。
为什么老是有人把CSS和TABLE拿去对比,这两个东西是同一类的吗?
何必什么HTML到XML的过度呢,这东西无非就是某写公司想多争点钱采用的策略,就跟微软整天搞新系统、新的开发语言一样。如果是我,我直接跳到XML+XSL。
我当然也强烈拥护样式文件和数据文件分开,这样比较好管理,但是在没出现 支持这类模式的编辑器出来之前,还是有很大开发难度和消耗很多时间的。
to ceocio :
在ASP.net中的话,结合模板技术,使用Xhtml+css太好不过了
-------
给个小例子看看,现在web 控件datagrid的在客户端还都是table啊
这种方案,在企业局域网内部,还是很有效的。
所以我只是用<DIV>取代<Table>,然后是用标准的可替换的CSS。
不过这种东西对于个人主页,Internet站点才有用,对于企业内部的网站来说,这点显示速度基本上是不用考虑的,布局嘛,,现在有很多企业的Portal解决方案,基本上不用自己做。
比如SharePoint Portal Server,架子都给你打好了。。。自定义就可以了。
恩,只是觉得大家在观念上应该改变一下,更换一下认识:)
to minbear :
知己啊!
不要说我钻horn尖(出自longhorn,长牛角),
HTML和XHTML是markup不是代码,
当然也不存在代码结构了,
HAHA,开个玩笑,我的意思exactly是MS对XHTML的态度就是我对XHTML的看法----------------无实质性的技术。
在ASP.net中的话,结合模板技术,使用Xhtml+css太好不过了:)
to 哈哈儿:
这不是对“不同开发语言有强烈爱憎的不招”,而是对新技术的推广,用表格我也会,而且绝对不比任何人差。
花了一个上午的时间看了所有的文章,感觉不错,希望我未来也能跟着这个潮流走,尽量去按照xhtml标准去写,呵呵,还有我也用editplus,但我也用dw,维护我现在单位的网站。因为还是dw来的直接,不过用了xhtml标准恐怕我的改用笔来记录我的想法了,呵呵:-)开个玩笑,不过我一直在研究asp.net starter kit我觉得里面的那个portal是我想要的效果,就是俗称的内容管理,这是比较感兴趣的。我想如果把这些结合起来不是更好!!希望我们大家一同努力。
。。对不同开发语言有强烈爱憎的不招。。。
对不同的开发方法都有强列爱憎
认识水平还是低啊
我知道观念转变是一个痛苦的事情,我也经历过,不过当你真正走过来后,你会觉得这真是太棒了。
如果什么事情都是提升硬件就能解决的话,那你就错了,
何谓“服务器好就OK了,速度不够就加内存啊”?由代码结构所决定的瓶颈你能解决吗?
举个很简单的例子,如果一个盲人通过屏幕阅读机,你叫他怎么阅读满是无用标签的站点?
如果使用XHTML、css的话,各人觉得最好是使用editplus等工具,用dw等的话,是看不见实际效果的:(
一直使用.Text的blog,使用其中的自定义CSS来实现界面的更新,非常方便。
还是在dw里用表格直观阿