Dreamweaver 2.0是多媒体制作软件行业的老大Macromedia生产的经典网页制作工具。其强大的网页设计功能是以往的网页设计工具所不能匹敌的。Dreamweaver 2.0有几大特点:
* 具有强大的站点管理功能，内置FTP软件可以直接上传主页。
* 所见即所得的页面编辑方式。
* 支持Styles Sheet样式表单，创造丰富的页面效果。
* 支持Layer层，并可使用Timeline时间轴制作动态网页。
* 内置Behavior行为，为网页增加交互功能。
* 提供模板和库可以加速页面的生成和制作
* 支持外部插件，提供无限的扩展能力。
Dreamweaver魅力是无穷的，在下面的教学中我们将逐步深入，全面接触这个超COOL的网页制作软件。
一、Dreamweaver 2.0的组成和操作界面
(1)Dreamweaver 2.0的组成
首先我们来认识一下Dreamweaver的组成。Dreamweaver由两大部分组成。页面编辑器和站点管理器。
页面编辑器是一个可视化的网页编辑器，网页制作都是在页面编辑器中完成的。
站点管理器管理网站内的文件和目录，检验连接情况，并控制站内文件的上传。在做站点时推荐先建立好站点，再开始网页的制作，这样可以保证页面内文件连接的正确性。
(2)Dreamweaver 2.0的操作界面
Dreamweaver的操作界面十分简捷，重要功能全部集结在功能面板工具栏中。
* 对象工具栏:工具栏中的图标分别对应各种页面中的元素，诸如图片、表格、水平条等等。
* 属性工具面板:是页面编辑中比较重要的面板。主要设置页面元素的属性，比如文字的大小、图片的高宽、表格的对齐方式等等。对于不同的元素，面板中的参数是不同的。
* Styles样式面板:Style Sheet 样式定义面板，可以轻松定义出诸如9pt字体等CSS效果。
* Timeline时间轴面板:用于制作网页上的动画。通过时间轴，可以实现一幅图片在网页上飞舞等非凡的动态效果。
* Behavior行为面板:为网页增加交互功能，例如光标移到某个图片上就弹出一个窗口等等。
* Library&Templates库和模板面板:库的作用是将重复使用的图片文字等元素放进库中，以后可以方便地直接从库中调用元素。模板的作用类似于Frontpage98中的Theme主题，可以将固定的页面版面格式保存为模板，快速地制作大批量格局相同的网页。
*Dreamweaver2.0还提供了导航条帮助用户快速地打开以上面板。（图9)其中的<HTML>按钮可以直接打开HTML源代码编辑器，用户可以直接修改当前页面的HTML源代码。在页面编辑器的右下角也提供了类似的导航条供用户使用。
二、Dreamweaver 2.0一招速成
在了解了Dreamweaver2.0的操作界面后，现在我们可以开始Dreamweaver2.0的一招速成了。各位读者可以根据自己的需要实现的功能，按照标题选择想看的内容。
* 建立站点
在开始制作站内的页面之前，先要定义一个站点。站点的实质就是硬盘上的一个目录，站内的文件存放在该目录之中。选择菜单File/New Site。系统弹出对话框，在 “Local Root”选项中填写站点文件所在的目录。选中“Cache”选项就OK了。“Cache”的作用是跟踪站内文件的连接情况，加速站点管理操作。
* 文字设定
在页面中选中相应的文字后，在属性面板中可以设定文字的属性。文字属性和Word文字工具类似。是一个调色板，可以选择文字的颜色。
* 插入图片
选择对象工具栏中的，选中相应的图片。就完成图片的插入，如果插入的是站点外部的图片文件，系统会要求用户将图片复制到站点中去。
* 表格制作
选择对象工具栏中的，设定行数（Rows），列数（Colums），边框厚度(Border)即可。边框厚度为0时表格无边框。
* 表格单元格的合并与分割:
选中要合并的单元格，在属性面板中选择按钮即可将单元格合并。反之，在一个单元格内选择属性面板中的可以分割单元格。
* 插入水平条:单击对象工具条中的，即可插入。
* 建立超级连接:
选中要超级连接的文字和图片，可以在属性面板中的Link域中直接填写相关页面的地址，也可以单击按钮选择一个页面进行连接。如果连接地址中填写的是mailto:+邮件地址。如mailto:rudolf@21cn.com。则浏览页面时，单击该连接会打开邮件程序。
* 建立书签
选择菜单Insert /Named Anchor，在系统弹出的对话框中填入书签的名称，就建立好了一个书签（在Dreamweaver中叫做锚点）。在页面中书签的符号是。在页面中制作指向书签的超级连接十分简单。选中相应的文字后，在属性面板中选择瞄准器，将瞄准器拖拽到上就可以完成连接制作。
* 制作可点图Image Map
首先插入一幅图片，单击图片，同时选中属性工具面板中的按钮。系统弹出可点图编辑器窗口。在窗口左侧工具栏中相应的形状工具，在图面中画出可点区域。同时,在下面的Link连接域中指定相应的连接。图片上的可点区域就制作完成了。
* 创建帧式结构
共有两种方法：
方法1：在页面中选择菜单Modify/Frameset。在菜单中有四个子选项。Split Frame left向左分帧;Split Frame right向右分 帧;Split Frame Up向上分帧;Split Frame down向下分帧。根据需要，选择不同的选项就可以制作出复杂的帧式结构了。
方法2：在页面中选择菜单View /Frame Borders，窗口四周会出现一个帧边框。按住Alt键不放，鼠标拖拽帧边框也可以拖拽出帧的结构。
* 帧中间的超级连接
在帧内制作超级连接常常会遇到这样的情况。比方说现在有一个左右帧式结构的站点。左边是栏目选项，右边是内容。要求点左边的超链，超链对应的页面显示在右边的帧中。具体操作时，方法是这样的：
1. 给帧命名。按Ctrl+F10打开帧面板。单击帧面板中的左边一帧，在属性面板中将帧的名称设定为“left”。同理，将右边帧名称设定为“right”。
2. 在左边帧中制作超级连接时，选定连接的页面后，还要将属性面板中的Target目标设定为“right”，也就是刚才命名为“right”的右边帧。这样才能实现选左边的超链，对应页面出现在右边。关于超级连接中的Target选项，没有定义帧的时候有四个默认选项。“_blank”指的是新开一个窗口显示链接内容。“_parent”指的是上一级窗口中显示链接内容。“_self”在同一个窗口显示内容。“_top”在顶端窗口显示内容。如果在操作中为具体的帧设定了名字，像本例中的“left”“right”，就会出现在“target”中供选择。
* 插入活动按钮
活动按钮是一种可以对鼠标进行响应的按钮。当光标移动到按钮图片上时，自动切换另外一张图片。可以做出生动的按钮效果。例如按钮原来是凸起的，光标移到按钮上去时突然凹陷下去。制作方法：选择对象工具栏中的。系统弹出对话框，在Original Image框中选择第一幅图片。Rollover Image框中选择鼠标移动到图片上方时切换成为什么图片。Link框中设定连接到什么网页上去。一个活动按钮就做好了。
* 制作表单
单击对象工具栏上方的，选中其中的Forms表单选项。对象工具栏中的所有按钮都换成表单元素。选中相应的元素就可以将其插入到页面中。限于篇幅这里就不再一一做介绍。
* 设定网页背景图片和标题
选择菜单Modify/page properties。系统弹出页面属性对话框。在其中的Background Image框中可以设定网页的背景图片。Title框可以设定网页的标题。在对话框中还有一个Tracing Image选项。它是可以显示于网页的背景中的图片，但是在预览正式显示网页时候却不显示。它的作用是作为排版的辅助线。可以把排版的划分格式做成“Tracing Image”图片，帮助文字和图片对位。实际使用时不显示，在页面编辑器中，如果使用了“Tracing Image”，选中的背景图片在编辑状态下将不显示。
三、Dreamweaver 2.0进阶篇
OK，看过了前面的一招速成是不是对Dreamweaver有点初步的印象了？下面我们来领略一下Dreamweaver 2.0的过人之处，在进阶篇中你将了解到很多的Dreamweaver的高级功能。
* Style样式定义
在现在的很多站点和网页上，流行着一种9pt的小字体。9磅字体美观而且实用，可以在本来就不太充足的版面上面填写更多的内容。但是HTML代码中却没有直接支持9pt这种格式。有了Style样式定义就简单多了，只需要简单的几步就可以搞定，请看:
1.按F7打开Styles样式面板，单击“Style Sheet...”。系统弹出Edit Style Sheet编辑样式表对话框。(图21)
2. 单击New，系统弹出“New Style”对话框，选择第一项“Make Cutsom Style”自定义样式，将样式取名为.small。按“OK”确认。
3. 在样式定义对话框里面将字体的大小“Size”设定为9pt。按“OK”确认。再在编辑样式对话框中按“Done”确认。一个名字叫small的9磅字体样式制作完毕(图23)。
4. 在页面中选中要定义成9pt的文字，在style面板中选择定义好的small样式。9pt的小字就出现在页面中了(图24)。
Style样式的实质是CSS级联样式表单，原理是通过自定义或者重新定义一些HTML标签的格式和内容来实现一个效果。制作一个样式，在以往的传统的网页编辑中样式定义需要手工编写，非常的麻烦。象上面的9pt字体就需要用下面的这段代码来制作。
<!--
.small { font-size: 9pt}
-->
在引用的时候需要用到定义过的标签。
<span class="small">9磅小字体 </span>
作为网页编辑者，除非是专业的高手否则是很难记住诸多的CSS代码的。而Dreamweaver对于StyleSheet提供了全面的支持，CSS代码都以对话框选项的形式出现，只要选择一下相应的效果，代码自动生成。从而你也轻松制作出高级效果。在此提示各位一点，光标移动到文字上方文字的下划线消失的效果，也可以用Style面板做出来的，大家开动脑筋想想怎么做吧，非常简单哦^-^。限于篇幅，Style面板就介绍到这里。
* Layer层
你是否曾经想象过在[1] [url=http://www.chinamx.com.cn/Article/websj/dreamweaver/200606/20060610081651_48525_2.html][2] 下一页
