第11章--按钮制作-网页设计案例教程课件.ppt

《第11章--按钮制作-网页设计案例教程课件.ppt》由会员分享，可在线阅读，更多相关《第11章--按钮制作-网页设计案例教程课件.ppt（24页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、PEKING UNIVERSITY PRESS第11章 按钮制作本章内容在网站设计中的地位本章内容在网站设计中的地位在网页设计中，经常用到导航按钮进行超级链接，由于导在网页设计中，经常用到导航按钮进行超级链接，由于导航按钮形式多样，因此只要合理应用，就会极大地美化网航按钮形式多样，因此只要合理应用，就会极大地美化网页。本章将介绍如何制作一些特效导航按钮。页。本章将介绍如何制作一些特效导航按钮。本章要点本章要点动态按钮制作；动态按钮制作；MACMAC按钮的制作；按钮的制作；图片按钮的制作。图片按钮的制作。教学目标教学目标掌握动态按钮的制作方法；掌握动态按钮的制作方法；掌握掌握MACMAC按钮的制

2、作方法；按钮的制作方法；掌握图片按钮的制作方法。掌握图片按钮的制作方法。元件的基础知识 1 1元件的含义元件的含义Fireworks Fireworks 提供提供3 3种类型的元件：图形、动画和按钮。每种种类型的元件：图形、动画和按钮。每种类型的元件都具有适合于其特定用途的独特特性。实例是类型的元件都具有适合于其特定用途的独特特性。实例是 FireworksFireworks元件的表示形式。当对元件对象元件的表示形式。当对元件对象(原始对象原始对象)进进行编辑时，实例行编辑时，实例(副本副本)会自动更改以反映对元件所做的修会自动更改以反映对元件所做的修改。改。(1)(1)直接创建按钮。选择直接

3、创建按钮。选择“编辑编辑”“”“插入插入”“”“新建按新建按钮钮”，在编辑元件区把画布分成，在编辑元件区把画布分成9 9块。可通过拖动分隔线块。可通过拖动分隔线调整块的大小。调整块的大小。选中选中“释放释放”标签，在其中绘制一矩形，设定颜色，再选标签，在其中绘制一矩形，设定颜色，再选中中“滑过滑过”标签，在中间的区域绘制一矩形，设置颜色，。标签，在中间的区域绘制一矩形，设置颜色，。用同样方法分别设置用同样方法分别设置“按下按下”、“按下时滑过按下时滑过”的样式与的样式与颜色。颜色。(2)(2)创建动画元件。选择创建动画元件。选择“编辑编辑”“”“插入插入”“”“新建元新建元件件”，在弹出的对话

4、框中选择并单击，在弹出的对话框中选择并单击“按钮按钮”后确定，同后确定，同样进入元件编辑窗口，在该窗口下可采用直接创建按钮的样进入元件编辑窗口，在该窗口下可采用直接创建按钮的方法创建动态按钮。方法创建动态按钮。导航按钮的制作案例 实现方法如下。实现方法如下。(1)(1)打开一个新文件，设定画布大小为打开一个新文件，设定画布大小为500*80500*80，画布颜色，画布颜色为白色。为白色。(2)(2)选择矢量工具箱中的矩形工具按钮，在画布上绘制一选择矢量工具箱中的矩形工具按钮，在画布上绘制一矩形，并在矩形，并在“属性属性”面板设置矩形的大小为面板设置矩形的大小为1303013030，填，填充颜色

5、为充颜色为#0099CC#0099CC。(3)(3)在在“属性属性”面板单击滤镜后的按钮，从弹出的菜单中面板单击滤镜后的按钮，从弹出的菜单中选择选择“斜角和浮雕斜角和浮雕”“”“内斜角内斜角”，从弹出的对话框中设，从弹出的对话框中设定斜角样式为平坦，宽度值为定斜角样式为平坦，宽度值为5 5。(4)(4)选择矢量工具箱中的文本工具按钮，在所绘制矩形中选择矢量工具箱中的文本工具按钮，在所绘制矩形中绘制一个文本文本区，并输入文本绘制一个文本文本区，并输入文本“Home page”“Home page”，大小为，大小为2020，颜色为，颜色为#FFFF00#FFFF00，聚中对齐，聚中对齐 。(10)

6、(10)选择第选择第3 3张标签张标签“按下按下”，选中，选中“复制滑过图片复制滑过图片”，复制滑过图片，选取矩形对象，在复制滑过图片，选取矩形对象，在“属性属性”面板中设置填面板中设置填充颜色为充颜色为#006699#006699，在，在“属性属性”面板的效果栏内双击面板的效果栏内双击“内内斜角斜角”，设置参数值，设置参数值 。(11)(11)选择第选择第4 4张标签张标签“按下时滑过按下时滑过”，选中，选中“复制按下图复制按下图片片”，复制按下图片，选取文本对象，在，复制按下图片，选取文本对象，在“属性属性”面板中面板中设定为设定为#FFFFFF#FFFFFF的光晕效果。这样便设定了按钮按

7、下后，的光晕效果。这样便设定了按钮按下后，鼠标又经过按钮时的显示状态鼠标又经过按钮时的显示状态 。(12)(12)选择选择“有效区域有效区域”标签，这个区域是鼠标指针经过该标签，这个区域是鼠标指针经过该区域时的显示状态，直接单击区域时的显示状态，直接单击“完成完成”按钮，回到原页面按钮，回到原页面上。上。(13)(13)单击按钮的绿色区域，在单击按钮的绿色区域，在“属性属性”面板中设置按钮名面板中设置按钮名称为称为button1button1，按钮导出选项为，按钮导出选项为GIFGIF接近网页接近网页256256色色 。(14)(14)如果制作其他的按钮，可选中该按钮，按如果制作其他的按钮，可

8、选中该按钮，按“Ctrl+Alt+D”“Ctrl+Alt+D”组合键，将复制的按钮拖到合适的位置，组合键，将复制的按钮拖到合适的位置，在在“属性属性”面板中设置其按钮名为面板中设置其按钮名为“button2”“button2”，文本为，文本为“Dreamweaver”“Dreamweaver”即可即可 。采用同样方法，最终可制作出案例所示的动态导航按钮。采用同样方法，最终可制作出案例所示的动态导航按钮。图层的基本操作 1 1图层的基本知识图层的基本知识文档中的每个对象都驻留在一个层上。可以在绘制之前创文档中的每个对象都驻留在一个层上。可以在绘制之前创建层，也可以根据需要添加层。画布位于所有层之

9、下，其建层，也可以根据需要添加层。画布位于所有层之下，其本身不是层。本身不是层。可以在可以在“层层”面板中查看层、子层和对象的堆叠顺序。这面板中查看层、子层和对象的堆叠顺序。这就是它们出现在文档中的顺序。就是它们出现在文档中的顺序。FireworksFireworks根据层创建的根据层创建的顺序堆叠层，将最近创建的层放在最上面。堆叠顺序决定顺序堆叠层，将最近创建的层放在最上面。堆叠顺序决定各层上对象之间的重叠方式。可以重新排列层及层内对象各层上对象之间的重叠方式。可以重新排列层及层内对象的顺序，并可以创建子层以及将对象移动到这些子层上。的顺序，并可以创建子层以及将对象移动到这些子层上。活动层的

10、名称在活动层的名称在“层层”面板中高亮显示。可以展开层查看面板中高亮显示。可以展开层查看它上面的所有对象的列表。默认情况下，对象以缩略图的它上面的所有对象的列表。默认情况下，对象以缩略图的形式显示。形式显示。2 2添加和删除层添加和删除层 使用使用“层层”面板，可以添加新层、添加新子层、删除不需面板，可以添加新层、添加新子层、删除不需要的层以及复制现有的层和对象。要的层以及复制现有的层和对象。(1)(1)添加层。若要添加层，请执行下列操作之一。添加层。若要添加层，请执行下列操作之一。单击单击“层层”面板中的面板中的“新建新建/复制层复制层”按钮。按钮。选择选择“编辑编辑”“”“插入插入”“”“

11、层层”。从从“层层”面板的面板的“选项选项”菜单中选择菜单中选择“新建层新建层”或或“新新建子图层建子图层”，然后单击，然后单击“确定确定”按钮。按钮。(2)(2)删除层。若要删除层，请执行下列操作之一。删除层。若要删除层，请执行下列操作之一。在在“层层”面板中，将该层用鼠标拖动到垃圾桶图标上。面板中，将该层用鼠标拖动到垃圾桶图标上。在在“层层”面板中选择该层并单击垃圾桶图标。面板中选择该层并单击垃圾桶图标。选择层并从选择层并从“层层”面板的面板的“选项选项”菜单中选择菜单中选择“删除层删除层”。(2)(2)层与对象解除锁定。若要解除某个锁定的层与对象，层与对象解除锁定。若要解除某个锁定的层与

12、对象，可单击层或对象前的图标，则层与对象解除锁定。可单击层或对象前的图标，则层与对象解除锁定。若要解除锁定所有层，在若要解除锁定所有层，在“层层”面板的面板的“选项选项”菜单中选菜单中选择择“解除全部锁定解除全部锁定”。(3)(3)显示或隐藏层及对象。还可以使用显示或隐藏层及对象。还可以使用“层层”面板来控制面板来控制对象和层在画布上的可见性。当在对象和层在画布上的可见性。当在“层层”面板中隐藏对象面板中隐藏对象或层时，它不会出现在画布上，不会被意外地更改或选择。或层时，它不会出现在画布上，不会被意外地更改或选择。若要显示或隐藏层或层上的对象，单击层或对象名称左侧若要显示或隐藏层或层上的对象，

13、单击层或对象名称左侧最远的列中的方形。眼睛图标指示该层是可见的。最远的列中的方形。眼睛图标指示该层是可见的。若要显示或隐藏所有层和对象，从若要显示或隐藏所有层和对象，从“层层”面板的面板的“选项选项”菜单中选择菜单中选择“显示全部显示全部”或或“隐藏全部隐藏全部”。Mac按钮的制作案例(8)(8)使用使用“指针指针”工具，选中下半部分，或从层工具，选中下半部分，或从层2 2面板中面板中选中两个路径中下半部分对应的路径。按选中两个路径中下半部分对应的路径。按DelDel键，删除键，删除 。(9)(9)选中切割后的图形，在选中切割后的图形，在“属性属性”面板的滤镜项中选择面板的滤镜项中选择“模糊模

14、糊”“”“高斯模糊高斯模糊”，在窗口中设置参数为，在窗口中设置参数为2.72.7。(10)(10)单击层单击层1 1前的锁图标，给层前的锁图标，给层1 1解锁，选中层解锁，选中层1 1下的图层，下的图层，在在“属性属性”面板的滤镜项中选择面板的滤镜项中选择“斜角和浮雕斜角和浮雕”“”“内斜内斜角角”。(11)(11)继续在继续在“属性属性”面板的滤镜项中选择面板的滤镜项中选择“阴影和光晕阴影和光晕”“”“发光发光”命令，将颜色设置为灰色命令，将颜色设置为灰色 。(12)(12)按按“Ctrl+A”“Ctrl+A”组合键，选中所有对象，选择组合键，选中所有对象，选择“修改修改”“”“组合组合”，

15、MacMac按钮基本做好。按钮基本做好。(13)(13)在按钮上绘制相应的文本，则在按钮上绘制相应的文本，则MacMac按钮制作完成。按钮制作完成。通过设置帧延时或隐藏帧，可以在制作和编辑过通过设置帧延时或隐藏帧，可以在制作和编辑过程中使动画达到自己想要的效果。程中使动画达到自己想要的效果。(1)(1)添加帧。单击添加帧。单击“帧帧”面板底部的面板底部的“新建新建/重制重制帧帧”按钮。按钮。(2)(2)创建帧的副本。将一个现有帧拖到创建帧的副本。将一个现有帧拖到“帧帧”面面板底部的板底部的“新建新建/重制帧重制帧”按钮上。按钮上。(3)(3)重新排列帧的顺序。将帧依次拖到列表中的重新排列帧的顺

16、序。将帧依次拖到列表中的新位置。新位置。(4)(4)删除所选帧。将帧直接拖到删除所选帧。将帧直接拖到“删除帧删除帧”按钮按钮上。上。3 3补间实例补间实例补间实例的方法如下。补间实例的方法如下。(1)(1)选择画布上同一图形元件的两个或更多的实例。不要选择画布上同一图形元件的两个或更多的实例。不要选择不同元件的实例。选择不同元件的实例。(2)(2)选择选择“修改修改”“”“元件元件”“”“补间实例补间实例”。(3)(3)在在“补间实例补间实例”对话框中输入要插入到原始帧之间的对话框中输入要插入到原始帧之间的补间步骤的数目。补间步骤的数目。(4)(4)若要将补间对象分散到不同的帧中，请选择若要将

17、补间对象分散到不同的帧中，请选择“分散到分散到帧帧”并单击并单击“确定确定”按钮。按钮。如果选择不将对象分散到不同的帧，则可以在以后通过选如果选择不将对象分散到不同的帧，则可以在以后通过选择所有实例并单击择所有实例并单击“帧帧”面板中的面板中的“分散到帧分散到帧”按钮来执按钮来执行此操作。行此操作。2 2创建切片创建切片 可以使用以下方法来创建切片对象：使用可以使用以下方法来创建切片对象：使用“切片切片”工具绘工具绘制切片对象，或者基于所选对象插入切片。制切片对象，或者基于所选对象插入切片。从切片对象延伸的线是切片辅助线，它确定导出时将文档从切片对象延伸的线是切片辅助线，它确定导出时将文档拆分

18、成的单独图像文件的边界。默认情况下，这些辅助线拆分成的单独图像文件的边界。默认情况下，这些辅助线为红色。为红色。使用使用“切片切片”工具绘制切片对象的形式有两种，分别是创工具绘制切片对象的形式有两种，分别是创建矩形切片和创建非矩形切片。建矩形切片和创建非矩形切片。(1)(1)创建矩形切片。若要绘制矩形切片对象，按如下方法创建矩形切片。若要绘制矩形切片对象，按如下方法操作。操作。选择选择“切片切片”工具。工具。拖动以绘制切片对象。切片对象出现在拖动以绘制切片对象。切片对象出现在“网页层网页层”上，上，而切片辅助线出现在文档中。而切片辅助线出现在文档中。(2)(2)创建非矩形切片。当试图将交互性附

19、加到非创建非矩形切片。当试图将交互性附加到非矩形图像时，矩形切片可能无法满足需要。可使矩形图像时，矩形切片可能无法满足需要。可使用用“多边形切片多边形切片”工具绘制任何多边形形状的切工具绘制任何多边形形状的切片。片。绘制多边形切片的操作方法如下。绘制多边形切片的操作方法如下。选择选择“多边形切片多边形切片”工具。工具。单击以放置多边形的矢量点。单击以放置多边形的矢量点。“多边形切片多边形切片”工具仅绘制直线段。工具仅绘制直线段。当在具有柔边的对象周围绘制多边形切片对象时，当在具有柔边的对象周围绘制多边形切片对象时，请确保包括整个对象，以免在切片图形中创建多请确保包括整个对象，以免在切片图形中创

20、建多余的实边。余的实边。图片按钮的制作案例(1)(1)选择选择“文件文件”“”“新建新建”命令，设置宽度为命令，设置宽度为450450像素，像素，高度为高度为400400像素，分辨率为像素，分辨率为7272像素。像素。(2)(2)选择选择“文件文件”“”“导入导入”命令，分别导入前面已经制命令，分别导入前面已经制作好的作好的“卡通电视卡通电视”、“静态静态Logo”Logo”、“撕裂图片撕裂图片”、“窗格图片窗格图片”，导入时使它们靠近画布右侧对齐。，导入时使它们靠近画布右侧对齐。(3)(3)选择文本工具，在画布左上侧绘制出一个文本框，并选择文本工具，在画布左上侧绘制出一个文本框，并在在“属性

21、属性”面板中设置字号为面板中设置字号为2424，颜色为，颜色为#003300#003300，字体，字体为华文琥珀，然后向文本框中输入文本为华文琥珀，然后向文本框中输入文本“矢量图矢量图”。再通。再通过复制、粘贴的方法复制两个文本框，并把它们分别拖动过复制、粘贴的方法复制两个文本框，并把它们分别拖动到左侧中间和左下侧，更改两个文本框内容分别为到左侧中间和左下侧，更改两个文本框内容分别为“特效特效位图位图”、“动态效果动态效果”。(4)(4)选择矩形工具，在画布左上侧绘制出一个矩选择矩形工具，在画布左上侧绘制出一个矩形，然后从形，然后从“样式样式”面板中选择面板中选择“Plastic“Plasti

22、c Button 004”Button 004”样式。样式。(5)(5)通过复制、粘贴的方法再制作同样的通过复制、粘贴的方法再制作同样的5 5个按钮，个按钮，并把它们分别拖动到相应的位置。并把它们分别拖动到相应的位置。(6)(6)选择文本工具，在画布左上侧按钮上绘制出选择文本工具，在画布左上侧按钮上绘制出一个文本框，并在一个文本框，并在“属性属性”面板中设置字号为面板中设置字号为2424，颜色为，颜色为#000099#000099，字体为华文琥珀，然后向文本，字体为华文琥珀，然后向文本框中输入文本框中输入文本“卡通电视卡通电视”。再通过复制、粘贴。再通过复制、粘贴的方法复制的方法复制5 5个文

23、本框，并把它们分别拖动到其他个文本框，并把它们分别拖动到其他按钮上，更改按钮上，更改5 5个文本框内容分别为个文本框内容分别为“静太静太Logo”Logo”、“蒙版图片蒙版图片”、“撕开图片撕开图片”、“动态按钮动态按钮”、“动态动态Logo”Logo”。(7)(7)在在“层层”面板中，单击第面板中，单击第1 1个位图层，再按住个位图层，再按住ShiftShift键单击最后一个位图层，则选中所有层。单键单击最后一个位图层，则选中所有层。单击击“帧帧”面板中的面板中的“分散到帧分散到帧”按钮。按钮。(8)(8)选择所有文本行与按钮，按选择所有文本行与按钮，按Ctrl+CCtrl+C组合键进行组合

24、键进行复制，在复制，在“帧帧”面板中选择帧面板中选择帧1 1，并按，并按Ctrl+VCtrl+V组合组合键粘贴。然后再在键粘贴。然后再在“帧帧”面板中选择帧面板中选择帧2 2、帧、帧3 3、帧帧4 4分别进行粘贴。这样在每帧中都有了按钮分别进行粘贴。这样在每帧中都有了按钮 。(9)(9)在工具箱中选择矩形切片工具，对上图中所在工具箱中选择矩形切片工具，对上图中所有按钮进行切片，并把按钮右侧的图形显示区作有按钮进行切片，并把按钮右侧的图形显示区作为一个切片为一个切片 。本章小结本章讲述了元件的含义与动态按钮的制作，层的含义与基本用法，帧的含义与基本用法，切片的意义及用法，并通过案例把一些知识点进行了综合运用。