这是一个演示，将带你感受在一个典型站点中创造几个新页面的全过程。本演示按照这个过程的不同阶段被分成几个部分。如果你需要更多的帮助信息，在Fireworks里也包括了一个帮助。
第一步：安装
Fireworks：CD中包括了Fireworks的安装程序。CD中还有Alien Skin提供的Alien Skin Eye Candy的演示版本。安装Eye Candy文件夹到你的xtras文件夹中。
Dreamweaver 4 CD中包括了Dreamweaver Demo版的安装程序。
Macromedia Flash 5 CD中包括了Macromedia Flash 5 Demo版的安装程序。
在我们开始以前，先讲一个名词--“选择物体”：
在这整个演示中，我将经常提起“选择物体”这个名词。意思是，在工具栏中选择指针工具，点击你想选择的物体。如果想一下子选择多个物体，你也能这样做。方法有两种：
1. 按下Shift键，然后再用指针工具选择别的物体。
2. 用指针工具，点击并拖出一个区域，被这个区域所包含的物体都被选中。
译 / www.loadskill.com Donger
在位图和矢量图编辑环境中工作
在这一部分中，我们最开始将从导入的位图和矢量图创造出矢量图。
从Photoshop中导入带有遮照的图片
- 打开Demo_02.png
- 选择"文件/导入"，文件名为"Compass.psd"
- 在文件中点击任意位置放置图片
- 请注意该罗盘图形包含了来自Photoshop的蒙版图层，在Fireworks中仍旧得到了保留。同时具有文字及生动的阴影效果。选中自Photoshop导入的图象与文字后，使用Info面板来定位
- 在info面板中，键入x=0,y=106
译 / www.loadskill.com Donger
编辑物体的遮照
- 单击层面板的遮照并选择它（边界框就会出现）
- 在工具面板中选择椭圆工具，设置它的填充颜色为白色
- 在图象的最右边画一个细的垂直椭圆形
- 这将在右边缘创造一个凹入的效果以替代当前遮照的直边缘
- 退出位图编辑模式（按ESC键）
编辑生动的文字
- 在文字"Online Adventure Travel"上双击，并编辑它
- 把"Online"改写成"The Latest In"
- 当文字编辑框还是打开时，在当前文件中，单击并拖动文字，重新安排使它精确的定
- 位在图象右边稍下的位置
- 改变文字的颜色为白色，点击OK
- 在Effect面板，注意文字效果是从Photoshop带进来的
- 此时文字仍旧被选中，打开Effect面板，点击"I"图标
- 调整阴影的透明度为100%
- 续对文件进行处理或者如果你刚开始阅读这一部分，请使用文件：Demo_03.png
译 / www.loadskill.com Donger
输入多个位图（转换位图并编辑他们成为图标）
- 选择菜单File/Open
- 在Bitmaps文件夹中按住Shift全选这7个图片
- 选择"Open as animation"，单击打开
- 所有7个图像都在同一个文档中打开，每一个在一个不同的帧，我们将对每个图像作
- 稍微不同的处理。命名每个帧使我们知道哪个图像在哪个帧
- 在帧面板，双击Frame1并命名为"surfing"来表示这个图象所代表的意思
- 双击每个帧并根据每个图片的意思重命名他们
- Frame 2=Kayaking
- Frame 3=Mountain Biking
- Frame 4=Rafting
- Frame 5=Rappelling
- Frame 6=Diving
- Frame 7=Fly Fishing
译 / www.loadskill.com Donger
位图编辑
- 单击Frame 6，帧的名字为Diving，并且选中这个图片
- 图片进行处理后，就对他进行颜色的调节，使用生动效果
- 在效果面板中，选择Adjust Color/Levels
- 在Levels分布图中有三个滑尺。把最左边的一个滑尺向右拖动，直到Input Level最左边的一个数值是40
- 然后，把最右边的滑尺向内拖，直到Input Level最右边的数值为230
- 点击OK
- 在工具面板中点击缩放工具
- 在图片上通过单击右键（PC）或是单击控制键（Mac）来访问弹出的下拉菜单
- 从下拉菜单中选择Numeric Transform这个命令
- 把图像按比例缩放到20%，单击OK
译 / www.loadskill.com Donger
建立用遮照做的位图图标
- 选择长方形工具画一个矩形
- 在Info面板中，设置这个矩形的尺寸为65W×50H
- 当矩形被选中，把它的填充改为透明，边框可以为任何颜色
- 这将创造一个直观的辅助的帧，这个帧将不在遮照的图像中
- 将矩形放置到潜水员上面，是一个漂亮的图标
- 选定Edit/Cut剪切这个帧
- 选择潜水员图像
- 选定Edit/Paste As Mask
- 选定:矢量图遮照
完成图标
- 选择下一个帧
- 选择图象，再次使用缩放工具的Numeric Transform,缩放的数值为40%
- 使用单击右键（PC）或是单击控制键（Mac）来访问"Numeric Transform"功能
- 选定Edit/Paste as Mask。这个遮照仍旧在剪贴板中
- 抓住图片的中心点向四周移动，直到图片在帧中看起来感觉满意
- 打开完成的图标：Activity_icons2.png在第二部分的文件夹来显示最后的成果
译 / www.loadskill.com Donger
现在我们有了我们网页的基本构思，我们可以把它输出成带有层的Photoshop文件。Fireworks可以将每个遮照物体输出为每个图标的遮照层，因此在Photoshop中进行设计工作可以使用相同的遮照，并且保证图标一样大小。
在本地输出带有层的Photoshop文件
- 从菜单中选择File/Export
- 在对话框中，在下拉菜单中选择Photoshop PSD格式
- 输出的名字为"Layout.psd"
矢量编辑
- 打开Demo_04.png或者继续工作在你的演示文件中。我们将在活动图标下面的主要白色区域创建三个带有软边斜角的按钮
- 在菜单中选择File/Import
- 定位Icons.png
- 在主要的白色区域的活动的位图图标下面单击放置icons.png文件
译 / www.loadskill.com Donger
现在,我们将创建倾斜的按钮在图标后面
- 选择长方形工具
- 拖出长方形
- 在Info面板中，尺寸设置为70W×40h
- 在Object面板中，设置圆角为30
- 在Fill面板，选择linear模式
- 在Fill面板中，单击edit按钮来编辑渐变色
- 单击左面的颜色方块选择米色#CCCC99
- 单击右边的方块，并且选择高亮的兽皮颜色#cc9966
- 在渐变编辑器外面单击来关掉它
- 在Fill面板，改变填充的Edge，把Hard改成Anti-aliased
- 现在，让我们调整渐变色以便我们可以从上到下，在矩形按钮上垂直地渐变
- 在矩形物体上，拖动渐变填充线上的黑色小园点，将它拖到靠近物体顶端
- 拖动渐变填充线上的黑色矩形小方框，将它移动到物体的底端。确保连接这两个小点的线是完全垂直的
- 在Effects panel面板中，选择Bevel&Emboss/Inner Bevel
- 在下拉菜单中把"Flat"改成"Smooth"
- 在Bevel窗口外单击关掉这个窗口
- 当按钮还是被选择时，按住Option键（Mac）或者按住Alt键（PC），单击按钮向下拖来进行复制
- 再次进行复制，这样你就有了三个按钮，三个图标各有一个
- 放置每个按钮在图标的上面，并且按钮的左边缘和文字块的左边缘对齐
- 按住Shift选个全部的按钮，并选择Modify/Arrange/Send to Back
译 / www.loadskill.com Donger
优化图象
- 在这段中，我们将在网页中切割图片进行优化。在上面有文字的罗盘图象需要进行选择性的JPEG优化。文本区域应该用于其它部分不同的设置保存
- 打开Optimize面板，什么都不选择，设置全部缺省的页面输出设置为Gif，Web Adaptive 128种颜色
开启背景层并且用指针工具，选择这个Compass 图象
- 用索套工具，在这个Compass图象的"N/W"文字边上画一个选择区域
- 按下Shift键，再次选择Compass图象的每个数字（70,60,50,40&30）
- 选择Modify/Selective JPEG/Save Selection as Jpeg Mask
- 按ESC键取消选定，并退出图象编辑模式
- 在罗盘和"The Latest In Adventure Travel"的周围画一个切片
- 当切片被选择，在Optimize面板中，选择JPEG，质量为50%
- 在优化面板中，接下来选择Selective Quqlity，键入90然后按回车
- 单击90旁边的图标来访问Selective Quality菜单
- 在弹出窗口中，检查"Enable Selective Qualilty"复选框，同样也要确定"Preserve Text Quality"被选中，单击OK
- 单击文件中的Preview标签来观察你的佳化效果
-
译 / www.loadskill.com Donger
创建一个交互式的网页
- 在这段中，我们将会在我们的网页中增加交互性和动画
- 在层面板中建立一个新的层，并双击重命名为"Navigation Buttons"
- (将这个新层放在最上面，在compass版面的上面)，把它拖到那个位置
- 在Insert菜单中选择"New Button"
- 选择长方形工具并拖出一个矩形
- 在Info面板中，设置它的尺寸为140W×20H
- 填充颜色为暗灰色#333333，笔触为1pixel basic笔触，暗青绿色#006666
- 复制这个矩形并进行粘贴
- 当这个复制矩形被选择时，使用Info面板调整它的尺寸为20W×20H
- 并且改变它的填充色为中青绿色#006699
- 从File菜单中选择Import,在第三部分文件夹中选择"Flag.png"
- 在中青绿色正方形上单击来放置这个Flag
- ·选择文字工具，在按钮上单击来输入文字
- 输入"ADVENTUREPLANNER"设置文字大小为12pt，字体为Impact，黄颜色#FFCC66
- 保证左边的按钮正处于被选择状态
- 放置文字在按钮暗灰色的区域上
-
译 / www.loadskill.com Donger
创建这个按钮的Up状态：
- 在按钮编辑窗口中单击"Over"标签
- 单击"Copy Up Graphic"按钮
- 对图形做下面这些改变:把填充颜色由暗灰色改成同文字一样的颜色#FFCC66
- 改变文字的颜色为暗灰色（把按钮和文字的颜色互换）
- 关闭按钮编辑器
用简单的按钮创建导航条
- 选择"Adventure Planner"这个简单的按钮
- 按下Option(mac)或者Alt(PC)键来向下拖动复制这个按钮
- 再复制四个按钮，使按钮的总数达到六个
- 所有的按钮排成二行，每行三个。第一行为1，3，5，第二行为2，4，6
- 全选这六个按钮，并使用Info面板，使它们的放置位置为x=150,y=25
- 选择第二号复制的按钮
- 在Object面板，把文字"ADVENTURE PLANNER"改成""GEAR"
- 按下回车键
- 通过单击当前的按钮来确定只改变当前的按钮
- 把余下的四个按钮文字更改如下：
- #3-"BOOK FLIGHTS"
- #4-"CHECK CONDITIONS"
- #5-"TRAVEL LOGS"
- #6- "TRAVEL CHAT" 在文件中单击Preview标签来预览这个交互式的按钮
-
译 / www.loadskill.com Donger
在这部分，我们将为这些活动的图标建立 "翻转图"效果。
建立图片翻转按钮
- 单击"compass layout"层并选择它
- 在Frame面板中，单击底部的增加新帧的图标
- 当第二帧被选中，选择文字工具并在左边铁锈红的区域上单击以输入文字
- 键入"Hit the beaches of Southern California this summer with the pros."
- 文件格式为Verdana, bold, 12 point,黄颜色#FFCC66（颜色和下面的新月牙颜色一样）
- 在帧面板，选择Duplicate Frame,复制的数目为6
- 选择第三帧，双击改变文字为"Explore the Seattle area by kayak. A 10 day adventure."
- （如果你喜欢你可以改变其他的帧，或者干脆打开Demo_08.png）
- 选择切图工具，添加一个切片在你刚增加的文字的附近（把这个切片一直拉到文件的底部）
- 在帧面板，确信第一帧被选中
- 用Subselect工具，按住Shift键，选中所有的矩形外框位图图标
- 从菜单中选择Insert/Hotspot
- 在对话窗口中选择"Multiple"
- 在它们的外面单击取消选中热区
- 在Surfing图象的热区上单击来选定它
- 单击并拖动中心圆点图标到你在下面新建立的切片上
- 在弹出窗口中，确信"Frame 2"被选定，且单击OK
- 选择下一个热区，单击和拖动这个中心图标到切片物体
- 这时，选择"Frame 3"作为源目标
- 继续单击和拖动剩余的热区的中心图标到切片中，每次选择适当的帧来做为源目标的交换
- 单击Preview标签来预览这个图片翻转
-
译 / www.loadskill.com Donger
创建弹出菜单
- 在文件的顶部的导航条中选择"Gear"按钮
- 在菜单中选择Insert/Pop-up
- 在出现的窗口中，进行下面的操作
- 输入"Backpacks"
- 单击图标"+"来增加（注意：你也能在这儿输入URL）
- 然后，输入"No frame"
- 单击图标"+"来增加它
- 当"No frame"被选中时，点击蓝色的缩进图标
- 使用图象054.gif
- 现在输入"External frame"并单击"+"图标
- 输萒ML外观设置，但是把文字尺寸改为10pt（使用弹出窗口编辑器你既可以是HTML也可以是图象来创建你的按钮）
（出处：http://www.Gimoo.net）
