网页设计与制作教学课件任正云第10章

《网页设计与制作教学课件任正云第10章》由会员分享，可在线阅读，更多相关《网页设计与制作教学课件任正云第10章（48页珍藏版）》请在金锄头文库上搜索。

1、1,网页设计与制作教程,中国水利水电出版社 网页设计与制作教材 配套电子教案 2007.6,2,10.1 Fireworks 8简介 10.2 Fireworks 8工作环境 10.3 Fireworks 8的简单操作 10.4 将文本附加于路径 10.5 创建按钮与菜单 10.6 图像切片的使用 10.7 网页图形图像的优化与发布 10.8 实践技能训练,第10章 网页图像制作与优化,3,10.1 Fireworks 8简介,Macromedia Fireworks 8是一款用来设计网页图形的多功能应用程序。可以用来创建和编辑位图和矢量图像、设计网页效果（如变换图像和弹出菜单）、修剪和优化图

2、形以减小其文件大小以及通过使重复性任务自动进行来节省时间。它所含的创新性解决方案解决了图形设计人员和网站管理员所面临的主要问题。 10.1.1 Fireworks的优点 Fireworks的优点表现在效率高、操作便捷以及较好的网络速配性等多方面。 10.1.2 Fireworks的适用对象 当然，不会有绝对的最优选择，因为Fireworks是应网页设计者的挑战而推出的一套解决方案。因此，Fireworks对传统传媒（如商业印刷品）来说，并不是创建和处理图形的最佳选择。Fireworks的环境是基于RGB颜色模式的，因此，理论上讲，也更适于屏幕导出，而不是打印输出。,4,10.1 Firewor

3、ks 8简介,10.1.3 Fireworks 8的新特色 1专业设计控制 2无缝的跨软件工作流程 3性能显著提高 4用户界面的改进 5新的热效 6新的反锯齿选项 7完整的Unicod支持,5,10.2 Fireworks 8工作环境,10.2.1 Fireworks 8的界面 图10-1 Fireworks 8的操作界面,6,10.2 Fireworks 8工作环境,10.2.2 菜单栏 （1）“文件”菜单 （2）“编辑”菜单 （3）“视图”菜单 （4）“选择”菜单 （5）“修改”菜单 （6）“文本”菜单 （7）“命令”菜单 （8）“滤镜”菜单 （9）“窗口”菜单 （10）“帮助”菜单,7,

4、10.2 Fireworks 8工作环境,10.2.3 工具栏 （1）主要工具栏： （2）修改工具栏,8,10.2 Fireworks 8工作环境,10.2.4 状态栏 Fireworks 8中的状态栏显示了设置选项、按钮、大小与锁定键及数字锁定键等当前操作状态的相关信息，如图10-5所示。 图10-5 状态栏,9,10.2 Fireworks 8工作环境,10.2.5 工具面板 在默认状态下，工具面板放置在窗口的左侧，面板上分为几组不同种类的工具，分别为选择、位图、矢量、网页、颜色和视图，如图10-6所示。 图10-6 工具面板中的几组工具,10,10.2 Fireworks 8工作环境,1

5、0.2.6 常用面板 在绘制和编辑图像时，最常用的面板包括形状面板属性面板、颜色面板、混色器面板、信息面板、查找面板、行为面板、优化面板、层面板、样式面板、URL面板库面板、帧面板、历史纪录面板及特殊字符面板等，这些面板通常被称为面板组。 默认的情况下，Fireworks 8面板将面板成组停放在工作区的右侧。设计者可以进行取消停放面板组、将面板添加到组、重新排列面板组的顺序、折叠和关闭面板组、打开或关闭面板组等操作，这些操作都可以通过单击面板右上角的图标从下拉列表中选择，有关常用面板的具体介绍和应用将在以后的相关内容中讲解，这里不再详细介绍。,11,10.3 Fireworks 8的简单操作,

6、10.3.1 操作Fireworks 8文档 1新建文档 2打开文档 3保存和导出文档,12,10.3 Fireworks 8的简单操作,10.3.2 绘制简单的矢量图形 1绘制小脚丫 2可爱的心 3汽车标志的绘制,13,10.3 Fireworks 8的简单操作,10.3.3 使用滤镜 对于某一对象应用特殊效果，可以在“属性”面板中的“滤镜”中完成，如图10-22所示。在该面板中，可以对一个对象使用多种效果，每一次增加的效果都会被列在其中的效果列表中。 图10-22 使用“滤镜”,14,10.3 Fireworks 8的简单操作,下面以两个实例介绍有关Fireworks 8中有关颜色、笔触、

7、填充以及滤镜效果的设置等具体的应用方法。 1绘制相片框 图10-26 图形效果,15,10.3 Fireworks 8的简单操作,2绘制夜晚景色 图10-33 夜空效果,16,10.4 将文本附加于路径,将文本附加到路径后，该路径会暂时失去其笔触、填充以及效果属性。随后应用的任何笔触、填充和效果属性都将应用到文本，而不是路径。如果之后将文本从路径分离出来，该路径会重新获得笔触、填充以及效果属性。 1将文本附加于路径 图10-36 最后的显示效果 图10-37 将文本附加到经过编辑的路径上,17,10.4 将文本附加于路径,2文本转换为路径 文本不仅可以附加到路径上，还可以将文本转换为路径。转换

8、为路径后，文本就可以在任何情况下正常显示，另外，还可以利用所有的矢量编辑工具来编辑文本，就像编辑矢量对象一样编辑字母的形状。但是，这样做也会导致一个问题：路径对象再也不可能作为文本用文本工具进行编辑，另外，路径文本对象也不能再转换化文本对象，这个过程是不可逆的。 图10-39 文本效果,18,10.5 创建按钮与菜单,10.5.1 创建按钮 1创建按钮 2将一个文本或图像转换为按钮元件 3创建具有两种状态的简单按钮 4编辑导入的按钮 5使用斜角效果绘制按钮状态,19,10.5 创建按钮与菜单,10.5.2 创建菜单,20,10.5 创建按钮与菜单,10.5.2 创建菜单 1创建弹出菜单 2创建

9、弹出菜单的子菜单 3创建弹出菜单的弹出子菜单 4将菜单项移到较高级别的子菜单或主弹出菜单中 5设计弹出菜单的外观6设置菜单单元格的外观 7添加弹出菜单的样式 8设置高级弹出菜单属性 9定位弹出菜单和子菜单 10使用“弹出菜单编辑器”设置弹出菜单的位置 11使用“弹出菜单编辑器”设置弹出子菜单的位置 12通过拖动弹出菜单来为其设置位置,21,10.5 创建按钮与菜单,（2）执行选择“修改”“弹出菜单”“添加弹出菜单”命令,打开“弹出菜单编辑器”。 （3）单击“内容”选项卡。 （4）单击“添加菜单”按钮以添加一个空菜单项。单击“删除菜单”按钮删除单元格（菜单项）。 （5）双击每个单元格并输入或选择

10、适当的信息。 （6）重复步骤（4）和（5），直到添加完所有的菜单项。 （7）可以随意的删除菜单项，方法是高亮显示该项，单击“删除菜单”按钮，执行下列操作之一。 1）单击“继续”按钮移到“外观”选项卡，或者选择另一个选项卡继续生成弹出菜单。 2）建弹出菜单的子菜单项目。 3）单击“完成”按钮关闭“弹出菜单编辑器”，完成弹出菜单的创建工作。,22,10.5 创建按钮与菜单,2创建弹出菜单的子菜单 在“弹出菜单编辑器”中，使用“内容”选项卡上的“缩进菜单”和“左缩进菜单”按钮可以创建子菜单，即当指针滑过或单击另一弹出按钮菜单时显示的弹出菜单。可以根据需要创建足够多级子菜单。 3创建弹出菜单的弹出子菜

11、单 （1）在“弹出菜单编辑器”的“内容”选项卡上，高亮显示一个子菜单。 （2）单击“缩进菜单”按钮将该项再次缩进，以使其从上方的相邻子菜单项缩进。,23,10.5 创建按钮与菜单,4将菜单项移到较高级别的子菜单或主弹出菜单中 （1）在“弹出菜单编辑器”的“内容”选项卡上，高亮显示该项菜单。 （2）单击“左缩进菜单”按钮。 （3）执行下列操作之一完成弹出菜单的创建或继续生成它。 1）单击“继续”按钮移到“外观”选项卡，或者选择另一个选项卡继续生成弹出菜单。 2）单击“完成”按钮关闭“弹出菜单编辑器”。,24,10.5 创建按钮与菜单,5设计弹出菜单的外观 在创建了基本菜单和可选子菜单之后，即可在

12、“弹出菜单编辑器”的“外观”选项卡上对文本进行格式设置，对“滑过状态”和“释放状态”应用图形样式，并选择垂直或水平方向，如图10-52所示。 图10-52 设计菜单的外观,25,10.5 创建按钮与菜单,6设置菜单单元格的外观 7添加弹出菜单的样式 8设置高级弹出菜单属性 “弹出菜单编辑器”的“高级”选项卡提供了用于控制以下各项的附加设置：单元格的大小、边距和间距，文字缩进、菜单消失延时，以及边框宽度、颜色、阴影和高亮显示。如图10-53所示。,26,10.5 创建按钮与菜单,9定位弹出菜单和子菜单 “弹出菜单编辑器”的“位置”选项卡可以指定弹出菜单的位置。当“网页层”可见时，还可以通过在工作

13、区中拖动顶级弹出菜单的轮廓来调整其位置，如图10-54所示。 图10-54 定位菜单,27,10.5 创建按钮与菜单,10使用“弹出菜单编辑器”设置弹出菜单的位置 （1）在“弹出菜单编辑器”中，使所需弹出菜单处于打开状态，单击“位置”选项卡。 （2）单击“位置”按钮以相对于触发弹出菜单的切片来调整菜单的位置。 11使用“弹出菜单编辑器”设置弹出子菜单的位置。 （1）在“弹出菜单编辑器”中，使所需弹出的菜单处于打开状态，单击“位置”选项卡。 （2）单击“子菜单位置”按钮以相对于触发该子菜单的弹出菜单项调整子菜单的位置。 （3）若要相对于触发子菜单的父菜单项来安排每个子菜单的位置，请为子菜单位置选

14、择“放在同一位置”选项。 （4）单击“完成”按钮关闭“弹出菜单编辑器” 。,28,10.5 创建按钮与菜单,12通过拖动弹出菜单来为其设置位置 （1）单击工具面板中的“显示切片和热点”按钮。 （2）选择作为弹出菜单触发器的网页对象。 （3）将弹出菜单的轮廓拖到工作区的其他位置。本实例的最终结果如图10-55所示。 图10-55 弹出菜单的结果图,29,10.6 图像切片的使用,10.6.1 创建切片对象 1创建切片对象 切片对象的延伸线是切片引导线，它确定导出时将文档拆分成的单独图像文件的边界。默认情况下，这些引导线为红色，如图10-56所示。 图10-56 图像切片,30,10.6 图像切片

15、的使用,2创建HTML切片 HTML切片指定浏览器中出现普通HTML文本的切片图像区域。HTML切片不导出任何像素的图像数据，它导出出现在由切片定义的表格单元格的HTML文本。 如果要快速更新出现在站点中的文本而无须创建新的图形，则HTML切片很有用。,31,10.6 图像切片的使用,3创建非矩形切片 当试图将交互性附加到非矩形图像时，矩形切片可能无法满足需要。例如，如果打算将变换图像效果附加到切片，而切片对象互相重叠或者形状不规则，则矩形切片可能会与变换图像交换出不是所要得到的背景图形。Firework解决此问题的办法是：允许使用“多边形切片”工具绘制任何多变性形状的切片，如图10-59所示

16、。 图10-59 非矩形切片,32,10.6 图像切片的使用,10.6.2 使用切片交互 在Firework中创建交互效果生成切片对象。Firework提供了两种使切片交互的方式。 拖动变换图像的方法是切片交互最简单方法。只需要拖动切片的行为手柄并将其放在目标切片中，即可快速创建简单的交互效果。 “行为”面板可以创建更复杂的交互。“行为”面板中包含各种交互行为，可以将它们附加到切片中。通过将多个行为附加到单个切片上，可以创建有趣的效果，还可以通过编辑现有行为来创建自定义交互效果。 Firework 8中的行为与Dreamweaver 8行为兼容。在将Firework 8变换图像导出到Dreamweaver 8时，可以使用Dreamweaver 8的“行为”面板编辑Firework 8行为。,33,10.6 图像切片的使用,1向切片添加简单的交