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

1、第章表单和行为第章表单和行为网页设计与制作北京师范大学出版北京师范大学出版网页设计与制作第第13章网页按钮和导航制作章网页按钮和导航制作 第13章网页按钮和导航制作 13.1 切片的制作切片的制作 13.2 热区的制作热区的制作 13.3 制作按钮制作按钮 13.4 制作导航条制作导航条 13.5 行为行为 13.6 弹出式菜单弹出式菜单网页设计与制作网页设计与制作13.1切片的制作 1、切片工具、切片工具 “切片”是Fireworks最先提出来的概念，当网络速度不很理想而图片又稍大时，设计者通常把一张大图片分成小图片放在表格中，使得图片的显示速度加快，但是这项工作费时费力，于是Firewor

2、ks提供了可视化切割图片的工具，切片工具可以将Fireworks文档分割成多个较小部分，并可以将每部分作为单独的文件导出 。 2、切片类别、切片类别 Fireworks的切片工具可以分别创建“矩形切片”和“多边形切片”。13.1切片的制作 3、切片相关名词、切片相关名词切片对象切片对象：利用切片工具创建的矩形区域被半透明的绿色所覆盖，我们称之为切片对象。分割线分割线：Fireworks cs4根据切片对象的位置对图像进行分割，分割线呈红色，它标记出了在文件导出时生成的切片图像区域。切片格式切片格式：在切片中心有一个小图标，它表示该切片处于被选中状态，还有“前景图像：JPEG”的字样，它表示切片

3、的格式为JPEG格式。切片对象的位置：创建好的切片对象放置在网页层 。13.1切片的制作 4、切片的导出 切片制作完成以后，需要导出保存为“html文件格式”才 可以在网页中使用 13.2 热区的制作 1、热区的概念、热区的概念 热区（Hotspot）有时又称之为热点，是图像上带有超链接的一块区域，它可以呈矩形、圆形、甚至还可以是多边形。文本和图像都可以在网页上创建超级链接。一般情况下一个图像只链接到一个目标。但是有时候一幅较大的图片上有不同的小区域，不同的小区域的图片要相应地链接到不同的目标上去，这样就需要利用到热区的功能。我们可以在这个大的图像上相应的部分绘制多个热区，然后将这些热区分别链

4、接到不同的目标文件之中。和文本超链接的情况一样，当浏览者将鼠标移动到热点上时，鼠标会变成手形。13.2热区的制作 2、热区工具Fireworks cs4的热区工具，可以分别创建“矩形热点”、“圆形热点”和“多边形热点”。热区创建好后和切片一样可以编辑、修改和删除，并需要添加超链接地址，来实现图像映射功能。 1、按钮概念、按钮概念 按钮是网页中最常用的元素，是实现交互的重要手段，它的最大作用就是引导用户链接到不同的地址，从而加强人机交互的功能，进而丰富网页的表现力。13.3制作网页按钮13.3制作网页按钮 2、创建按钮、创建按钮 在Fireworks cs4中，用“按钮编辑器”来创建按钮。 按钮

5、创建的过程有5种状态：弹起、滑过、按下、按下时滑过和活动区域，因此，按钮需要由多帧画面来完成。 按钮添加好后，和切片一样，也需要添加超链接。13.4制作导航条 1、导航条概念、导航条概念 导航条是指一组分别指向不同链接地址的按钮，用于在一系列具有相同级别的网页间进行跳转。 2、导航条制作方法、导航条制作方法 将多个按钮组合起来，就可以构建成为导航条。也可以利用Fireworks cs4自带的“标签”功能来创建导航条 。13.5、行为 1、简单行为、简单行为 “简单变换图像”是指是指通过将“状态 1”用作“弹起”状态以及将“状态 2”用作“滑过”状态来向所选切片添加变换图像行为。选择此行为后，需

6、要使用同一切片在状态 2 中创建一个图像以创建“滑过”状态。 “简单变换图像”选项实际上是包含“交换图像”和“恢复交换图像”行为的行为组。 13.5、行为 2、设置导航栏图像、设置导航栏图像 “设置导航栏图像”实际上是一个包含“滑过导航栏”、“按下导航栏”和“恢复导航栏”等行为的行为组。作为导航栏一部分的每个切片都必须具有此行为。 当使用按钮编辑器创建具有两种状态的按钮时，会默认为其切片指定简单变换图像行为；当创建具有三种或四种状态的按钮时，会默认为其切片指定“设置导航栏图像”行为。 13.6、弹出式菜单 弹出式菜单可以节省页面空间，当访问者将鼠标指针移到含有弹出菜单的导航按钮上时，将弹出相应的下级子菜单。 在Fire