设计网页定位真烦，大家有什么好方法？

[czxwm]

设计网页定位真烦，大家有什么好方法？

[duanboshi]

有利必有弊，有弊也有利！

[ceocio]

源：
http://blog.mvpcn.net/ceocio/archive/2004/09/03/3533.aspx
http://blog.joycode.com/ceocio/archive/2004/09/03/32312.aspx



这篇文章纯粹是由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标签。
使用
标签格式化数据，可以参看：http://www.ceocio.net/test/main.html中的新闻列表，就是用
实现，其中的图片和下面的线条都通过CSS植入了
。
把所有的公共图片都利用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

[活靶子哥哥]

阿捷的网站
http://www.w3cn.org/
还有这个
http://www.onestab.net/seybold/

[gucs]

mark

[patchclass]

试试呢

[jerrycool]

最好用表格定位，用层的话，分辩率不同会有错位的情况。

[yuanhong198225]

学到了很多!

[percyboy]

详见：http://blog.joycode.com/percyboy/archive/2004/09/04/32548.aspx

摘要：

网页设计时一个最重要的原则是：
能够最大限度的预料到访问者将要看到的页面效果
并且希望这个效果不要过于差劲。

不同的浏览器对于 CSS 标准的实现却存在着很大差异：
（http://devedge.netscape.com/library/xref/2003/css-support/css1/mastergrid.html）

过分依赖 CSS 会增加这种复杂性，使得我们的目标——使页面效果可控、可预料——变得更加困难。

所以：在浏览器市场份额没有大的变动前，应用 CSS 格式化时也要顾及一下浏览器的差异，在不太影响效果的前提下应用 CSS。



附图：
ceocio 举出的例子（http://www.ceocio.net/test/main.html）在 Mozilla 中的效果：
http://www2.zzu.edu.cn/pb/yy/163/xhtml.gif

[draclosta]

.TEXT的系统确实很好的使用了Css，目前我也在尝试开发一个Blog，就是参照了它的方式。

其实第一次尝试使用VS 2005时，第一个给我的惊喜就是html代码比2003规范多了，比如
<br />，呵呵。

不过像GridView这种数据表格应该是避免不了table的吧，怎么办呢？

[jjtangsa]

学习

[jimmyge]

學習,呵呵...

[liuruhong]

to ceocio
从某种意义来说，我是一个非标准化的家伙，不过我会去考虑事实标准的兼容。

关于使用表格或者div来实现网页排版的问题，我觉得应该是双仞的，我不太喜欢使用DW来设计我的网页，除非是一个页面太大，有太多重复的元素，这个时候我会使用DW做出参考布局，然后还是喜欢手工的方式，其实基本的原则就一个，通过自己控制html能够让你的代码最小化，从某种意义来说也是最优化的代码

至于css,可能和个人的习惯有关，我觉得使用vs.net 2003做编辑器的感觉还是不错的，从目前的发展，流式布局确实是未来web的一个趋势，不过完全采用css+div来实现网页布局应该还有一些困难的吧，主要不是排版方面，而是有些需求确实太刁

[liuruhong]

对于一个布局精良的页面，采用xhtml+css是完全可以实现的，在要求800× 600和1024 × 768都有良好的显示界面的时候，我想此时对于web设计者在css方面要求的功底就应该。。。。。。。这个也就是我个人不太赞成完全放弃table布局的原因，凡事有利必有弊

[daijianchun]

谁说DIV+CSS是边下载边显示的?
网页都是先下head后下body,
外部样式表是在head里,当然先下载.
div在body里,是后下载,

难道,DIV标签的优先级提高了?笑话!

[good_sun]

table会渐渐的被Div的CSS的新web标准取代 大势所趋 但table决不会小时

[wackyan]

up

[follow_microsoft]

我一直是用表格定位，包括层的定位也是用到表格，而且要多多常识在不同分辨率下的显示效果，

[ceocio]

to daijianchun:

不懂装懂，偶简直无语了。

[ningqiang]

对DIV定位还很陌生，暂时觉得用表格快些。也想尽快学习一些符合标准的事情。

[yiyun59]

对DIV定位还很陌生，暂时觉得用表格快些。也想尽快学习一些符合标准的事情
---------
同感，请问网上有什么好的教程吗？谢谢!