Dreamweaver 4 简明教程(八、为网页增添互动效果)

文章类别：Dreamweaver | 发表日期:2008-9-18 10:49:05

八、为网页增添互动效果

　　制作简单的互动效果

　　在网页上经常看到这样的效果，当鼠标移到一张图片上的时候，原来的图片就切换为另一张图片，鼠标移开后，又恢复原来的模样，是怎么做的呢？在开篇的时候，提到Dreamweaver比Frontpage优胜的其中一个地方是Dreamweaver能做出能具互动性的网页。现在，我们就利用Dreamweaver制作这个最简单的互动效果——变换图片。

　　预备两张大小相同的图片，一张是鼠标还没有移上的状态，另一张是鼠标移上去后的图片，例如以下两图，左图是一个凸起的按钮，右图是一个凹下的按钮：

　　点击对象面板上的

，看到如下的对话框：

　　① Image Name：变换图片效果的标记名称，Dreamweaver会自动分配；

　　② Original Image：指定原始的图片，（例如这里是凸起的图）

　　③ Rollover Image：指定鼠标移上去后的图片（例如这里是凹下的图）；

　　④ Url：图片的链接网址；

　　例如按照上图的设置完毕后，按下OK，然后可以按F12预览一下效果了。

上一篇：Dreamweaver 4 简明教程(八、为网页增添互动效果2) 人气:2459
下一篇：Dreamweaver 4 简明教程(七、网页的排版4) 人气:2434

Dreamweaver视频教程

视频教程列表

计算机基础入门及办公自动化:

网页制作开发视频教程:

平面广告设计视频教程

初级程序设计及ASP动态网站开发

Asp.net动态网站开发视频教程

Flash 动画角本编程视频教程

文章教程搜索

Dreamweaver推荐教程

Dreamweaver热门教程

.设计优秀网页背景及设计方法(5)

.设计优秀网页背景及设计方法(4)

.设计优秀网页背景及设计方法(3)

.设计优秀网页背景及设计方法(2)

.设计优秀网页背景及设计方法(1)

.谷歌有用的Chrome插件(6)

.谷歌有用的Chrome插件(5)

.谷歌有用的Chrome插件(4)

.谷歌有用的Chrome插件(3)

.谷歌有用的Chrome插件(2)

.谷歌有用的Chrome插件(1)

.seo优化：GA的Universal Analyti

.seo优化：GA的Universal Analyti

.seo优化：2012年应用最热的SEO工

.seo优化：seo团队如何去领导生存

.seo优化：完全依赖PV是不可取的

.网页制作技巧:网页无障碍说明标

.网页制作技巧:网页无障碍说明标

.网页制作技巧:网页无障碍说明标

.网页制作技巧:网页无障碍说明标

.网页制作技巧:网页无障碍说明标

.建站经验：Firefox+Firebug代码安

.建站经验：Firefox+Firebug代码安

.如何用图谱为网站规划内容

.Alexa排名作弊常见方法（2）

.Alexa排名作弊常见方法（1）

.网页设计师：如何代码控制Retina

.网页设计师：使用Illustrator设计

.网页设计师：如何创建Retina图像

.seo教程：个人博客如何选择虚拟主

看全部视频教程
购买方式/价格
:	咨询客服
tel:15972130058

Windows操作 [文]	Word教程 [文]	Excel教程 [文]	PowerPoint [文]	Dreamweaver [文]	Fireworks [文]
Flash教程 [文]	PhotoShop [文]	CorelDraw [文]	C语言教程 [文]	Html教程 [文]	Div+Css布局 [文]
Javascript [文]	ACCESS数据库 [文]	ASP教程 [文]	SQLServer [文]	ASP.NET教程 [文]	FlashAS [文]

Word教程网	Excel教程网	Dreamweaver 教程网	Fireworks教程网	PPT教程网	FLASH教程网	PS教程网
HTML教程网	DIV CSS教程网	FLASH AS教程网	ACCESS教程网	SQL SERVER教程网	C语言教程网	JAVASCRIPT教程网
ASP教程网	ASP.NET教程网	CorelDraw教程网