在网上翻滚

答案：     在网上翻滚
  作 者 : 汤春湘 
  
  
  　 　  具有动态效果的网站，总是比普通网站更加吸引人。有的动态效果可以由网页平面设计师独立完成，例如 GIF 动画；而有一些需要交互的动态效果，例如：使网页中的图形能够感应鼠标的经过或点击动作而做出相应的变化——即所谓的 Rollover 翻滚效果，则需要在 HTML 文件中插入 javascript 程序。这时，您可能会感觉束手无策，不得不寻求网页程序员的帮助。 
  
  　 　 大约就在一年多以前，这样的事情对于专长于平面设计的人来说，还是一道“槛儿”，尽管实现这种效果的 javascript 程序并不太难，可是编写出来毕竟要花费一番功夫。 
  
  　 　 现在好了，有好几种新型的设计工具可供您选择，您完全不需要编写任何的程序代码，仅仅是用鼠标做一些设定，就可以获得这种动态交互的“翻滚效果”。 
  
  　 　 这些工具可以分为两类，一种是类似 Photoshop 的图形工具，它们是专门为 Web 图形设计而推出的；另一类，则是“所见即所得”的 HTML 网页编辑工具，使用这些工具来创建翻滚效果同样简单不过，如果您已经事先做好了相应的图形的话。 
  
  
  --------------------------------------------------------------------------------
  
  　 　 
  
   具备翻滚效果功能的设计工具  
  
   Macromedia FireWorks 2 
  
   　 　 Adobe ImageReady
   
  
   　 　 Adobe ImageStyler
   
  
   　 　 Macromedia DreamWeaver 2
   
  
   　 　 Adobe GoLive!
   
  
   　 　 Microsoft FrontPage 2000/98
   
  　 　 
   
   
  　 　 本文将分别介绍六种不同的设计工具制作 Rollover 翻滚效果的方法。 
  
  　 　 如果您还没有决定好到底使用哪个软件作为您的设计工具，以下是给您的建议： 
  
  如果您是 Photoshop 专家，则应该首选 Adobe ImageReady ，它的最新的 2.0 版本已经成为 Photoshop5.5 的一部分，它的界面和 PhotoShop 非常统一，您可以很快的熟悉并掌握；如果您是网页设计爱好者，建议尝试一下用 Adobe ImageStyler 创建翻滚效果，这个软件是非常容易使用的，在阅读本文之前，您还可以看看另外一篇已经发表的文章 《 Web 图像制作新秀—— ImageStyler 轻松入门》 ；假如您一直都喜欢用 Freehand 或者其他 Macromedia 公司的设计工具， Macromedia FireWorks 2 应该会比较适合您。 
  
  Macromedia DreamWeaver 2 、 Adobe GoLive! 4 、 Microsoft FrontPage 2000 则是三个功能强劲的所见即所得 HTML 编辑软件。 Macromedia DreamWeaver 2 是新一代所见即所得 Html 编辑软件的典范，它能帮助你利用格式表和 DHTML 建立观感极佳的页面，而且不会打乱你的原始代码，它还可以帮助你制作两种主流浏览器都能正常浏览的页面。 Adobe GoLive! 4 则是新秀，它的图案设计工具让您排版时拥有象素方面的控制。另有灵活的原始码编辑器帮助您编写，修改和检查您的 HTML 。再加上使用简易的动态 HTML ，多层式样板， QuickTime 编辑，简易使用的 javascript 动作及先进的网址管理功能。 Microsoft FrontPage 2000 刚刚出来，它的前期版本 FrontPage98 是从前的领先者，总的来说，它最适合入门者使用，只要你会用 Word ，就不难学会 FrontPage 。 
  
  　 　 什么样的浏览器可以看到翻滚效果？ 
  
  带有翻滚效果的网页在 Internet Explorer3.0 和 Netscape3.0 以上版本的浏览器中浏览应该都不会有问题。实际上，只要是支持 javascript 程序的浏览器，都可以看到翻滚效果。 
  
  　 　 
  
  　 　 好吧！让我们现在就开始，“在网上翻滚”。 :)
  
  
  --------------------------------------------------------------------------------
  
  　 　 
  
  　 　 
  
   用 Fireworks 2 制作翻滚效果 
  　 　 
  
  　 　 尽管你根本不用考虑 javascript 程序代码的编写，你还是应该对后台发生的事件有一点了解，掌握翻滚效果是如何运作的：当鼠标经过 Web 页面中某一个图形时，它会自动被另外一副预定的图形替换。所以，虽然制作软件有所不同，方法也有区别，但是基本的原理是一致的。不管在哪个软件中制作翻滚效果，有三样东西不可缺少：原始图形、替换图形、控制图形切换的 javascript 动作。 
  
  　 　 
  
  　 　 1. 在画布上画一个圆。 从 File 菜单选择 New ，定义画布尺寸（ Canvas Size ）为 370 象素（ Pixels ）宽， 200 象素高，选择数值为 #ffcc00 的黄色作为画布的颜色。使用椭圆（ ellipse ）工具，在画布上拖出一个圆形，注意在拖动的同时按下 Shift 键。马上给这个圆上色，单击工具箱下部的 Fill Color Well （填充颜色井），从弹出的色盘中选择数值为 #0066cc 的蓝颜色作为填充色。 
  再来定义圆的轮廓线。打开 Stroke （笔划）面板，在面板顶部的 Stroke Category （笔划种类）菜单中选择 Basic ，使用 Soft Line （软线）作为笔划的形式，选择数值为 #003399 的深蓝色作为圆的轮廓颜色，定义笔划宽度为 2 个像素。点击面板底部的 Apply （应用）按钮。 
  
  没找到 Stroke 面板？ 别着急，你可以从 Window>Stroke 直接打开它。另外，如果你想在修改参数的同时立刻看到应用的效果，可以勾选面板左下角的“ Auto-apply Changes （自动应用修改）”选框。 
  
  　 　 
  
  
  --------------------------------------------------------------------------------
  
  　 　 
  
  　 　 2. 添加图形和文字。 Fireworks 本身带有许多图形处理功能，既可以绘制无极缩放的矢量图，也能够处理扫描的位图。你还可以从其他的应用程序中导入图形或图像，诸如 Photoshop 、 Freehand 、 Illustrator 等。 
  要导入已经设计好的图形，你可以直接把图形从创建它的应用程序窗口，拖放到 Fireworks 的画布窗口中。在此，我们从 Illustrator 中拖入一个设计好的路径图，然后在 Fireworks 的画布窗口中调整图形的大小，使它刚好被蓝色的圆包围。最后输入图标下的文字。 
  导入图形文件 有三种方式，其中最好的方法是拷贝和粘贴，如果创建图形的程序和 Fireworks 都同时打开了的话，你可以从其它程序拷贝图形，然后粘贴到 Fireworks 中来。最简单的导入方法则是前面介绍的拖放，这种方法唯一麻烦的事情是，你可能不得不先调整两个程序主窗口的大小，以便你能够同时看到它们。另外，你也可以从 File 菜单中选择 Import 命令，直接从硬盘中导入图形， Fireworks 支持大多数流行的图形文件格式。 
  
  　 　 重复步骤一和步骤二，绘制另外两个导航图标。 
  
  
  --------------------------------------------------------------------------------
  
  　 　 
  
  　 　 3. 复制 Frame 。 这个步骤将会创建一个新的帧，这一帧中的图片只有当鼠标的经过其上方时，才会显示出来。 
  打开 Frame 面板，按面板右上角的  按钮，从弹出菜单中选择 Duplicate Frame （复制帧）命令。注意在弹出的对话窗口中选择 After current frame 选项，以使复制的帧自动排列在原始帧下面，成为 Frame2 。 
  用选取工具选择第一个圆，按住 Shift 键，再选择下方的文字。马上从“填充颜色井”中选取一种接近桔红（ #ff6600 ）的颜色进行填充。 
  再用同样的方法去改变另外两个导航图标的颜色。 
  
  注意： 做上述操作时，应该确保新创建的帧 Frame2 处于被选定状态，才不会引起不必要的混乱。 
  
  你还可以尝试着利用 Fireworks 中内置的丰富样式（ Style ），来增进变化的效果。不过，在这个范例中，仅仅是改变一下图标的颜色就足以让人感到满意了。 
  
  
  --------------------------------------------------------------------------------
  
  　 　 4. 切割图片。 从工具箱中选择“ Slice Tool ”（切片）工具，用它在讨论组的图标上拖出一个矩形，注意应该让矩形全部覆盖掉整个图标。同样的方法，在另外两个图标上切出两个矩形切片来。所谓的“切片（ Slice ）”，就是如右图所示的覆盖在图形的上方，半透明的绿色方块。你还可以用 Point 工具对切割区域的大小和位置进行调整。 
  
  还要修改被切片覆盖下的图形怎么办？ 切片实际上位于一个特殊的叫做 Web Layer 的层上，要对它所覆盖的图形进行修改，点击 La

上一个：字符掉下来
下一个：主页制作拾零