用DREAMWAVER3.0制作网页的实例 -pc6资讯

您的位置：首页 → 网页设计 → DreamWeaver → 用DREAMWAVER3.0制作网页的实例

用DREAMWAVER3.0制作网页的实例 时间：2004/11/7 2:35:00来源：本站整理作者：蓝点我要评论(0)

　　　　　　　　　　　　

　　　　　　　　　　　　相信你对 DREAMWAVER 仰慕已久，正如其名字一样， DREAMWAVER 被许多爱好者称为网页制作的"梦幻工具"，如今随着 3.0 版本的推出，大家一定急于掌握这门利器，那么，现在我们就走一条学习 DREAMWAVER 的捷径：通过一个实例来演练一回。（图一）
　　上面是一个简单的关于"友情链接"的页面（就是本站的“友情链接”栏目），看似简单，要满足网页"美观＋下载快"的要求还是小有技巧的。我们当然不至于来个 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 的经验。

文章评论

查看所有0条评论>>

热门文章 没有查询到任何记录。