网页设计与制作 第13章 网页按钮和导航制作

13.6、弹出式菜单
•
弹出式菜单可以节省页面空间，当访问者将鼠标指针
移到含有弹出菜单的导航按钮上时，将弹出相应的下级子
菜单。
•
在Fireworks cs4，利用“弹出菜单编辑器 ”来创建弹
出式菜ຫໍສະໝຸດ Baidu。
本章小结
• 本章主要介绍了Fireworks cs4中切片、热区的 创建，网页按钮和导航栏的制作，简单的行为变 换和弹出式菜单的制作。
13.2 热区的制作
• 2、热区工具
• Fireworks cs4的热区工具，可以分别创建“矩形热点”、“圆形热点” 和“多边形热点”。
• 热区创建好后和切片一样可以编辑、修改和删除，并需要添加超链接 地址，来实现图像映射功能。
13.3 制作网页按钮
• 1、按钮概念
按钮是网页中最常用的元素，是实现交互的重 要手段，它的最大作用就是引导用户链接到不同 的地址，从而加强人机交互的功能，进而丰富网 页的表现力。
13.3 制作网页按钮
• 2、创建按钮
• 在Fireworks cs4中，用“按钮编辑器”来创建按钮。 • 按钮创建的过程有5种状态：弹起、滑过、按下、按下时
滑过和活动区域，因此，按钮需要由多帧画面来完成。 • 按钮添加好后，和切片一样，也需要添加超链接。
13.4 制作导航条
• 1、导航条概念
导航条是指一组分别指向不同链接地址的按钮，用于 在一系列具有相同级别的网页间进行跳转。
• 1、热区的概念
热区（Hotspot）有时又称之为热点，是图像上带有超链接的 一块区域，它可以呈矩形、圆形、甚至还可以是多边形。文本 和图像都可以在网页上创建超级链接。一般情况下一个图像只 链接到一个目标。但是有时候一幅较大的图片上有不同的小区 域，不同的小区域的图片要相应地链接到不同的目标上去，这 样就需要利用到热区的功能。我们可以在这个大的图像上相应 的部分绘制多个热区，然后将这些热区分别链接到不同的目标 文件之中。和文本超链接的情况一样，当浏览者将鼠标移动到 热点上时，鼠标会变成手形。
《网页设计与制作》
第13第章８网章页表 按钮单和和导行航为制作
北京师范大学出版
第13章 网页按钮和导航制作
• 13.1 切片的制作 • 13.2 热区的制作 • 13.3 制作按钮 • 13.4 制作导航条 • 13.5 行为 • 13.6 弹出式菜单
《网页设计与制作》
13.1 切片的制作
• 1、切片工具
“简单变换图像”选项实际上是包含“交换图像”和 “恢复交换图像”行为的行为组。
13.5、行为
• 2、设置导航栏图像
“设置导航栏图像”实际上是一个包含“滑过导航 栏”、“按下导航栏”和“恢复导航栏”等行为的行为组。 作为导航栏一部分的每个切片都必须具有此行为。
当使用按钮编辑器创建具有两种状态的按钮时，会默 认为其切片指定简单变换图像行为；当创建具有三种或四 种状态的按钮时，会默认为其切片指定“设置导航栏图像” 行为。
切片格式：在切片中心有一个小图标，它表示该切片处于被选中状态， 还有“前景图像：JPEG”的字样，它表示切片的格式为JPEG格式。
切片对象的位置：创建好的切片对象放置在网页层 。
13.1 切片的制作
• 4、切片的导出
切片制作完成以后，需要导出保存为“html文件格式” 才 可以在网页中使用
13.2 热区的制作
“切片”是Fireworks最先提出来的概念，当网络速度不 很理想而图片又稍大时，设计者通常把一张大图片分成小 图片放在表格中，使得图片的显示速度加快，但是这项工 作费时费力，于是Fireworks提供了可视化切割图片的工具， 切片工具可以将Fireworks文档分割成多个较小部分，并可
以将每部分作为单独的文件导出 。 • 2、切片类别
• 2、导航条制作方法
将多个按钮组合起来，就可以构建成为导航条。也可以利用 Fireworks cs4自带的“标签”功能来创建导航条 。
13.5、行为
• 1、简单行为
“简单变换图像”是指通过将“状态 1”用作“弹起” 状态以及将“状态 2”用作“滑过”状态来向所选切片添加 变换图像行为。选择此行为后，需要使用同一切片在状态 2 中创建一个图像以创建“滑过”状态。
Fireworks的切片工具可以分别创建“矩形切片”和“多 边形切片”。
13.1 切片的制作
• 3、切片相关名词
切片对象：利用切片工具创建的矩形区域被半透明的绿色所覆盖，我们 称之为切片对象。
分割线：Fireworks cs4根据切片对象的位置对图像进行分割，分割线呈红 色，它标记出了在文件导出时生成的切片图像区域。