想做主页么？要有好工具呀。Dreamweaver 3是由Macromedia推出的优秀可视化网页制作工具，制作网页非常轻松，并且容易上手。很多难做的网页特效用Dreamweaver 3一下就可以搞定。目前已经渐渐成为众多网页设计师的首选工具。说了那么多你一定心动了吧？^_^心动不如行动，就让我们一起进入Dreamweaver 3的神奇世界吧。这里分界面篇、建站篇、造页篇、超链篇、表格篇、分帧篇、样式篇、分层篇、动画篇、交互篇，帮你快速学会Dreamweaver 3的使用。 
界面篇：

　　正式开始使用Dreamweaver之前我们先来熟悉一下Dreamweaver的操作界面。这些界面的名称我们以后会经常提到。Dreamweaver由两大部分组成：站点管理器和页面编辑器。页面编辑器用于制作网页，站点管理器(如图一)用于对网站内的网页和相关文件进行管理。
　　制作网页主要在页面编辑器(如图二)中进行。Dreamweaver提供了丰富的面板提高我们的工作效率。
　　Objects对象面板用于在页面中插入各种元素，例如表格图片等等。
　　Properties属性面板用于设定元素的属性。例如表格的宽、高等等。
　　快速启动栏将一些常用的模块放在其中，可以进行模块间的快速切换。例如面板中的一个就是站点管理器按钮，单击启动站点管理器。
　　面板组中存放着多种面板。Dreamweaver的各种功能都可以在相应的面板中找到。
　　时间轴：Dreamweaver独有的网页动画制作工具。注意这里的动画可不是Flash而是完全用DHTML写的网页动画。
　　认识完了界面我们就可以大显身手了。接招！

建站篇：

　　千里之行，始于足下。在做网页之前第一步就是要学会做网站。作为一个网站，里面有很多的图片、网页文件甚至Flash动画，如果不进行管理归档，分散在硬盘的各个地方就无法方便地进行网页发布了。因此建网站就是在硬盘上建立一个目录，将所有的网页和相关的文件都放在里面以便进行网页的制作和管理。
　　下面我们就来用Dreamweaver 3建立一个网站。
　　启动Dreamweaver
　　进入Dreamweaver，一般首先会进入页面编辑器。在页面编辑器中，选择菜单Site→Newsite。系统弹出站点定义对话框(如图三)。
　　下面我们需要做这几步工作：
　　Site name：填上网站的名称。名称没有规定，你可以填入你想要的名称。
　　Local Root：站点本地目录。在这个地方，你必须给你的网站在硬盘上指定一个目录。以后所有的网页文件就都放在该目录里面。相当于造房子先选址一样。单击黄色文件夹，系统弹出对话框。
　　可以选择目录。选好目录以后按“打开”，再按“保存”即可。如果没有建立过目录，也没关系。在这个对话框中一样可以建立。只要在对话框中按右键选择“新建文件夹”马上可以建立目录了。
　　选中Refresh Local File List Automatically选项：自动刷新本地文件列表。这个功能有了以后，当你往网站的目录中复制文件的时候，网站文件列表会自动地刷新，为了方便起见我们要这样选择。
　　选中Cache：选项。Cache不少读者肯定不会陌生，就是“缓存”。这个选项非常有用，他可以自动跟踪网站内的文件链接情况。当你的文件改名、移动、删除以后。原来指向这个文件的链接会断掉。有了Cache就可以及时发现问题，并加以纠正。
　　OK，所有的工作都完了。一个空白的网站就做好了。
　　下面我们来仔细观察站点管理器。网站内所有的文件都会显示在管理器的右侧。怎么样，看上去是不是有点像Windows的资源管理器啊？大家可以发现一点，就是这里的“根目录”是先前我们选择的目录。这是因为相对于要做的网站而言，所有文件都是放在这个目录里面的。所以这个目录就是网站的根目录。
　　做网页的时候会用到很多的图片，把所有的图片文件都归档在一个目录里，这是一种比较好的习惯。下面我们在站内先建立一个“images”目录用于存放图片文件。在站点管理器右侧空白处，单击右键弹出菜单。选择New Folder新建目录，输入目录名即可(如图四)。
　　一个网站建立好以后，下次启动Dreamweaver时。会自动打开这个网站，那么你所做的每一个文件都保存在这个站内。如果你建立了很多网站的话就要确保你要的网站是否打开了。可以在页面编辑器中选择打开的网站。使用菜单Site－> Open site。
　　如何快速进入站点管理器呢？我们可以用快速启动栏(如图五上)。在快速启动栏中，用第一个按钮就可以快速切换到站点管理器。在页面编辑器的右下角，也有一个袖珍的启动栏(如图五下)。可以同样操作。


　　好，本次教程我们主要学习了怎样制作一个站点。一个站点，简单说就是搭一个网站的架子。所有的网页和相关的文件都必须放在站内。网站所在的目录就是网站的根目录。大家可能觉得有些枯燥吧？没关系，有了这些基础，下一次我们就可以进行正式的网页制作了。 

造页篇：

　　上次和大家探讨了怎样用Dreamweaver 制作一个网站。今天我们就来实际制作一张简单的网页（效果如图一）。今天用到的新东东比较多，大家要加油哦。^_^
　　在开始做这个页面之前，我们先对这个页面进行一下分析。看看这个页面用到了些什么东东。
　　●网页的标题栏有“机器猫的小窝”字样
　　●网页中的“机器猫的小窝”标题是一张Gif图片
　　●左下角的机器猫是一张Gif图片
　　●当中是一段文字，设置了文字的字体和颜色
　　●网页背景用图片制作
　　知道了这张网页的结构以后我们就可以来制作了。
　　首先启动Dreamweaver，确保你已经用站点管理器建立好了一个网站，并且打开了这个网站。如果读者对于网站的概念不清楚，可以看《电脑报》上一期(第23期)的文章。
　　第一步：插入标题图片
　　进入页面编辑器。在对象面板中单击图片按钮。（如果对象面板看不见，可以按Ctrl＋F2打开面板）系统弹出插入图片对话框。在硬盘中找到这个图片。选中后，对话框右侧会看到这个图片的预览图。按“Select”按钮确定。
　　系统弹出一个信息框，要求插入图片后保存网页。按“OK”确定。
　　接下来的对话框提示大家，这个图片不在站点目录内，当前的站点目录是“D:\5dmedia”是否要将这个图片文件复制到站点内。还记得我们上一期反复强调的重点么？和网站相关的所有文件都必须放在站内！如果不这样做，会导致发布网页时图片“失踪”。所以，理所当然选择“是”。
　　系统弹出复制文件“Copy file as”对话框。我们为了文件管理的方便，把这个图片放在“images”目录下面。（注：这个目录是为了方便自己建立的。你也可以直接把图片放在站点根目录，或者站内任意目录中）。直接按“保存”即可。注意文件名不能用中文，否则要出现一些意想不到的情况。
　　一个标题图片就插入完毕了。接下来要让标题图片居中安放。单击图片，在属性面板中（如果面板不出现，按Ctrl＋F3打开）。选择面板中的居中按钮将图片居中。（如果面板中看不见这个按钮，是因为面板没有展开。可以按面板右下角的向下按钮展开面板）。
　　第二步：插入机器猫图片
　　回车换一行，按照上面的步骤插入机器猫图片。这张图片要求不用居中，如果图片继承上面的格式，将会居中。可以通过属性面板中的居左按钮让其居左安放。
　　第三步：输入文字
　　接着我们开始按照上面的样例输入文字。大家会发现文字并没有按照希望的那样排在图片周围，而是出现在图片的下方（如图二）。这是因为没有设置图片的对齐方式。
　　单击机器猫图片，在属性面板中。Align对齐方式选择Left（图片出现在文字的左边）。图片的周围会出现一个黄色的标记。这是Dreamweaver专用的对齐符号。不会影响任何显示效果（如图三）。
　　文字就都按照我们希望的方式和图片对齐了。下面我们来设置文字的格式。选中第一、二行文字。在属性面板中将Format字体设置成为Heading 3标题三号。并选中“B”将字体变粗(如图四)。
　　选中第三行，在属性面板中将Format字体格式设置为Heading 2标题二号。选中“I”将字体变斜。设置“机器猫”的颜色。首先选中这三个字，在属性面板中，单击颜色盒，在弹出的颜色盒中用吸管吸取颜色即可（如图五）。同样设置其他文字的颜色。
　　最后的三行文字我们想让它们前面带有项目符号的小圆点。单击属性面板中的“项目编号”按钮。选中的文字就带有列表符号了。
　　第四步：设置网页的标题和背景图片
　　选择菜单Modify/Page Properties。系统弹出Page Properties页面属性对话框（如图六）。在Title域中输入标题文字“机器猫的小窝”在Background Image处单击Browse按钮，系统弹出图片选择对话框。选中背景图片，如果图片在站外，请将其保存在站内。
　　按“OK”关闭对话框。网页的标题和背景图片设置完毕。
　　第五步：预览网页
　　在页面编辑器中按F12预览网页效果。嗯？怎么凡是图片的地方都是一个叉呢？原因很简单，在前面插入图片的时候要求我们将网页文件存盘。选择FileàSave。网站中的第一页，也就是首页我们通常存盘取名为index.htm。重新预览，网页的效果就出现了。
　　小结：在今天的教程中我们制作了一张完整的网页。实际上只是对三大部分进行了操作。文字：可以设置文字的格式。首先选中文字，然后在属性面板中可以使用Format域设置文字的格式，还可以设置文字加粗加斜的格式和文字的颜色。列表分为有序和无序列表，今天我们使用的是无序列表即圆点项目符号。文本可以设置对齐方式，分别是左、中、右（如图七）。
　　插入图片可以通过对象面板来实现。插入图片要注意一定要保存在网站内，这样才能保证图片的正确显示。图片也像文字一样有对齐方式。另外图片有Align对齐方式，这种对齐方式指图片和文字怎样对齐。
　　设置页面属性，我们操作了两个选项。其一设置网页的标题。这会在浏览器的标题栏中显示出来。还可以制定背景图片。网页的背景图片是一张小图片，它可在网页中重复贴，充满整个网页。
　　最后是预览，预览用于观察网页在浏览器中的实际效果。直接按F12就可以预览。如果出现图片不显示的情况，要先将网页存盘再预览

超链篇：

　　上次讲怎样做一个网页还记得么？一个网页作为一个网站，这是不现实的；两个网页作为一个网站，这也是不可能的。作为网站肯定有很多的页面，如果页面之间彼此是独立的，那么网页就好比是孤岛，为了建立起网页之间的联系我们必须使用超级链接。今天我们就来谈谈怎样在网页中制作超级链接。
　　一、页面之间的超级链接
　　在网页中，最多的就是这种超级链接。在网页中，单击了某些图片或者有下划线的文字就会跳转到相应的网页中去。好了，我们下面开始制作。
　　1.在网页中选中要做超级链接的文字或者图片。
　　2.在属性面板中单击黄色文件夹，选中相应的网页文件（如图1）。做好的超级链接的文字下面会有蓝色的下划线。
　　3.预览网页。光标移到超级链接的地方就会变成手形。
　　提示：你也可以手工在链接域中输入地址。给图片加上超级链接的方法和文字完全相同。在FrontPage中制作过超级链接的图片会有蓝色的边框，那是因为图片的Border属性没有设置为0的缘故。在Dreamweaver中超级链接的图片的Border属性自动设置为0，所以不会有蓝色边框出现。要想看到边框可以把图片的Border属性设置成为非0就行了。
　　如果超级链接指向的不是一个网页文件，而是其他文件例如ZIP文件等等，单击链接的时候就会下载文件。
　　超级链接也可以直接指向地址而不是一个文件，那么单击链接可直接跳转到相应的地址。例如，在链接域里写上www.5dmedia.com，那么，单击链接就可以跳转到相应的网站。
　　二、邮件地址的超级链接
　　在网页制作中，还经常看到这样的一些超级链接。单击了以后，会弹出邮件发送程序，连联系人的地址也已经写好了。这也是一种超级链接。在Dreamweaver 3之前的版本，做一个邮件地址链接比较麻烦，需要自己写代码。在Dreamweaver 3中新增了一个插入邮件地址的对象。在对象面板中单击这个对象，系统弹出对话框。在对话框Text域中填上相应的文字，E－Mail中填上地址（如图2），OK，一个邮件地址的超级链接就做好了。
　　提示：还可以选中图片或者文字，直接在地址栏中填写“mailto：邮件地址”就可以了。
　　除了上面的写法，还可以加入更加复杂的参数，参数之间用“？”分隔。
　　Subject=邮件的标题
　　CC=抄送邮件地址
　　BCC=暗送邮件地址
　　Body=正文内容
　　例如：
　　mailto:rudolf@a.com?Subject=来了?＆CC=123@a.com＆BCC=123@21cn.com ＆Body=这是我的意见
　　三、锚点的制作
　　前面所介绍的超级链接单击以后会直接跳转到相应的页面。如果想在同一个页面里进行跳转，或者直接跳转到别的页面的某一个地方，那该如何制作呢?这就需要用到一个小东西叫做锚点（Anchor），在以前的FrontPage中叫做书签（Bookmark）。锚点概念很形象，在某一个地方抛锚，然后超级链接指向锚，单击链接就可以跳转过去。下面我们来做一个简单例子。假设网页中制作一个像书的页面，单击目录就会跳转到相应的章节。首先要在章节的头上安放一个锚点。然后将目录中的文字做上超级链接指向锚点就可以了。
　　1.将光标定位在第一章开头的“飞狐外传”前面。
　　2.选择菜单Insert→Named Anchor插入锚点。系统弹出插入对话框。输入相应的锚点名称。注意不能使用中文作为名字。
　　3.单击“OK”结束锚点的制作。页面中出现一个锚点的标记（如图3）。这个标记只是页面中用于标记锚点的，在正式浏览网页的时候不会出现。
　　4.接下来我们使用一个瞄准器来制作指向锚点的链接。选中文字，在属性面板中拖拽瞄准器到锚点上面，就可以了（如图4）。
　　5.按F12预览网页。
　　注意观察指向锚点的超级链接，在属性面板中这种链接指向的地址是＃开头后面加上一个锚点的名称。例如上面例子中的超级链接地址指向的就是＃chapter1。若是想要将链接指向某一页中的某一个地方，可以在链结域中输入xxx.htm＃yyy，就是xxx页的yyy锚点。
　　四、瞄准器的其他作用
　　制作超级链接时还可以使用瞄准器来做。选中文字或者图片以后，用瞄准器直接指向站点管理器中的网页就可以了（如图5）。
　　技巧：改变超级链接默认的蓝色。想要超级链接的颜色不是默认的蓝色。可以这样做，先把文字颜色改变，然后再做超级链接。要制作更多超级链接的效果我们也可以使用样式面板。这个我们以后介绍。
　　五、制作图片上的超级链接Imagemap
　　注意，我们这里所说的Imagemap是指在一张图片上实现多个局部区域指向不同的网页链接。比如一张世界地图的图片，单击不同的洲就跳转到不同的网页。这张图片就是一个Imagemap，可点的区域就是热区。下面我们就来制作一个简单的例子。
　　1.首先插入一张图片。
　　2.单击图片，用展开的属性面板上的绘图工具在画面上绘制热区。并且选择相应的文件（如图6）。
　　3.预览网页就可以看到效果。
　　提示：对于复杂的热区图形我们可以直接选择多边形工具来进行描画。其中Alt域是用来填写说明文字的。填写了说明文字以后，光标移上热区就会显示出相应的说明文字。


表格篇：

　　自连载刊登以来收到了很多读者的E－mail，在这里谢谢大家对我的支持和鼓励。我想在最后一期把大家的问题和我的解答登出来，做一个Q＆A。有一些读者朋友非常的着急，想早日完成建站“大业”，来信索取我的教程。大家想看前面的几期教程可以到www.5dmedia.com。想看后面的几期教程，请关注以后的《电脑报》！其实看完了这一期的表格篇和下一期的分帧篇，大家就可以开始制作自己的主页了。加油啊！
　　表格是现在网页制作的一个重要组成部分。表格之所以重要是因为表格可以实现网页的精确排版和定位。本次的教程我们分为两步来进行。首先是表格操作的一个实例。然后是一些表格操作的基本方法。
　　在正式开始制作表格之前，我们有必要对于表格的一些部分的名称作一个解释（如图1）。
　　 一张表格横向叫做行(row)，纵向叫做列(column)。行列交叉所围成的区域就叫做单元格(cell)。
　　单元格中的内容和边框之间的距离叫做单元格空距（cell pad），单元格和单元格之间的距离叫做单元格间距(cell space)，整张表格凸起的边缘叫做边框（border）。
　　OK，下面看看我们本次要制作的页面（如图2）。
　　这张页面如果用以前我们所讲的图片对齐方法来做是不行的，这里我们就需要用到表格。要制作的网页实际上是这样的一张表格（如图3）。
　　1在对象面板中选择插入表格（Insert Table）按钮，系统弹出对话框。这些参数我们都已经认识了，Rows(行)输入2，Columns(列)输入2，其余的参数都保留其默认值。
　　2在Dreamweaver中生成了一张表格，表格周围的黑色点是可以调整表格的高和宽的句柄。当光标移到点上就可以调整表格的高和宽，移到表格的边框线上也可以调整表格。
　　3在表格的第一格中单击，向下拖拽选中二格单元格，然后在展开的属性面板中选择合并单元格按钮（如图4），将表格的单元格合并。如果要分割单元格，则可以用合并单元格按钮右边的按钮。
　　4用鼠标拖拽表格的边框调整到适当的大小。
　　5单击左边的单元格，在展开的属性面板中将Vert （单元格内容垂直对齐方式）设置为Top，然后输入文字。如果需要调整格子的大小，只需要鼠标的光标移动到边框上拖拽即可。
　　6在右下角的单元格内插入一张图片，现在表格的基本样子有了，但是单元格周围的立体边框还存在。
　　7光标移动到表格的边框上单击，表格周围出现黑框，表示选中整张表格，然后，在属性面板中将Border值设置为0，使边框不可见。为了排版的时候方便，我们还可以在右上角的单元格内，回车几下，空出一定距离，这样整个页面就做好了。
　　通过上面的操作我们对于表格有了一个初步的认识。下面我们来看看具体的一些操作，首先，大家可能注意到了在对整张表格进行操作和对一个单元格进行操作的时候，相应的属性面板是不同的。
　　下面我们就来看看这些属性面板的区别。
　　表格的属性面板，要出现这个面板必须先选中整张表格，方法上面已经提到过了。下面我们介绍其上的一些基本参数（如图5）。
　　·Rows：行数
　　·Cols：列数
　　·W：表格宽度（单位有百分比（％）和像素（Pixels）两种）
　　·H：表格高度（单位有百分比（％）和像素（Pixels）两种）
　　·Cell Pad：单元格空距
　　·Cell Space ：单元格间距
　　·Align：表格的对齐方式。使整张表格居左，居中或者居右
　　·Border：表格的边框宽度
　　·Bg：表格的背景图片，可以选择黄色文件夹选择图片
　　·Bg：表格背景色，选过图片以后背景色就被覆盖了
　　·边框色：可以指定表格的边框颜色。有机会我们会在技巧教程中详述。
　　选中了单元格之后属性面板就发生变化了（如图6）。选择行或者列都属于选中单元格。
　　·合并：将选中的连续单元格合并成为一个单元格
　　·分割：将一个单元格分割成若干单元格
　　·Horz：水平对齐方式，单元格中的内容水平对齐方式。分为Left（左），center（中）、Right（右）三种
　　·Vert ：垂直对齐方式，单元格中的内容垂直对齐方式。分为Top（顶）Middle（居中）Bottom（居底）Base line（基线对齐）
　　·Bg：单元格背景颜色
　　表格还可以增加或者删除行或者列。在一个单元格中单击鼠标右键，在右键菜单中选择Table→Insert Rows or Columns选项，系统会弹出对话框（如图7）。
　　·Insert 插入： Rows 插入行 Columns插入列两者选一个。
　　·Number of Rows插入的行数。如果插入的是列则为插入的列数。
　　·Where ：插入方向
　　　Above the selection 在当前行的上面
　　　Below the selection 在当前行的下面
　　　如果插入的是列，则参数为：
　　　before current columns：在当前列之前
　　　After current columns：在当前列之后
　　删除行或者列，可以单击这一行或者列中的一个单元格，然后鼠标右键激活菜单选择Delete row或者Delete Column就可以了。
　　最后要说的是怎样选中表格中的各种元素的方法：
　　·选中一行，把光标移到该行的最左边单元格的左面，光标会变成箭头状，然后单击就可以选中一行了。
　　·选中一列，把光标移到该列的最上边单元格的上面，光标会变成箭头状，然后单击可以选中。
　　·选中整张表格，把光标移到表格的边框线上，光标变成双箭头或者十字箭头单击即可选中整张表格。选中的表格会周围出现一个黑框表示整张表格选中了。
　　·选中单元格，单元格可以同时选中多个，选择连续的单元格，光标先选其中的一个单元格，然后按住Shift键不放，选取最后一个单元格。选不连续的单元格、按住Ctrl键，点取所需要的单元格即可。
　　OK，我们对于表格的使用就讲到这里。表格是网页制作基本技术中比较难的一个技术，所以，光靠我们今天讲的这些大家还不一定能够全部领会，学习中遇到问题可到www.5dmedia.com寻求技术支持或直接发E－mail给我：rudolf@21cn.com。　　　　　　 

分帧篇：

　　在浏览网页的时候，我们常常会看到这样的一种导航结构。就是超级连接做在左面，单击以后链接的部分出现在右面。或者在上边单击链接指向的页面出现在下面。要做出这样的效果，必须进行分帧。为了更好的理解什么是帧。我们画一张示意图来进行说明（如图1）。
　　这是一个左右结构的帧。事实上这样的一个结构是由三个网页文件组成的。首先外部的框架是一个文件，图中我们用index.html命名。框架中面边命名为A，指向的是一个网页A.html。右面命名为B，指向的是一个网页B.html。
　　清楚了帧的结构，下面我们就来从头开始制作一个框架。
　　1.首先进入Dreamweaver。在一个空白页面中选择菜单Modify→Frameset→Spilit Left。页面中出现一个分隔条。用鼠标拖拽到合适的位置。一个帧结构就做好了，并生成了三个页面。
　　2.选择菜单Window→Frames，出现帧面板（如图2）。
　　3.做好了帧以后很重要的一步是给帧命名。在帧面板中单击左边部分。在属性面板中将Framename域填写为Left，也就是将左边的帧命名为left。同样在帧面板中单击右边部分，在属性面板中将Framename域填写为right，也就是将右边的帧命名为right。
　　4.保存网页。选择菜单File→Save All。系统弹出对话框。这时，保存的是一个帧结构文件。我们按照惯例都命名为index.htm。如何知道保存的文件是哪一部分呢。这里有一个诀窍。保存的时候如果虚线框笼罩的是周围一圈就是保存帧结构。否则笼罩在左边就是保存帧中左边网页。右边就是帧中右边网页。按照这个方法我们保存左边网页，名称为bar.htm，右边为main.htm。三个网页就保存完毕。
　　5.下面我们要实现按左边的超级链接，对应的页面出现在右边。在左边的页面中做上超级链接，指向一个已经存在的页面（如图3）。注意做好连结以后，要在Target域中设置为right。这样一个超级链接就做好了。
　　6.按F12预览网页。链接指向的页面出现在右边帧中。
　　7.重复制作新的页面。再将链接指向页面。注意Target设置为right就可以了。这样就制作了一个简单的网站导航结构（如图4）。
　　为了让大家更好的了解帧，下面我们就来解释几个为什么。
　　1.为什么要给帧命名。
　　现在看来这个问题就比较简单。因为要求超级链接指向的页面，在指定的帧中出现，必须命名，这样才可以加以控制。
　　2.为什么要在超级链接属性面板中设Target域。
　　Target域这里我们称他为目标区。也就是超级链接指向的页面出现在什么目标地区。默认的情况下Target域中总有四个目标。
　_blank ：单击链接以后，指向页面出现在新窗口中。
　_parent：用指向页面替换他外面所在的帧结构。
　_self：出现在同一帧结构里面。比如left还是left。
　_top：跳出所有帧结构。指向的页面直接全屏出现在浏览器中。
　　3.为什么帧结构页面起名字叫做index.html。
　　其实，这是一个早就提及的问题。别人访问我们制作好的网站，总得有第一页给他看吧。一般我们把网站的第一页命名为index也就是索引的意思。因为我们可以通过这一页来访问站内的其他页面。更重要的原因是，我们做好了网页要上传到服务器上去。服务器上大多已经设定好了默认的页面名称为index。这就是为什么在浏览器中输入地址的时候，直接就可以看到网站页面而无须特别指定。
　　分帧的方法，除了使用菜单Modify→Frameset→Split Left(right，up，down)以外,还有一种直观的分割方法。
　　1.选择菜单View→Frame Border。网页四周出现一个灰色边框。
　　2.按住Alt键光标移动到边框上会变成十字双箭头。拖拽到指定位置。帧就做好了。这种划分方法可以做出十字型的分帧。光标移到边框的角落处按住Alt＋拖拽。就可以拉出十字型的帧。
　　取消帧结构
　　拖住帧当中的灰色分隔条，拖拽到边框上就可以取消一个帧了。取消帧以前会提示是否要将删去的网页存盘。根据需要选择存或者不存就可以了。
　　帧的边框
　　一旦使用了帧以后。帧的边框是一条灰色的分隔条。很多时候影响了整个页面的美观。解决的方法是单击帧边框，选中整个帧结构，打开属性面板（如图5）。在属性面板中Borders设置为No。Border width设置为0就可以了。
　　关于分帧的话题，我们就暂时讨论到这里。到本期为止，Dreamweaver3的基础讲解已经差不多了，大家学到这里已经有能力来制作一些基本的网页了。从下一期起，将开始讲解Dreamweaver3的进阶技术。





　　在上期的教程中我们探讨了如何来制作样式。在Dreamweaver3中，还新增了一种叫做HTML Styles的面板。这个面板是做什么的呢？也是用于制作一些样式，比如红色的一号字标题之类的样式。但是它和CSS Styles面板是有本质上的区别的。因为HTML Styles是靠HTML语言来实现的。所以，HTML样式的功能绝对没有CSS的强。HTML样式可以理解成为什么呢？类似于Word中的格式刷。我们先看看HTML样式面板(如图1)，面板可以用菜单Window→HTML Styles打开
　　面板中罗列的是一些样式。仔细观察的话会发现主要是两类样式。一类是前面有一个小写的带下划线的a，这表示选择样式可以应用到选择好的文字上。另一类则是段落样式，应用到整个段落上。带有红色的线的样式就表示清除文字所带的样式。
　　下面我们依次介绍面板上的样式。
　Clear Selection Style清除选择样式
　Clear Paragraph 清除段落样式
　＋Bold 加粗
　Caption 题目
　Copyright 版权说明文字风格
　Emphasis,Sans－serif强调醒目
　Fixed width 等宽样式
　Headline 标题
　Normal 正文
　＋Red 变红
　　使用一个HTML样式很简单。选中要使用样式的文字。单击面板中的样式即可。下面我们讨论怎么样制作一个HTML样式。
　　1.单击样式面板上的新建按钮，系统弹出对话框（如图2）。
　　在对话框中填写相应的样式参数，我们这里制作一个选择样式要求加粗变蓝并且设定字体和字号。
　Name 样式名称
　Apply To 制作何种样式
　　 Selection 选择样式
　　 Paragraph 段落样式
　When Applying 当应用样式的时候 
　　 Add to Existing style添加到原来文字的样式上
　　 Clear Existing Style清除原来样式。
　Font 字体
　Size 字号
　Color 文字颜色
　Style 样式 B粗体 I斜体 
　　下面的Paragraph为灰色是因为上面选择的是选择样式。如果选择段落样式就可以选择了
　Format：为段落的标题号
　Alignment：对齐方式。分别有左中右。
　　2.设定完参数后按OK。HTML样式面板中就新增了制作的样式。
分层篇
　　下面我们就来介绍Dreamweaver支持的一个重要的元素层（Layer）。层的出现使网页从二维平面拓展到三维立体。简单地说就好像大楼的楼层一样，可以使页面上元素进行重叠（如图3）。 
　　我们首先来做一个层
　　1.在对象面板中选择层按钮。
　　2.在页面中拉出一个层。
　　3.通过周围的8个黑色控制点拖动控制层的大小
　　4.拖动层左上角的句柄可以移动层的位置。
5.单击层标记可以选中一个层。
　　6.在层中可以插入其他任何元素包括图片文字链接表格等等等等。
　　一个页面中可以画出很多的层，这些层都会列在层面板中。层之间也可以相互重叠。层面板可以通过菜单Window→ Layers 或者按F11打开（如图4）。
　　这里我们需要对几个概念进行解释。层有隐藏和显示的属性。可以设置层的显示和隐藏。当然这对于单个的层意义不太大。但是，这是层的一个重要属性，和后面说到的行为相结合就变成了重要的参数。单击层的左边，可以打开、关闭眼睛。眼睛睁开和关闭表示层的显示和隐藏。
　　层还有一个概念就是层数，层数决定了重叠时哪个层在上面哪个层在下面，就好比大楼的楼层一样。比如层数为2的层在层数为1的层的上面。改变层数就可以改变层的重叠顺序。
　　层面板上面还有一个参数就是Prevent Overlaps防止层重叠。一旦选中，页面中层就无法重叠了。
　　层还有一种父子关系也就是nest。如图5所示，图中Layer 1挂在Layer 2的下面。Layer 2为父层，Layer1为子层。在页面中拖动Layer2，Layer1也跟着动起来。因为它们已经链在一起了，并且Layer 1隶属于Layer 2。父层移动会影响到子层。移动layer1层，Layer 2层不动。也就是子层不会影响到父层。
　　要建立这样的一种隶属关系方法很简单。在层面板中按Ctrl键将子层拖拽到父层即可。
　　除了层的“正规用法”，还有一个损招。就是用层来绘制表格。Dreamwevaer 3提供了将层转换成为表格的方法。这样我们绘制复杂表格就简单多了。注意层转表格的时候层与层之间不能有重叠关系。
　　1.首先在页面中绘制出一些层，作为表格的单元格。画的时候切忌层与层之间有重叠（如图6）。
　　2.选择菜单FileàConvert 3.0 browser Compatible 兼容3.0浏览器。系统弹出对话框。选择第一项Layers to table（如图7）。
　　3.按OK层转表格完成了。
　　好，对于层和HTML面板我们就介绍到这里。有了层的知识作为铺垫，下面我们将进入精彩的动画和交互世界。

动画篇：

　　眼见着教程就要接近尾声，我们渐渐进入到Dreaweaver3的精华部分，就是“时间轴”（Timeline）和“行为”(Behavior)。时间轴可以用于在页面上制作动画，行为可以用来制作网页上的交互效果。举例来说就是当鼠标移到图片上去之后，出现了另一个画面之类的东西。
　　首先我们来理解时间轴。动画的实现原理就是将一幅幅画面连起来播放，使人产生运动的视觉。所以动画的基本单位就是一幅画面，也叫做帧。而在动画中有些画面是关键的，可以影响整个动画的效果，这样的帧叫做关键帧。很多的画面按照时间先后顺序连起来就产生了动画效果。时间轴就是用来排列画面顺序的。时间轴由通道组成，每一个通道里面放一个要运动的物体。关键帧用圆点表示。还有一个播放头，播放头所指的位置就是动画当前所在的帧。
　　以图1为例，动画是一只机器猫按照弧线从左往右运动。动画在通道1中，共15帧画面长度。其中开始结束的位置还有当中弧线的最低点三个位置是关键位置，因此都是关键帧。图中播放头播放的正好是当中的关键帧，也就是图中机器猫的位置。
　　通过上面的讲解，时间轴的作用我们大致上已经很清楚了。下面我们就来实战制作这个动画，在制作之前要强调一件事情：就是要制作动画就必须用到层，用层才能制作动画，单一的图片是无法制作动画的，文字图片都必须存放在层中，实际上运动的是层，它带动图片和文字进行运动。制作过程如下：
　　1.插入一个层，在层中插入一张图片。
　　2.将层拖曳入时间轴（时间轴可以通过菜单Window→timelines打开）。系统会弹出一个对话框，提示层的一些属性是可以做成动画的，单击OK即可。注意是将层拖曳在时间轴中，不是图片。应该看到时间轴中显示的是Layer字样。时间轴生成了一段长15帧的画面。当然觉得太短可以自己拖长一点。
　　3.现在第一帧和最后一帧都是关键帧。我们要设置最后一帧确定动画的结束位置，单击最后一帧将层拖曳到指定位置（如图2）。
　　4.大家可以看到路径还是直的，我们要做成弯曲的怎样做呢。增加一个关键帧，单击当中的位置。按鼠标右键，选择其中的Add Keyframe（增加关键帧），时间轴中增加一个关键帧。
　　5.单击该关键帧将层拖曳到指定位置，动画制作完毕了。
　　6.还要在时间轴上单击Autoplay自动播放选项，这样页面一装入浏览器动画就播放。Loop选项表示动画播放完毕一次以后还要继续播放。选中这两个选项的时候都会弹出对话框，单击OK即可。
　　注意：一旦选中了这两个参数，时间轴上动画最后一帧位置上会出现一帧，该帧出现在B通道中。B通道不同于别的通道，是用来控制和添加行为的。这里我们添加的是一个重复和循环的行为。
　　下面我们来学习“行为”的用法，行为是实现网页上交互的一种捷径。什么是行为呢？上面我们举过例子，光标移到某张图片上面，就显示一段内容。我们来分析一下这个过程，可以分为两个部分：一是事件，也就是触发动作的条件，为鼠标移上；二是动作，也就是显示内容。这两部分就构成了这个行为。因此行为就包含事件和动作两个部分，事件→动作。
　　我们就以上面这个效果为例。光标移动到物体上面出现内容，移出物体外面内容就消失。那么，这个例子就由以下两个行为组成。行为1：鼠标进入→出现。行为2：鼠标出去→隐藏。分析清楚了思路就可以实际制作了。
　　1. 在页面中插入一张图片。
　　2. 在页面中插入一个层，写上说明内容（如图3）。
　　在层面板中，将该层设置成为隐藏，因为一打开网页的时候它不显示。
　　3. 单击图片，打开行为面板（菜单Windows→Behaviors或者按F8），按“＋”号，在弹出菜单中选中Show－hide Layers显示隐藏层，系统弹出对话框，单击该层，然后单击show显示（如图4）。
　　4. 我们可以在面板中看到事件和行为，Events事件为onMouse Down当鼠标按下，Actions动作为Show－Hider Layers隐藏层（如图5）。
　　现在我们单击事件和动作之间的向下三角形箭头，选择其中的onMouseOver(当鼠标移上去)事件。注意，有的读者可能没有这个选项。这是因为面板上Events For 事件适用浏览器不是4.0 and Later Browser。如果这样单击该栏用上下光标键调整到这一项即可。
　　5. 预览网页，可以看到光标移动到图片上就出现说明。接下来我们制作移出画面隐藏层。
　　6. 方法同3 一样，按“＋”添加show－hide layer行为。
　　7. 在对话框中选中该层，按hider键。
　　8. 调整事件为onMouseOut(当鼠标移出)。
　　9. 整个效果就做完了。
　　下面给出一些常见事件的一些解释
　　onClick 单击
　　onDbclick 双击
　　onKeypress按键
　　onMouseDown鼠标按下
　　onMouseOut鼠标移出
　　onMouseOver鼠标移上
　　onMouseUp鼠标抬起。
　　由于动作的门类较多，也很复杂。不可能在有限的篇幅内说清楚就只好写到这里了。行为是一个很有用的交互手段。以前要实现这样的一些交互效果非得写JavaScript代码不可，现在有了行为就可以用可视化的手段进行操作了。下面解释一下行为面板上的Event For是什么意思。众所周知IE和NetScape是死对头，他们之间有些功能是互相不兼容的，因此对于事件的响应也有一些不同，同样不同版本的浏览器兼容的事件也不同。所以必须在用行为之前加以设置，IE支持的时间要比Netscape多一些，一般我们现在都设置Event for 4.0 and Later Browser（也就是兼容4.0以后的浏览器），这样的话就不必考虑Netscape或者IE兼容性问题了。而如果是使用for 3.0浏览器的话，则一些事件就无效了，例如onMouseOut之类的。
　　OK，我们本次的教程就到这里了。下次是教程的最后一讲：我们将介绍模板和库的使用。


这期是Dreamweaver3之一学就会系列教程的最后一篇。在此系列的连载期间，机器猫收到了600多封热心读者的E－mail。感谢大家对机器猫的热情支持，使我将教程进行到底。同时，机器猫也有幸认识了很多新朋友。在这期教程我们介绍库（Library）和模板(Template)的使用。


做一个网站，有时候很重要的一点就是整个网站的风格要统一。一些网页的版式都是相同的(如图1)。
　　图1中标题和下面的一排按钮，还有表格的编排方式，还有里面已经制作好的9磅CSS样式，这些风格都是固定的。新作一张网页上面这些都不变，而只要替换文字和一些图片就行了。按照我们的习惯方法是重新做一张，经过漫长和痛苦的等待，终于做成了和前面一模一样的网页。这时发现还有N张网页也要同样制作。咚！机器猫的一个朋友应声倒地，机器猫转头面向观众，他明白了，你明白了没有 :）。这时候，我们就需要用到模板，它可以将网页中不变的元素固定下来，然后用来应用到其他的网页上去。这样我们只要修改相应的部分就可以了，无需再痛苦万分而一切重来。模板可以由一个网页来生成。制作过程如下。
　　1.制作好一个页面。
　　上面凡是不需要变化的元素都统一在图上做好（如图2）。 
　　2.选择菜单File→Save As Template（另存为模板）。
　　系统弹出对话框。在Save As文本框中填写模板名字，按Save。
　　3.如果仔细观察标题栏的话会发现标题栏上已经发生了变化（如图3）。< < Template> > 表示现在编辑的是模板了。模板的扩展名也是.dwt。
4.接下来我们要做的一个重要工作就是设置可编辑区域。如果现在直接存盘的话，这个模板生成的页面是无法进行内容修改的，因为没有指定什么地方是可以修改的。只有设置了可编辑区域，我们以后编辑网页的时候才能够对网页进行修改。在这个例子中，三个表格中的单元格要求可以替换内容的，因此就对这三个单元格设置为可编辑区域。在一个单元格中单击，选择菜单Modify→Templates→New Editable Region（新可编辑区域）。在系统弹出的对话框中填入可编辑区域名称，按OK。在页面中就生成了一个{}包围的可编辑区域的标记。
　　5.同样方法制作其他两个单元格为可编辑区域。
　　6. 保存模板，系统弹出提示框，“对模板进行了修改，保存后是否自动更新所有应用该模板的网页"。选择是，系统会进行搜索，并报告搜索结果，确认即可。
　　如何应用一个模板到页面呢？
1.新建一个空白页面。
2. 选择菜单window→Templates打开模板面板。单击做好的模板。按面板上的Apply按钮即可（如图4）。 
3.其中，页面中的黄色部分就是模板的不可编辑区域。将页面中{}包含的部分删去。填上相应的内容。一个页面就做好了（如图5）。 
　　由此可见模板有很多的好处。1.可以生成大批的风格相近的网页。2.一旦模板修改了，就修改了一批网页。模板修改完毕存盘时，会跳出一个对话框提示是否要把修改的模板重新应用到网页上去。选择Update按钮，就把模板全部重新应用了，这样，修改了一个页面就修改了整个网站的页面，大大提高了效率。要编辑模板只要在模板面板中双击模板即可。
　　有的时候我们制作了一个应用模板的网页。但是我们想对网页的不可编辑区域进行修改的话，需要把模板和网页进行分离。在网页中选择菜单Modi→Template→Detach From Template分离模板即可。这时就和一般的网页一样可以自由编辑了。
　　和模板有异曲同工之妙的就是库。模板可以用来制作整体网页的重复部分。库就是面向网页局部重复部分的。例如，在某些页面上要写上 XXXX版权所有，欢迎mail我之类的话。每次重复输入这些东西是让人恼火的。我们可以把这些东东做成库部件。以后重复使用。制作方法：我们以制作版权信息为例。
　　1.输入文字和信息。
　　2. 选择菜单window→Library打开库面板，选中文字，拖进入面板，命名即可（如图6）。图中黄色部分即为库部件，已经变为一个整体了。
　　以后要插入库部件的时候，只要在库面板中单击改部件，选择Insert按钮就可以完成部件插入。编辑部件只要在面板中双击部件就可以了。同样修改了一个部件，系统会提示，是否重新应用到所有使用库部件的页面。按Update按钮即可完成。大家应注意到，一旦使用了库和模板之后。在站点根目录下就多了两个目录。Templates目录为模板目录，所有扩展名为dwt的模板都存放在里面。Library目录为库目录，库部件扩展名为.lbi。关于库和模板的更多技巧可以到www.newdot.net下载技术手册。
学习似乎到这里就结束了，其实远远没有。任何一个软件在一大群爱好者的手下会创造出无限的技巧来。同样Dreamweaver也是如此。 
　　好了，到此Dreamweaver3之一学就会教程就结束了。感谢大家耐心地阅读。有什么问题欢迎发E－mail给机器猫：rudolf@21cn.com。