《新编网页制作三剑客培训教程》课件第13章

教学目标：本章对在AdobeFireworksCS3中如何创建与使用热点、图像切片、按钮、导航栏、优化和导出图像等进行了详细的讲解。本章要点： 创建与编辑热点 创建与编辑图像切片 为切片和热点附加行为 创建与编辑按钮和导航栏 优化和导出图像

第13章使用FireworksCS3输出网页图像13.1创建与编辑热点13.2创建与编辑图像切片13.3为切片和热点附加行为13.4创建与编辑按钮和导航条13.5优化与导出图像13.6上机实训第13章使用FireworksCS3输出网页图像13.1.1创建与设置热点13.1.2编辑与输出热点13.1创建与编辑热点

热点是出现在Web页面中的一个图形或一组图形。当鼠标指针经过热点时，鼠标指针将变为手形。在默认情况下，单击此热点，将打开相关的网页。Web页面的HTML文件定义了每个热点的尺寸和位置。13.1创建与编辑热点

13.1.1创建与设置热点(1)打开素材图片“饮品.png”，如图13-1所示。所用素材见“站点实例”(WebDemo\ch13)。

图13-1打开素材图片13.1.1创建与设置热点(2)在工具箱中选择【矩形热点】工具，移动鼠标至工作区，在需要创建热点的位置拖拽鼠标创建一个矩形热点，如图13-2所示。

图13-2创建矩热点13.1.1创建与设置热点(3)在工作区中单击【预览】按钮，切换到预览状态，此时将鼠标移动到创建热点的位置时，鼠标指针变为形状，如图13-3所示。

图13-3建的热点13.1.1创建与设置热点(4)回到原始窗口，使用选择类工具，选中所创建的热点，在【属性】面板中，为热点指定URL、替代文本、打开链接网页的浏览器窗口和热点名称等，如图13-4所示。

图13-4【性】面板13.1.2编辑与输出热点1.编辑热点热点是网页对象，并且同其他许多对象一样，可使用【指针】工具、【部分选定】工具和【变形】工具对其进行编辑。可以使用【属性】面板或【信息】面板，以数字方式更改热点的位置和大小。还可以使用【属性】面板更改热点的形状13.1.2编辑与输出热点2.输出热点

Fireworks可以输出客户端图像映像，其中包含图像文件以及包含热点信息和相关URL链接的HTML文件。输出热点的操作步骤如下。

(1)在软件的右侧打开【优化】面板如图13-5所示，设置优化选项。图13-5【优化】面板13.1.2编辑与输出热点

(2)在菜单栏中选择【文件】→【导出】命令，弹出【导出】对话框，如图13-6所示。在此对话框中设置好文件的名称，选择保存类型为【HTML和图像】，单击【导出】按钮。输出HTML文件和图像文件，如图13-7所示。图13-6【导出】对话框图13-7导出的HTML文件和像文件13.2.1创建切片13.2.2编辑切片13.2创建与编辑图像切片

13.2.1创建切片

切割图像和创建选区一样都很容易，读者可能初学这个软件，对这个名词比较陌生，但只要慢慢读下去，一定会受益匪浅。Fireworks有两个工具用于切割图像，即【切片】工具和【多边形切片】工具。用户所绘制的图像是切片对象，在进行切割时，显示出来的红色线条是切片引导线，它决定图像被切割成几个部分。也可以拖拽引导线来调整切片的大小。13.2.1创建切片1.创建矩形切片下面介绍矩形切片的创建方法。

(1)打开一张素材图片(任意一幅图片)，如图13-8所示。在工具箱中选择【切片】工具。图13-8打素材图片13.2.1创建切片(2)移动鼠标到工作区，拖拽鼠标创建矩形切片对象，则切片对象和切片辅助线显示在【层】面板的【网页层】中，画面效果如图13-9所示，【层】面板如图13-10所示。图13-9创建矩形切片图13-10【层】面板13.2.1创建切片2.创建HTML切片HTML切片指定浏览器中出现普通HTML文本的区域。HTML切片不导出图像，它导出出现在由切片定义的表格单元格中的HTML文本。如果要快速更新出现在站点中的文本而无须创建新图形，则HTML切片很有用。下面介绍HTML切片的创建方法。13.2.1创建切片1.创建矩形切片下面介绍矩形切片的创建方法。

(1)打开一张素材图片(任意一幅图片)，如图13-8所示。在工具箱中选择【切片】工具。13.2.1创建切片

(1)打开一幅素材图片(狮子.jpg)，如图13-11所示。在工具箱中选择【矩形切片】工具，在打开的图像中创建一个矩形切片，如图13-12所示。实例最终效果文件及所用素材见“站点实例”(WebDemo\ch13)。图13-11打开素材图片图13-12创建矩形切片13.2.1创建切片

(2)保持切片处于选中状态，在【属性】面板的【类型】下拉列表框中选择【HTML】选项，如图13-13所示。图13-13选择【HTML】选项13.2.1创建切片

(3)单击【属性】面板中的【编辑】按钮，弹出【编辑HTML切片】对话框，如图13-14所示。图13-14【编辑HTML切片】对话框13.2.1创建切片

(4)在【编辑HTML切片】对话框的窗口中输入文本，如图13-15所示，单击【确定】按钮。图13-15输入文本13.2.1创建切片

(5)在菜单栏中选择【文件】→【导出】命令，弹出【导出】对话框，在此对话框中设置好文件的名称，选择保存类型为【HTML和图像】的选项，单击【导出】按钮，输出HTML文件和图像文件，如图13-16所示。图13-16导出的HTML文件和图像文件13.2.2编辑切片在Fireworks中，可以对切片进行布局操作。当拖动切片辅助线以调整切片大小时，Fireworks也将自动调整所有相邻矩形切片的大小。另外，可以使用【属性】面板来调整切片大小以及将切片变形，就像对待矢量对象和位图对象一样。此外，在导出带切片的文件时，将生成多幅图像文件与一个HTML文件。因此，使用切片最大的优点就是：可以将一幅大图片分割成多个小图片，从而加快网页的下载速度。13.3.1行为与事件13.3.2为切片或热点创建弹出菜单13.3为切片和热点附加行为

13.3.1行为与事件

在Fireworks中，系统提供一些【简单变换图像】、【交换图像】、【恢复交换图像】、【设置导航栏图像】及【设置弹出菜单】等行为。下面对【行为】面板的操作作一简单介绍。图13-1打开素材图片

图13-17【行为】面板图13-18添加行为命令菜单13.3.1创建与设置热点在菜单栏中选择【窗口】→【行为】命令，打开【行为】面板，如图13-17所示。在【行为】面板中单击【增加】按钮，弹出如图13-18所示的添加行为命令菜单，可以在菜单中选择任意一种行为命令进行添加，并可以多次添加。如果单击【删除】按钮，会删除行为命令。【行为】面板中的【事件】按钮用于指明执行某种动作的条件，如鼠标指针移动到对象上方、离开对象、单击对象等。13.3.2为切片或热点创建弹出菜单

在工作区中选中一个热点或切片，打开【行为】面板，单击【行为】面板中的【增加】按钮，在弹出的菜单中选择【设置弹出菜单】命令，弹出【弹出菜单编辑器】对话框，如图13-19所示。此对话框可以引导用户完成创建弹出菜单的整个过程。图13-19【出菜单编辑器】对话框13.4.1使用元件13.4.2创建与编辑按钮13.4.3创建与编辑导航栏13.4.4导入元件与按钮13.4创建与编辑按钮和导航条

13.4.1使用元件

(1)新建一个350*260的空白文档。(2)在菜单栏中选择【编辑】→【插入】→【新建元件】命令，弹出【元件属性】对话框。设置如图13-20所示，单击【确定】按钮，进入元件编辑窗口。图13-20元件属性】对话框13.4.1使用元件

(3)在工具箱中选择【矩形】工具，在【属性】面板中对其属性进行设置，如图13-21所示。图13-21【矩形】工具的【属】面板13.4.1使用元件(4)在工作区中拖拽鼠标，绘制一个矩形，如图13-22所示。图13-22绘制形13.4.1使用元件(5)在矩形处于选中的状态下，在【属性】面板中为其添加滤镜效果——【斜面与浮雕】，如图13-23所示。图13-23添加滤镜效果13.4.1使用元件(5)在矩形处于选中的状态下，在【属性】面板中为其添加滤镜效果——【斜面与浮雕】，如图13-23所示。(6)单击元件编辑器窗口左上角的【完成】按钮，关闭元件编辑器窗口。此时，【文档】窗口与【库】面板中将显示所制作的元件，如图13-24所示。此时可以从【库】面板中拖拽元件进入【文档】窗口中，也可以双击元件，在【属性】面板中对其进行调整，调整好以后，【文档】窗口中的图形也会随之改变。图13-24【库】面板13.4.2创建与编辑按钮按钮是网页的导航元素。大部分按钮都至少有两种状态，即释放和滑过的状态。在按钮编辑器中创建的按钮具有以下特点。几乎可以将任何图形或文本对象制作成按钮。可以创建新按钮，也可以将现有对象转换为按钮，或者导入已创建好的按钮。按钮是一种特殊类型的元件，可以将它的实例从元件库拖到文档中。可以在更改了单个按钮的图形外观后，自动更新导航栏中所有按钮实例的外观。可以在不影响同一按钮的其他实例并且不断开元件和实例之间关系的前提下，编辑某个按钮实例的文本、URL和目标属性。13.4.2创建与编辑按钮按钮实例是经过封装的。在文档中拖动按钮实例时，Fireworks会移动与之关联的所有组件和状态，因此无需进行多帧编辑。按钮易于编辑。双击画布上的实例后，就可以在按钮编辑器或【属性】面板中对其进行更改。同其他元件一样，按钮也有注册点。注册点即一个中心点，该中心点有助于在按钮编辑器中将文本和不同的按钮状态对齐。13.4.2创建与编辑按钮在Fireworks中，用户可以直接创建新按钮，也可以将已有对象的翻转图片转换为按钮。下面介绍按钮的创建方法。(1)新建一个空白文档，在菜单栏中选择【编辑】→【插入】→【新建按钮】命令，进入【按钮】编辑窗口，如图13-25所示。图13-25【按】编辑窗口13.4.2创建与编辑按钮(2)在工具箱中选择【圆角矩形】工具，在【按钮】编辑窗口中绘制一个圆角矩形，并在【属性】面板中为其设置好颜色并添加其他效果。如图13-26所示。图13-26绘制圆角矩形并设置其属性13.4.2创建与编辑按钮(3)在工具箱中选择【文本】工具，在绘制的图形上添加文字，如图13-27所示。(4)在【按钮】编辑窗口中单击【滑过】选项卡，创建按钮的【滑过】状态。然后单击【复制弹起时的图形】按钮，将【释放】状态按钮的图形复制到【滑过】状态的编辑窗口中，然后选择复制的图形，在【属性】面板中对其颜色进行修改，如图13-28所示。图13-27输入文字图13-28修改图形颜色13.4.2创建与编辑按钮(5)在【按钮】编辑窗口中单击【有效区域】选项卡，【按钮】编辑窗口将自动创建与按钮元件尺寸相同的切片，如图13-29所示。如果对按钮进行修改，此切片也会自动更新。图13-29在【有效区域】选项卡中创建切片13.4.2创建与编辑按钮(6)图形编辑完成后，单击【按钮】编辑窗口中的【完成】按钮，关闭【按钮】编辑窗口。此时，所创建的按钮会出现在【库】面板中，该按钮实例也会出现在【文档】窗口中，如图13-30所示。图13-30【库】面板13.4.3创建与编辑导航栏(1)新建一个空白文档，按<Ctrl>+<F8>组合键，在弹出的【元件属性】对话框的【名称】文本框中输入“公司说明”，在【类型】选项区中点选【按钮】单选钮。如图13-31所示。设置完成后单击【确定】按钮。图13-31【元件属性】对话框13.4.3创建与编辑导航栏(2)在按钮的【释放】状态下输入文字“公司简介”，并设置好输入文字的属性，效果如图13-32所示。(3)单击【按钮】编辑窗口的【滑过】选项卡，创建按钮的【滑过】状态。单击【复制弹起时的图案】按钮，复制【释放】状态下的按钮，选择输入的文字，在【属性】面板中更改文字的颜色，并稍微移动一下它的位置，如图13-33所示。图13-32输入文字效果图13-33编辑输入的文字13.4.3创建与编辑导航栏(4)单击【完成】按钮，关闭【按钮】编辑窗口。此时【库】面板中已经存在一个名为“公司说明”的按钮元件了，如图13-34所示。图13-34【库】面板13.4.3创建与编辑导航栏(5)从【库】面板中多次拖拽实例至工作区，并调整其位置与顺序。选择所需要的实例，然后在【属性】面板中根据需要进行修改，在【文本】编辑框中输入文本，以更改实例的名称。如图13-35所示。图13-35更改实例名称13.4.3创建与编辑导航栏(6)打开一幅素材图片，如图13-36所示。图13-36打开素材图片13.4.3创建与编辑导航栏(7)将制作的实例放在打开素材的合适位置，如图13-37所示。(8)在菜单栏中选择【文件】→【导出】命令，弹出【导出】对话框，在此对话框中设置好文件的名称，选择保存类型为【HTML文件和图像文件】选项。然后单击【导出】按钮，导出HTML文件和图像文件，当鼠标移到按钮上时，按钮会发生变化，如图13-38所示。图13-37将实例放在打开的素材中图13-38导出的HTML文件和图像文件13.4.4导入元件与按钮在Fireworks中，系统为用户提供了丰富的元件和按钮，在菜单栏中选择【编辑】→【库】命令，在其子菜单中可以进行选择，如图13-40所示。在选择每一个菜单命令时，都会弹出相应的对话框。例如，选择【按钮】命令，弹出【导入元件：Buttons】对话框，如图13-41所示。图13-40【库】子菜单图13-41【导入元件：Buttons】对话框13.5.1网页图像类型13.5.2优化图像13.5.3导出向导13.5优化与导出图像

13.5.1网页图像类型可以在Fireworks中处理各种类型的文件。例如，开始时可以使用PNG格式的文件，然后将其另存为JPEG格式或GIF格式。用户可以创建包含JavaScript代码的HTML文件。如果想使用其他应用程序(如Photoshop或MacromediaFlash)继续编辑图像，还可以将其导出或另存为特定于该应用程序的文件类型。13.5.2优化图像在Fireworks中，优化设置仅适用于导出图像，用户可以对图像进行优化并调整优化的设置，而不必担心会损坏原图。用户可以使用【优化】面板调整优化的参数，也可以使用【导出预览】对话框来优化图像。(1)打开一幅素材图片，如图13-42所示。图13-42打开素材图片13.5.2优化图像(2)打开【优化】面板，在该面板中可以看出打开图像的格式为GIF格式，如图13-43所示。(3)在【优化】面板的【保存设置】下拉列表框中选择【GIF接近网页128色】选项(表示将图像处理为只包含128种网页安全色的GIF格式文件)，如图13-44所示。图13-43【优化】面板图13-44【保存设置】选择13.5.2优化图像(4)通过以上设置，便完成了图像的优化工作。在实际的优化过程中，用户可以根据需要进行相应的设置。13.5.2优化图像(1)打开一张JPEG格式的素材图片，在【优化】面板中选择软件预先设置的图片压缩方式，比如选择【JPEG-较小文件】选项。【优化】面板中显示【JPEG-较小文件】选项的详细设置，如图13-45所示。图13-45【JPEG-较小文件】

选项设置13.5.2优化图像可以在Fireworks中处理各种类型的文件。例如，开始时可以使用PNG格式的文件，然后将其另存为JPEG格式或GIF格式。用户可以创建包含JavaScript代码的HTML文件。如果想使用其他应用程序(如Photoshop或MacromediaFlash)继续编辑图像，还可以将其导出或另存为特定于该应用程序的文件类型。13.5.2优化图像(2)从上图中可以看出，图像的压缩品质为“60%”，平滑度为“2”。用户可以通过单击右侧的滑块，来改变图片的压缩品质，数值越大，则图片的失真越小。可以通过下面的两张图片来做一下对比，如图13-46所示为“100%”的像素品质和图13-47所示为“20%”的图像品质。图13-46“100%”的图像品质图13-47“20%”的图像品质13.5.2优化图像(3)【平滑】度的参数值，可以对硬边进行模糊处理。通常情况下，数值设为“3”，不仅可以保障图像的品质，还可以减小图像的大小。(4)可以通过单击【优化】面板右上方的【选项】按钮，在弹出的菜单中选择【优化指定大小】命令，弹出【优化到指定大小】对话框，在对话框中输入文件大小的数值，如图13-48所示。(5)在设置好优化的各种属性后，单击【优化】面板右上方的【选项】按钮，在弹出的菜单中选择【保存设置】命令，弹出【预设名称】对话框，如图13-49所示。13.5.2优化图像图13-48【优化到指定大小】对话框图13-49【预设名称】对话框13.5.3导出向导当用户对优化和导出操作更加娴熟后，可能希望使用【优化】面板和【文档】窗口中的【预览】按钮来优化图形。它们比【导出向导】对话框更方便，并且为熟悉优化过程的用户提供了更多的优化控制。在菜单栏中选择【文件】→【图像预览】命令，便可以弹出【图像预览】对话框，如图13-50所示。图13-50【图像预览】对话框13.6上机实训1.实训目的结合上述内容，做一个如图13-51所示的网页实例。本实例主要基于以上所讲的热点的创建、切片的创建、按钮的制作等综合知识，来完成一个网页的制作并对其进行切片操作。实例最终效果文件及所用素材见“站点实例”(WebDemo\ch13)。图13-51实例效果13.6上机实训2.实训步骤在菜单栏中选择【文件】→【打开】命令，弹出【打开】对话框，打开第12章“上机实训”中所保存的文件(乐安亭网页.png)。使用【指针】工具选择“文化街简介”文字，右击，在弹出右键快捷的