网络编辑实务项目六课件(2).pptx

1、网页图像处理项目六项目六任务二任务二 创建按钮和导航条创建按钮和导航条新知学习新知学习 一、创建按钮一、创建按钮 1.按钮表现的几种状态 按钮是网页中应用极多的元素，其表现状态有如下四种。（1）Up状态。默认状态，即通常的状态，这时的鼠标是不在按钮范围之内的。（2）Over状态。鼠标滑过按钮时的状态。（3）Down状态。按钮被点击后的状态，通常它是出现在目标网页中的。（4）Over While Down状态。鼠标过处于Down状态下按钮的时候按钮的状态，通常极少应用。任务二任务二 创建按钮和导航条创建按钮和导航条新知学习新知学习 2.创建按钮的操作步骤 （1）准备。首先要构思一下这个图标按钮的

2、大小、按钮的颜色以及形状。以一个比较时尚的按钮为例来进行制作。这个按钮看上去很像纽扣，就叫它纽扣按钮吧！我们准备将这个按钮做出立体的，并且具有光感的效果。任务二任务二 创建按钮和导航条创建按钮和导航条新知学习新知学习 2.创建按钮的操作步骤 （2）打开Fireworks 8，新建一个文件，大小随意，背景随意。选取工具箱的椭圆绘制工具，配合键盘上的Shift键，在编辑区绘制一个圆，颜色这里采用的是黑色。任务二任务二 创建按钮和导航条创建按钮和导航条新知学习新知学习 2.创建按钮的操作步骤 （3）选中圆形对象，选取工具箱的扭曲变形工具“”，拖动鼠标对圆形对象做变形处理，使其变成一个倾斜的椭圆。任务

3、二任务二 创建按钮和导航条创建按钮和导航条新知学习新知学习 2.创建按钮的操作步骤 （4）选中变形后的对象，依次单击“滤镜”、“Eye Candy 4000 LE”、“Bevel Boss”项，在弹出的设置框中进行设定：Basic选项不用进行修改了，直接采用默认值即可；Lighting选项也采用默认值；Bevel Profile选项选择最上方的“Button”预设选项，单击“确定”。任务二任务二 创建按钮和导航条创建按钮和导航条新知学习新知学习 2.创建按钮的操作步骤 （5）选中编辑区的对象，依次单击“编辑”、“克隆”项，原地克隆一个相同的倾斜椭圆对象。选中克隆对象，依次单击“修改”、“变形”

4、、“数值变形”项，在弹出的对话框中进行设定。将变形方式设为缩放；水平、垂直缩放比例均设为70大小，下面的两个复选框保持默认的勾选状态。任务二任务二 创建按钮和导航条创建按钮和导航条新知学习新知学习 2.创建按钮的操作步骤 （6）选中克隆对象，再次按Ctrll+Shiftl+Del组合键，原地再次克隆一个缩放后的椭圆对象。任务二任务二 创建按钮和导航条创建按钮和导航条新知学习新知学习 2.创建按钮的操作步骤 （7）同时选中最初的椭圆对象和一个缩放后的克隆对象，依次单击“修改”、“组合路径”、“打孔”项，将其打孔。此时会弹出一个对话框，单击“确定”。任务二任务二 创建按钮和导航条创建按钮和导航条新

5、知学习新知学习 2.创建按钮的操作步骤 这样编辑区目前就只有两个对象：执行打孔命令后生成的椭圆环，还有就是缩放后的克隆对象。任务二任务二 创建按钮和导航条创建按钮和导航条新知学习新知学习 2.创建按钮的操作步骤 （8）选中打孔后生成的椭圆环对象，依次单击“滤镜”、“IEye Candy 4000 LEl”、“BevelBoss”项，在弹出的设置框中进行设定。Basic选项不用进行修改了，Bevel Profile选项也保持默认，Lighting选项需要进行一些简单的调整，具体的数值大小根据椭圆环的大小来设定。本步的目的就是要产生圆环的高光点效果，可以通过观察预览窗口的效果来进行调整。任务二任务

6、二 创建按钮和导航条创建按钮和导航条新知学习新知学习 2.创建按钮的操作步骤 （9）看看编辑区的对象发生了什么变化，是不是已经出现了我们所期待的按钮效果了？再给按钮添加一些文字，使用文本工具，输入Enter。任务二任务二 创建按钮和导航条创建按钮和导航条新知学习新知学习 2.创建按钮的操作步骤 （10）选中这个按钮，然后再给按钮添加一种外发光效果，单击属性面板的“”，依次单击“阴影和光晕”、“内侧发光”项即可。任务二任务二 创建按钮和导航条创建按钮和导航条新知学习新知学习 2.创建按钮的操作步骤 (11)复制一个制作好的按钮，选中除文字以外的图形，依次单击“属性”、“滤镜”、“调整颜色”、“色

7、相饱和度”项，将第二个按钮进行设置。任务二任务二 创建按钮和导航条创建按钮和导航条新知学习新知学习 2.创建按钮的操作步骤 (12)选择文本工具“”，在按钮上输入“Enter”，文字设置与第一个按钮相同。（13）依照“（11）、（12）”步再复制一个制作好的按钮，其“色相饱和度”设置参分别为“138”、“-20”、“67”任务二任务二 创建按钮和导航条创建按钮和导航条新知学习新知学习 二、二、导航条制作导航条制作 1.导航条的作用众多的按键组合就形成了导航条,其作用就是要让游览者清楚知道当前所处的位置,并且通过导航条可以方便的将浏览者带到相应的地方而不会迷失。任务二任务二 创建按钮和导航条创建

8、按钮和导航条新知学习新知学习 二、二、导航条制作导航条制作2.导航条的制作（1）制作一个横向七按钮的导航条。任务二任务二 创建按钮和导航条创建按钮和导航条新知学习新知学习 二、二、导航条制作导航条制作 2.导航条的制作（2）为手机按钮添加一个弹出式菜单。任务二任务二 创建按钮和导航条创建按钮和导航条新知学习新知学习 二、二、导航条制作导航条制作 2.导航条的制作（3）导航条文件的输出。输出的文件应该同时包含网页文件和图像文件。任务二任务二 创建按钮和导航条创建按钮和导航条操作技巧操作技巧 问题问题1 小刘观察发现导出导航菜单时，会生成一个名为“mm_menu.js”的文件，他想知道这个文件作用

9、及使用方法。温馨提示温馨提示Fireworks 生成了在 Web 浏览器中查看弹出菜单所需的所有 JavaScript。在将包含弹出菜单的Fireworks 文档导出为 HTML 时，同时会将一个名为 mm_menu.js 的 JavaScript 文件导出到与该 HTML 文件相同的位置。任务二任务二 创建按钮和导航条创建按钮和导航条操作技巧操作技巧 问题问题2如何改变按钮元件三状态的颜色如何改变按钮元件三状态的颜色温馨提示温馨提示 按钮元件三个状态分别是由三个图按钮元件三个状态分别是由三个图形元件构成的，而元件是可以修改的，形元件构成的，而元件是可以修改的，如果把按下状态的图形元件换成绿色那如果把按下状态的图形元件换成绿色那么按钮的按下状态就会使绿色。么按钮的按下状态就会使绿色。技能训练技能训练 训练训练1制作一个有“弹起”、“滑过”、“按下”、“按下滑过”四状态的按钮，时间为12分钟。任务二任务二 创建按钮和导航条创建按钮和导航条技能训练技能训练 训练训练2在制作导航栏实例的基础上为“电脑”项制作一个右侧出现的菜单选项，时间为10分钟。任务二任务二 创建按钮和导航条创建按钮和导航条