上面是一个简单的关于"友情链接"的页面（就是本站的“友情链接”栏目），看似简单，要满足网页"美观＋下载快"的要求还是小有技巧的。我们当然不至于来个 800 ＊ 600 象素的大背景图，而是采用了左下角的仕女图（ 201 ＊ 299 ，也可进一步进行无缝切割），"友情链接"四个字构成的小图，返回按钮及由几条蓝色带子构成的背景图（此图采用 4 色 gif 图像，大小不会超过 8K ）。好，现在我们在此基础上看看用 DREAMWAVER 来制作该页面的过程：
页面元素定位。用层你会发现原来一切这么简单！
建立层只需 Insert ＞ Layer （插入＞层）。或者从 Objects( 物件）面板中点 按钮，这时鼠标会变成十字形，你拖动鼠标就可插入一个层。然后对层可以通过其上的八个小控点进行拖动，放大缩小等。另外可以选择该层，在属性面板中对其进行设定。
我们在页面上插入四个层，并在每个层中依次插入页面中用到的元素（或空着），然后大致移到合适的位置并调整层到适当的大小，如下图： （图二）
点菜单 Modify ＞ Layout Mode ＞ Convert Layers to Table （修改＞布局模式＞层转化为表格），随后出现的对话框： （图三）
Most Accurate 最大精确度 , Smallest: （ Collapse Empty Cells ）指的是各个层的边缘因为是手动画的，可能对的不齐，比如你本想让图二右边的两个层右边线在同一垂直线上，但实际画的会有些误差。如果选中该项，那么凡位置相差 4 个象素的层都会自动对齐。 Use Transparent GIFs 将用透明 GIF 图像来填充表格最后一行。这样做可以保证表格在所有的浏览器里看起来都没有变化。也就是保证了表格定位与层定位的严格一致。如果不选该项，在不同的浏览器里可能会有少许差异。 Center on Page 表格在页面中央。否则为左对齐。 设定好后，看看结果是否符合你的设想： （图四）
看，由层转化的表格定位很准确吧。比起自己直接插入表格再合并对齐之类的方法效率高了很多。
１、选中整个表格，将表格背景图设为预先做好的蓝带子背景
这里要提醒一下，如果你恰好选用了大背景图，比如适应 800 ＊ 600 分辨率的大底图（一般要为单色或 4 色以下，以减小图形文件大小），那就不应在页面属性中将其设为背景图，而要设为相应大小的表格的背景图。否则在 1024 ＊ 768 分辨率下效果就会大打折扣。
２、用Behaviors工具添加动态效果
为了使页面更浪漫些，设想加两个特殊效果：一个是鼠标放到仕女图片上时页面空白处显现出一首诗来，另一个是更常见的图片变化的效果，即鼠标放到返回按钮上时按钮颜色改变（其实是两张图片做个交换）。
这当然是 JavaScript 的拿手好戏，但我们可不想用它编码。因为这些任务在 Dreamweaver 中很容易实现。
先添加一个层，将该层的 Vis 属性设为 hidden （即该层一开始是看不见的）。在层中输入诗句，你不会忘记在有文本的地方用样式表吧？（ F7 调出样式表窗口，将 .unnamed 的 size 定义为 9 即可）。
打开 Behavior 工具条（按 F8 ）。选中左下角的仕女图，按下 Behavior 面板中的＋号，选 Show-Hide Layers 项 ，随后对话框中，出现了刚才定义的层，我们选中该层，并按下" show "按钮即可。
第二步是使返回按钮有点儿动态效果，有两种方法可以实现，最简单的就是从 Objects( 物件 ) 面板中点按钮 ，你在对话框中直接输入要替换的两个图片路径名称就行了。为了使这个例子更具代表性，我们仍然用 Behavior 来实现。
同样的，先选中返回按钮的第一个图片，打开 Behavior 面板，按＋号选 Swap Image 项，出现对话框： （图五）
只须点击 Browse 按钮选中准备替换的图片即可。
Dreamweaver 有很多 JavaScript 函数 - 文档重定向、图像交换、打开窗口还有改变 layer 可视性的方式。用法与上面大同小异，你自己试试看吧。
３、 Dreamweaver另一个令人眩目的工具：Timeline，让你的层活动起来，直观地体现一下DHTML的动态效果。
单击 WINDOWS ＞ Timelines （或按Ｆ９）启动时间线，如果您以前接触过 MACROMEDIA 公司的 FLASH, 就会发现 TIMELINE 的使用与在 FLASH 中的用法如出一辙。
我们要实现的这个例子，是让一只小蝴蝶从屏幕左边飞到屏幕右边。首先我们用在前面讲述过的层来新建一个层，在层中插入小蝴蝶的图片（你可以用你的任何图片替代，不可太大）， F9 打开 TIMELINES 面板，拖动层至 TIMELINES 中，松开鼠标，再用鼠标选择最后一个关键帧（我们选为第 120 帧），将层拖放至屏幕右上角，选中 AUTOPLAY 和 LOOP 项。您会看到如下图的情况： （图六）
好了，按 F12 看看效果，蝴蝶翩翩飞！
给没用过 FLASH 的朋友们稍微解释一下时间线的用法：表示您目前编辑的时间线，表示返回最前面的一帧，表示返回至前面的一帧，表示返回至后面的一帧， AUTOPLAY 表示当前页面在浏览器中打开后是否自动执行这个时间线， LOOP ：循环执行。圆圈代表关键帧，表示发生在对象上的时间。 LAYER １是层名，红色的小块表示当前操作的帧。
４、给 Dreamweaver3.0 增加 Objects 控件
Dreamweaver3.0 增加了相当多的 Objects 控件及不少的 Behaviors, 应该可以满足我们的大部分需求了，但就象 Photoshop 有无数的 plug-in 一样， Dreamweaver 也有不少的插件可供下载，所以为了举一反三，我们最后也来补充一个增加 Objects 的例子。这个例子是做出页面进入和离开时的特殊效果。
http://www.macromedia.com/software/dreamweaver/download/extensions/ ;就是一个下载插件的好地方，国内及台湾的织梦等站点也有不少可供下载的好东东。 Down 下来后用 Winzip 等软件解压至你的 Dreamweaver 所在目录：比如\ Macromedia\Dreamweaver 3\Configuration\Objects\my 目录下， 注意 : my 这个目录是新建的。然后重新启动 DW3 ，在你的 Objects 控件面板上点下箭头选择 my, 就会出现刚刚安装的插件图标，如图七 :（图七）
选择运行后界面如图八所示： （图八）
选择完成以后按确定，现在我们最后看一下整个页面加载时的效果：（中间园形图形为上一页面的部分）。（如图）
好了，这就是一个用 Dreamweaver3 来制作网页的实例，让我们共同交流使用 DW3 的经验。
