2.3 网页设计工具Dreamweaver MX
2.3.1 Dreamweaver MX概览
Dreamweaver是Macromedia公司开发的网页制作工具，它与Macromedia公司的另外两项产品Firework和Flash一起组成一套功能强大的网页创作系统，分别覆盖了网页制作，网页图形、图像处理和矢量动画这三个主要的网络创作领域。
做过网页的人也许最早接触的网页制作工具是微软公司的FrontPage。它为可视化（所见即所得）的网页编辑提供了一个相当不错的编辑环境，但是较Dreamweaver而言，FrontPage在HTML源代码的精确控制、易用性及对各种新技术的支持上都略逊一筹。这是人们在对网页制作工具进行评价时，更津津乐道于Dreamweaver的原因。
本书将介绍网页设计工具Dreamweaver的新版本Dreamweaver MX。它较以前的Dreamweaver版本，界面布局更简洁，面板排布更合理，功能更强大。为叙述简便，以下将Dreamweaver MX简称为DW。
2.3.2 Dreamweaver MX的特性
（1）精确性。DW采用Roundtrip HTML技术实现对HTML源代码的精确控制，它能生成简洁和高效的HTML代码。比如，在可视化编辑器中进行编辑时，可以在HTML源代码窗口中同步看到HTML源代码的变化；同样地，在HTML源代码窗口中直接编写代码时，也能马上在可视化编辑器中显示相应的可视化结果；甚至在可视化编辑器中可以对HTML标记直接进行选择、添加、修改或删除等操作。文档中如出现不配对的标记，将会用黄色显示提醒用户有错误需要修改。
（2）易用性。DW的编辑界面相当友好，且操作简单。通过各种工具面板，可以非常方便地控制页面各种元素的属性。在不用手工输入一行代码的情况下，就可以制作出各种特效，比如动画、动态按钮、索引条、分层等。
（3）兼容性。兼容性是DW的一个非常优秀的特性，用它制作的页面能在各种浏览器上正确地显示。这在其他网页制作工具中是没有的，也是人们更倾向于它的一个最重要的原因之一。
2.3.3 Dreamweaver MX界面介绍
启动DW之后，会看到如图2-1所示的界面。与Windows界面风格相比，DW界面更相似于PageMaker和Photoshop等软件界面。它将各种操作和命令分布到不同的浮动面板上，可以随时激活和隐藏这些浮动面板，也正是这种灵活的窗口布局使得DW的操作更加便捷。
图2-1 Dreamweaver MX启动界面
在图2-1 启动界面中，可以从4 个区域创建或调入文件：①单击中部的[创建新项目]，建立相应类型的新文件；②单击中部的[从范例创建]，建立多种形式的新文件；③双击右部的[文件]列表中的文件名，调入指定目录中的文件；④单击左部的[打开最近项目]，可调入编辑过的文件。
将HTML或其他文本格式的文件调入后，会以多页面的方式显示在文档窗口中，文件调入DW后的编辑界面如图2-2所示。
图2-2 Dreamweaver MX文件编辑界面
DW的编辑环境从上到下依次为标题栏、菜单栏、插入面板、文档窗口、属性面板、文件面板等。在[窗口]菜单中单击[隐藏面板]可以显示或关闭所有的面板；单击下部和右部面板边框上的箭头按钮，可显示或关闭该组面板；插入面板等工具栏面板可以通过单击[查看]菜单的[工具栏]选项，显示或关闭该工具栏；工具栏也可由用户拖放到合适的位置。
1. 标题栏
标题栏显示当前文档窗口中页面的标题，这个标题在HTML源文件中用＜title＞标记定义。标题后面的括号中是文件名，如果文件名后带有*号，表示该文件包含尚未存盘的修改。
2. 菜单栏
菜单栏分类罗列了所有的功能和命令，通过它可以完成所有的操作。
3. 文档窗口
文档窗口是显示当前所编辑页面的窗口，如图2-2中间大块区域所示，它分为多页标签行、文档栏、代码编辑区、界面设计区及状态栏几部分。
（1）多页标签行。可以同时打开多个编辑页面，在层叠多窗口最大化时出现。
（2）文档栏。在这一行有三个按钮分别控制页面编辑的显示方式，分为单独的代码视图显示、拆分（代码编辑/设计页面上、下双显示，如图2-2所示）显示和单页面设计视图显示等方式。在本行还有标题文本修改框及浏览器预览图标等。
（3）代码编辑区。显示当前的HTML源代码，并按照颜色设置显示各种HTML语言标记。
（4）界面设计区。显示实际的输出效果。它是主操作区，显示当前页面的可视化结果。
（5）状态栏。显示页面的状态信息，它又分成三个部分：
① 标记选择器。选定文本或对象的标记将出现在文档窗口底部左边的标记选择器中。单击某一标记，可在文档窗口高亮度显示它的内容。单击＜body＞标记可选择文档的全部正文。如图2-2中，光标停在页面区的＜td＞格式的文字“92”上，显示该对象是在＜body＞ ＜table＞ ＜tr＞＜td＞标记之中。
② 窗口大小。单击这里将弹出窗口大小设置菜单，可以选择或设置所需要的窗口大小。或者拖动窗口边框动态地设置当前窗口的大小，宽和高的像素值就是页面显示的实际大小。
③ 文件大小/下载时间。显示的是估算的文档大小和页面的下载时间（包括所有独立文件，如图像和Shockwave动画）。下载时间默认以56.0Kb/s估算，这可以兼顾编辑页面的效果和占时比。
4.插入面板
新版的DW将对象面板改为插入面板，图2-2 中显示的是[常用]对象组的表格、图片等10个图标，该插入面板还有其他几组对象。
选择[窗口]菜单的[插入]项即可打开插入面板，它是各种网页对象的集合。DW将常用对象分为几组，单击插入面板的向下箭头，会显示它们分别是[常用]、[布局]、[表单]、[文本]、[HTML]、[应用程序]、[Flash元素]等。通过插入面板，可以快速地在网页中插入任何对象，如图片、表格、层、特殊字符等。下面简单介绍常用的每一个对象面板。
[常用] 包含主页中最常用的一些对象，如图片、表格、超链接等。
[布局] 包含常用的框架结构，如左/右分帧、上/下分帧等。
[表单] 包含表单及所涉及的所有元素，如文本框、按钮、复选框、单选钮、列表框等。
[文本] 包含一些特殊字符，如版权符号、注册商标符号、商标符号等。
[HTML] 添加一些Script脚本等。
对象面板是DW中非常重要的一个面板，只有熟悉这些对象，才能随心所欲地在网页中添加各种对象。随着所编辑的文件类型的不同，插入面板会对应出现不同的对象组。
5.属性面板
选择[窗口]菜单的[属性]项即可打开属性面板。它用来显示文档窗口中选定对象的各种属性。当单击页面中不同的对象时，自动出现的属性面板也有所不同。在属性面板中可以直接对各项属性值进行编辑和修改。
注意，属性面板一般分为上、下两块，在右下角有个打开/关闭下块的箭头，有些扩展属性安排在下块中。单击属性面板标题行的箭头，还可以收缩/展开该面板。
选定表格时，相对应的属性面板如图2-2下部所示。它显示了所选文字的格式、样式、字体、大小、颜色、对齐方式、链接（填写URL后，字体默认变为蓝色并带下划线，在页面显示时单击可跳转）、目标（为链接跳转时有效的URL指定显示页面的位置，_blank为新窗口）等属性。由于该文本位于表格中，属性面板的下块显示了该表格的各种设置属性。
又如，选定一幅图片时，属性面板就变为显示图片的缩略图、大小、源文件名、对齐方式及其他属性等。
如图2-3所示，在DW编辑环境新建了一个HTML文档，命名为t1.htm，存到本机的目录中，如存于D:\MyExp目录中。这一步初学者要特别注意，新建文档后，要立即将文件存盘，其他需添加的对象，如图文件等，都要复制到该同一目录中。
图2-3 Dreamweaver MX插入图片及热区编辑界面
首先插入图片。单击插入面板[常用]项的图片对象，在浏览窗口选择确定，完成当前目录中图片文件的添加操作，这样在代码编辑区和界面设计区将自动插入＜img＞代码和图片的原样显示，在页面的光标位置就插入了图片。
然后进行热区编辑操作。单击设计区的图片，有方框标出已选定该图片，再在下方的属性区的左下角选择矩形热区，用鼠标在图片的指定区域单击定位后再拖曳出一个矩形区域，即为“图片热区”，相对应的＜map＞代码会自动生成；再单击该图片，对该热区的链接属性进行设定。在下方属性区[链接]文本框内填写要指向的某个URL，以后该网页在浏览器窗口内显示时，鼠标移到该矩形区域时，鼠标指针将变为手形，单击它就可以完成超链接的跳转。
如图2-4所示，要插入一个表格，先单击插入面板[常用]项的表格对象，在设定了表格的行/列值、宽度、边框粗细、边距、间距等属性值后，在代码编辑区和界面设计区将自动插入＜table＞代码和表格的实际显示，在“所见即所得”的页面上，拖动边框线可改变表格的大小，选中多个单元格后，再单击属性区左下角的
合并按钮可将这些单元格合并为一个单元格。
图2-4 Dreamweaver MX插入表格编辑界面
如图2-5所示，要插入一幅Flash图像，先单击插入面板[常用]项的媒体对象，选择[Flash]，再选择当前目录中的swf文件，在代码编辑区和界面设计区将自动插入＜object＞代码和图片的轮廓显示，这样在页面的光标位置就插入了Flash图像。
图2-5 Dreamweaver MX插入Flash图像编辑界面
如图2-6所示，要插入Frame框架，先单击插入面板[布局]项的框架对象，选择[左侧和顶部]对象，即页面分为左、右上、右下三个独立的显示区，DW会自动生成4个htm文件。当光标在各个显示区域单击时，多页标签行的同一个标签上出现该文件名，代码编辑区出现对应的代码；各个文件要分别独立存盘，如left.htm、top.htm、t1.htm；当光标移至窗体边框或框架分隔处时，鼠标指针变为横或竖向箭头，单击鼠标，代码编辑区显示所设定框架布局的第4个htm文件的代码，如存盘为index.htm文件，则该文件包含自动生成的＜frame＞代码和布局的三个＜src＞指向的文件。在属性面板中也可修改框架属性和各区域大小等。
图2-6 Dreamweaver MX插入Frame框架和Form表单编辑界面
在[窗口]菜单，单击[框架]项，将在此行前加√，在DW编辑界面右部会显示[框架]面板，在此面板窗口内，标出了框架的形状和框架的几个显示区域。
在图2-6的下方插入了一个Form表单，在页面上设定好光标位置，再单击插入面板[表单]项的表单对象，出现红色虚线框，再单击[表单]项的文本字段对象、按钮对象，添加文字，页面上将出现如图2-6所示的Form表单，代码编辑区显示相应的代码。
在以上DW的简单介绍及基本应用的例子中，我们已初步看到了其强大的功能和方便的操作，开发者可以不用写一行代码，仅用鼠标操作，就可以制作出精彩网页。