fireworks 网页设计综合实例(下)

《fireworks 网页设计综合实例(下)》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、Fireworks网页设计综合实例(下)　　八、建立切片　　我们的基本导航及页面结构已经建立好了，现在到了增加切片的时候了。Fireage图片格式。我们选择图片格式，并设定文字大小为10。　　6、当您选择了Image格式时，需要在下部的两个窗口设置Up和Over状态的菜单样式，您的悬想也许和我们这里的不同，这是因为我们使用了自定义的样式文件。我们可以根据不同设计项目的需要将自定义的样式作为弹出菜单的选项。　　7、我们首先绘制一个最终的弹出菜单的矩形，并设定好需要的填充、描边和特效。　　如下图：　　8、打开Style面板，选中刚才创建的矩形，在Style面板的弹出菜单中选择NeySty

2、le，如下图：　　此时您的Style面板中已经添加了一个新的样式。　　9、选择Style面板弹出菜单中的ExportStyles将刚才的这个自定义样式输出到Fireenu/，并将它命名为Styles.stl，但要注意必须先将原有的Styles.stl文件备份。　　10、我们再次编辑刚才创建的弹出菜单，就可以选择我们自定义的样式了。　　11、按F12预览生成的弹出菜单，如下图：　　12、此时表示二级菜单的小箭头默认为黑色，所以看不见，我们也可以在最后修改此箭头样式和颜色，具体方法参见本书前面章节。　　十一、创建变形动画　　给一个网站添加动画对于访问者的时间和金钱都123下一页[感谢阅读

3、这篇文章，..，]是一个不小的花销，因此在添加您的动画前，一定要先考虑好如下问题：动画能否增进您的信息传达力度，访问者下载和播放动画是否迅速、方便，是否有足够的组成动画的内容和资源。尽管网络动画及其传递方式正在不断的发生改变，但传统的GIF动画依然有着不可忽视的优势，我们在这里介绍一下创建GIF动画的两种途径。　　1、在层面板新建一个Logo层，将其置于bol。　　5、打开Effect面板，对此符号的实例添加红色Globols>Tes分布到帧，如下图所示：　　9、打开ize优化面板，设定此切片的类型为AnimatedGIF，并设定颜色数为32色，如下图所示：　　11、此动画完成

4、，您可以打开帧面板设定动画帧之间显示的时间。　　十二、创建实时动画LiveAniamation　　FireateLogo，符号类型为Animation，如下图所示：　　4、在弹出的设置窗口中设置插入帧数为8，并进行如下设置：　　5、拖动生成的动画符号中心的小红点，将其向右拖动到适当位置，注意不要将其拖出刚才创建的切片范围之外。　　6、打开优化面板Optimize设定此切片的类型为AnimatedGIF，颜色数为32，如下图所示：　　十三、优化图像　　我们的设计稿基本完成，下面我们需要针对不同对象设定各自的优化参数和输出格式。　　1、根据不同的输出质量要求及各部分功能，分别设定各自的切

5、片，注意切片应尽可能划分整齐、简单。　　2、选中左边人像部分的切片，打开优化面板，设定输出格式为JPEG，质量为60。　　3、我们可以切换到2-Up预览窗口观察优化前后的结果，如下图所示：　　4、对于上面创建的两个动画，我们已经设置了输出类型为AnimatedGIF。　　5、我们还可以对文档正中的切片设定为文字切片，及将来输出时此部分输出为文字内容。　　6、选中文档中间部分的切片，打开Object面板，在对象类型里选择Text，在下部的窗口输入最终的文字内容。需要注意的是，您在这里不仅可以输入普通的文字内容，还可以输上一页123下一页[感谢阅读这篇文章，..，]入标准的HTML格式内

6、容，如我们输入的<center>和<fontcolor=landImages；HTML选项里选择ExportHTMLFile；Slices选项里选择ExportSlices。　　3、在Option选项中可以进行更详细的设置，选择General标签，确定在HTMLstyle选项中Dream中选择1-PixelTransparentSpacerNestedTables。　　5、在EmptyCell区域，在弹出菜单中选择SpacerImage。　　6、切换到DocumentSpecific面板，勾选下部的MultipleNavBarHTMLPages，这样建会为每个按钮所

7、对应的栏目输出各自的页面。　　7、点击确定将文件输出。查看输出的文件如下图所示：　　十五、在Dreample.htm在中间的表格单元中选择文本，并改变其中的内容，在这段文本的最上端加入一句话企业理念，然后改变文字的颜色为浅灰色。此时文本的样式如下图所示：　　2、选择整个表格使用文档窗口底部的快速标签选择器选择<table>标签。　　3、打开属性面板，注意此时的属性面板左上方有Fireple.png文档。注意此时文档窗口顶端有EditFromDr