第11章 按钮制作 网页的设计案例教程ppt.pptVIP

网页制作案例教程制作：张兴科北京大学出版社PEKING UNIVERSITY PRESS 第11章 按钮制作 本章内容在网站设计中的地位 在网页设计中，经常用到导航按钮进行超级链接，由于导航按钮形式多样，因此只要合理应用，就会极大地美化网页。本章将介绍如何制作一些特效导航按钮。 本章要点 动态按钮制作； MAC按钮的制作； 图片按钮的制作。 教学目标 掌握动态按钮的制作方法； 掌握MAC按钮的制作方法； 掌握图片按钮的制作方法。 元件的基础知识 1．元件的含义 Fireworks 提供3种类型的元件：图形、动画和按钮。每种类型的元件都具有适合于其特定用途的独特特性。实例是 Fireworks元件的表示形式。当对元件对象(原始对象)进行编辑时，实例(副本)会自动更改以反映对元件所做的修改。 (1) 直接创建按钮。选择“编辑”→“插入”→“新建按钮”，在编辑元件区把画布分成9块。可通过拖动分隔线调整块的大小。 选中“释放”标签，在其中绘制一矩形，设定颜色，再选中“滑过”标签，在中间的区域绘制一矩形，设置颜色，。用同样方法分别设置“按下”、“按下时滑过”的样式与颜色。 (2) 创建动画元件。选择“编辑”→“插入”→“新建元件”，在弹出的对话框中选择并单击“按钮”后确定，同样进入元件编辑窗口，在该窗口下可采用直接创建按钮的方法创建动态按钮。 导航按钮的制作案例 实现方法如下。 (1) 打开一个新文件，设定画布大小为500*80，画布颜色为白色。 (2) 选择矢量工具箱中的矩形工具按钮，在画布上绘制一矩形，并在“属性”面板设置矩形的大小为130×30，填充颜色为#0099CC。 (3) 在“属性”面板单击滤镜后的按钮，从弹出的菜单中选择“斜角和浮雕”→“内斜角”，从弹出的对话框中设定斜角样式为平坦，宽度值为5 。 (4) 选择矢量工具箱中的文本工具按钮，在所绘制矩形中绘制一个文本文本区，并输入文本“Home page”，大小为20，颜色为#FFFF00，聚中对齐 。 (5) 在“属性”面板单击滤镜后的按钮 ，从弹出的菜单中选择“阴影和光晕”→“发光”，从弹出的对话框中设定发光值为1，颜色为#FFFFFF。 (6) 按“Ctrl+A”组合键选定两个对象，选择菜单“修改”→“元件”→“转换为元件”，从弹出的对话框中设定名称为“button”，并选中“按钮”选项后确定，将其转换为按钮元件。 (7) 双击按钮绿色区域，进入按钮元件的设定窗口。 (8) 其中“释放”标签，用于设置鼠标没有经过按钮时呈现的状态，可以不设置。 (9) 选取第2张标签“滑过”，选中“复制一般图片”，将前一张图片复制过来。选取矩形对象，在“属性”面板中设置填充颜色为#996699，选取文本对象，设置填充颜色为#FFFF00。这样便设定了鼠标滑过按钮时的显示状态。 2．添加和删除层 使用“层”面板，可以添加新层、添加新子层、删除不需要的层以及复制现有的层和对象。 (1) 添加层。若要添加层，请执行下列操作之一。 ① 单击“层”面板中的“新建/复制层”按钮。 ② 选择“编辑”→“插入”→“层”。 ③ 从“层”面板的“选项”菜单中选择“新建层”或“新建子图层”，然后单击“确定”按钮。 (2) 删除层。若要删除层，请执行下列操作之一。 ① 在“层”面板中，将该层用鼠标拖动到垃圾桶图标上。 ② 在“层”面板中选择该层并单击垃圾桶图标。 ③ 选择层并从“层”面板的“选项”菜单中选择“删除层”。  3．复制与移动层 以下介绍复制与移动层的方法。 (1) 复制层。若要复制层，请执行下列操作之一。 将层拖到“新建/复制层”按钮上。 选择层并从“层”面板的“选项”菜单中选择“复制层”。 (2) 移动层。若要移动层，可在“层”面板中，将层拖到所需的位置。 4．层的其他操作 “层”面板提供了许多用来控制对象可访问的选项，可以保护文档中的对象不被意外地选择和编辑。 (1) 锁定层与对象。锁定层可以防止选择或编辑该层上的所有对象。锁定个别对象可以防止选择或编辑该对象。 如果想锁定层，单击紧邻层名称左侧的列中的方形。挂锁图标指示层已被锁定。 如果想锁定对象，单击紧邻对象名称左侧的列中的方形。挂锁图标指示对象已被锁定。 (2) 层与对象解除锁定。若要解除某个锁定的层与对象，可单击层或对象前的图标，则层与对象解除锁定。 若要解除锁定所有层，在“层”面板的“选项”菜单中选择“解除全部锁定”。 (3) 显示或隐藏层及对象。还可以使用“层”面板来控制对象和层在画布上的可见性。当在“层”面板中隐藏对象或层时，它不会出现在画布上，不会被意外地更改或选择。 若要显示或隐藏层或层上的对象，单击层或对象名称左侧最远的列中的方形。眼睛图标指示该层是可见的。 若要显示或隐藏所有层和对象，从“