译 / www.loadskill.com Donger
这是一个演示，将带你感受在一个典型站点中创造几个新页面的全过程。本演示按照这个过程的不同阶段被分成几个部分。如果你需要更多的帮助信息，在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也可以是图象来创建你的按钮）
- 单击Finish按钮
-
译 / www.loadskill.com Donger
用commands执行图象翻转的批处理命令
- 打开History 面板
- 在文件中，按住shift选择这三个矢量的图标和他们的"more"按钮一起（在主要的白色区域）
- 在Frame面板，选择"Copy to Frames"并选择"Next Frame"操作
- 让我们自动地把这三个按扭变成图象翻转按扭
- 在白色的主区域选择第一个按钮（在"Fly Fising in the Rocky Mountains"上面）
- 复制它
- 在Frame面板中，在第二帧上单击
- 粘贴它
- 选择菜单Modify/Send to Back
- 在FILL面板，选择填充的类型为Solid，选择颜色为桔黄色#FF9933
- 当按钮仍旧被选择时，选择菜单Insert/Slice
- 在切片上，在图标的中心单击来访问弹出菜单，选择"Add Simple Rollover Behavior"
- 在History面板，按住Shift选择这八个步骤，从"Copy" 到"Edit Behavior"
- 单击磁盘图标把这些步骤保存成一个Command.
- 命名这个Command为"Make rollover button"
- 现在，单击第一帧下面，选择中间的按钮在"Level 5 Rapids"
- 现在，你可以任选其一
- 从Command菜单中选择"Make rollover button"命令
- 或者
- 在历史面板，点击"command script"，并点击Replay按钮
- 点击第一帧，并选择最后一个按钮
- 然后，在History面板选择"Make rollover button"或者在历史面板重新执行"command script"
译 / www.loadskill.com Donger
一帧帧地做动画
- 在Layer面板，在Background层上建立一个新层，双击重命名为"Top Banner"
- 选择File/Import,定位"top_banner.png"
- 在左上角放置这个文件
- 在文件仍旧被选择时，使用Info面板设置放置的位置为x=0,y=0
- 当我们开始做这个动画广告条前，我们需要决定哪部分将是背景的部分，应该放在动画的下面。在这个工作中，我们设置会动的部分为文字"Compass"和罗盘的图标。因此，在他们下面的青绿色的矩形应该被移动到共享层，也就是这个背景图层（因为我们想确保在我们动画中的每个帧中都能看到它）
- 在Top Banner层中选择这个青绿色的矩形
- 在Layer面板，拖动蓝色的点（表示选中了这个青绿色物体）拖到背景层中
- 选择COMPASS文字
- 在菜单中选择Insert/Convert to Symbol
- 把这个新的符号命名为"Compass text"作为Graphic符号，单击OK
- 在Effects面板，给这个新符号增加阴影效果
- 仅仅改变右下边的二个属性：改变模糊的数量为1
- 改变角度为200度
- 复制这个符号，然后粘贴（它会粘贴在自己本身的正上方）
- 在Effect面板中，单击"i"图标来改变阴影
- 改变角度为350
- 选择符号的二个复制品，（拖动指针穿过它们（从顶上开始，拖到文件的最下面）然后按住Shift键，点击背景层青绿色物体把它排除在外）
- 从菜单中选择Modify/Symbol./Tween Instances
- 键入数字6，并钩选"Distribute to Frames"选项，单击OK
-
译 / www.loadskill.com Donger
生动的动画
- 在第一帧，选择Compass标志
- 从菜单中选择Modify/Animate/Animate Selection
- 在弹出窗口，选择帧数为8，旋转360度，点击OK
- 在文件中，那儿将会有一条由点组成的线被附在这个罗盘标志上。这些通过各自的8个帧来控制动画的运动
- 拖动红色的点到右边，以覆盖"Adventure Planner"的距离。按住shift键强制运动在一条水平线上
- 在文档窗口，单击Rewind按钮，然后在文件中应用按钮预览你的动画
- 在罗盘标志文字和动画上拖出一个切片物体
- 点击到第8帧，看清楚动画物体结束的地方，确保你的切片包围住了它
- 当切片被选择，打开Optimize 面板并且在弹出窗口中选择Animated Gif格式
- Web Adaptive，32 种颜色
-
译 / www.loadskill.com Donger
输出到Dreamweaver
- 在本地输出成Dreamweaver HTML文件来完成图象翻转效果之前，再让我们增加一些切图来控制页面如何被切割和优化
- 打开Ｗeb图层的眼睛图标来察看切片和热区
- 在白色区域上画一个切片到“The Latest in Adventure Traveheadline”的右边。这个切片应该会自动和文字标题／罗盘图象的切片吸附在一条线上
- 当切片被选择时，在Object面板上，选择“Type”:在弹出菜单中选择“Text”
- 输入一些虚假的大字标题和文字（它将会在随后的ＤＷ中被格式化），按下回车键
- 在鱼的图象上拖出一个切片
- 在Optimize面板中，选择Jpeg 100%
- 在三个按钮下面拖出三个紧密相连的切片在文字部分（看到现在的右边的文字被按钮分成几个部分）
- 在优化面板中，所以没有被使用切片的会自动变成切变并使用缺省的设置。看这些，确信没有任何被选择，然后看你的Optimize面板。这个缺省的设置为Gif,Web Adaptive 128种颜色
- 让我们准备输出这个页面
- 选择File菜单下的HTML Setup ·在General标签中
- 确定在HTML style选项中Dreamweaver被选择
- 在Table标签中
- 在"Space from"中选择Nested Tables(嵌套表格)
- 在Empty Cell区域，在弹出菜单中选择“non-breaking space”
- 在Document Specific标签中：什么都不用改变，只需要显示一下选项
- 点击OK，保存你的演示文件
时间： 2024-08-03 05:25:41