asahi
火狐狸
火狐狸
  • UID927
  • 注册日期2004-12-15
  • 最后登录2007-06-24
  • 发帖数296
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
30楼#
发布于:2005-07-27 15:15
Table构图比较适合于纯美工,所见即所得。
DIV CSS则需要事先对网页内容、结构全面了解才能实现“内容”-〉“结构”-〉“表现”,感觉这种思维方式和美术出身的设计师那种跳跃性思维有些矛盾。

至于所谓CSS节约网络带宽恐怕效果也没有那么明显,特别是首次载入页面时CSS文件反而比较大。

像163那样的大型网站,各个栏目风格肯定各不相同,还是需要很多不同的CSS文件。

个人感觉DIV CSS模式目前还不是很成熟,至少没有让人看到非常明显的技术突破,反而给web初学者设置了一道不低的门槛。
supNate
小狐狸
小狐狸
  • UID7615
  • 注册日期2005-07-27
  • 最后登录2005-11-05
  • 发帖数17
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
31楼#
发布于:2005-07-27 15:15
举个例子,就谈mozilla网页头部的圆角方框栏
如果用table布局,很容易想到3X3的表格,border=0 cellspace=0 cellpadding=0,四个角和边框用圆角的图片撑住,其他的用背景图片。

mozilla logo 和 右半部 也用表格分开,嵌套一个表格。

站内搜索和下载区,讨论区导航栏也用表格上下分好,所以这里要再嵌套一个表格。

下载区讨论区也要用表格控制,这里还需要再嵌套一个表格,

然后导航栏各项也有圆角,再各自嵌套一个表格。

到次table布局基本结束。但是还没有实现,搜索输入框变色和导航栏背景变换的特效,如果不用CSS,只有用更麻烦的Javascript来完成。

----

现在解析这个圆角方框标题栏的Div+CSS解构。
整个标题栏只在div#topheader中,div有三个主要元素,<h1>, 列表<ul>和提交表单<form>。
所有效果是通过CSS控制,layout就不谈了,只谈华丽效果
div只设置了背景图片。

在<h1>中设置了一个背景,也就是mozilla logo,然后将<h1>中包含的文字隐藏了。并且通过 #topheader h1 和 #topheader h1 a 造成了左边上下两个圆角的效果。

列表<ul>的各项,每项都有一个背景图片,背景的变换是通过偏移背景图片实现的
而且实现了右下的圆角

form的文本输入栏和按钮的样式就不用说了,实现了右上的圆角。

---

综上所诉,CSS的华丽效果实现要比table layout难得多,光实现思路上都十分复杂,

再举例,可以自行分析下gmail的圆角实现。


很容易想到的不一定就是应该采用的,你说的许多用表格的地方其实用div更好。现在讨论的是在某些情况下用table还是div的问题。圆角矩形题头我现在的解决方案是:顶部一个table cell 背景图用横向的边框图片块,再把两个角的图片浮动在单元格的两端就可以了。至于你说的用div+css的实现大概也不是标准所追求的,毕竟用一个h来仅仅放个背景图片,或者让多个模块分别完成表现的一部分,已经脱离了形式和内容分离的宗旨,也不符合结构化的宗旨。
用table并不一定完全放弃div,用div也不要完全放弃table,有时候用table作为整个页面的支撑骨架还是会提高很多效率和稳定性的,至少我的感觉是这样。
nifty
小狐狸
小狐狸
  • UID7702
  • 注册日期2005-07-31
  • 最后登录2005-07-31
  • 发帖数1
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
32楼#
发布于:2005-07-27 15:15
Minisheep
小狐狸
小狐狸
  • UID2333
  • 注册日期2005-01-19
  • 最后登录2006-10-23
  • 发帖数80
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
33楼#
发布于:2005-07-27 15:15
很容易想到的不一定就是应该采用的,你说的许多用表格的地方其实用div更好。现在讨论的是在某些情况下用table还是div的问题。圆角矩形题头我现在的解决方案是:顶部一个table cell 背景图用横向的边框图片块,再把两个角的图片浮动在单元格的两端就可以了。至于你说的用div+css的实现大概也不是标准所追求的,毕竟用一个h来仅仅放个背景图片,或者让多个模块分别完成表现的一部分,已经脱离了形式和内容分离的宗旨,也不符合结构化的宗旨。
用table并不一定完全放弃div,用div也不要完全放弃table,有时候用table作为整个页面的支撑骨架还是会提高很多效率和稳定性的,至少我的感觉是这样。


这里H的作用不完全只是为了显示背景图片。当浏览器没有或不能解析CSS的时候,就体现出结构的作用。你会发现这里一样能很好地显示主题内容。
上一页 下一页
游客

返回顶部