网页设计与制作应用教程 第2版 教学课件 ppt 作者 王任华 第15章

网页设计与制作应用教程（第2版）,机械工业出版社同名教材 配套电子课件,主要内容,第一部分 网页设计与制作基础 第二部分 Adobe Dreamweaver CS5 网页制作 第三部分 Adobe Fireworks CS5 网页图片处理 第四部分Adobe Flash CS5 网页动画制作,2,第15章 Web对象的创建与编辑,15.1 切片 15.2 热点和图像映射 15.3 制作按钮和导航栏 15.4 制作弹出菜单 15.5 行为 15.6 边学边做,3,15.1 切片,切片将Fireworks 文档分割成多个较小的部分并将每部分导出为单独的文件。导出时，Fireworks 会创建一个包含表格代码的HTML 文件，以便在浏览器中重新组合图形。,4,15.1 切片,切片的优点： 优化图像 增加交互性 易于更新,5,15.1.1 创建切片,在图像上创建切片有两种方法： 1. 创建矩形切片 2. 创建非矩形切片 3. 根据对象创建切片,6,15.1.2 切片操作,1. 显示/隐藏切片 2. 移动切片引导线以编辑切片 3. 使用工具编辑切片对象,7,15.1.3 交互切片,例15_1 实现一个拖放变换图像效果,8,15.1.4 切片导出,1. 导出设置 通过从“属性”面板或是“优化”面板中的“切片导出设置”选项中选择一个选项来优化切片,9,15.1.4 切片导出,2. 为切片命名 3. 导出切片,10,15.2 热点和图像映射,图像的映射实际上是网页上一张或一组被定义了区域的图片，被定义的图片称为热点，如图为包含热点的图像映射。,11,15.2.1 创建热点,1. 使用热点绘制工具 2. 使用插入热点命令,12,15.2.2 编辑热点,1. 调整热点 2. 显示和隐藏热点,13,15.2.3 给热点添加行为,热点的根本目的就是为了指定链接。 例15_2,14,15.2.4 导出含热点的图像,Fireworks 导出图像映射时，将生成包含有关热点及相应URL链接的映射信息的图形和HTML代码，以便能在网页编辑器使用。 例15_3,15,15.3 制作按钮和导航栏,按钮和导航栏在体现网页交互性方面扮演着重要的角色。借助了图形效果的按钮，可以体现更好的艺术性。在Fireworks 中能够很方便地创建多种按钮。,16,15.3.1 按钮的特点和状态,17,滑过,弹起,按下,按下时滑过,15.3.2 制作按钮,例15_4,18,15.3.3 创建导航栏 Navigation bar,19,15.3.3 创建导航栏 Navigation bar,20,例15_5 创建导航栏实例,15.4 制作弹出菜单,21,15.4 制作弹出菜单,22,15.4 制作弹出菜单,23,15.4.1 创建弹出菜单 例15_6 15.4.2 编辑弹出菜单,15.5 行为,行为是直接涉及到脚本语言的一项功能。实际上，按钮和弹出菜单也是行为的一种。使用Fireworks 中的行为可以实现更多的复杂交互效果，行为的创建是通过“行为”面板的使用来完成的.,24,15.5.1 制作简单翻滚图,简单翻滚图是指响应指定的事件，替换指定区域内的图片。,25,15.5.2 行为的触发事件,onMouseOver：在指针滑过触发器区域时触发行为。 onMouseOut：在指针离开触发器区域时触发行为。 onClick：在单击触发器对象时触发行为。 onLoad：在载入网页时触发行为。,26,15.6 边学边做（制作“图片网吧”主页）,例15_7,27,