账号通
    

账号  

密码  

3238

查看

6

回复
主题:[原创]CSS在网页布局时的好处与坏处 [收藏主题] 转到:  
kesionss 当前离线

1

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:212 分
登录次数:1 次
注册时间:2008/11/10
最后登录:2008/11/10
kesionss 发表于:2008/11/10 14:55:00   | 只看该作者 查看该作者主题 楼主 
科汛在线网校系统

CSS在网页布局时的好处与坏处

    随着WEB2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用DIV+CSS制作方法,从实际应用情况来看,此种方法绝对好于表格制作页面的方法。

  如今大部分网站仍然采用表格嵌套内容的方式来制作网站,虽然此方法对于我们来说比较熟悉、比较上手;但是,它却阻碍了一种更好的、更有亲和力的、更灵活的,而且功能更强大的网站设计方法——DIV+CSS。

  CSS网页布局的意义体现在如下方面:

  一、使页面载入得更快
  由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小。相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的时候,逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里,使得加载速度很慢。

  二、降低流量费用
  页面体积变小,浏览速度变快,这就使得对于某些控制主机流量的网站来说是最大的优势了。

  三、修改设计时更有效率
  由于使用了DIV+CSS制作方法,在修改页面的时候更加容易省时。根据区域内容标记,到CSS里找到相应的ID,使得修改页面的时候更加方便,也不会破坏页面其他部分的布局样式。

  四、保持视觉的一致性
  DIV+CSS最重要的优势之一:保持视觉的一致性;以往表格嵌套的制作方法,会使得页面与页面,或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法,将所有页面,或所有区域统一用CSS文件控制,就避免了不同区域或不同页面体现出的效果偏差。

  五、更好地被搜索引擎收录
  由于将大部分的HTML代码和内容样式写入了CSS文件中,这就使得网页中正文部分更为突出明显,便于被搜索引擎采集收录。

  六、对浏览者和浏览器更具亲和力
  我们都知道网站做出来是给浏览者使用的,对浏览者和浏览器更具亲和力,DIV+CSS在这方面更具优势。由于CSS富含丰富的样式,使页面更加灵活性,它可以根据不同的浏览器,而达到显示效果的统一和不变形。

  说了这么多CSS网页布局的意义与优点,同时也不能轻视CSS网页布局的副作用:

  一、DIV+CSS尽管不是高不可及,但至少要比表格定位复杂的多,即使对于网站设计高手也很容易出现问题,更不要说初学者了。

  二、CSS网站制作的设计元素通常放在1个外部文件中,或几个文件,有可能相当复杂,甚至比较庞大,如果CSS文件调用出现异常,那么整个网站将变得惨不忍睹。

  三、虽然说DIV+CSS解决了大部分浏览器兼容问题,但是也有在部分浏览器中使用出现异常,比如火狐浏览器,在IE中显示正常的页面,到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题,但是可以说在目前来看,DIV+CSS还没有实现所有浏览器的统一兼容。

  四、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。DIV+CSS网页设计并不能保证网页对搜索引擎的优化,甚至不能保证一定比HTML网站有更简洁的代码设计,何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量,这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前,而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言,网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。

  综合以上讨论的DIV+CSS优势和略势,我认为不可盲目跟风,如何更有效、更合理的运用WEB2.0设计标准,这需要很长时间的学习和锻炼。而如何将DIV+CSS运用的更好,我觉得这需要通过不断的实践和体检,积累丰富的设计经验,才能很好的掌握这门技术。从学习的角度,现在的CSS书比较多。我给新手推荐一本机械工业出版的《CSS完全自学手册》,具体参考一下http://www.china-pub.com/209223。

 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
7256504 当前离线

617

主题

1

广播

0

粉丝
添加关注
级别:六年级

用户积分:6143 分
登录次数:538 次
注册时间:2007/3/15
最后登录:2018/9/7
7256504 发表于:2009/1/13 0:25:00   | 只看该作者 查看该作者主题 沙发 
科汛智能建站系统

三、修改设计时更有效率
  由于使用了DIV+CSS制作方法,在修改页面的时候更加容易省时。根据区域内容标记,到CSS里找到相应的ID,使得修改页面的时候更加方便,也不会破坏页面其他部分的布局样式。

 

当一个页面有很多div嵌套的时候,我想甚至于比table还要复杂,css文件几百上千行的时候,很容易找到相关的id或者class吗?找到了,修改一个div,能保证不破坏其他的div吗???这很方便吗?

 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
7256504 当前离线

617

主题

1

广播

0

粉丝
添加关注
级别:六年级

用户积分:6143 分
登录次数:538 次
注册时间:2007/3/15
最后登录:2018/9/7
7256504 发表于:2009/1/13 0:06:00   | 只看该作者 查看该作者主题 藤椅 
科汛智能建站系统
以下是引用txcng在2009-1-12 13:49:00的发言:

用表格为什么就把整个页面做在一个表格里?我觉得第一点不成立。

图片点击可在新窗口打开查看我用表格就是一个表格接着一个表格往下排版的,而不是用一个大筐

我觉得表格和DIV的区别就是定义表格的属性写在页面内,而DIV是写在CSS内

我也用CSS,也会用一些DIV,但是我用DIV是为了实现一些简单的网页效果,要是说做站快的话,我觉得还是表格

我也觉得用表格比较快,我也是一个个表格往下排的。我基本上都是用css定义表格的样式,觉得不比div差,并且设计时很容易修改。现在好像看到div+css的网页就有种盲目的崇拜,我觉得这不可取。

 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
txcng 当前离线

112

主题

0

广播

0

粉丝
添加关注
级别:一年级

用户积分:728 分
登录次数:28 次
注册时间:2007/10/5
最后登录:2012/3/11
txcng 发表于:2009/1/12 13:49:00   | 只看该作者 查看该作者主题 板凳 
科汛在线考试系统(NET)

用表格为什么就把整个页面做在一个表格里?我觉得第一点不成立。

不是啦我用表格就是一个表格接着一个表格往下排版的,而不是用一个大筐

我觉得表格和DIV的区别就是定义表格的属性写在页面内,而DIV是写在CSS内

我也用CSS,也会用一些DIV,但是我用DIV是为了实现一些简单的网页效果,要是说做站快的话,我觉得还是表格

 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
mt56 当前离线

4985

主题

53

广播

17

粉丝
添加关注
级别:版主

用户积分:23430 分
登录次数:1621 次
注册时间:2007/2/10
最后登录:2022/9/28
mt56 发表于:2008/11/10 18:39:00   | 只看该作者 查看该作者主题 报纸 
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
ici 当前离线

198

主题

0

广播

0

粉丝
添加关注
级别:一年级

用户积分:1107 分
登录次数:64 次
注册时间:2006/10/26
最后登录:2011/8/19
ici 发表于:2008/11/10 18:36:00   | 只看该作者 查看该作者主题 地板 
做在线知识付费 选科汛云开店
楼上说的好,不能太迷信css的作用
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
zhenfengdz 当前离线

3821

主题

0

广播

1

粉丝
添加关注
级别:大三

用户积分:21733 分
登录次数:436 次
注册时间:2007/1/9
最后登录:2013/4/24
zhenfengdz 发表于:2008/11/10 15:55:00   | 只看该作者 查看该作者主题 7楼 
科汛在线商城系统(NET)

用表格为什么就把整个页面做在一个表格里?我觉得第一点不成立。

第一点不成立,第二点也就...页面大小和这个没有必然联系。

至于效率,难说。

效果偏差,甭管用什么,看你怎么写。

至于搜索引擎收录问题也没什么意思,如果搜索引擎连HTML代码和内容样式和正文内容都区分不开,这搜索引擎也太弱智。

不同浏览器的显示效果,还是看怎么写,而不是采用哪一种。亲和力之说不知所云。

不过还是想给你金币,但不知道怎么给。

想啥说啥,没别意思,楼主别介意。

 

要说不同,我认为只有一点,就是:方法不一样。

 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
<上一主题 | 下一主题 >
Powered By KesionCMS Version X1
厦门科汛软件有限公司 © 2006-2016 页面执行0.59766秒 powered by KesionCMS 9.0