网络编辑实务教学课件作者肖旻课件资源项目六2课件幻灯片.pptVIP

尚辅网 / 网页图像处理 项目六 任务二 创建按钮和导航条 新知学习 一、创建按钮 1. 按钮表现的几种状态 按钮是网页中应用极多的元素，其表现状态有如下四种。 （1）Up状态。默认状态，即通常的状态，这时的鼠标是不在按钮范围之内的。 （2）Over状态。鼠标滑过按钮时的状态。 （3）Down状态。按钮被点击后的状态，通常它是出现在目标网页中的。 （4）Over While Down状态。鼠标过处于Down状态下按钮的时候按钮的状态，通常极少应用。 任务二 创建按钮和导航条 新知学习 2. 创建按钮的操作步骤 （1）准备。首先要构思一下这个图标按钮的大小、按钮的颜色以及形状。以一个比较时尚的按钮为例来进行制作。这个按钮看上去很像纽扣，就叫它纽扣按钮吧！我们准备将这个按钮做出立体的，并且具有光感的效果。 任务二 创建按钮和导航条 新知学习 2. 创建按钮的操作步骤 （2）打开Fireworks 8，新建一个文件，大小随意，背景随意。选取工具箱的椭圆绘制工具，配合键盘上的Shift键，在编辑区绘制一个圆，颜色这里采用的是黑色。 任务二 创建按钮和导航条 新知学习 2. 创建按钮的操作步骤 （3）选中圆形对象，选取工具箱的扭曲变形工具“ ”，拖动鼠标对圆形对象做变形处理，使其变成一个倾斜的椭圆。 任务二 创建按钮和导航条 新知学习 2. 创建按钮的操作步骤 （4）选中变形后的对象，依次单击“滤镜”、“Eye Candy 4000 LE”、“Bevel Boss”项，在弹出的设置框中进行设定：Basic选项不用进行修改了，直接采用默认值即可；Lighting选项也采用默认值；Bevel Profile选项选择最上方的“Button”预设选项，单击“确定” 。 任务二 创建按钮和导航条 新知学习 2. 创建按钮的操作步骤 （5）选中编辑区的对象，依次单击“编辑”、“克隆”项，原地克隆一个相同的倾斜椭圆对象。选中克隆对象，依次单击“修改”、“变形”、“数值变形”项，在弹出的对话框中进行设定。将变形方式设为缩放；水平、垂直缩放比例均设为70大小，下面的两个复选框保持默认的勾选状态。 任务二 创建按钮和导航条 新知学习 2. 创建按钮的操作步骤 （6）选中克隆对象，再次按Ctrll+Shiftl+Del组合键，原地再次克隆一个缩放后的椭圆对象。 任务二 创建按钮和导航条 新知学习 2. 创建按钮的操作步骤 （7）同时选中最初的椭圆对象和一个缩放后的克隆对象，依次单击“修改”、“组合路径”、“打孔”项，将其打孔。此时会弹出一个对话框，单击“确定” 。 任务二 创建按钮和导航条 新知学习 2. 创建按钮的操作步骤 这样编辑区目前就只有两个对象：执行打孔命令后生成的椭圆环，还有就是缩放后的克隆对象。 任务二 创建按钮和导航条 新知学习 2. 创建按钮的操作步骤 （8）选中打孔后生成的椭圆环对象，依次单击“滤镜”、“IEye Candy 4000 LEl”、“BevelBoss”项，在弹出的设置框中进行设定。Basic选项不用进行修改了，Bevel Profile选项也保持默认，Lighting选项需要进行一些简单的调整，具体的数值大小根据椭圆环的大小来设定。本步的目的就是要产生圆环的高光点效果，可以通过观察预览窗口的效果来进行调整。 任务二 创建按钮和导航条 新知学习 2. 创建按钮的操作步骤 （9）看看编辑区的对象发生了什么变化，是不是已经出现了我们所期待的按钮效果了？再给按钮添加一些文字，使用文本工具，输入Enter。 任务二 创建按钮和导航条 新知学习 2. 创建按钮的操作步骤 （10）选中这个按钮，然后再给按钮添加一种外发光效果，单击属性面板的“ ”，依次单击“阴影和光晕”、“内侧发光”项即可。 任务二 创建按钮和导航条 新知学习 2. 创建按钮的操作步骤 (11)复制一个制作好的按钮，选中除文字以外的图形，依次单击“属性”、“滤镜”、“调整颜色”、“色相／饱和度”项，将第二个按钮进行