Dreamweaver4神童教程之十一

2008-02-23 06:17:39来源：互联网阅读 ()

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 ）

图九