Dreamweaver 简介
|
Dreamweaver是由Macromedia公司出品的所见即所得式网页编辑器，它同Microsoft出品的FrontPage一同被称为网页设计的两大利器。至于说这两种软件孰优孰劣，那就是仁者见仁、智者见智了，我在这里也不好评论。但是根据我的观察，专业的网页制作人员似乎使用Dreamweaver的更多一些，大家明白我的意思了吧：） 现在Dreamweaver的最新版本是3.0。与以前的版本相比，Dreamweaver 3.0增加了许多全新的功能，如History、MetaNotes、HTML Style、Quick Tag Editor等。此外，Dreamweaver 3.0对一些新的技术如DHTML,JAVA也有了更好的支持。灵活的运用Dreamweave的各项功能，我们能创造出令人眼花缭乱的动态网页。下面，我将制作通过一个实例，带领大家熟悉Dreamweaver的各项功能。 首先，让我们制作一个普通的图文并茂的网页（其实也就是有文字、有图片就行了）。想大家这点还会做吧，我就不讲了。什么？你不会！其实很简单了，就跟使word一样，直接往上敲字就行了，贴图片用Insert -> Image就行了。 现在，我们就拥有了一个最简单的网页了。虽然它还是十分的简陋，但我们已经走出了网页设计的第一步。大家所做的第一个网页也应该和这个差不多吧。接下来，我们将在这个网页的基础上增加其它的内容，使它看起来漂亮一些。 我们在做网页的时候，是不是觉得排版十分的麻烦呢？为了对齐一篇文章或者一幅图，我们往往要调整好多次。其实我们利用表格，就可以轻松的排版了。选择Insert -> Table，弹出一个对话框。（如图１） 输入你想要的表格行数和列数。最重要的一点是要在Border处填0，这样表格的边框宽度将为0，换句话说，就是表格的边框是隐藏不可见的。这样，Dreamweaver生成了一个缺省大小的表格。我们调整表格的宽度和高度，并将一部分单元合并，使表格适应我们的要求。（如图２） 接着，我们就可以在表格中填上我们想要的东西，而它们的位置都被限定在了表格单元里。因此，排版的困难也就迎刃而解了。让我们看一下排版后的效果吧，是不是比较好看？（如图3） 然而，虽然使用表格来进行排版比较方便，但它还有一定的不便之处：我们要事先把整个的页面设计画出来，然后统一的对表格位置进行安排；此外，当我们对页面布局不满意时，进行调整也是一件非常麻烦的工作。我们知道使用层能够更方便、精确地定位页面元素。所以，我们可以利用层来进行排版。对于不支持使用层的较低版本的浏览器，我们可以利用Dreamweaver提供的转换工具，先用层来快速创建复杂页面布局，然后再把层布局转换成表格布局。需要时，也可以在层和表格之间来回转换，以调整布局和优化页面设计。 让我们用层来重新设计我们的页面。选择Insert ->Layer创建三个层，然后将它们拖到合适的位置，并在其中插入相应的内容。另外，因为表格单元不能重叠，所以，Dreamweaver 不能把重叠的层转换为表格。如果计划把一个文档中的层转换为表格，以便与低版本（3.0及其以下版本）浏览器兼容，就要在建立、移动层和调整层大小时防止层发生重叠。我们可以选择View -> Prevent Layer Overlaps来防止层的重叠。但有时候这一选项也不大管用，还需要我们手动把重叠的层分开。这可能是Dreamweaver的小Bug吧。（如图4） 如上图所示，我们用层设计好了的一个页面布局。接着我们将它转换为表格。选择Modify -> Layout Mode -> Convert Layers to Table，弹出一个对话框。（如图5） 对话框中各选项的作用说明如下： 单击OK，我们就将层布局页面转换为了表布局页面。一般来说，Dreamweaver转换出的表格有一些误差，还需要我们自己手动调节一下。（如图6） 怎么样，效果还不错吧。如果你需要把表格转换为层，就选择Modify -> Layout Mode -> Convert Tables To Layers，过程很简单，我这里就不再说了。 我们利用层的特性，还可以制作出各种各样的动态网页特效。下面我将给大家讲解一个利用层做出来的网页特效：让图像动起来。我们在浏览网页时，经常会发现有的网页上的图形会沿着一条路径移动。这其实是最简单的DHTML特效，我们利用Dreamweaver可以轻易的做出这种效果。下面，我们就让网页上那个可爱的小狮子动起来吧。 创建一个层Layer1，把它移动到合适的位置，然后把小狮子头拖进层里面。接着，我们再创建一个层Layer2，在层里面填几句话，然后把层的背景颜色定为白色。（如图7） 选择第一个层，然后选择Modify -> Timeline -> Add Object to Timeline，弹出时间线面板。时间线面板表示层在时间上的属性。拖动时间线上的关键帧记号，可以改变关键帧的位置。我们把结束帧的位置放到第20帧处。对另一个层我们也进行一样的处理。（如图8） 确定在Layer1的时间线被选定的情况下，将帧数指示条移到第15帧处，选择Modify -> Timeline -> Add Keyframe，在这个位置增加一个关键帧。同样的，对Layer2也作一样的处理。（如图9） 现在，我们为两个层都创建了时间线，在每个时间线上有三个关键帧。接下来，我们就可以定义层在关键帧的位置了。在Layer1的时间线第一帧的位置点一下，然后拖动层左上角的把手，把它放在你满意的位置。对Layer1的另外两个关键帧，我们也作一样的处理，将层放在合适的位置。对于Layer2，我们使它始终与Layer1重叠。当这些都做好之后，我们就可以在窗口之中看见层移动的路径了。（如图10） 接着，选择处于第一帧位置的Layer2，将它的可视属性改为Hidden（在属性面板之中的vis选项）。因为浏览器默认的层的可视属性是可见的，所以我们就不用定义其他位置的层的属性了。这样，我们就使Layer2 在第1到14帧时隐藏起来，在第15到20帧时显示出来。 好了，现在我们已经建立好了一个动态网页的例子。我们可以按住时间线面板上的播放按钮，预览页面的动画效果。如果要在浏览器中看到你做的效果，最好把时间线面板上的Autoplay和Loop选项选中，这样动态效果可以在页面调用时自动开始循环播放。怎么样，按F12在浏览器中看一看我们自己做的动态效果吧。这只会说话的小狮子可不可爱？ 现在，我们的小狮子虽然可以说话，但也只不过是显示一段文字而已。你想不想让它真的开口说话呢？只要利用Dreamweaver提供的Behaviors功能，我们就可以轻易的实现这个效果了。 一个Behaviors实际是一个javascript元素，它使对象可以进行交互。Behaviors是事件和动作的组合。当你添加一个Behaviors时，你要确定挂钩在一个事件上的一个动作。 首先，让我们来熟悉一下行为面板。选择Window -> Behaviors，打开行为面板。其中的加号和减号按钮用于增加和删除行为；Event For列表框允许我们选择不同的浏览器，Dreamweaver将根据我们的选择从行为列表中剔除你从这个列表选择的浏览器不能辨认的事件。下面的Event和Action列表则列出了你所定义在当前对象上的事件和行为。（如图11） 单击加号按钮会弹出一个行为列表，当前可以使用的行为用黑色字体显示，不能使用的行为则用灰色字体显示。下面我为大家简单介绍一下这些行为的功能。（如图12） 源代码网供稿. |
