第6章 制作网页元素

在“优化”面板中进行（也可以在“导出预 览”对话框中进行），优化设置仅用于输出 图像。 因此，用户可以自由地对图像进行优化并 调整其优化设置，而不必担心会损坏原图。
46
6.5 优化与导出
1．优化JPEG格式 选择2幅或4幅模式，在优化面板中选择输出 格式为JPEG，设置“品质”： 品质越高，图像效果越好，但压缩较少，文 件体积较大； 品质越低，图像效果越差，但图像体积越小；
创建好切片后，可以使用“指针”、“部分
选定”或“变形”工具更改切片的形状、大 小和位置，并且可以进行旋转、扭曲和倾斜 等变换 1．改变切片大小、位置 2．变换切片
8
6.2 制作导航栏
按钮具有交互作用，一般用作网页的导航栏。 一个按钮可以在文档中生成多个实例，因此
可以更改单个按钮的图形外观，自动更新导 航栏中所有按钮实例的外观。
26
6.3 制作弹出菜单
3．设置单元格：设置单元格宽度、高度、
边间距等。
27
6.3 制作弹出菜单
4．设置位置：设置主菜单与子菜单的位置，
如图所示。最后，执行“文件”→“导出”命令， 设置好处的位置、文件名和其它选项，预览 效果
28
6.3 制作弹出菜单
4．设置位置：
29
6.4 制作动画
47
6.5 优化与导出
1．优化JPEG格式 将优化后的图像与原图像比较，选择一个 图像效果与文件体积的均衡点。 如图所示，100品质文件大小88.65K，75 品质文件大小14.61K，它们相差6倍，但文 件的质量变化不大。
48
6.5 优化与导出
1．优化JPEG格式 也可以使用“选择性品质”，以保持“文 本”和“按钮”的品质，如图所示。单击 “选择性品质”按钮，在弹出的“可选JPEG 设置”对话框中设置“品质”。
13
6.2.1 制作按钮
1．自制按钮
14
6.2.1 制作按钮
1．自制按钮
在“状态”面板选择“状态2”，选择
“圆角矩形”在“属性”面板将填充色改 为“#00FFFF”，再选择“文本”在“属 性”面板将颜色改为“黑色”。 最后在文档窗口上方单击“页面1”退出 按钮编辑器 。
15
6.2.1 制作按钮
23
6.3 制作弹出菜单
24
6.3 制作弹出菜单
2．设置菜单外观：选择单元格为“图像”、 “水平菜单”，文字：大小14、居中对齐。 弹起状态：文本“白色”、单元格“蓝色” （#0066FF）； 滑过状态：文本“黑色”、单元格“黄色”； 选择“样式”，如图所示。
25
6.3 制作弹出菜单
2．设置菜单外观：
49
6.5 优化与导出
1．优化JPEG格式
50
6.5 优化与导出
2．优化GIF格式 选择2幅或4幅模式，在优化面板中选择输 出格式为GIF或GIF动画，在“索引调色版” 处选择“Web最适色”即可。
51
6.5 优化与导出
2．优化GIF格式
如果要输出透明背景图片，首先使画布背
景透明，在“优化”面板的“选择透明效果 类 型 ” 处 选 择 “ Alpha 透 明 ” ， 根 据 使 用 “图片”的网页背景色，选择与其相近的颜 色作为“色版”的颜色。 若使用默认“色版”的颜色（白色），如 果将图片放在深色背景的网页上，图片边缘 会出现白色的“毛刺”。
9
6.2.1 制作按钮
1．自制按钮 新建980*100像素的文档，选择“圆角矩 形”工具绘制矩形，在属性面板设置：填充 色“#0033FF”、无笔触、添加“内斜角”滤 镜。
10
6.2.1 制作按钮
1．自制按钮
11
6.2.1 制作按钮
1．自制按钮 选择“文本”工具输入按钮文字，在属性面 板设置文字属性：黑体、24磅、白色,居中对 齐 选择“指针”工具移动文字，使其与圆角矩 形垂直、水平居中对齐 。
面板右上角的“菜单”按钮，在菜单中选择 “复制到状态”命令，将文本对象复制到每 个状态
33
6.4.2 制作逐帧动画
1．制作打字效果 编辑各个状态中的内容，注意选择文本的对 齐方式为左对齐 。
34
6.4.2 制作逐帧动画
1．制作打字效果 在“状态”面板中单击状态1，然后按住 “Shift”键单击状态4，选择状态1到状态4， 单击“状态”面板右上角的“菜单”按钮 ， 在弹出的菜单中选择“属性”命令，如图所 示，设置延迟时间为20/100。双击状态5的延 迟时间，将其改为80/100。
第6章 制作网页元素
6.1 制作切片
6.2 制作导航栏
6.3 制作弹出菜单 6.4 制作动画 6.5 优化与导出
1
6.1 制作切片
切片将Fireworks文档分割成多个较小的部
分并将每部分导出为单独的文件。 导出时，Fireworks 会创建一个包含表格代 码的HTML 文件，以便在浏览器中重新组合 图形。
43
6.4.3 动画制作命令
44
6.5 优化与导出
网页图像的要求是在尽可能短的传输时间里，
发布尽可能高质量的图像。 在设计和处理网页图像时就要求图像有尽可 能高的清晰度与尽可能小的尺寸，从而使图 像的下载速度达到最快。为此，必须对图像 进行优化。
45
6.5 优化与导出
在Fireworks中，所有的优化操作都可以
1．自制按钮
ห้องสมุดไป่ตู้16
6.2.1 制作按钮
2．使用公共库按钮
公共库中提供了包括按钮在内一些素材，按
【F7】键打开“公共库”面板，在“按钮” 类中选择所旋钮，下图是公共库中部分按钮。
17
6.2.2 制作导航栏
使用上面制作的按钮，制作导航栏（上面创
建的文档宽度为980像素，适合1024*768分 辨率的页面），具体制作方法如下： 将制作好的按钮移到画布的左边，选择“指 针”工具按住【Alt】键拖动按钮，将其复制 到 画 布 的 右 边 ， 如 图所 示 （ 也 可 以 直 接 从 “文档库”面板将按钮拖入画布）。
6.4.1 动画简介
动画实际上是由一系列静态画面构成，每幅
画面称为一个帧。把这些静态画面按照设计 好的顺序，连续不断的快速切换显示，由于 相邻的两幅图片间存在细微的差别，另外人 眼睛具有视觉暂留效应，所以最终看到的是 连续的动画效果。
30
6.4.2 制作逐帧动画
1．制作打字效果
新建250*70像素的文档，输入文字“逐帧
52
6.5 优化与导出
2．优化GIF格式
53
12
6.2.1 制作按钮
1．自制按钮 选择“指针”工具选中“文字”和“圆角矩 形”，按【F8】键将它们转换为按钮元件， 然后双击“元件”对其进行编辑：
同时选中“文字”和“圆角矩形，打开
“状态”面板，单击面板右上角的“菜单” 按钮 ，选择“复制到状态”命令。在弹 出的对话框选择“所有状态”，单击“确 定”按钮
38
6.4.2 制作逐帧动画
2．修改天使动画
39
6.4.2 制作逐帧动画
2．修改天使动画 单击“状态”面板右上角的“菜单”按钮 ，
在菜单中选择“复制到状态”命令，在弹出 的“复制到状态”对话框中，选择“所有状 态”。
40
6.4.2 制作逐帧动画
2．修改天使动画 然后分别调整状态2至状态6中玫瑰花的位 置（使玫瑰花与天使的相对位置不变）。 单击文档窗口下方的“播放”按钮 ，查看 动画效果；在“优化”面板中设置文件类型 为“GIF动画”，然后选择“文件”→“导出” 命令生成GIF动画文件。
2
6.1 制作切片
切片的三个优点： 优化图像：获得最快的下载速度 增加交互性：使图像能够快速响应鼠标事 件 易于更新：适用于经常更改的网页部分
3
6.1.1 创建切片
创建切片有两种方法：
一是使用切片工具绘制切片 二是基于所选对象插入切片。 创建的切片会出现在“网页层”中。
4
6.1.1 创建切片
19
6.2.2 制作导航栏
20
6.2.2 制作导航栏
最后，执行“文件”→“导出”命令，设置
保存的位置、文件名和其它选项，如图所示。
21
6.3 制作弹出菜单
可以为切片、热点添加“弹出菜单”，当用
户将指针移到切片或热点上或单击切片或热 点时，会弹出“弹出菜单”。
22
6.3 制作弹出菜单
1．输入菜单内容：使用指针工具单击用作 “弹出菜单”的触发器区域的热点或切片上 的“行为手柄”，选择“添加弹出菜单”命 令： 输入菜单内容 按“缩进菜单”按钮，设置子菜单 并输入“链接”地址，设置打开“目标”， 如图所示。
18
6.2.2 制作导航栏
文档中的两个按钮就是导航栏两端的按钮，
调整好位置后，将它们同时选中，执行“修 改”→“元件”→“补间实例”命令，在 “补间实例”对话框中选择步骤为5，制作有 7个按钮的导航栏。 分别选中各个按钮，在属性面板更改按钮文 字，超级链接可以设置也可以不设置，如图 所示。使用“裁剪”工具将多余的画布裁掉。
37
6.4.2 制作逐帧动画
2．修改天使动画
打开一张“玫瑰花”的图片文件，使用
“魔术棒”工具 选择背景，并将其删除， 使用“缩放”工具 将“玫瑰花”缩小并旋 转到合适角度。 用“指针”工具 选择调整好的“玫瑰花”， 按【Ctrl+C】复制；打开“天使”动画文件， 按【Ctrl+V】粘贴并调整好位置。
1．绘制切片 切片工具包括“切片”工具和“多边形切 片”工具 。
5
6.1.1 创建切片
2．插入切片 选择一个或多个对象后，执行“编 辑”→“插入”→“矩形切片”命令。 如果选择了多个对象，会弹出对话框，以选 择“单一”或“多重”。