巧用Dreamweaver制作复杂图像
作者：张策 来源：赛迪网 发布时间：2010-09-02 12:34:00
有些网页制 * 好者提出了这样一个问题——怎么使用Dreamweaver制作出交换图像来。今天，我向大家介绍制作复杂交换图像的方法，相信能够对大家有所帮助。
制作效果
我们要制作出一列7个按钮的图片，并且在这一列的按钮图片的前面加上一个指针，我们要实现的效果是当我们在将鼠标移向某一个按钮图片的时候，这个按钮上面的文字变换颜色。并且指针指向这张图片(效果如图1所示)。
图1
制作原理
交换图像的制作原理是应用到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预览，把鼠标的指针悬停在每张图片上，怎么样，感觉还不错吧？
总结
当我们学习一种新的网页制作技术时，千万不要只停留在表面，一定要仔细用心琢磨，在基本的网页技术的基础上，不断地有自己的创新，也只有这样才可以制作出有自己特色的网页图片来，不断地丰富自己的主页空间。
0
投稿猜你喜欢
Oracle的分析函数功能非常强大，工作这些年来经常用到。这次将平时经常使用到的分析函数整理出来，以备日后查看。我们拿案例来学习，这样理解起- 一、DatasetDataset 类提供一种方式去获取数据及其标签主要有两个目的：获取每一个数据及其标签获取数据的总量大小1. 在控制台进行
- 前言最近在搞 Python 课程设计，想要搞一个好看的 UI，惊艳全班所有人。但打开 Qt Creator，Win7 风格的复古的按钮是在让
- 小主我总结了一下，看官仅供参考。具体运行时间，要看电脑，程序复杂程度，截图大小，原本为四个方法，后面又发现了一种。补上运行熟练度等因素。方法
- 1.用CSS实现布局让我们一起来做一个页面，首先，我们需要一个布局。请使用CSS控制3个div，实现如下图的布局。考察应试者的基本布局知识—
- 代码如下:---这是一个人事系统中的示例，要求记录一下员工的缺勤情况 ---1.要在表中记录一下缺勤计分，是对经常缺勤者的一种处
- 一 模板语法传值方式一：# urls.pypath('template', views.template)# views.p
- 字符串和切片（string and slice）string底层就是一个byte的数组，因此，也可以进行切片操作。package maini
- 目录1、连接MongoDB2、指定（切换）数据库3、指定（切换）集合4、插入数据5、查询数据6、统计查询7、结果排序8、偏移9、更新数据10
- 调用pytorch内置的模型的方法import torchvisionmodel = torchvision.models.resnet50
- 今天在编写PHPDoc的导出文档的时候发现一个很郁闷的错误，虽然这个warning不是什么重要错误，但是看着总是很不爽的。于是就去网上找了很
- 看代码吧~import pymongofrom dateutil import parserdateStr = "2019-05-
- Pandas 处理数据的效率还是很优秀的，相对于大规模的数据集只要掌握好正确的方法，就能让在数据处理时间上节省很多很多的时间。Pandas
- 01、函数参数和返回值的作用函数根据 有没有参数 以及 有没有返回值，可以相互结合，共有四种：无参数 无返回值无参数 有返回值有参数 无返回
- 本文实例为大家分享了TensorFlow实现Logistic回归的具体代码，供大家参考，具体内容如下1.导入模块import numpy a
- 怎么增大MySQL数据库连接数，MYSQL数据库安装完成后，默认连接数是100，流量稍微大一点的论坛或网站这个连接数是不够哟用
- 使用python脚本实现查询火车票信息的效果图如下：实现的代码：# coding: utf-8"""命令行火车
- 可用性研究表明，当响应时间超过一秒钟时，用户便能够有所察觉。虽然在反馈系统中，当用户需要等待时，更好的解决方案的是应该采用确定性的进度条。但
- 一、问题描述如题，在使用pip install xxx的方法安装python库，或者是基于python的软件时，报错“E
- 方法一：直接右键，将文章路径复制下来点击Copy full Xpath使用selenium+lxml中的etree进行配合使用，使用etre
