如何在Dreamweaver中制作复杂交换图像

 

  今天给大家介绍的是在Dreamweaver中制作出一列7个按钮的图片,并且在这一列的按钮图片的前面加上一个指针,我们要实现的效果是当我们在将鼠标移向某一个按钮图片的时候,这个按钮上面的文字变换颜色。听起来有点复杂?没关系,跟着来实操一遍体会一下!


  制作原理

  交换图像的制作原理是应用到Dreamweaver中的行为面板上的翻转图像(Swap image)这一个工具。将它设置成为当产生鼠标悬停在某一个按钮图片的动作的时候,让按钮本身实现一个图像的交换(交换成为黄色文字的图片),与此同时设计指针图像的交换(交换成为指针指向当前按钮的指针图片),以实现上述效果的实现。

  其实网页上的一些东西看起来似乎很神秘,可究其根源它也只不过是几张图片或几个图层的简单变化而已。

  制作材料

  这里演示的是7张按钮图片的翻转,所以,我们需要14张按钮图片和7张指针图片共21张图片的制作来实现所示效果。其中7张前台按钮图片分别命名为B1-1~B1-7,7张后台按钮图片分别命名为B2-1~B2-7,其中7张指针图片分别命名为Z1~Z7,它们的指针分别指向第一到第七个按钮。您可以用Fireworks等图片制作软件来制作按钮图片。

  制作方法步骤

  1、建立网页文件。

  2、插入一个7乘2的表格,并且把左面的一列表格合并,用来插入指针图片。而右面的七个表格用来插入按钮图片。

  3、在左面的表格中插入第一张指针图片Z1,在右面的7行单元格中分别插入蓝色的前台按钮B1-1~B1-7(效果如图2所示)。


  图2

  4、点击“窗口(Windows)→行为”,调出行为面板。

  5、选中第一个要设置行为的图片,这里是写有“指导思想”的按钮图片,即图片B1-1。

  6、点击加号按钮,在弹出菜单下选择交换图像(Swap image),弹出交换图像对话框。我们的主要部分的设置将在这个对话框中进行。

  7、点击对话框当中的浏览按钮,然后选择好这张按钮图片将要翻转成的目的图片,在本例中是带有黄色文字的按钮图片,即图片B2-1。然后点击确定。

  8、重复第6步的操作,在图像的文本框中选中指针图片Z1,然后,再次点击浏览按钮,把它翻转成第1个指针文件,即Z1。点击确定。完成上述操作后,行为面板上的显示结果如图3所示。


  图3

  9、选中第2张按钮图片B1-2,按照上面的方法将它本身翻转成按钮B2-2,并且将指针图片翻转成第2号指针图片Z2。

  10、依以上步骤,分别将下面5张图片分别设置成为交换图像的行为。

  11、按F12预览,把鼠标的指针悬停在每张图片上,怎么样,感觉还不错吧?

 

时间: 2024-10-09 21:19:19

如何在Dreamweaver中制作复杂交换图像的相关文章

如何在Dreamweaver中制作细边框表格

  具体制作步骤如下: 通过利用背景颜色与间距制作细边的表格教程的介绍,大家在Dreamweaver中插入一个表格,若设置其"边框(Border)"为1,预览时其边框线较粗. 以制作一个4行3列.边框线为红色细线的表格为例: 1.在Dreamweaver的设计视图中插入一个4行3列的表格. 2.在"属性"面板中设置此表格的属性如下:边距(CellPad)根据需要自行设置值(例如10);间距(CellSpace)为1;边框(Border) 为0;背景颜色(Bg Col

如何在Dreamweaver中制作表格美化页面

dreamweaver|页面 本文选自4u2v工作室编写的<Dreamweaver网页设计与制作100例>(人民邮电出版社出版,ISBN: 7115142394 ).未经著作权所有者书面授权许可,禁止转载本文. 购买地址:点击访问 在浏览网页的时候可以发现,很多用于网站排版的表格都是经过美化处理的,这些表格不仅起了布局排版的作用,而且在很大程度上美化了网页,使网页看起来更加漂亮.新颖. 效果说明 利用表格美化页面的方式有很多种.本例制作出来的带有层次感的表格如图 8-1 所示. 创作思想 利用

Dreamweaver中制作表格细边框的方式方法

Dreamweaver虽然为用户提供了定义表格边框的属性Border,但是很多用户不喜欢用它,因为感觉它的样子很粗糙,达不到我们预期的效果.小编应广大考生的需要,特为参加考试的考生策划了"Dreamweaver中制作表格细边框"专题等有关资料,供考生参考! 制作表格细边框 Dreamweaver虽然为用户提供了定义表格边框的属性Border,但是很多用户不喜欢用它,因为感觉它的样子很粗糙,达不到我们预期的效果.我们可以利用Dreamweaver的另外一个表格的属性CellSpace(单

如何在PPT中制作镂空文字

  如何在PPT中制作镂空文字        1.打开PPT2013,插入一个矩形,输入文字若干,调整大小,摆放到合适位置: 2.按住Ctrl键,鼠标左键单击,同时选中文字与色块(先选中色块,再选中文字): 3.单击格式>合并形状>剪除,就能得到最基本的镂空文字设计: 4.接下来把它放到一张图片前看看效果: 5.掌握了最基本的操作以后,就可以尽情发挥创意,可以看看下面的一些例子: 6.同理,插入的形状与形状之间.形状与图片之间也可以实现这种效果,操作方法也如出一辙: 7.总结 最核心工具:合并

如何在Dreamweaver中快速定义站点?

dreamweaver|站点 本文选自4u2v工作室编写的<Dreamweaver网页设计与制作100例>(人民邮电出版社出版,ISBN: 7115142394 ).未经著作权所有者书面授权许可,禁止转载本文. 购买地址:点击访问 在 Dreamweaver 中建立站点,是进行网站开发的第二个关键步骤.这里所讲的建立站点,其实就是在 Dreamweaver 中定义站点.策划站点结构.部署开发环境.定义站点是为了更好地利用[文件]面板对站点文件进行管理,也是为减少一些错误的出现,如路径出错,链接

如何在Dreamweaver中批量处理图片方法

  对于网页制作者来说,最烦琐的事情可能就是给页面中的图片或文字加链接了.假如页面内容很多的话,那么所做的工作只能用恐怖来形容.下面我们就来学习一下Dreamweaver中批量处理图片方法 . 首先启动Dreamweaver,建立好站点后,选择Command(命令)>Create Web Photo Album(制作Web影集),打开Create Web Photo Album. 然后在Photo Album Title后的文本输入框中输入影集的名称.在这里输入的文字我们建议最好输入英文字母,不

如何在ppt2007中制作流程图

  在ppt2007中制作流程图的方法: 打开需要插入组织结构图的PPT,然后在最上方的菜单栏上点击"插入",然后点击下方工具栏上的"SmartArt",参见下图: 在弹出的"选择SmartArt图形"窗口上,选择"层次结构",再用鼠标左键点击最左上方的那个图标即可插入组织结构图了: 根据需要在各个框中输入相应的信息,参见下图: 如果需要录入更多的同级组织结构,那么可以点击鼠标右键选中任意文本框,在弹出的快捷菜单中,选择&qu

如何在ppt中制作柱形图

  在ppt中制作柱形图的方法: 首先,打开PPT文件.点击开始选项卡中的"新建幻灯片",如图所示. 在"新建幻灯片"菜单中,点击"标题和内容",如图所示. 在幻灯片编辑区域点击"插入图表",如图所示. 在弹出的"插入图表"对话框中,单击插入"簇状柱形图",如图所示. 此时会自动打开一个相应的Excel表编辑区域. 我们可以把原先准备的Excel表中的内容复制到这张表中,如图所示. 簇状

如何在Dreamweaver中进行数据库连接

在实例<构建开发环境>中已经为开发网络应用程序构建好了开发环境,但要开发网络数据库,还必须做好数据库的连接工作.从本实例开始 将以一家玩具公司电子商务平台的开发为例,详细讲解 Dreamweaver+ASP.NET+Access 网络数据库的开发过程.本实例主要讲解数据库连接技术. 效果说明 通过单击[数据库]面板中的[ OLE DB 连接],创建与 Access 的数据库连接" dwconn ",结果如图 75-1 所示. 创作思想 某玩具公司电子商务平台的数据库由 Dr