Fireworks 4.0 认证教程 第十一章 网页制作实例

　　【内容提要】

　　本章介绍Fireworks应用于网页制作的相关功能，内容包括网页制作中的经常用到的图像映响和热区的创建以及按钮和导航条的制作，并为按钮和导航条添加行为。学习Fireworks为网络图像特设的切片原理、切片工具的使用和切片的导出 。

　　主要内容：

　　9. 图像映像和热区

　　10. 切片的应用

　　11. 按钮和导航条的制作

　　12. 行为

　　重点与难点：

　　热区、切片、按钮和导航条的创建、编辑、分配超链接地址和导出；Web行为事件。

　　关键字：

　　热区、切片、按钮、导航条、行为

　　【本课内容】

　　11.1 图像映像和热点

　　11.1.1 基本概念

　　超链接：是一种标记，形象的说法就是单击网页中的这个标记则能够加载另一个网页，这个标记可以做在文本上也可以做在图像上。

　　图像映像：具有超级链接的图像。

　　热区：图像的不同部分可以创建不同的超级链接，这些部分则称为热区。图像映像是热区的一个特例。

　　11.1.2 创建热区

　　1. 创建热区使用工具箱中的"Hotpot Tools"工具 ，"Hotpot Tool"工具有矩形热区工具 、椭圆热区工具 和多边形热区工具 。

　　2. 在文档中选择要创建图像热区的区域，按下左键拖拽鼠标，当热区区域被选中后，释放鼠标，则该区域被热区颜色覆盖，并在热区中间有一个准心模样的图标，表示热区已经创建，如图：

　　

　　可以用其他热区工具创建出不同形状的热区。

　　11.1.3 编辑热区

　　创建热区后，可以对热区的位置、形状、颜色和显示属性进行修改。

　　下面介绍如何修改这几项属性：

　　一、 移动热区

　　直接用鼠标选中要移动的热区，按住鼠标左键拖拽鼠标，将热区拖到所需的位置即可。

　　二、 改变热区形状

　　1. 选中要修改的热区。

　　2. 单击【Window】菜单中的【Object】命令，打开"Object"面板，如图：

　　

　　3. 在"shape"下拉菜单中选择相应的形状选项，要进行多边形修改，选择"Polygon"一项。

　　4. 在文档中，用鼠标按住热区边缘的节点拖动，此时原来的矩形热区可以变成多边形热区进行任意角度的修改（但不能修改边数）。

　　三、 改变热区颜色

　　在"Object"面板上有一个颜色井按钮，单击它打开颜色井更改热区颜色。

　　四、 显示或隐藏热区

　　为了不影响对图像的编辑操作，编辑好热区后可以将它隐藏，单击工具箱中最下方的隐藏热区安钮 ，如果要将它显示，单击显示热区按钮 。

　　11.1.4 给热区分派超链接地址

　　1. 选中热区，单击【Window】菜单中的【Object】命令，打开"Object"面板。

　　2. 在地址栏中输入超链接地址，如：www.yesky.com 。

　　3. 在"alt"文本框中输入提示文字，如："天极网"。

　　4. 选择跳转页面的打开方式：

　　-black：在新空白窗口中打开网页。

　　-self：在当前页面的框架中打开网页。

　　Parent：在当前父框架中打开网页。

　　Top：在当前窗口中打开网页。

　　设置完成，如图：

　　

　　11.1.5 导出热区

　　设置好热区后，可以将其导出直接在网页中使用。所以导出时，将生成图像文件和HTML代码，操作如下：

　　1.首先利用第九章所学对图像文件进行优化处理。

　　2.单击【File】菜单中的【Export】命令，打开"Export"对话框。如图：

　　

　　3.点击"保存"按钮，完成导出。

　　11.2 应用切片

　　切片工具是Fireworks为网页中的图像地图和大图片特别提供的功能， Photoshop也借鉴了它，在6.0版本中增加了切片工具　，可见切片必有它独到之处：它可以对切片后的图形单独优化，获得最佳的文件大小和质量　，它的主要目的还是为了加快网络图像的浏览速度。在以前要达到这些目的，将花费大量的时间，在多种工具中进行切换。自从有了Fireworks之后，一切变得简单而轻松了。下面我们来了解Fireworks是如何应用切片。

　　11.2.1 创建切片

　　创建切片将使用到工具箱中的"Slice Tool"工具。它包括矩形切片工具 和多边形切片工具 ，切片操作只能在对象模式中进行。

　　1. 矩形切片的创建相对简单些，只需用鼠标点选切片工具后，在文档中拖拽鼠标，拉出一个矩形，则Fireworks将会自动按照矩形的四边把图像切割成若干小块图像，如图：

　　

　　要增加切片　，可按上述方法反复操作即可；如果要取消切片，选中该切片，直接按"Delete"键，将其删除；要减少切片数，用鼠标按住切片一角的节点上，将其拖出显示窗口。

　　2. 创建多边形切片，选取多边形切片工具后，在需要创建切片的区域点击出多边形的多个顶点，即可创建多边形切片。

　　11.2.2 创建文本切片

　　1. 选中切片对象。

　　2. 单击【Window】菜单中的【Object】命令，打开"Object"面板。

　　3. 在该面板的"type"下拉列表中选择"Text"，随后会打开一个文本输入区

　　4. 在输入区中输入文字，导出即可浏览效果。

　　11.2.3 给切片分配超链接地址

　　操作同对热区的操作相同。

　　11.2.4 编辑切片

　　对切片的编辑也是用到"Object"面板，操作方法和编辑热区相同。

　　11.2.5 导出切片

　　1. 单击【File】菜单中的【Export】命令，打开"Export"对话框，选择保存位置，输入文件名。

　　2. 在"Slices"下拉列表中选择合适项：

　　"None"：不生成切片文件。

　　"Export Slices"：根据绘制的切片生成切片文件。

　　"Slice Along Guides：根据文档的现有的标准准线导出切片。

　　3. 选中"Put Images in Subfolder"复选框，点击"Browse"按钮，选择图像切片存放的文件夹。

　　4. 点击"Ok"，完成导出。

　　11.3 按钮和导航条

　　11.3.1 按钮的状态

　　"Up"：正常态。

　　"Over"：鼠标滑过的状态

　　"Down"：鼠标按下的状态

　　"Over While Down"：鼠标按下后，在其上移动的状态

　　11.3.2 制作按钮

　　1. 单击【Insert】菜单中的【New Button】命令，打开按钮编辑器。

　　2. 在编辑器中有一个"＋"标识，以它为中心绘制出按钮各个状态的图像，可以通过样式面板来生成不同的图像。

　　3. 制作完成，关闭按钮编辑器，在"Library"面板上可以看到新建的按钮，

　　11.3.3 给按钮添加超链接地址

　　1. 选中要分配超链接地址的按钮

　　2. 在"Object"面板上，单击"Link Wizard"按钮，打开链接向导对话框，如图：

　　

　　对话框中有四个标签，要分配超链接地址，单击"Link"标签。在相应的文本框中，填入超链接地址，文字提示，在"Status Bar Text"表示的识别悬停在该按钮上是，浏览器状态栏上显示的文字。

　　3. 根据向导提示设置好其他标签选项，单击"Ok"即可。

　　11.3.4 按钮导出

　　按钮不是单独导出的，它是文档文件的一部分，所以它的导出和切片的导出相同，导出前，可以先对按钮进行优化处理，在"Link Wizard"对话框中，选中"Export Settings"选项卡后，单击"Edit"按钮，打开"Export Preview"进行导出前优化，返回文档窗口，点击工具栏的导出按钮，将其导出，设置同切片类似。

　　11.3.5 导航条

　　导航条实际上是一组分别指向不同超链接地址的按钮集，它一般放在网站的"Top"框架中，始终在屏幕上显示，对网站的浏览者起着导航的作用，所以被称作导航条。

　　它的制作也就是制作多个按钮，按一定顺序排列，对每个按钮分配不同的超链接地址和行为，放入页面中即可。

　　11.4 行 为

　　行为就是在网页中进行的一系列动作，通过这些动作，可以实现用户同网页的交互，也可以引起某个任务的执行。一个行为由一个触发事件和一系列动作所组成，比如：onClick、onMouse Over、OnLoad等等事件，就可以产生一些相应的事件，如：弹出对话框、替换图片、弹出提示信息等等动作。

　　Fireworks提供了一种"Behavior"机制，快捷、直观的让用户创建行为，自动地生成相应的javascript代码，直接在网页中使用。

　　下面介绍一个常用的行为事件，创建交互图像行为，操作如下：

　　1. 在文档中插入一幅图像，

　　2. 通过帧面板新建第二帧，插入另一幅图像

　　3. 选中该图像，创建切片

　　4. 选中生成的切片，单击"Behaviors"面板中的"Add Action"按钮，选择"Swap Image"命令，打开"Swap Image"对话框

　　5. 选择"Frame No"单选按钮，输入"Frame 2"如图：

　　

　　6. 单击"Ok"，完成交互轮替效果的设置

　　7. 在预览窗口预览。

　　在学会这些基本行为的创建后，可以制作出更复杂的交互行为来。

　　小 结

　　本章介绍Fireworks应用于网页制作的相关功能，内容包括网页制作中的经常用到的图像映响和热区的创建以及按钮和导航条的制作，并为按钮和导航条添加行为。