请各位以网站设计为职业的同行进，对于目前和今后网页布局的思考

[font=黑体][size=3]许久没有在论坛上发表文章了。这几天在设计“非卖品的小屋2006版”的时候，突然看见几篇文章，觉得有必要和各位舟友讨论一下一个问题：表格布局的取舍和DIV+CSS的布局新概念？[/font][/size]

[color=red]先看一下网上几篇文章的段落，其中技术部分都没有截取，因为这是之后的问题了。[/color]

1、我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。

如果你希望你的HTML页面用CSS布局(是CSS-friendly的)，你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。

外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来，CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。

HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。

2、为了实现更好的视觉上的效果，原来在修改L-blog的时候嵌套了大量的表格。实际上就是用表格来布局了，这种做法显然是不合理的且结构混乱的。举个例子：原来做过一个电子商务英语课件，视觉浏览的效果很好，但单单一个html页面就高达50多K[url=http://www.comicxk.com]，[/url]这确实应该“归功”于表格。多人也都知道，浏览器在解析表格的时候是从最里层的表格开始，表格嵌套越多，这种过程就越长，影响了浏览速度。表格是用来显示数据的，而不是用来布局的。

CSS确实是个很好的东西，最初学网页设计的时候，我仅仅是对其能够定义段落及字体，统一网站风格印象深刻。Css的作用远远比这强的多，他对于布局的能力远比表格强大和精简的多。这就是我最近一直在做的：清除原来设计上采用冗余的表格嵌套，而用CSS来达到以前的效果，甚至更好。结果就是页面加载时间减少了，尽管微乎其微。

可是这样又带来了另外一个问题。原来整个页面嵌套在一个大表格中（可以想象的到只有整个页面在浏览器中全部加载完毕，页面才会显示出来，期间浏览者只能对着空白页发呆）这样的好处是什么呢？页面里面采用的表格宽度全部为100％而这个最外层的表格设为固定宽度。我只要修改这个外层表格的宽度，我就可以一劳永逸的达到修改整个网站页面的宽度，一改全改。现在我想到了E-blog所采用的宽度变量的好处，一方面达到了一改全改的目的，另一方面又可以不采用把整个页面嵌套在一个表格中而增长浏览者等待的时间。

Firefox真是个头痛的问题，因为我发现当div 宽度设为100％放在固定宽度的表格之中的时候，用firefox浏览的话，div一定会撑出来（如图），十分难看。如果你用table去替代他们，你会发现无论是在ie还是firefox浏览效果就是一致的。可是这样的话，你又走回了十字路口。[color=red]table or Css?[/color]

3、你正在学习CSS布局吗[url=http://www.comicxk.com]?[/url]是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习：

第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。

另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换成对 应的什么CSS语句。 当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。

[align=center]——————————————————分割线——————————————————————[/align]
   [color=red]好，现在我来说一下自己的看法，非常粗浅的理念，请大家见谅：[/color]
1、看了一些文章和实际操作后感觉到，如果今后要完全用DIV+CSS来进行网页设计，那么必须要完全放弃用PS进行设计然后切割再导出作成表格的制作思路。这对于刚要入门的一些新手来说，反而非常容易。但是对于从事这行业几年的来说，似乎很难把头脑中的一些思路进行转化。

2、由于DIV+CSS的布局采用全新的理念，所以在设计过程中一会儿就会想到：“哎，如果这块地方用表格来做多容易啊？”

3、目前的浏览器还不支持CSS的全部功能。我们在设计中最多用到CSS的一些基本功能，如：段落、文字、边框、定位层等等。但是CSS的功能是非常强大的。浏览器的局限性对目前的DIV+CSS产生了影响。
4、看了看IBM的网站，他是一个非常典型的DIV+CSS的设计。[url]http://www.ibm.com[/url]

楼主说到用div+css定义可以理解,但是怎样才能做的舍弃PS呢,就针对一些需要处理的图片??希望可以说明一下.刚涉及这方面,还望指教~

[quote][b]引用第1楼[i]雪枫缘[/i]于[i]2006-05-09 17:53[/i]发表的“”[/b]:
楼主说到用div+css定义可以理解,但是怎样才能做的舍弃PS呢,就针对一些需要处理的图片??希望可以说明一下.刚涉及这方面,还望指教~[/quote]

     不是，PS是不能舍弃的，我说的是那一套理念。因为DIV+CSS是完全不用表格的布局方法，就是一个页面中全部用层来完成布局，那么对于以前的切割法应该不适用了。
   而且，DIV+CSS的布局网页，优点在于生成的页面非常小，大的那个文件只是*.CSS本身，因为所有的CSS都放在其中。

.......你说的是比如<div  style="margin-left: margin-top">这样的吗?不过我做也很少用表格的,但是如何做到完全没有表格??那样布局不是很难受...

建议投票增加一项:  "己经采用DIV+CSS 进行构架"

哦，对，忘记了。现在加了说~

2004年的时候不少网站就开始用DIV+CSS了,     现在是更多了.

[quote]另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换成对 应的什么CSS语句。 当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。[/quote]
期待看到

[quote]表格是用来显示数据的，而不是用来布局的。[/quote]

标准并没说放弃表格,标准给我的感觉最大的就是强调:结构,表现,行为,三者相分离!

当然,应该用表格的时候,还得用!

否则得不偿失!

哦.对,因为动态数据如果不用表格来框定,也的确没办法确立它的基本位置

等会儿看!先留个脚印

呵呵~~~~~~好~！~！ [s:1]

我的网站就是用CSS+DIV布局的，[url]www.yyfx.91.tc[/url]

[font=楷体_GB2312]文字[/font][font=楷体_GB2312]文字[/font][size=3]文字[/size][size=2]文字[/size][color=orange]文字[/color]\因为我现在刚上网页的设计和制作,好多东西都不懂,希望能得到大家的帮助!

我也来探讨一下吧！我经常听舟友说起CSS+DIV布局，但是我不太了解这是一个怎样的布局，看其他舟友做的网站感觉上并不难。。。

不过我感觉以后的发展趋势，会是用CSS+DIV来布局。我投一票！！！！

以后再说！

只是见过,具体到实际制作中,还没弄过,期待更加详细的说明

我已经知道用ＤＩＶ　　ＣＳＳ制作出来网页的优点了　　
但不排除其还不能完全顶替表格的位置　　至少我这么认为
对于目前的我来说没有表格　我就做不出页面　还需努力饿
我会尽量学好　ＣＳＳ也会尽量不用ＴＡＢＬＥ　　

!其实目前中国还是不处于更上时代的时候!你把网站的美工加强
懂CSS+DIY就可以了!
看中的还是你美工能力!
~在说!CSS+DIY在企业网站看不出有什么很好的疗效
门户网就看的出!
文件小!速度快!~