Fireworks样式、元件和 URL.ppt

1、第五讲 样式、元件和 URL,教学目标,通过本讲的学习掌握创建编辑位图图像,1、,教学内容：,重点：了解Firworks的使用范围,教学重难点：,Adobe Fireworks 提供了三个用于储存和重复使用样式、元件和 URL 的面板。样式储存在“ 样式” 面板中，当前文档的元 件储存在“ 文档库” 面板中， URL 储存在“URL” 面板中。默认情况下，这三个面板构成了“ 资源” 面板组。,一、ULR概况,通过创建样式，可以保存并重新应用一组预定义的填充、笔触、滤镜和文本属性。将样式应用于对象后，该对象即具备了该样式的特性。,一、样式,应用样式 使用“ 样式” 面板可创建和存储范围完整的样式

2、，并将这些样式应用于对象和文本。 若要快速访问在文档中发现的样式子集，请使用“ 属性” 检查器中的当前样式菜单。 1 在要应用样式的画布上选择对象。 2 选择“ 窗口”“ 样式” 以显示“ 样式” 面板。 3 选择“ 当前文档” 以访问当前使用的样式或从弹出菜单中选择一种预设样式，以访问预设的 Fireworks 样式。 注： 如果文档中没有样式，则在选择任何预设样式之前，样式面板始终为空。 4 单击面板中的样式。,一、样式,可基于所选对象的属性来创建样式。下列属性可以保存在样式中： 填充类型和颜色，包括图案、纹理以及角度、位置和不透明度等矢量渐变属性 笔触类型和颜色 滤镜 文本属性，如字体、

3、字号、样式（粗体、斜体或下划线）、对齐方式、消除锯齿、自动字距调整、水平缩放、字距调整以及 字顶距等 通过组创建样式时，仅在创建的样式中定义上述效果。将样式应用于组时，只将这些效果应用于整个组。不会将路径属性应用 于所有元素。 自定义样式一经删除，便无法恢复；但是，当前使用该样式的任何对象仍会保留其属性。,二、创建和删除样式,创建样式 1 创建或选择具有所需笔触、填充、滤镜或文本属性的矢量对象或文本。 2 单击“ 样式” 面板或“ 属性” 检查器底部的“ 新建样式” 按钮 。 3 选择要成为样式一部分的属性。 注： 若要保存其它文本属性，请使用“ 其它文字” 选项。 4 为该样式命名并单击“

4、确定”。,二、创建和删除样式,基于现有样式创建新样式 1 将现有样式应用于所选对象。 2 编辑该对象的属性。 3 通过创建样式来保存属性。 删除样式 1 从“ 样式” 面板中选择一个样式。 按住 Shift 并单击可选择多个样式；按住 Ctrl 并单击可 选择多个不相邻的样式。 2 单击“ 删除样式” 按钮 。,二、创建和删除样式,编辑样式 1 选择“ 选择”“ 取消选择” 取消选择画布上的任何对象。 2 双击“ 样式” 面板中的某个样式。 3 在“ 编辑样式” 对话框中，选择或取消选择属性。 4 单击“ 确定” 将更改应用于样式。 重新定义样式 1 在画布上，选择使用该样式的对象。 2 在“

5、 属性” 检查器中，修改已应用的滤镜，然后单击“ 重新定义样式” 按钮. 注： 通过组重新定义样式时，仅重新定义效果。所有的路径属性都将被忽略。 若要将一个样式快速替换为“ 当前文档” 样式中的另一个样式，请按住 Alt 并将一个样式拖到“ 样式” 面板中的另一个样式。,三、编辑或重新定义样式,Fireworks 提供 3 种类型的元件：图形、动画和按钮。在编辑原始元件对象时，所复制的实例会自动进行更改，以反映经过编 辑的元件（除非您断开二者之间的链接）。 每当想重复使用图形元素时，元件都会很有用。元件对于创建按钮以及为对象在多个状态之间制作动画也很有帮助。,四、元件,从所选对象创建元件 1

6、选择对象，然后选择“ 修改”“ 元件”“ 转换为元件”。 2 在“ 名称” 框中键入元件的名称,四、创建元件,从头开始创建元件 1 执行下列操作之一： 选择“ 编辑”“ 插入”“ 新建元件”。 从“ 文档库” 面板的“ 选项” 菜单中选择“ 新建元件”。 2 选择元件类型。 3 若要使用 9 切片缩放辅助线缩放元件，请选中“ 启用 9 切片缩放辅助线” 选项，然后单击“ 确定”。 4 使用“ 工具” 面板中的工具创建元件。,四、创建元件,放置元件的实例 将元件从“ 文档库” 面板拖到当前文档中 编辑元件及其所有实例 当您编辑元件时，其所有的相关实例都将自动更新以反映最新的修改。,四、创建元件,

7、 在画布上，双击元件实例。 选择某个实例，然后选择“ 修改”“ 元件”“ 编辑元件”。 在“ 文档库” 面板中，双击元件图标。 （仅限动画元件）单击“ 动画” 对话框中的“ 编辑” 按钮。,四、创建元件,从元件编辑切换到页面编辑 当您编辑元件时，文档面板会进入元件编辑模式。此模式会使画布上的其它对象变暗，从而允许您在整页的上下文中快速修改元件。（使用 9 切片缩放的元件例外，这种情况下元件单独显示。） 若要从元件编辑切换到页面编辑，请执行下列任一操作： 在画布中，双击空白区域。 在文档面板顶部的托盘中，单击页面图标或向后箭头。（如果已嵌套元件，还可以利用托盘访问包含的元件。）,四、创建元件,双

8、击某个实例对其进行编辑时，实际上是在编辑元件本身。若要只编辑当前实例，必须断开该实例与元件之间的链接。但这将永久中断两者间的关系。以后对该元件所做的任何编辑都不会反映在以前的实例中 断开元件链接 1 选择实例。 2 选择“ 修改”“ 元件”“ 分离”。,四、编辑特定的元件实例,在不断开元件链接的情况下编辑实例 1 选择实例。 2 在“ 属性” 检查器中修改实例属性。 可以在不影响元件和其它实例的情况下修改下列实例属性： 混合模式 不透明度 滤镜 宽度和高度 x 和 y 坐标,四、编辑特定的元件实例,创建组件元件 1 使用要自定义的属性来创建对象。 此元件可以将项目符号颜色和项目符号编号作为可自

9、定义选项。 2 创建对象时，可在“ 层” 面板中键入名称，以自定义要使其成为可编辑的功能的名称。例如，可以将可编辑的文本字段命名为 “label”。此名称将在 JavaScript 文件中使用,四、编辑特定的元件实例,从 Fireworks 元件库导入一个或多个现成的元件 可以导入现成的动画元件、图形元件、按钮元件、导航栏和多元件主题。 1 打开 Fireworks 文档。 2 在“ 公用库” 面板中选择一个文件夹。 还可以从先前导出的库 PNG 文件（位于硬盘驱动器、CD 或网络上）中导入元件。,四、导入和导出元件,通过拖放操作或复制和粘贴操作导入元件 将元件实例从包含该元件的文档拖到目标文

10、档中。 在包含该元件的文档中复制一个元件实例，然后将其粘贴到目标文档中。 该元件被导入到目标文档的“ 文档库” 面板中，同时保留与原始文档中元件的关系,四、导入和导出元件,为网页对象指定 URL 时，将创建一个指向诸如网页这样的文件的链接。可以为切片、热点和按钮指定 URL。若要存储、编辑和组织 URL 以供重复使用，请在“URL” 面板中创建一个 URL 库。,五、URL,关于绝对 URL 和相对 URL 可以在“URL” 面板中输入绝对 URL 或相对 URL。 若要链接到您的网站之外的网页，请使用绝对 URL。 若要链接到您的网站中的网页，可以使用相对 URL，也可以使用绝对 URL。 绝对 URL 是包含服务器协议（对网页而言通常为 http:/）的完整 URL。例如， 即为 Fireworks 技术支持网页的绝对 URL。不管源文档的位置如何，绝 对 URL 都能保持链接无误，但在目标文档已经移动的情况下，将无法正确链接。 相对 URL 相对于包含源文档的文件夹。如果要链接到的文件位于与当前文档相同的文件夹中，使用相对 URL 通常是最简 单的。下列示例显示了相对 URL 的