如何在Fireworks中使用CSS3移动开发包提取设计对象的CSS属性
Content
创建日期
3 October 2011
要求
必备知识
需拥有Fireworks的基本知识。同时最好有使用CSS3的经验。
用户级别
中级
必需产品
- Fireworks CSS3 Mobile Pack
- Fireworks (下载试用版)
- Dreamweaver (下载试用版)
在这篇文章中，您将学习如何在Adobe Fireworks CS5和CS5.1中安装CSS3移动开发包。你会看到在工作中如何使用扩展来提取所选对象的属性（圆角，不透明度，等等），并实现你的网页的设计与CSS3兼容。
扩展包含两个主要特点：
- jQuery Mobile的主题换肤：使用扩展你可以创建jQuery针对手机的网站主题。接口能够让您预览和导出相应的CSS代码和sprite资源。要了解使用此扩展的更多信息，请参阅使用CSS3 Mobile Pack在Fireworks中创建jQuery Mobile网站主题.
- CSS属性面板：CSS属性扩展可以找出能够在CSS中表现的Fireworks对象的所有属性。它能在CSS属性面板列出了相应的CSS属性。
本文介绍了如何使用这个扩展的最新功能。
解析设计对象的属性
视觉设计师们通常使用某个工具进行网站设计，如Adobe Fireworks CS5或更高版本。 当设计获得批准后， 设计文件往往要发送给一个网页设计师。网页设计师就会把这个静态的设计转换成一个由HTML，CSS，JAVASCRIPT以及各种图像资源组成的网页。如果设计不能用单独的CSS代码表现，他们通常会把图片切割然后用HTML和JavaScript把他们拼接在一起。
CSS3在现代浏览器中得到支持并具有好的发展势头，许多设计方面的问题可以纯粹使用CSS变现出来。您可以使用CSS3手机开发包来安装CSS属性面板，让它帮助你简化有时繁琐的流程。使用CSS属性面板，您可以提取Fireworks中设计元素能够在CSS3中表现的属性。在这个例子中， 你会看到原来你需要针对特定浏览器CSS属性来手动转换图形效果的那些繁琐的工作，现在这个插件帮你省去多少麻烦。
您将使用CSS属性面板映射出所有可以在CSS中表示Fireworks对象的属性。一旦你所需的对象被选中后，CSS属性面板就会列出提取到的属性。你会发现你在Fireworks中做的许多设计特征，如圆角，渐变，阴影和转换的设计，都可以很容易地转换为CSS。
为了确保网页视觉的一致性，该扩展还列出针对各个主流浏览器上如Mozilla Firefox浏览器，谷歌Chrome，苹果Safari，Opera，以及Microsoft Internet Explorer浏览器的特定CSS属性。
使用“CSS属性”面板
- 在你可以使用“CSS属性”面板之前，你需要下载CSS3移动开发包并安装它：
- 如果Fireworks正在运行中，退出Fireworks。
- 下载针对CSS属性的CSS3移动开发。
- 以管理员的身份启动Adobe扩展管理器（Adobe Extension Manager）（在Windows Vista和Windows 7，您必须有管理权限登陆到您的计算机上安装它。）
- 点击安装按钮来安装该扩展。
- 浏览并选择命名为FireworksHTML5pack.zxp的扩展包。
- 当扩展被选中，单击“打开”开始安装过程。
- 在成功安装扩展后，重新启动Fireworks让扩展生效。
这时候具备最新功能的扩展就在你的计算机上安装了。
使用Fireworks扩展的CSS属性面板
当扩展安装成功后，在Fireworks里出现的新面板就会显示你在画布上选中对象的CSS属性。你可以在画布上创建一个新设计或者打开一个现有网站设计的PNG文件，就可以初探它是如何工作的了。你必须选中画布上的对象，才提取它的CSS属性：
- 选择菜单Window > Extensions > CSS Properties ，打开CSS属性面板。
CSS属性面板出现后， 下面图2是不同区域的描述：
- 点击CSS 属性面板中的“刷新”按钮， 可以看到 选定对象的CSS属性 (如图3).
- 要复制设计元素的CSS属性，你可以通过下面方式之一：
- 单击“全部复制”按钮，可以选择和复制提取到的所有属性。
- 要选择一个子集的属性，按Shift的同时单击所需的规则，或按Ctrl +单击（Windows）或Command+单击（Mac）来选择所需的规则，然后单击“复制选定的“按钮。
使用这种方法，可以随心所欲地提取CSS属性和复制其中规则， 以便将其粘贴到您所选择的CSS文件中。 在Adobe Dreamweaver CS5或者以后版本中打开一个网站的CSS文档，粘贴新的样式后，返回到HTML页面，在“文档”窗口的顶部按下“实时显示“按钮。实时显示让你预览该页面出现在浏览器中的样子。 另外，你可以通过选择 “文件>在浏览器中预览”来在真实浏览器环境测试它。 设计的对象将和其在Fireworks中显示的一模一样。
CSS代码中提取设计对象的属性时的注意事项
当你在Fireworks中使用CSS3移动开发包提取设计对象的CSS属性时，会有一些限制， 你会被告知以下的限制：
- 当你在Fireworks的画布上选择一个不同对象时， CSS属性面板不会自动刷新。 要更新规则列表中，当你每次选择一个新的对象， 你需要单击“刷新”按钮来更新规则列表。
- CSS属性面板大小是固定的，它不能扩展到更大的尺寸。
- 扩展在我写这篇文章时，只有英文版本可用。
下一个阅读方向
在Fireworks CS5或更高版本中关于提取设计图形的CSS规则新功能将大大改善你的页面设计流程。使用CSS属性面板你可以快速被告知哪些设计效果被CSS3支持（不是CSS3 中所有的属性都可以在Fireworks中表现，它只能列出能够匹配的CSS3属性）；通过简单地拷贝工作，你可以用最小的工作量，实现以行业标准的代码更新你网站的要求。另外它确保产生的CSS在你发布网站后能够兼容各个浏览器，显示的效果正如你设计时一模一样并且速度得以优化。
要进一步了解CSS3移动开发包，请阅读使用CSS3 Mobile Pack在Fireworks中创建jQuery Mobile网站主题，并观看Fireworks的高级产品经理，Takashi Morifusa演示CSS3属性面板和jQuery手机主题皮肤工具。 另外，也可以访问HTML5和CSS3开发中心。
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License
More Like This
- Industry trends in prototyping
- Designing a media player skin in Fireworks
- Exporting CSS with Fireworks CS4
- Designing for mobile devices using Fireworks CS4
- Creating Fireworks Panels – Part 2: Advanced Custom Panel Development
- Prebuilt CSS templates in Fireworks
- 使用CSS3 Mobile Pack在Fireworks中创建jQuery Mobile网站主题
- Creating Web 2.0 elements in Fireworks
- Prototyping for the Apple iPhone using Fireworks
- Creating standards-compliant web designs with Fireworks CS4
Tutorials & Samples |
Tutorials
- Creating jQuery Mobile website themes in Fireworks
- Extracting CSS properties from Fireworks design objects
- Working with CSS sprites in Fireworks CS6
Fireworks Forum |
More |
Fireworks Cookbooks |
More |
| 09/07/2011 | How do I use FXG XML markup in Shape subclasses? |
|---|---|
| 10/15/2010 | Flex4 Dotted Line |
| 06/25/2010 | ComboBox that uses a NativeMenu (Air API) |
| 05/21/2010 | Localizing a Creative Suite 5 extension |