DDR爱好者之家 Design By 杰米
div还是table?这是个问题……
自从web标准和网站重构的热潮席卷而来,到处都可以看到如下的问题:
问题1:怎么做1px高的div?
问题2:这个x行y列的table用div怎么实现?
问题3:css能不能实现拖动这个行?
问题4:为什么网页在浏览器里是正常的,可是在dw里却乱了?
问题5:为什么布局在ie里面是正确的,可是在ff里就乱了?
……
对于刚刚发觉表格布局已经被大家所抛弃,从而开始接触web标准来构建网页的人来说,这确实是个问题。
其实,这个问题从一开始就偏离了中心。
web标准并不可以简单地理解为:“查找:table,替换为:div”,而是要从根本上转变思想,其中比较重要的,就是把内容、行为与表现分离。
对于设计人员以及已经使用表格布局很长时间的人来说,这也正是难点所在。
往往我们现在的网页制作,都是从一张psd图开始的,而制作人员负责把这个psd图转换成html文件。对于制作人员来说,将图片分割然后再组合,使用表格是再简单快捷不过的了,特别是现在可视化开发软件越来越强大,但是这样正培养了制作人员的惰性,人们往往习惯于动动鼠标点点设设就完成了,而不去考虑实际的代码是什么乱七八糟的样子。
内容、行为与表现?那什么是内容?什么是行为?什么又是表现呢?
内容,顾名思义,就是访问者真正想了解的信息,可以包含数据、文档或者图片等。注意这里强调的“真正”,是指纯粹的数据信息本身,而不包含辅助的信息,比如导航菜单、装饰性图片等。
例如猫窝的另一篇文章《盒模型(BOXModel)》的页面,其真正的内容应该是:
盒模型(BOXModel)如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin),如图1所示。……
明确了内容的定义,表现其实很容易理解,就是页面的外观,例如:导航条的位置、链接的颜色、文字的大小等等。
而行为则是一些交互的操作,比如表单的验证、点击按钮使某个层显示和隐藏,这些需要通过javascript来完成。
交互是javascript的工作,不要指望css能完成。
理解了内容、行为与表现的区别,下面来说说“结构”。
上面例子中的内容,看上去很乱,而结构则使内容具有逻辑性、易用性。因此,可将上例中的文字结构化如下:
标题=〉盒模型(BOXModel)
正文=〉如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin),如图1所示。
结构对于页面来说,是非常重要的,可以说它是一个页面的骨架,只有真正搞懂了“结构”的意义,才能实现表现和内容分离,保证页面的源代码语义清晰且简洁。
因此,当制作人员拿到一个设计图的时候,首先要做的,并不是划分切片,而是提取页面的内容将其结构化,而上例中的页面结构如图1所示。
图1页面的结构
此时,可以看到标题文字已经变大、表单有边框、文字也没有挤在一起,这是因为浏览器内有预制的css设定,规定了标题的大小、表单的样式等。虽然这个页面不好看,但是它却有很高的可读性,浏览者已经可以轻松地阅读页面的内容,而且,这个页面内没有为了装饰而存在的div或者其它什么代码。
还在想怎么用div来实现1px的横线?仔细看看css中border的定义吧!
当然,为了更好的视觉效果,还是需要使用css来完成“表现”。
只有在确定了结构之后,才能确定css以及图片切片如何划分。划分切片已经从原来最重要的工作变得不那么重要了。
再回到div与table之争。
之所以提出用div布局来替换table布局,其实中心思想是让xhtml的各个标签能名副其实,专职专用。例如,上面的例子中,“盒模型(BOXModel)”使用h2(2级标题),而正文则用p(段落)。css可以应用在任何的xhtml标签上,因此不要嵌套一层又一层的div和span。
但是,table是否就被判了死刑不能再用了呢?
当然不是!
table也是xhtml的标签之一,而且它有它的意义——放置表格类数据,表格内的数据也是内容的一部分。例如一个班学生的考试成绩表,自然要用表格来显示,如果也非要用所谓的div布局,那就是舍本逐末了。
理论搞清楚了,那么还有什么难点挡在我们实现表现与内容分离的路上?
首先就是浏览器!
这个问题无法回避,毕竟页面就是为了放在浏览器内看的。而不同的浏览器自然会有不同的表现方式。虽然ie在国内是应用最广的浏览器,但是现在使用firefox和opera等浏览器的也大有人在。而制作软件,无论它再怎么号称“所见即所得”,但它毕竟不是浏览器,因此不可能所见所得,因此不要相信你的制作软件,在几个流行的浏览器内测试才是正道!
此时,另一个巨大的问题又出现了——浏览器的bug。
俗话说,人不是完美的,因此人写的浏览器也不可能是完美的。多多利用搜索引擎,可以搜到很多关于浏览器bug以及破解方法的文章。
不要相信ie,它可以说是bug最多的浏览器。先用符合标准的浏览器测试,比如firefox或者opera,再针对ie的问题使用hack。这样会缩减工作时间提高效率。
当然,还可以祈祷ie7会符合标准,不过这怕是不太可能的。
然后,还可能的,就是制作者的懒惰。
css和xhtml都是基础,花些时间好好看看手册,一定会有很大收获的。
想想吧,当你不再依赖dw或者golive而能写出一个完整漂亮的页面,制作人员的价值也就体现出来了。不会再混同于一个用ps的自动切片来生成页面的电脑爱好者了。
自从web标准和网站重构的热潮席卷而来,到处都可以看到如下的问题:
问题1:怎么做1px高的div?
问题2:这个x行y列的table用div怎么实现?
问题3:css能不能实现拖动这个行?
问题4:为什么网页在浏览器里是正常的,可是在dw里却乱了?
问题5:为什么布局在ie里面是正确的,可是在ff里就乱了?
……
对于刚刚发觉表格布局已经被大家所抛弃,从而开始接触web标准来构建网页的人来说,这确实是个问题。
其实,这个问题从一开始就偏离了中心。
web标准并不可以简单地理解为:“查找:table,替换为:div”,而是要从根本上转变思想,其中比较重要的,就是把内容、行为与表现分离。
对于设计人员以及已经使用表格布局很长时间的人来说,这也正是难点所在。
往往我们现在的网页制作,都是从一张psd图开始的,而制作人员负责把这个psd图转换成html文件。对于制作人员来说,将图片分割然后再组合,使用表格是再简单快捷不过的了,特别是现在可视化开发软件越来越强大,但是这样正培养了制作人员的惰性,人们往往习惯于动动鼠标点点设设就完成了,而不去考虑实际的代码是什么乱七八糟的样子。
内容、行为与表现?那什么是内容?什么是行为?什么又是表现呢?
内容,顾名思义,就是访问者真正想了解的信息,可以包含数据、文档或者图片等。注意这里强调的“真正”,是指纯粹的数据信息本身,而不包含辅助的信息,比如导航菜单、装饰性图片等。
例如猫窝的另一篇文章《盒模型(BOXModel)》的页面,其真正的内容应该是:
盒模型(BOXModel)如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin),如图1所示。……
明确了内容的定义,表现其实很容易理解,就是页面的外观,例如:导航条的位置、链接的颜色、文字的大小等等。
而行为则是一些交互的操作,比如表单的验证、点击按钮使某个层显示和隐藏,这些需要通过javascript来完成。
交互是javascript的工作,不要指望css能完成。
理解了内容、行为与表现的区别,下面来说说“结构”。
上面例子中的内容,看上去很乱,而结构则使内容具有逻辑性、易用性。因此,可将上例中的文字结构化如下:
标题=〉盒模型(BOXModel)
正文=〉如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin),如图1所示。
结构对于页面来说,是非常重要的,可以说它是一个页面的骨架,只有真正搞懂了“结构”的意义,才能实现表现和内容分离,保证页面的源代码语义清晰且简洁。
因此,当制作人员拿到一个设计图的时候,首先要做的,并不是划分切片,而是提取页面的内容将其结构化,而上例中的页面结构如图1所示。
图1页面的结构
此时,可以看到标题文字已经变大、表单有边框、文字也没有挤在一起,这是因为浏览器内有预制的css设定,规定了标题的大小、表单的样式等。虽然这个页面不好看,但是它却有很高的可读性,浏览者已经可以轻松地阅读页面的内容,而且,这个页面内没有为了装饰而存在的div或者其它什么代码。
还在想怎么用div来实现1px的横线?仔细看看css中border的定义吧!
当然,为了更好的视觉效果,还是需要使用css来完成“表现”。
只有在确定了结构之后,才能确定css以及图片切片如何划分。划分切片已经从原来最重要的工作变得不那么重要了。
再回到div与table之争。
之所以提出用div布局来替换table布局,其实中心思想是让xhtml的各个标签能名副其实,专职专用。例如,上面的例子中,“盒模型(BOXModel)”使用h2(2级标题),而正文则用p(段落)。css可以应用在任何的xhtml标签上,因此不要嵌套一层又一层的div和span。
但是,table是否就被判了死刑不能再用了呢?
当然不是!
table也是xhtml的标签之一,而且它有它的意义——放置表格类数据,表格内的数据也是内容的一部分。例如一个班学生的考试成绩表,自然要用表格来显示,如果也非要用所谓的div布局,那就是舍本逐末了。
理论搞清楚了,那么还有什么难点挡在我们实现表现与内容分离的路上?
首先就是浏览器!
这个问题无法回避,毕竟页面就是为了放在浏览器内看的。而不同的浏览器自然会有不同的表现方式。虽然ie在国内是应用最广的浏览器,但是现在使用firefox和opera等浏览器的也大有人在。而制作软件,无论它再怎么号称“所见即所得”,但它毕竟不是浏览器,因此不可能所见所得,因此不要相信你的制作软件,在几个流行的浏览器内测试才是正道!
此时,另一个巨大的问题又出现了——浏览器的bug。
俗话说,人不是完美的,因此人写的浏览器也不可能是完美的。多多利用搜索引擎,可以搜到很多关于浏览器bug以及破解方法的文章。
不要相信ie,它可以说是bug最多的浏览器。先用符合标准的浏览器测试,比如firefox或者opera,再针对ie的问题使用hack。这样会缩减工作时间提高效率。
当然,还可以祈祷ie7会符合标准,不过这怕是不太可能的。
然后,还可能的,就是制作者的懒惰。
css和xhtml都是基础,花些时间好好看看手册,一定会有很大收获的。
想想吧,当你不再依赖dw或者golive而能写出一个完整漂亮的页面,制作人员的价值也就体现出来了。不会再混同于一个用ps的自动切片来生成页面的电脑爱好者了。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
2024年11月24日
2024年11月24日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]