使用Fireworks CS4中的切片输出功能,进行设计图形到CSS+DIV的转换。

分类:Web UI & Ajax, 多媒体技术, 网页&平面设计, 计算机与互联网 作者: 秋天 on 06-01-2010

下面这两篇文章进行了比较详细的讨论。 共享一下:

via Exporting CSS and images in Fireworks CS4. by. John Wylie

and

via Creating standards-compliant web designs with Fireworks CS4 by. Matt Stow

我个人对此功能进行测试后的一些看法。

  • 相比PS中原来的切片生成基于表格的html的功能,此功能是个长足的进步。
  • 虽然切片生成的代码仍然具有不少问题,但是以此作为一个起点,并在此基础上使用Dreamweaver进行代码微调,会大幅度的节省工作时间提高效率。
  • HTML切片对文本段落字体样式等的识别还比较弱,基本不可能拿来做为直接生产使用。对于该部分,切片留出位置,转换之后在Dreamweaver或者其他HTML编辑器中重新建立需要的文本字样段落样式。这一点上其实问题并不大,因为按照比较严格的设计标准来说,字体段落样式 (Typography) 部分,和图形分别设计本来也是设计流程的一部分。
  • 我们比较需要的其实是一种比较好的图形切片到CSS+DIV的转换。在这一点上Fireworks CS4其实已经做的比较好了。我测试了几种比较复杂的堆叠方式,只有在一些特别复杂的情况下,会产生堆叠错乱,以及间隙错乱的问题,大部分基本的图形设计模式切片,都没有太大的问题。
  • 完美的生成DIV堆叠,并且CSS化DIV的属性。可惜的是转化的过程中并没有给我们提供足够的参数进行CSS属性控制的选择,或者HTML控件的CSS class id设置。希望将来的版本能在这一点上进一步优化。

and oh anyway, happy new year everyone.

CSS Hack

分类:Joomla, 网页&平面设计, 计算机与互联网 作者: 秋天 on 23-05-2008

标签分类 : , , , ,

最近一直在做Graphic 和 html converting。 以后的网页设计全面转换到w3c CSS+DIV标准。碰到很多各种问题,千奇百怪,跨浏览器,都需要用到CSS HACK来做。

衷心的希望IE8能和mozilla标准浏览器使用同一标准。IE和FF之间的不良竞争,花费了我们这些做HTML coding的人太多的多于时间来调整页面,hack css,很无聊的事情。

以下是关于怎么hack css以及hack css如何工作。

火狐专用的:

Firefox 2.0 or older

If you need to make pre-Acid2 Firefox behave, you can safely use this:

#hackme, x:-moz-any-link {styles for Firefox 2.0 here}
#hackme, x:-moz-any-link, x:default {restore styles for Firefox 3.0 and newer}

This hack will apply rules to #hackme element. You can change the first selector (#hackme) in each rule to anything else, but don't touch the ones with x.
Example

For 9 versions support for inline-block in Gecko was FUBAR. The closest equivalent wouldn't respect line-height. The workaround:

#menu a {display:inline-block; line-height:2em;}
#menu a, x:-moz-any-link {display:-moz-inline-box; padding-top:0.5em;}
#menu a, x:-moz-any-link, x:default {display:inline-block; padding-top:0;}

Firefox 1.0 or older

#hackme, x:-moz-any-link {styles for Firefox 1.0 here}
#hackme, x:-moz-any-link, x:only-child {restore normal styles for newer versions}

Same as above — you can change #hackme to whatever you need, but leave other selectors in the same group as they are.
How do these work?

CSS error handling rules require browsers to drop entire rule if any of the selectors is not recognized. :-moz-any-link is a selector private to Gecko, so all non-Gecko browsers see it as parse error. :default has been added in Firefox 3.0 (Gecko 1.9), :o nly-child has been added in Firefox 1.5, so they're unknown to earlier versions of Firefox/Gecko.

IE 6, IE7 和Opera专用:

区别IE6与FF:
background:orange;*background:blue;

区别IE6与IE7:
background:green !important;background:blue;

区别IE7与FF:
background:orange; *background:green;

区别FF,IE7,IE6:
background:orange;*background:green !important;*background:blue;

注:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;

另外再补充一个,下划线"_",
IE6支持下划线,IE7和firefox均不支持下划线。

于是大家还可以这样来区分IE6,IE7,firefox
: background:orange;*background:green;_background:blue;

注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。

啊MAC下的Safari是mozilla标准浏览器,所以FF看着OK的Safari基本也会OK,只是某些特殊情况下,比如一些CSS+JS的搭配会导致Safari Crash。至于为啥没有仔细去研究。

基本上Hack CSS的原理就是说不通浏览器有不通识别的注释方式,所以在出现效果不一样的时候,重复写,互相覆盖,就能达到兼容多种浏览器的效果,页面完成后,把各个浏览器分别的CSS用独立文件导入,方便查看和修改。

最后推荐一个不错的DIV+CSS中文网站,堆积了不少文章和资源,值得一看。

http://www.52css.com/

下周回国,希望一切都好。


如果你有任何话想说,欢迎发表评论