中文(简体)
中文(简体)
中文(繁体)
한국어
日本語
English
Português
Español
Русский
العربية
Indonesia
Deutsch
Français
ภาษาไทย
首页
源码下载
编程相关
建站资源
书籍教程
网页设计教程
网络编程教程
手游
手机软件
文章
首页
>
网页设计教程
>
Dreamweaver教程
Dreamweaver 4 简明教程(八、为网页增添互动效果)
作者:Eve Cole
更新时间:2009-05-30 18:35:37
八、为网页增添互动效果
制作简单的互动效果
在网页上经常看到这样的效果,当鼠标移到一张图片上的时候,原来的图片就切换为另一张图片,鼠标移开后,又恢复原来的模样,是怎么做的呢?在开篇的时候,提到Dreamweaver比Frontpage优胜的其中一个地方是Dreamweaver能做出能具互动性的网页。现在,我们就利用Dreamweaver制作这个最简单的互动效果——变换图片。
准备两张大小相同的图片,一张是鼠标还没有移上的状态,另一张是鼠标移上去后的图片,例如以下两图,左图是一个凸起的按钮,右图是一个凹下的按钮:
点击对象面板上的
,看到如下的对话框:
①
Image Name:变换图片效果的标记名称,Dreamweaver会自动分配;
②
Original Image:指定原始的图片,(例如这里是凸起的图)
③
Rollover Image:指定鼠标移上去后的图片(例如这里是凹下的图);
④
Url:图片的链接网址;
例如按照上图的设置完毕后,按下OK,然后可以按F12预览一下效果了。
相关文章
Dreamweaver 4 简明教程(二、初步认识 Dreamweaver)
2009-05-30
Dreamweaver 4 简明教程(三、制作前的准备工作——定义网站)
2009-05-30
Dreamweaver 4 简明教程(四、从最简单的网页开始)
2009-05-30
Dreamweaver 4 简明教程(五、让你的网页更漂亮之一)
2009-05-30
Dreamweaver 4 简明教程(五、让你的网页更漂亮之二)
2009-05-30
Dreamweaver 4 简明教程(五、让你的网页更漂亮之三)
2009-05-30
Dreamweaver 4 简明教程(五、让你的网页更漂亮之四)
2009-05-30
Dreamweaver 4 简明教程(六、建立超级链接)
2009-05-30
Dreamweaver 4 简明教程(七、网页的排版)
2009-05-30
Dreamweaver 4 简明教程(七、网页的排版2)
2009-05-30
Dreamweaver 4 简明教程(七、网页的排版3)
2009-05-30
Dreamweaver 4 简明教程(七、网页的排版4)
2009-05-30