Fireworks 导出 HTML 网页(转) dodo

为了能让Fireworks 导出更符合DW修改的 HTML 网页,提高效率,一般要做以下设置:
  1.选择“文件”>“html 设置”,或者单击“导出”对话框中的“选项”按钮。
  2.单击“表格”选项卡。从“间距”弹出菜单中选择一个间距选项:
  这里有三个选项:
  “嵌套表格 - 无间隔符”将创建不包含间隔符的嵌套表格。(这个不错,即使修改也不会太麻烦)
  “单一表格 - 无间隔符”将创建不包含间隔符的单一表格。此选项可能会使表格在某些情况下显示不正确。 建议不要选此项。(本人试过几个导出例子,这个选项显示确实都不正常,修改更麻烦。不知道要这个选项有什么必要?)
  “1 象素透明间隔符” - 将使用 1象素的透明 gif 作为间隔符,其大小可按需要在 html 中进行调整。此选项可沿表格顶部生成一个高度为 1 个象素的行,并沿表格右侧生成一个宽度为   1 个象素的列。 (其实“顶部右侧生成1象素的列”这种需要很少吧,而且要修改也麻烦)
  总结:选择“嵌套表格 - 无间隔符”
  3.对于空单元格:  
  从“内容”弹出菜单中选择要在空单元格中放置的内容:
  这里又有三个选项:
  “无”使空单元格保持空白。 (没有选择“包括无切片区域”时,导出表格看不到有无切片区域的位置)
  “间隔符图象”在空单元格中放置一个小的透明图象,图象名为 spacer.gif。 (没有选择“包括无切片区域”时,导出表格看得到无切片区域的位置,且如设计图显示)  
  “不换行空格”在空单元格中放置一个 html 空格标记。单元格显示为中空。(没有选择“包括无切片区域”时,导出表格看得到无切片区域的位置,但不一定如设计图显示)

  注意: 只有在导出期间不选“导出”对话框中的“包括无切片区域”时,才会出现空单元格,即把无切片区域当成空单元格。(其实如果你选择了“包括无切片区域”的话,也不是不出现空单元格,只是这些空单元格已经被无切片区的图片填充了,已经不是“空”的了)
补充说明:
 对于大图的切割,我自己认为能规则的切就规则的切,不要随心所欲的切。。。之所以这样说,是因为通常切片后,我都不怎么用FW自动生成的HTML表格。。

  我们可以先看看FW自动生成的表格的结构(没有经过特殊设置的):

  假如一幅图切了两行,第一行是三块图,第二行是两块图,这五副切片的宽度都不一致,那么输出后自动成的表格将会是3行6列的一个大表格。我们发现每个放置切片图的单元格是没有设置固定的width和height参数的,实际上对于单元格尺寸的控制,FW使用了透明图片填充的技巧,在表格的最后一行和最后一列,用了若干个固定尺寸的单元格,这些单元格里用了一个spacer.gif的图片,这也就是我们通常看到FW自动生成的切片源码及文件中会出现这个很小的图片的原因。

  再仔细分析一下这个没有嵌套的大表的原理,会发现FW会以行(列)中宽度(高度)最小的一个切片为最小单位,来生成这个表格有多少列多少行,也就是说,上面的切片例子中明明只是5个切片图,却没有用一个2行3列的图来进行布局的原因(事实上在DW中手动进行表格设置的话,也很难达到无缝效果)

  这样的话,我们如果对某一个切片的大小进行调整时,就需要对整个大表进行重新输出,对于精益求精的设计者来说,频繁的改动是件很痛苦的事。

  所以我在实际运用切片的时候,都是只输出图片,不输出表格的,表格自己来做。。。。具体的做法是具有相同高度的同行切片用一个表格,如果实在需要一行中做不同高度的切片(尽量不要这样做),就需要以高度最高的那个切片为基础,制作复杂的表格嵌套了。。

这样做的最终效果是:一副切割后的大图不是由FW自动生成的那样是一个大表格,而是若干个表格组合在一起的。。。一是方便了对图片中某个切片的修改,二是加快了大图的下载速度(我们知道,浏览器对于<table>标签总是下载到</table>标签出现时才会显示给你看的)

  很抱歉,罗嗦了这么多,不知道大家是不是听清楚了我的意思,因为现在不便,没有实例图来给大家辅助讲解,改天有空补出来吧。。。。。。
原文地址:https://www.cnblogs.com/zgqys1980/p/683968.html