模块03 Fireworks切片应用

1模块03Fireworks切片应用模块引导Fireworks在网页切片制作方面有很强的优势，Fireworks的切片功能可以制作各种交互效果。例如导航按钮、导航菜单的制作。网页中的图像交换展示，这种状态其实最后导出的文件实质上就是不同状态的切片。完整的图像只能使用一种文件格式，应用一种优化方式，而对于作为切片的各幅小图片我们可以分别对其优化，并根据各幅切片的情况还可以存为不同的文件格式。这样既能够保证图片质量，有能够使得图片变小。切片制作好了之后，就可以对不同的切片制作不同的链接了，而不需要在大的图片上创建热区了。本模块主要介绍网页设计中的导航按钮和菜单，图像交换展示的制作。学习者可以根据自己专业的特点，对本模块的内容进行选择。23学习目标能力目标 1.熟悉按钮元件及其实例。 2.熟悉导航栏和弹出菜单的功能。

知识目标 1.掌握按钮元件的制作。 2.掌握导航栏的制作。 3.掌握弹出菜单的制作。

课时分配 2课时（授课1课时，实践1课时）。4应知技能导航条实际上是一组互斥的按钮，因此，快速制作导航条的方法，就是先创建一个按钮元件，然后，在文档中多次应用，并对实例进行简单编辑。在Fireworks中，可以使用按钮编辑器快速创建一个按钮元件，从库面板中，克隆多个按钮元件，就可以制作成导航栏。创建带有样式的按钮使用“按钮按钮编辑器”创建按钮，为了美化按钮，可以应用样式面板中的样式，还可以应用“属性面板”上的各种效果。输入清晰的按钮文字在网页图象中，如果使用较小的中文字体，例如12象素，可以使用“不消除锯齿”的宋体。使用更大的其它字体时，就需要消除锯齿了。导航条应知技能弹出菜单通常是在Web页中由鼠标来触发的一种菜单导航效果，当鼠标移动到导航菜单上触发条件满足，就会显示出弹出菜单。当鼠标从导航菜单上移开，弹出菜单自动消失。触发条件既可以是鼠标通过（OnMouseOver），也可以是鼠标单击（OnClick），这种结构的菜单使我们能更加灵活地组织我们的菜单结构，而且下载时间又比较迅速。弹出菜单结构非常类似于一个表格，每一个导航菜单条目就好比一个单元格。5弹出菜单模拟任务6任务背景导航是指位于网页中水平或垂直排列的导航按钮，它起着链接网站各个页面的作用，设计的年代网导航栏效果图如图所示。任务要求不管用户在网站上的什么位置，都能依靠导航栏到达希望到达的地方。当鼠标单击按钮“首页”，按钮状态文字改为“年代首页”，单击按钮“影视”，按钮状态文字改为“经典影视”，单击按钮“照片”，按钮状态文字改为“老照片”，单击按钮“童谣”，按钮状态文字改为“儿时童谣”，单击按钮“游戏”，按钮状态文字改为“童年游戏”，按钮离开时，按钮状态恢复初始状态。任务1创建导航栏模拟任务7任务背景弹出菜单在网页制作中是一种非常常用的菜单方式，使用Fireworks制作弹出菜单不但制作简单，而且效果也很好。年代网的导航栏弹出菜单效果所示。任务要求站点里的导航信息必须非常的简练和实用，只有那些最重要的信息才出现在导航条中，而更多的导航和内容信息通常都隐藏起来。弹出菜单要求有2级级联菜单，美观且具有交互性。任务2创建弹出菜单知识拓展切片的作用是将一个大图象切割成许多小图象，然后导出到DW中，再加工为网页，浏览的时候可以分片下载，提高速度，对于在PS、ILLUSTRATOR中设计网页的人尤其有用，你可以在FW（PS也有此功能）中将设计的页面进行合理的切割，然后导出全部页面到DW中进行再加工，导出的格式最好为JPG，GIF有些不保真。热区在DW中也有，但后者的热区准确率不高，因为在DW中不能随便放大或缩小页面，而在FW中，你可以用此工具任意地慢慢设置热区，也可以在FW中直接添加链接，再导出图片和相关代码到DW中，需要注意的是，如果一个图片已经用切片工具切割了，就不能再用热区工具了，热区在已切片区域上不起作用。Fireworks对网页进行切片输出的时候，一般都用普通的切片工具进行输出。但是如果遇到导航很多，切片重叠时候，用一般的方法就无法进行处理，这时多变形切片工具的好处就显现出来了。需要注意的问题：⑴多边形切片工具不能切出圆形切片，如原图比较复杂，可多切几个边，或在DW中在进行热区形状编辑。⑵多边形工具的边数多少决定生成文件的大小，所以除非特殊需要，尽量控制多边形的边数。8热区和切片的作用独立实践9任务背景年代网网站有个父亲节的栏目，90后甚至是10后都讲究创意和个性，即将到来的父亲节里，为年代网父亲节栏目设计一款个性电子打火机动画，效果如图所示。任务要求画布【大小】为“200像素×400像素”，用按钮控制打火机的开关任务3打火机动画独立实践10任务背景那些属于90后出生的一代，当回首往事，回忆童年的美好时光，总是记得那些欢声笑语，那些逝去的岁月，那些最天真的小伙伴！让我们在这些经典图片中，重温美好岁月！为年代网设计童年游戏导航菜单。年代网的导航栏菜单效果图所示。。任务要求站点里的导航信息必须非常的简练和实用，只有那些最重要的信息才出现在导航条中，而更多的导航和内容信息通常都隐藏起来。弹出菜单要求有2级联菜单，美观且具有交互性。任务4创建导航菜单学习目标能力目标 1.掌握“切片”工具的使用。 2.掌握“热点”工具的使用。

知识目标 1.了解图像变换的概念。 2.掌握利用行为实现网页图像变换的制作方法。

课时分配 2课时（授课1课时，实践1课时）。11应知技能12Fireworks的图像交互是通过切片或热区实现，切片就成为了创建交互性网页的一个基本方法，现在利用切片就可以实现交互功能。切片就是将图像切成很多不同的部分，它是一种网页对象，不是以图像形式存在，而是以HTML代码的形式出现。Photoshop也有切片功能，但相比Fireworks来说，无论在操作上和功能上都有一定的差距。使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等，因此，对于辅助网页编辑来说，Fireworks将是最大的功臣。利用可视化工具，无需学习代码即可创建具有专业品质的网页图形和动画，如变换图像和弹出菜单等。切片与热区模拟任务13任务背景为年代网的首页设计2个广告图像的变换，效果如图所示。任务要求当用户浏览网页时，鼠标指针滑过一个广告图像，该图像变化成另一个广告图像。任务1使用行为交换图像模拟任务14任务背景回到了童年去过的地方，也是一件非常有趣味的玩法，为年代网重温儿时的记忆栏目设计一个动物观赏大图片显示动画，效果如图所示。任务要求当鼠标移动到任意一个小动物时，在中心位置显示该动物的大图片。任务2使用切片交换图像模拟任务15任务背景家庭养花，陶冶性情，为花卉网站网设计一个经典花卉展示，效果如图所示。任务要求当鼠标移动到任意一个数字序号时候，在中心位置显示该序号的图片。任务3使用热区交换图像知识拓展16Dreamweaver调用Fireworks图像Dreamweaver和Fireworks识别和共享许多相同的文件编辑结果，其中包括对链接、图像映射、切片、导航栏、弹出菜单等的更改。这两个应用程序共同为在HTML页面中编辑、优化和放置网页图形文件提供了一个优化的工作流程。可以在Photoshop、Fireworks页面布局中，为图像交换、导航栏定义好大小和位置，也可以直接在Dreamweaver中，使用图像占位符、CSS+DIV，为图像交换、导航栏定义好大小和位置，该位置允许用户指定Dreamweaver中将来放置的Fireworks图像的大小和位置。1．使用Dreamweaver占位符调用Fireworks图像2．将FireworksHTML复制到剪贴板在Dreamweaver中使用独立实践17任务背景曾经，我们在回家时候总想着那些游戏明天可以继续，蓦然回首，那些都已经是记忆的碎片。童年的游乐不是一辈子的游戏，童年是短暂的，它晃眼即逝，留下的只有温暖的回忆。为年代网设计儿时游戏场景动画，效果如图所示。任务要求当鼠标移动到任意一个儿时游戏小图片，在中心位置显示该游戏的大图片。任务4童年的游戏独立实践18任务背景一首童谣、一部电影、一种游戏，甚至是一张时隔多年的泛黄的老照片，就是人们的怀旧情结。它总是零零散散地让人们感念自己所处的年代和时光，因此，年代网便