一级棒(Eachfun)
偷猫的个人主页
一级棒(Eachfun) - 生活感悟 - 工作学习 - 修正Fireworks输出的div+css
RSS订阅
修正Fireworks输出的div+css
发表时间:2008-07-25 13:31:00 关键词:网页,布局,div,css,标准化

  网页标准化的呐喊声一浪高过一浪,在这样的声浪中,感觉不向div+css靠齐似乎有点落伍。尽管有许多人对所谓的“标准化”挺不屑的,但是回过头来想,不管“网页标准”本身是否有个终级的标准,div+css取代table进行布局必竟有着它不可替代的优势。
  本文不讨论div+css的优越性,单说一下Fireworks输出的div+css的缺点及其修正。
  打开FireWorks CS3,随使建一个文档,本文以宽度为900为例。然后按以下方法切片。
  1、顶上切出一个通栏(取名为a);
  2、底下切出一个通栏(取名为c);
  3、中间再左右切成三块(取名为b1、b2、b3)。
  然后就导出网页,选择导出类型为“CSS 层”。随便取个名字,比如“a.htm”。
  接下来可以看一看a.htm的效果,果你所愿,布局得挺好。再看源码,Fireworks为你准备好了所有div和css。
  然而,细看代码后,却发现Fireworks为你产生的css代码其实是有问题的,这个问题在于,如果你将来修改网页的时候继续用Fireworks则没关系,如果将来用其它途径来改网页(比如由编辑来决定具体内容的多少),或者你要在顶部通栏下方加点个区域、或者在底部通栏上方加个区域,那你就麻烦了。
  原因在于Fireworks为你产生的div是绝对定位的浮动层,以第一个切片a为例,代码如下:
#a {
  position:absolute;
  left:0px;
  top:0px;
  width:900px;
  height:152px;
  z-index:1;
  visibility:visible;”
}
  当你的辑编同事在这个切片中放置的内容并不与切片大小完全一致时、或者当你要在第一个通栏下方加个新的区域时,……第二个切片由于绝对定位的位置没有发生改变,它不会给人家“让路”。
  其实,放开绝对定位,div+css另外有代码可以使用,就是float和clear组合。
  div#a是一个通栏,它是否float并不重要。但是它的width和height还是要的。
  div#b1和b3分别要向左和右浮动,c2虽然在中间,但是也要加上float:left,否则它会跑到不该去的地方。
  div#c是一个通栏,是否float不重要。
  这样一改,原来每个div的CSS都有七行代码,现在只剩两到三行了,代码的缩小并不是主要的,主要的是现在可以由着编辑去堆内容了,美工要考虑的只是布局,但不能让布局限制了编辑。改天要把b1、b2、b3和c整体下移,在a的下方放点别的东西,也不用改这些css。
  做了以上所有工作以后,你还不能放声大笑。因为b3是向右浮动的,不同的用户,显示器会有不同的宽度,不要让宽屏的用户看笑话。把这些div全部放在一个大div的里面,宽定好宽度即可。
  完整的CSS如下:
<style type="text/css">
#outdiv {
  width:900px;
}
#a {
  width:900px;
  height:152px;
}
#b1 {
  float:left;
  width:252px;
  height:497px;
}
#b2 {
  float:left;
  width:420px;
  height:497px;
}
#b3 {
  float:right;
  width:228px;
  height:497px;
}
#c {
  width:900px;
  height:151px;
}
</style>
  注意:本文为了排版美观,使用两个全角空格代替了一个tab,请不要直接照抄以上代码。

本站特约顾问律师常州东晟律师事务所朱立律师(电话13915029670,QQ646146109)提醒您:
本站文章皆为作者原创,其它媒体(包括但不限于报刊、杂志、网站、电视、电台)未经作者书面许可严禁转载(或部分摘录)!
相关评论
  • 其实,在div+css的设计方式中,fireworks和photoshop的作用已经减小了,就我而言,div+css还是手工写的,最多借助dreamweaver来产生个格式。我虽然写了这样一篇文章,但是实际工作中从来没有用fireworks来做过div的布局。
    person偷猫 link未填 QQ未填 email未填 时间:2008-08-21 00:31:00
  • 这样的话 倒不如用表格
    没体现出div/css的优势
    persontutu link未填 QQ未填 email未填 时间:2008-08-09 20:23:00
  • 我一直感觉无论PS还是FW的这项功能都是个鸡肋,用软件输出页面后修改不如切片后自己布局,尤其DIV+CSS。当然有的时候想迅速的制作一个静态页,用这种方法还是比较理想的。
    person向右走 link未填 QQ512239072 email未填 时间:2008-07-25 14:20:00
1
发表评论
称呼:
QQ:
邮箱:
链接:
内容:
搜索: 百度搜索 Google搜索
Copyright©2000 - 2011 Eachfun.Com, All Rights Reserved 一级棒网络
备案号忘了带来
一级棒建站系统 http://www.eachfun.com 一级棒版权所有,未经许可不得商用!