Dreamweaver4神童教程——翻滚图
摘自赛迪网（小雷）

　　想让你的网页动起来？想让你的网页更具交互性？没问题，本章将专门就 Dreamweaver 的动态网页技术进行讲解。

　　谈到动态网页技术，就不得不谈一下 DHTML 动态网页技术标准。1998 年，W3C 组织公布了最新的 HTML 4.0 版本，新版本将原来的 HTML 语言扩展到一些全新的领域，如 CSS 、Script 、框架结构等，成为了真正的动态 HTML 语言（简称 DHTML ）。其中，CSS 与 Script 脚本语言是新规范的核心。

　　正是由于动态网页标准的确立，Dreamweaver 的动态网页制作技术得到了支持，从而让我们创建丰富多采，灵活互动的"活"网页变为可能。

一．翻滚图基础：

　　动态网页技术中，翻滚图是比较简单的，但它的效果却非常明显，因此常常可以在各大网站见到这种效果。

　　所谓翻滚图，就是当鼠标移动一幅图像上时，该图像变成另外一幅图像，当鼠标离开图像时，图片又还原成原来的模样。如图一是天极网（http://www.yesky.com）首页上的图像：

图一

　　当鼠标移上图像时，原图变成图二的图像：

图二

二．创建翻滚图：

Insert/Interactive Images/Rollover Images 命令可以创建翻滚图，其对话框如图三：

图三

Image Name：翻滚图名称，不要用中文。本参数主要用来作为 Javascript 的调用对象，一般采用默认名字就行了。

Original Image：原始图片，即一般情况下的图片，可以通过点按右边的文件夹标志在硬盘上找到该图片。

Rollover Image：翻滚图片，就是当鼠标移上原图时要用哪张图片代替原图。

Preload Rollover Images：预取翻滚图，建议勾选，因为它可以在页面打开时就先读取资料，而不是当鼠标事件发生时才读取，有利于保持动作的流畅性。

When Clicked , Go to URL：用鼠标点击翻滚图时跳转到哪个链接页面，可以是绝对地址，也可以是相对地址。

三．翻滚图实例：

＜1＞．一对一的简单翻滚图：

　　下面，我们要制做一个简单的翻滚图，当网页打开时，图片如图四；当鼠标移上图片时，原图翻滚，替换成图五。（最终结果见 Resource.zip 文件中的 14.htm ，所用图片在 Image 文件夹中，名字分别为 School-1.gif 与 School-2.gif ）

图四


图五

1.在 Dreamweaver 的编辑窗口中，点按 Insert/Interactiv Image/Roolover Images ，然后在弹出的窗口中分别指定源图像（School-1.gif），翻滚图像（School-2.gif），最后点按 OK 。如图六：

图六

2.保存页面，然后打开该页面，就可以看到效果了。（也可以按 F12 键进行预览。）

本例中，一幅图控制另外一幅图，因此我们称其为一对一的翻滚图。

＜2＞．一对多的复杂翻滚图：

Dreamweaver 还能创建一对多关系的复杂翻滚图，如图七：

图七

图七是一个完整的页面，当将鼠标移上右下边三个图标时，原先的图标会改变，同时在左边区域显示该图标所代表的信息。如图八：

图八

现在我们来看一下如何制作这种网页。（详细情况可以查看 15.htm 文件）

1.页面分析：

网页中共有 Banner （ Resource.zip 文件中的 School-logo.gif 文件），左边的大图（Computer.jpg），右边有三个图标（phone.jpg ; skill.jpg ; tea.jpg ），以及文字信息。

另外，我们知道，所谓翻滚图就是鼠标移上去后发生图片替换的事件，无论是一对一，还是一对多，都离不开这个原理。因此，要产生最后的效果，我们还得有几个替换图片。

Phone.jpg 对应的图片是 Phone-2.jpg
skill.jpg 对应的图片是 skill-2.jpg
tea.jpg 对应的图片是 tea-2.jpg
除了这些图片，我们还得制作一个白色图片（blank.gif），作为一般状态下三个图标左边的显示图片；当鼠标移上三个图标时，本白色图片由相应的图标信息图片替换。
Phone.jpg 对应的图片信息：hint-phone.gif
skill.jpg 对应的图片信息：hint-skill.gif
tea.jpg 对应的图片信息：hint-tea.gif

提示：为什么是白色图片？因为我们的网页底是是白色的，如果你要把网页底色改为黑色，那就得制作一个黑色图片，总之，该图片在一般状态时，访问者应该看不到才行。

好了，页面元素分析完毕，所用到的包括白色图片在内，一共有十二张图，大家都可以在 Resource.zip 压缩包的 Image 文件夹中找到。

2.页面规划：
　
　　根据刚才的分析，我们制作一个如图九的表格：（为了大家看得更清楚，我们将表格边界设为可见，同时边界颜色为红色，但在实际制作中它只起一种定位作用，所以不要也把边界参数设为 1 ）

图九

1 区我们放 School-logo.gif 图片，2 区放 Computer.jpg 图片，三区放文字，四区再做一个四列一行的表格，分别放 blank.gif 、phone.jpg 、skill.jpg 、tea.jpg 图片。

提示：这里我们使用表格，主要是为了让网页各元素被严格控制，避免因图片的替换产生网页元素混乱的问题。

3.设置行为：

　　前面我们讲的一对一的翻滚图，用到的是 Insert/Interactive Images/Rollover Images 插入命令，现在要实现一对多的翻滚效果，这个插入命令就无能为力了。这时我们得用行为（Behavior）来创建动态效果。至于什么是行为（Behavior），如何设置与应用 Behavior ，我们将在下一节中讲到，这里大家不需要掌握，只需一步一步跟着我们做就行了。

上一页12 下一页