网页制作案例教程制作张兴科北京大学出版社-广州工程技术职业学院.ppt

广州市工程技术职业学院--吴勿春 第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。这样便设定了鼠标滑过按钮时的显示状态。 (10) 选择第3张标签“按下”，选中“复制滑过图片”，复制滑过图片，选取矩形对象，在“属性”面板中设置填充颜色为#006699，在“属性”面板的效果栏内双击“内斜角”，设置参数值 。 (11) 选择第4张标签“按下时滑过”，选中“复制按下图片”，复制按下图片，选取文本对象，在“属性”面板中设定为#FFFFFF的光晕效果。这样便设定了按钮按下后，鼠标又经过按钮时的显示状态 。 (12) 选择“有效区域”标签，这个区域是鼠标指针经过该区域时的显示状态，直接单击“完成”按钮，回到原页面上。 (13) 单击按钮的绿色区域，在“属性”面板中设置按钮名称为button1，按钮导出选项为GIF接近网页256色 。 (14) 如果制作其他的按钮，可选中该按钮，按“Ctrl+Alt+D”组合键，将复制的按钮拖到合适的位置，在“属性”面板中设置其按钮名为“button2”，文本为“Dreamweaver”即可 。 采用同样方法，最终可制作出案例所示的动态导航按钮。 图层的基本操作 1．图层的基本知识 文档中的每个对象都驻留在一个层上。可以在绘制之前创建层，也可以根据需要添加层。画布位于所有层之下，其本身不是层。 可以在“层”面板中查看层、子层和对象的堆叠顺序。这就是它们出现在文档中的顺序。Fireworks根据层创建的顺序堆叠层，将最近创建的层放在最上面。堆叠顺序决定各层上对象之间的重叠方式。可以重新排列层及层内对象的顺序，并可以创建子层以及将对象移动到这些子层上。 活动层的名称在“层”面板中高亮显示。可以展开层查看它上面的所有对象的列表。默认情况下，对象以缩略图的形式显示。 2．添加和删除层 使用“层”面板，可以添加新层、添加新子层、删除不需要的层以及复制现有的层和对象。 (1) 添加层。若要添加层，请执行下列操作之一。 ① 单击“层”面板中的“新建/复制层”按钮。 ② 选择“编辑”→“插入”→“层”。 ③ 从“层”面板的“选项”菜单中选择“新建层”或“新建