网页制作三合一教程(第十二章)资料

《网页制作三合一教程(第十二章)资料》由会员分享，可在线阅读，更多相关《网页制作三合一教程(第十二章)资料（43页珍藏版）》请在金锄头文库上搜索。

1、第12章动画、按钮和其他操作,本章要点 12.1 “悬停按钮菜单”网页 12.2 “游泳卡通人”动画,12.1 “悬停按钮菜单”网页,12.1.1 蒙版技术和创建位图的选区 1蒙版技术 蒙版技术是指在24位真彩色图像基础上增加了8位灰度通道，用以描述图像的透明程度。利用该技术，可在对象上留下对象轮廓的剪切效果。下面通过一个例子说明蒙版技术的作用。 （1）利用“导入”对话框导入一幅位图图像。用鼠标在画布中拖曳出一个矩形，松开鼠标左键后即可出现与矩形一样大小的导入图像，如图12-1-1所示。 （2）绘制一个矩形作为蒙版，将矩形置于该位图对象的上面，如图12-1-2所示。 （3）单击工具箱中的“指针

2、”工具按钮，按住Shift键，单击选取位图图像和矩形图形。 （4）单击“修改”“蒙版”“组合为蒙版”菜单命令，这时图像被蒙版剪切，图像的色彩也被淡化，如图12-1-3所示。,12.1 “悬停按钮菜单”网页,图12-1-1 导入图像 图12-1-2 绘制一个矩形 图12-1-3 蒙版剪切图像,12.1 “悬停按钮菜单”网页,如果在编辑蒙版状态，可使用“部分选定”工具，用鼠标拖曳蒙版上的控制点，进行蒙版的编辑修改。随着蒙版形状的变化，蒙版遮罩的图像也随之变化。 可使用工具箱中的“指针”工具，用鼠标拖曳蒙版中心的十字标志，移动蒙版遮罩的下层图像。可以看到，蒙版就好像一个窗口，能通过蒙版窗口看到下层图

3、像的局部区域。如果用鼠标拖曳蒙版的非中心十字标志，可同时移动蒙版和遮罩的图像。 2创建选区的工具 创建选区的工具有工具箱中“位图”栏中的“选取框”工具等。这些工具的使用方法与Flash MX 2004中的相应工具的使用方法基本一样。按Del键，可将选区内的图像删除。使用工具箱中的“指针”工具，用鼠标拖曳选区中的图像，可移动选区中的图像。,12.1 “悬停按钮菜单”网页,3创建选区工具的“属性”栏 在选择了创建选区（选区也叫选框）的工具后，应在其属性栏中进行有关设置。“选取框”工具的属性栏如图12-1-4所示。其他的创建选区工具与该属性栏基本一样，只是“套索”工具和“多边形套索”工具只有“边缘”

4、下拉列表框和它右边的“羽化总量”文本框，“魔术棒”工具增加了一个“容差”下拉列表框（没有“样式”栏中的选项），其他各项作用如下。,12.1 “悬停按钮菜单”网页,图12-1-4 “选取框”工具的“属性”栏,12.1 “悬停按钮菜单”网页,（1）“样式”下拉列表框：如果选择其中的“固定大小”选项，则可以在其下边出现的两个文本框中输入选区的宽和高的数值，用固定尺寸的选区来选取位图对象；如果选择其中的“固定比例”选项，则可以在其下边出现的两个文本框中输入选区的宽和高的比例数值，选区的尺寸可大可小，但高和宽的比例固定。 （2）“边缘”下拉列表框：用来选择“实边”、“消除锯齿”和“羽化”3个选项中的一个

5、。选择“羽化”选项后，还可在其右边的“羽化总数”文本框中设置羽化量。 （3）“容差”文本框：用来设置选取颜色的近似范围，其值越大，选取的范围也越大。 4选区的鼠标操作 使用创建选区工具，按下不同的按键，鼠标的指针会不一样，拖曳鼠标，会产生不同效果。 （1）不按任何建，用鼠标拖曳选区，可以移动选区的位置，图像不变化。,12.1 “悬停按钮菜单”网页,（2）按住Ctrl键，用鼠标拖曳选区，可以将选区内的图像剪切出来并移动位置。 （3）按住Ctrl+Alt键，用鼠标拖曳选区，可以将选区内的图像复制并移动位置。 （4）按住Shift键，鼠标指针会增加一个“+”号，再创建新选区时，会保留原选区。 （5）

6、按住Alt键，鼠标指针会增加一个“”号，再创建新选区时，新选区与原选区重叠的部分将会取消。 （6）按住Shift+Alt键，鼠标指针会增加一个“”号，再创建新选区时，新选区与原选区重叠的部分会保留，而其他部分会消失。 5选区的菜单命令 （1）全部选取：单击“选择”“全选”菜单命令，或按Ctrl+A键。在对象模式中（即当前选择的是矢量工具或对象时），选择该命令将选取当前画布上的所有对象。 （2）反相选取：单击“选择”“反选”菜单命令，或按Ctrl+Shift+I键。,12.1 “悬停按钮菜单”网页,（3）取消选区：单击“选择”“取消选择”菜单命令，或按Ctrl+D键。 （4）选择相似颜色：创建选

7、区后，单击“选择”“选择相似”菜单命令，则会创建选择原选区内颜色相近像素的新选区。选取的颜色范围由“魔术棒”工具“属性”栏内的容差值来决定。 （5）羽化：创建选区后，单击“选择”“羽化”菜单命令，弹出“羽化所选”对话框，在该对话框中的“半径”文本框中输入羽化半径值，单击“确定”按钮即可将选区羽化。 （6）扩展选区：创建选区后，单击“选择”“扩展选取框”菜单命令，弹出“扩展选取框”对话框，在该对话框的“扩展范围”文本框中输入数值，然后单击“确定”按钮即可将原选区向四周扩展指定的数值。,12.1 “悬停按钮菜单”网页,（7）收缩选区：创建选区后，单击“选择”“收缩选取框”菜单命令，弹出“收缩选取框

8、”对话框，在该对话框的“收缩范围”文本框中输入数值，单击“确定”按钮即可将原选区向内收缩指定的数值。 （8）边框选区：创建选区后，单击“选择”“边框选取框”菜单命令，弹出“边框选取框”对话框，在该对话框的“宽度”文本框中输入数值，单击“确定”按钮即可在原选区的外边创建一个按指定宽度的新选区。 （9）使选取框平滑：创建选区后，单击“选择”“平滑选取框”菜单命令，弹出“平滑选取框”对话框，在该对话框的“取样半径”文本框中输入数值，单击“确定”按钮即可使原选区边缘更平滑。在使用“套索”工具创建选区后，使用这一功能更有效。,12.1 “悬停按钮菜单”网页,12.1.2 创建和编辑切片 1什么是切片 切

9、片是Fireworks MX 2004中用于创建交互对象的基本构造块。切片是网页对象，它们不是以图像的形式存在，而是以HTML代码的形式出现。可以通过“层”面板中的“网页层”查看、选择和重命名它们。下面描述需要了解的切片概念以及如何应用切片。 切片可以将Fireworks文档分割成多个较小的部分，这些部分都以单独文件的形式导出。导出时，Fireworks还创建一个包含表格代码的HTML文件，以便在浏览器中重新拼合图形。将图像切割成切片至少有3个主要优点。 （1）优化网页：应用切片可以在确保图像快速下载的同时保证图像质量。切片可以使用最适合的文件格式和压缩设置来优化每个独立切片。,12.1 “悬

10、停按钮菜单”网页,（2）实现网页交互功能：可以使用切片创建切片区域，当鼠标指针经过切片区域或单击切片区域时会产生交互响应，并将交互性结合到网页中。 （3）更新网页的某些部分：切片可以轻松地更新网页中经常更改的部分。例如，某单位的网页中可能包含每年度需要更改一次的“本年度优秀员工”部分。切片可以快速更改优秀员工的姓名、照片和先进事迹，而不用更换整个网页中的图像。 2创建切片 （1）首先导入要切割的图像，如图12-1-5所示。单击工具箱中“网页”栏中的“切片”工具按钮，在图像中按住鼠标左键拖曳出切割的矩形区域（注意不要将选区重叠），图像中的红线表示最后生成切片文件的分割情况，如图12-1-6所示。

11、,12.1 “悬停按钮菜单”网页,图12-1-5 被切割的图像 图12-1-6 “切片”工具创建的切片 图12-1-7 “多边形切片”工具创建的切片,12.1 “悬停按钮菜单”网页,（2）除了使用“切片工具”工具外，还可以使用“多边形切片”工具来进行图像切割。单击工具箱中“网页”栏内的“多边形切片”工具按钮，再依次单击多边形的各个顶点，形成一个封闭的多边形切片即可进行切割，如图12-1-7所示。 3编辑切片 （1）编辑切片对象的方法与编辑图像对象的方法一样。单击工具箱中的“指针”工具按钮或“部分选定”工具按钮，再单击要编辑的切片对象，可以进行删除、移动、缩放和变形等操作。随着鼠标拖曳调整，生成

12、切片的分割线也跟着自动调整。 （2）选中切片后，再单击“修改”“变形”“”菜单命令，可以将切片变形。 4切片“属性”栏 单击选中切片，此时“属性”栏变为切片的“属性”栏，如图12-1-8所示。切片“属性”栏中各选项的作用如下。,12.1 “悬停按钮菜单”网页,图12-1-8 切片对象的“属性”栏,12.1 “悬停按钮菜单”网页,（1）“编辑切片对象名称”文本框：切片也是一种对象，它也应该有自己的名称。Fireworks为切片命名的规则是“基础名_r行号_c列号”。 （2）“宽”、“高”、“X”、“Y”文本框：用来设置切片对象的位置和大小。 （3）“类型”下拉列表框：用来定义切片的类型，它有图像

13、和HTML两种类型。当选择“HTML”选项时，下面介绍的选项均不存在，但是会增加一个HTML的“编辑”按钮。单击该按钮可以弹出“编辑HTML切片”下拉列表框，用来输入有关的文本内容。如果需要，可以通过添加HTML文本格式设置标记来设置文本的格式。 （4）“颜色”按钮：单击它可以弹出颜色面板，利用该面板可以改变切片对象的颜色。 （5）“切片导出设置”下拉列表框：用来选择图像的格式。 （6）“链接”下拉列表框：用来设置在浏览器中需要链接的URL。 （7）“Alt”文本框：输入当鼠标指针移到切片之上时出现的内容。 （8）“目标”下拉列表框：用来选择目标窗口。它用来指定链接文件的打开方式，其中各选项的

14、作用可参看前面的内容。 单击工具箱中“网页”栏内的按钮，可以隐藏切片对象上的分割线和热点；单击工具箱中“网页”栏内的按钮，可以显示切片对象上的分割线和热点。,12.2 “游泳卡通人”动画,12.2.1 创建按钮和按钮编辑器 按钮是网页中最常见的元素，利用按钮可以实现页面内以及网页与网页之间的切换，即导航效果。利用Fireworks创建按钮非常容易，不用编写JavaScript代码，就可以非常方便地创建出多种具有交互行为的、有动感的精美按钮。 1创建按钮 下面以站点中的导航栏名称来介绍按钮的制作过程。 （1）绘制一个黄色矩形图形，单击“修改”“元件”“转换为元件”菜单命令，打开“元件属性”对话框

15、，如图12-2-1所示。 （2）在“元件属性”对话框中的“名称”文本框中输入“新闻动态”，单击选中“类型”栏中的“按钮”单选钮，再单击“确定”按钮。可以看到矩形变成浅绿色，并且在左下角出现一个小箭头标志，如图12-2-2所示。矩形的颜色并未改变，浅绿色只是代表该矩形已成为一个切片对象；小箭头表示该矩形是按钮元件的实例，而按钮元件则存放在当前文件的“库”中。,12.2 “游泳卡通人”动画,图12-2-1 “元件属性”对话框 图12-2-2 矩形已成为一个切片对象,12.2 “游泳卡通人”动画,（3）双击该按钮实例或者单击“修改”“元件”“编辑元件”菜单命令，弹出元件对话框（按钮编辑器），如图12

16、-2-3所示。在按钮编辑器中可以创建按钮在不同状态时的图像。,图12-2-3 元件对话框,12.2 “游泳卡通人”动画,（4）在“释放”选项卡中（即按钮的一般状态），为按钮添加文本标注。使用工具箱中的“文本”工具，然后在按钮中输入文字“新闻动态”，如图12-2-4所示。,图12-2-4 “新闻动态”文本,12.2 “游泳卡通人”动画,（5）使用工具箱中的“指针”工具，单击选中按钮的矩形图形，按住Shift键，同时单击输入的文字，将它们都选中。在Fireworks中应用“对齐”命令时，通常是使移动后选择的对象与先选择的对象对齐，所以此处应先选择矩形后选择文本，以保证矩形不动。图12-2-4 “新闻动态”文本 （6）单击“修改”“对齐”“垂直居中”菜单命令，再单击“修改”“对齐”“水平居中”菜单命令，将“新闻动态”文本移至矩形的中心，如图12-2-4所示。 （7）单击按钮编辑器中的