第一章  认识Dreamweaver 3的工作环境

Dreamweaver是Macromedia公司推出的主页编辑工具。它是一个所见即所得网页编辑器，支持最新的DHTML和CSS标准。它采用了多种先进技术，能够快速高效地创建极具表现力和动感效果的网页，使网页创作过程变得简单无比。值得称道的是，Dreamweaver不仅提供了强大的网页编辑功能，而且提供了完善的站点管理机制，可以说，它是一个集网页创作和站点管理两大利器于一身的超重量级的创作工具。

从Dreamweaver 2开始，它就已经成为专业网页创作者事实上的标准工具，而随着最新的Dreamweaver 3的出现，必将极大提高国内网页创作者的综合水平，掀起一股网页创作的高潮。本章主要介绍Dreamweaver 3的工作环境，以引导用户快速了解Dreamweaver强大无比的创作能力。

  概述

微软的FrontPage 2000号称最好的所见即所得的网页编辑器，然而一旦您使用过Dreamweaver，几乎可以肯定，您一定会将FrontPage抛诸脑后。利用FrontPage创作网页，不但要对付各种各样烦琐和难懂的对话框，而且在页面的控制方面也实在差强人意。不仅如此，FrontPage还会生成多如牛毛的垃圾代码，其庞大的体积和单调的功能特性远远不成比例。在实际创作过程中，我们更多感受到的是FrontPage像洪水一样地难于控制，而很难将精力集中于网页创作本身。一个高明的网页创作者，不仅希望能够创建出美观的页面，而且希望生产最精简和高效的HTML源代码，在对网页源代码进行精确地控制方面，FrontPage几乎无能为力。因此，对于网页创作者来说，使用“记事本”程序直接撰写网页代码，似乎显得更为方便。

但这些都已经过去了，Macromedia公司的Dreamweaver的出现，使用户发现，创作网页原来可以这样轻松。Dreamweaver提供了强大的设计工具，在不用书写一行代码的情况下，就能够快速创建各种极具动态HTML特性的网页，例如动画和分层等；利用Dreamweaver的目标浏览器检查特性，可以创建兼容性极好的网页，以适用于各种平台和各种浏览器；利用Dreamweaver的Roundtrip HTML技术，用户可以精确控制Dreamweaver生产的网页源代码，例如，在可视编辑器中进行编辑时，可以在HTML检视器中同步地看到Dreamweaver到底为您生成了什么样的源代码，从而杜绝了盲人摸象的弊病。在编辑由其他网页创作工具所生成的网页时，Dreamweaver会尊重其他工具所生成的原代码，不会任意修改它，当然，如果需要，Dreamweaver也仍然可以帮助您“净化”其他工具所生成的垃圾代码。

Dreamweaver是完全可定制的，您可以创建自己的对象和命令，修改菜单和快捷键，甚至可以通过自己书写JavaScript代码来为Dreamweaver创建新的行为和属性面板，以增强Dreamweaver本身的能力。

  Dreamweaver 3的新特性

Dreamweaver 3是Macromedia公司最新产品，同Dreamweaver 2相比，它进行了多项改进，例如增强了HTML编辑特性，改善了站点管理机制，指定了更紧凑和高效的工作流程，在添加一些特殊元素，诸如特殊字符、导航条和图像映像等时更为便捷，并且允许您充分定制Dreamweaver和扩展Dreamweaver。

下面就让我们看一看最新的Dreamweaver 3相较Dreamweaver 2提供了哪些新特性。

  编辑HTML

在对HTML的编辑控制方面，Dreamweaver可以称得上是不遗余力。

快速标记编辑器（Quick Tag Editor）

利用快速标记编辑器，在编辑网页的过程中，用户可以在任意时刻任意位置直接修改对应生成的源代码，实现某些可视化操作下不能实现的特性，只要首先选中要修改的部位，然后按下Ctrl+T组合键，就会打开一个编辑窗口，以便于进行源代码的编辑。

HTML样式（Style）

在Dreamweaver 3中增强了对HTML样式的管理，允许您在网页中通过使用可以被多种浏览器共同支持的标准HTML标记（例如<b>和<font>标记）来创建样式，而不像以往那样仅仅只能使用层叠样式单（CSS）来创建样式，这样生成的网页兼容性更好。

增强的HTML源代码检视器（HTML Source inspector）

在Dreamweaver 3中，源代码检视器的功能得到了增强，现在它可以为每条源代码显示行号，便于定位；可以像其他字处理程序那样通过在空白边缘上单击来选择完整的行；也可以对选中的HTML源代码部分进行拖放；并且还也可以将HTML源代码检视器停靠到其他的浮动面板上，形成选项卡的形式。

增强的第三方标记模式

所谓第三方标记，指的是由其他工具所生成的HTML源代码标记，例如Microsoft Active Server Pages（ASP）和ColdFusion标记。在Dreamweaver 3中，允许您指定要忽略那些由第三方标记类型所生成的内容。同时，Dreamweaver还提供了新的重写选项，以便于您控制是否允许对某些特定内容字符进行重写。

修复Netscape浏览器重设大小的错误

在Netscape浏览器中，如果重设浏览器的大小，会导致CSS层产生错误。在Dreamweaver 3中，允许您设置是否要自动添加一段JavaScript代码，以修复该错误，这样您所编辑的网页在Netscape浏览器中就可以被正确浏览。

  站点管理

Dreamweaver 3不仅可以编辑网页，而且可以进行站点管理，它允许将站点管理同网页创作结合起来，高效快捷地构建网站。

在Dreamweaver 3中，对站点管理方面进行了如下一些改进。

同步文件

Dreamweaver 3允许您快速地保持您本地站点和服务器上站点之间文件版本的同步，以确保在本地站点和服务器站点上的文件都是最新的版本。您也可以通过该特性来从站点中删除一些无用的废弃文件。

更容易的文件核查和检验

通常一个大型的网站会将维护工作分摊给多个维护人员来完成，在网站的维护过程中，合理分配文件的管理权限是非常重要的，否则，如果一个文件同时备被多个维护人员操作修改，则会导致不可预料的错误。在Dreamweaver 3中，通过所谓的Check In和Check Out操作来实现对文件操作权限的控制。Check Out等同于将文件锁定，只允许自己对之进行修改，其他的维护人员不能对它进行操作，而Check In等同于释放对文件的锁定，这样其他的维护人员就可以对该文件进行操作。

在Dreamweaver 3中，允许您在文档窗口中直接获取文件、放置文件、Check In和Check Out文件，而不用每次都切换到站点管理窗口中。

在放置文件之前存储文件

在Dreamweaver 3中，当将一个尚未存储的网页放置到远端的服务器上时，系统会提示您要先将网页存盘，这样使文件更为安全。

编辑Flash动画文件中的链接

在Dreamweaver 3中，可以对Flash动画文件中的链接进行编辑。在站点地图中会显示Flash文件中所有的链接，利用链接检查特性可以对这些链接进行检查，以查看其中是否有错误。

  创建、编辑对象和页面元素

在Dreamweaver 3中，对对象和页面元素的创建和编辑能力进行了很多改进。

字符对象

在编辑网页的过程中，很多特殊符号，例如版权符号（©）和商标符号（™）的输入一直是让人很头痛的事情，因为要输入这些符号，必须输入相应的代码。譬如对于版权符号，对应的代码是&copy;，记住众多符号对应的代码是很难做到的。在Dreamweaver 3中，提供了一组特殊字符对象，从对象面板上就可以很容易地将它们插入到网页中，用户再也不用死记硬背这些符号的代码了。

框架对象

框架在网页创作中是最为常见的类型。在Dreamweaver 3中对框架制作功能进行了增强，允许您快捷方便地创建预定义的框架集。

其他对象

在Dreamweaver中允许您很快速便捷地往文档中添加诸如导航条（Navigation Bars）、跳转菜单（Jump Menus）、e-mail链接、日期和其他新型的媒体对象（如Flash 4动画、Shockwave 7动画以及其他常规对象等）。

内联图像映像

利用图像映像，可以实现在一幅图像中创建链接。在Dreamweaver 3中，允许您不离开文档窗口，直接对图像映像进行操作，例如添加热区、重设热区大小、改变链接目标，以及增删行为（Behaviors）等。

  工作流程的改善

Dreamweaver 3改进了原先的工作方式，提供了许多更新更可靠的方法，帮助网站的建立。

设计附注（Design Notes）

当站点中的文件变得越来越多时，准确了解文件中的内容和文件的含义变得非常重要，在Dreamweaver 3中允许您往文件上附加附注信息，以便对文件进行跟踪和管理。同时，利用这些附着于文件上的附注信息，还可以起到同网站其他维护人员进行信息交流的作用。

Fireworks是Macromedia公司的又一Internet创作利器，主要用于创建高质量、低尺寸或动态的图像。由于都是一个公司的产品，因而它同Dreamweaver有着非常紧密的集成关系。在Dreamweaver 3中，您甚至可以将设计附注添加到由Fireworks所创建的图像中，然后在Dreamweaver中对之进行编辑。

导入和净化Word生成的网页

许多人目前正使用Microsoft Word来生成HTML文件，特别是在Word 2000发布之后，使用它作为网页生成工具的人越来越多。在Dreamweaver 3中，允许您直接导入由Microsoft Word所生成的HTML文件，并对之进行编辑。

使用过Word进行网页创作的人都知道，Word会在网页文件中添加大量的垃圾代码和无用的标签信息，利用Dreamweaver 3的净化特性，能够帮助您从Word生成的HTML文件中剔除那些无关紧要的XML代码和样式、删除无用的标记、修复无效的HTML代码，并对这些代码重新进行格式化，使之符合自己的需求。

历史面板（History palette）

历史面板可以说是Dreamweaver 3中最为重要的工具之一，使用历史面板能够跟踪您所进行的每一步动作。您可以随时撤销操作，恢复到原先的工作中，这样再也不用担心操作失误了，当然，也可以取消撤销操作，继续原先的编辑过程。

历史面板的作用不仅如此，它不仅可以用来撤销和恢复操作步骤，也可以实现对某段操作步骤序列的重复进行。它甚至可以将操作步骤复制到剪贴板上，然后在其他的文档上进行粘贴，以应用这些操作步骤。您还可以将这些步骤作为命令存储起来，它们会自动出现在“Commands”（命令）菜单中。

重复

在网页编辑中，有时候希望重复某些操作，例如重复制作大量的相同文本或表格，Dreamweaver 3提供了重复操作特性，允许您快捷有效地重复进行相应操作。

导入表格数据

许多原始数据通常保存在一些特定的文档，例如工作表文件或数据库中，如果希望在网页中使用这些数据，通常需要进行额外的处理。在Dreamweaver 3中，允许您自动创建包含外界数据的表格，这些数据可以从一些特定类型的文档，例如Microsoft Excel或Microsoft Access所生成的分隔符形式的文档中读取。

插入Fireworks HTML

在Dreamweaver 3中，可以从由Macromedia Fireworks所生成的图像中导入HTML源代码和图像。您可以从Dreamweaver 3中启动Fireworks并编辑源PNG图像。

启动和编辑媒体

Dreamweaver 只是一个网页编辑器，如果希望编辑其他类型的文件，例如图像或多媒体文件，则需要使用其他的工具。在站点窗口中，双击任何图像或媒体文件，就可以启动相应的外部编辑器，对这些图像或媒体文件进行编辑，您再也不用从“幽深”的“开始”菜单中启动外部编辑器了。

  定制和扩展Dreamweaver

Dreamweaver 3是完全可定制的，您可以按照自己的需要，将之定制为自己喜欢的样子。

可定制的菜单和快捷键

Dreamweaver原始的菜单和快捷键不一定符合您的需要，您可以对菜单和快捷键进行编辑、定制或扩展，使之更方便进行操作。

更强的灵活性

在Dreamweaver 3中提供了300个新的应用程序编程接口（API）函数，允许您创建自己的JavaScript，以对Dreamweaver 进行扩展，例如可以定制自己的浮动面板和属性面板等。

  Dreamweaver 3的工作环境

前面介绍了许多Dreamweaver 3的新特性，对于不熟悉Dreamweaver的读者来说，或许显得过于枯燥，这一节里介绍Dreamweaver 3的工作环境，给大家一个稍微清晰的感性认识。

  启动Dreamweaver 3

在安装Dreamweaver 3之后，它会自动在Windows的“开始”菜单中创建程序组，打开“开始”菜单，选择“程序”，选择“Macromedia Dreamweaver 3”，再选择“Dreamweaver 3”命令，即可启动Dreamweaver 3，如图 1‑1所示。采用这种方法启动Dreamweaver，会首先新建一个空白的HTML文档等候编辑。

另一个更常用的方法是在Windows的窗口或资源管理器中直接启动Dreamweaver 3并载入要编辑的HTML文档，首先选中要编辑的HTML文件图标，然后单击鼠标右键，打开右键快捷菜单，并选择“Edit with Dreamweaver”（用Dreamweaver编辑）命令，如图 1‑2所示，即可启动Dreamweaver 3，并载入要编辑的HTML文档。

当启动Dreamweaver 3之后，会出现如图 1‑3所示的程序窗口，其上浮动有多个面板。

图 1‑1  启动Dreamweaver 3

图 1‑2  直接载入要编辑的HTML文档

  认识Dreamweaver 3的窗口结构

第一次看到如图 1‑3所示所示的窗口和浮动面板，对于一个用惯了微软程序的人来说，可能一时会感到手足无措。事实上，Dreamweaver更像是一个从Macintosh计算机上移植而来的产品，而不像一个纯粹的Windows应用程序，它的使用方法同PageMaker和Photoshop之类的排版软件类似，而同微软建议的Windows应用程序的外观标准有一定的差别。事实上Dreamweaver应用程序的外观同其异常灵活的功能特性分割不开，对于不同级别和经验的用户，都能够从这种应用程序外观上获得显著的工作效率。

图 1‑3  第一次启动Dreamweaver 3

一般来说，一个典型的Dreamweaver应用程序操作环境包括如下几个部分，如图 1‑4所示：

图 1‑4  Dreamweaver 3的窗口结构

文档窗口

文档窗口显示当前所创建和编辑的HTML文档内容。

启动面板（Launcher）

启动面板上包含了普通用户最常使用的控制按钮，通过这些按钮，可以快速启动或关闭最常用的检视器（Inspectors）和浮动面板（Palettes）。

在文档窗口下方的状态栏上也出现和启动面板相同的按钮，称作微型启动栏（Mini-Launcher），使得即便启动面板被关闭，用户也能够很容易地使用启动面板上的功能。

启动面板上的按钮类型是可以定制的。

对象面板

在对象面板上包含了多种不同类型的按钮，用于在文档中创建不同类型的对象，例如图像、表格、框架等。

属性面板

在属性面板中显示文档窗口中选中对象（如文本、图像、表格等）的属性，并且允许对这些对象的属性进行修改。

可停靠浮动面板

可停靠浮动面板是一个工具集合的控制框架，它仿佛一个船坞，您可以将各种浮动窗口、面板和检视器放置在其中，组合成为选项卡的形式，以节省屏幕空间，必要时还可以将这些浮动窗口、面板和检视器从中剥离，成为独立的浮动面板。

标题栏

标题栏上显示当前正在编辑文档的标题和名称，它首先显示文档的标题，然后显示文档的文件名称。

注意：文档的标题和文档的文件名称是不同的概念。文件的标题通常在文档中的<title>和</title>标记中，是在用浏览器打开文档时显示在浏览器窗口的标题栏上的名称，而文件的名称则是文档存储在磁盘上的文件名。

菜单栏

几乎所有的工作都可以通过菜单来完成，尽管利用浮动面板可以加快操作速度，但是有时候为了节省屏幕空间，会将浮动面板关闭，这时利用菜单就显得尤为重要。

利用Window菜单，可以控制各种浮动窗口和面板的开启和关闭。

状态行

Dreamweaver 3的状态行很有特色，它包括几个功能区，分别用于显示和控制文档源代码、显示页面大小、查看传输时间，其最右方包含了和启动栏一样的按钮组合，称作“微型启动栏”，可以完成启动栏同样的功能。

  控制浮动面板

对象面板、启动面板、属性面板和可停靠浮动面板通常总称作“浮动面板”，它们浮动于文档窗口之上，您可以将输入焦点在文档和面板之间来回切换。

利用浮动面板来控制对页面的编写，而不是利用烦琐的对话框，这是Dreamweaver编辑网页中最令人称道的特性。在一些其他的网页编辑器，例如FrontPage中，经常需要打开一个对话框来设置各种属性，在关闭对话框后才能看到设置结果，而在Dreamweaver中通过在浮动面板中进行设置，直接就可以在文档窗口中看到结果，避免了中间过程，从而提高了工作效率。

熟悉微软系列应用程序的用户可能对Dreamweaver 3的浮动面板感觉很不习惯，实际上，Dreamweaver 3的浮动面板非常灵活，同时也更便于控制。

  使用启动面板

启动面板主要用于快速启动相应的任务，或显示/隐藏相应的浮动面板，在状态行的右方有一个微型启动栏，它同启动面板上的按钮是一样的，如图 1‑5所示。

图 1‑5  启动面板和微型启动栏的对应关系

启动面板上的按钮都是按下/弹起类型的按钮，也被称作切换按钮，换句话说，这些按钮可以保持被按下的状态。单击启动面板上的按钮，使之被按下，会激活相应的浮动面板窗口，再次单击其上的按钮，可以使之弹起，这会将相应的浮动面板窗口隐藏。

我们已经知道，在Dreamweaver的可停靠浮动面板中可以将多个浮动面板组合成选项卡的形式，如果在启动面板上单击这些选项卡对应的按钮，则会将相应的选项卡激活到最顶端，而在启动面板上弹起任何一个可停靠浮动面板选项卡对应的按钮，都会将整个可停靠浮动面板隐藏。

图 1‑6  使用启动面板

例如，在默认状态下，HTML源代码检视器是一个单独形式的窗口，单击启动面板上的“HTML Source”（HTML源代码）按钮，可以激活HTML源代码检视器，显示当前编辑文档的源代码，再次单击该按钮，则可以重新隐藏HTML源代码检视器。在默认状态下，CSS 样式浮动面板是“停靠”在可停靠浮动面板中的，它以一个选项卡的形式出现，则单击启动面板上的“CSS Styles”（CSS样式）按钮，即会将可停靠浮动面板上的CSS Styles选项卡激活到顶端，如图 1‑6所示。

默认状态下，启动面板是水平放置的，单击面板右下角“垂直放置”标记，可以将启动面板变为垂直放置，同时该“垂直放置”标记变为“水平放置”标记；在垂直状态下，单击面板右下角的“水平放置”标记，又可以恢复启动面板的水平状态，如图 1‑7所示。

图 1‑7  改变启动面板的水平和垂直状态

  使用对象面板

对象面板上包含一些按钮，在网页编辑过程中，通过单击这些按钮，可以往网页中添加相应的对象，如图像、表格、框架和各种其他媒体等。

对象面板的空间是有限的，为了能够充分利用有限的面板空间，针对不同类型的对象，对象面板采用了多层结构，将不同类型的对象按钮放置于不同的浮动面板层中。

单击对象面板上的向下箭头，会打开一个下拉菜单，显示对象面板上所包含对象的类型，默认状态下显示的是Common（常用）类型，如果从该下拉菜单中选择其他类型，则在对象面板上会显示相应类型的按钮，在图 1‑8中，左边的图显示了打开下拉菜单，选择Forms（表单）类型的情形，右边的图则显示了表单类型对象面板的内容。

图 1‑8  在对象面板上选择对象类型

  使用属性面板

属性面板主要用于显示在文档窗口中所选中元素的属性，并允许用户在属性面板中对元素属性直接进行修改，根据选中元素的不同，属性面板上的内容也不同。例如，当在文档窗口中选择文本时，属性面板会显示如图 1‑9所示的外观，而在文档窗口中选择图像时，属性面板会显示如图 1‑10所示的外观，

图 1‑9  选中文本时的属性面板

图 1‑10  选中图像时的属性面板

在属性面板的右下角，通常都有一个指向下方的三角形标记，如图 1‑11所示，单击该标记，可以展开属性面板，显示更多的属性设置内容，当属性面板被展开时，右下角的三角形标记变为指向上方，如图 1‑11所示单击该标记，又可以重新折叠属性面板，恢复原先的外观。图 1‑12显示了展开图像属性面板时的情形。

图 1‑11  属性面板的展开和折叠标记

图 1‑12  展开的属性面板

  浮动面板的移动和重设大小

和普通的Windows应用程序没有什么不同，通过拖动浮动面板的标题栏，就可以将浮动面板在桌面上移动，浮动面板的位置并不局限于Dreamweaver的文档窗口内，实际上，它可以移动到Windows桌面上的任何位置。

如果屏幕的分辨率足够大，通过调整浮动面板和文档窗口的位置，可以将浮动面板完全放置在文档窗口的视野之外，这样既不影响文档的编辑，也不影响浮动面板的使用。

除了启动面板和属性面板，其他大多数的浮动面板，包括对象面板和可停靠浮动面板，其大小都可以任意调整，通过拖动浮动面板的边框，就可以改变其大小。

在改变对象面板大小时，当对象面板的大小不足以容纳其上的元素时，会在左下角或右上角出现箭头标记，单击该标记即可显示其余元素，如图 1‑13所示。

图 1‑13  改变对象面板的大小

注意：如果屏幕上的浮动面板的位置变得过于混乱，甚至超出了桌面范围，不便操作，这时可以打开Window（窗口）菜单，选择“Arrange Floating Palettes”（重新排列浮动面板）命令，Dreamweaver会将所有显示的浮动面板在桌面上重新排列，便于用户调整和使用。

  停靠浮动面板

在Dreamweaver 3对浮动面板的管理中，最具特色的是采用可停靠浮动面板的方式。利用可停靠浮动面板，可以将众多浮动面板窗口综合放置在一个窗口中，组合成为选项卡的形式，不仅有效节省的屏幕空间，而且也更便于使用。图 1‑14显示了一个带有4个选项卡的可停靠浮动面板，其中4个选项卡实际上都是单独的浮动面板窗口。

图 1‑14  带有多个选项卡的可停靠浮动面板

可停靠面板是可以进行人工组合和拆分的，要将某个以选项卡形式出现的浮动面板从组合中拆分而出，只要拖动其选项卡，将之移动到可停靠浮动面板之外就可以了，如图 1‑15所示，这时可停靠浮动面板中的一个浮动面板就被拆分出来，如图 1‑16所示。

图 1‑15  拆分可停靠浮动面板

图 1‑16  拆分出的浮动面板

注意：不要以为只有默认出现在屏幕上如图 1‑14所示的浮动面板是唯一的可停靠浮动面板，实际上，被拆分出的浮动面板仍然是可停靠浮动面板，换句话说，可以以选项卡形式出现的所有浮动面板，其本身都是可停靠浮动面板。在图 1‑16中，被拆分出的Templates浮动面板虽然是单独的窗口，但它带有一个选项卡（就是它本身），这表明它仍然是可停靠的。换句话说，它也可以接纳其他的浮动面板，组合多个选项卡的形式。例如，我们可以从原先的可停靠浮动面板中再次拆分出CSS Styles面板，然后将它同Templates面板组合成为一个带有两个选项卡的可停靠浮动面板。

如果希望将某个浮动面板同其他的浮动面板组合成多个选项卡的形式，则可以拖动该浮动面板的选项卡（可停靠浮动面板至少都会带有一个选项卡，也即它本身），移动到目标浮动面板的窗口范围内，如图 1‑17所示，当目标窗口显示粗框时释放鼠标，单独的浮动面板就被组合成选项卡形式。

图 1‑17  合并可停靠面板

注意：如果窗口中同时显示了两个可停靠浮动面板，而希望将某个面板中的选项卡移动到另一个面板中，可以将该选项卡直接从源面板拖动到目标面板上。

  显示和隐藏浮动面板

如果不希望显示某个浮动面板，可以通过单击面板窗口上的“关闭”按钮来关闭它，如图 1‑18所示。需要注意的是，不同的浮动面板，关闭按钮的位置或许也不同，通常它出现在浮动面板标题栏的右端或上端。

图 1‑18  浮动面板上的“关闭”按钮

通过菜单同样可以进行浮动面板的隐藏和显示操作，打开Window（窗口）菜单，选中相应的菜单项，即可显示相应的浮动面板，如图 1‑19所示，被显示的浮动面板左端带有“勾号”的标记。再次选择带有“勾号”的菜单项，则会将相应的面板重新隐藏。

图 1‑19  Dreamweaver 3的Window菜单

从图上我们可以也可以看出众多浮动面板的区别，启动面板、对象面板和属性面板不是可停靠浮动面板，它们处于菜单的第一条分隔线上，而所有的可停靠浮动面板都位于菜单的中间区域。

注意：

在实际应用过程中，通常会在屏幕上显示很多的浮动面板，要将这众多的浮动面板一一关闭是很麻烦的事情。事实上，用户之所以要关闭浮动面板，主要是为了节省文档窗口的空间，在输入完毕，很可能还要继续使用面板，这时可以利用Dreamweaver的暂时隐藏浮动面板特性，打开Window（窗口）菜单，选择“Hide Floating Palettes”（隐藏浮动面板）命令，即可将所有显示的浮动面板暂时隐藏，屏幕上只留下文档窗口，便于文档的编辑，如果希望重新显示原先屏幕上显示的浮动面板，可以再次打开Window（窗口）菜单，选择“Hide Floating Palettes”（隐藏浮动面板）命令。

通常用户可能更喜欢使用热键，而不是操作菜单，隐藏浮动面板命令的热键是F4。在操作过程中，按下F4键，就可以将所有屏幕上原先显示的浮动面板隐藏起来，再次按下F4键，又可以重新显示所有原先显示的浮动面板。

  状态行

在Dreamweaver 3文档窗口的状态行上可以进行一些功能设置，如图 1‑20所示。

图 1‑20  状态行

  标记选择器

标记选择器主要有两个用途：显示当前插入点位置的HTML源代码标记和选中标记在文档中对应的内容。

每当用户在文档窗口中对文档内容进行了格式化时，标记选择器中都会显示相应的标记。例如，如果在文档窗口中将一段文字加粗，这实际上是将该段文字的两端分别放上<b>和</b>标记，当将插入点放置到该段文字中时，标记选择器上就会显示<b>标记。

如果希望选中某个标记在文档中对应的内容，可以直接在标记选择器上单击该标记按钮。例如，文档主体通常包含在<body>和</body>标记中，单击标记选择器上的<body>按钮，即可选中文档所有位于<body>和</body>标记中的内容。

在标记选择器上单击鼠标右键，会出现如图 1‑21所示的菜单，允许您对标记进一步处理，我们会在下一章中，介绍Dreamweaver 3对HTML源代码的控制特性。

图 1‑21  “标记选择器”上的右键快捷菜单

  窗口大小弹出菜单

在窗口大小弹出菜单区域显示当前文档窗口的大小尺寸，以象素作为单位。当您拖动文档窗口边框改变窗口大小时，会看到状态行上窗口大小弹出菜单区域中显示的数值也会发生变化。

窗口大小弹出菜单主要用于设置文档窗口和显示器屏幕之间的对应关系，单击该菜单区域任意位置，即可打开该菜单，如图 1‑22所示。该菜单项左方是文档窗口的大小，右面是显示器窗口的大小，根据显示器屏幕大小选择相应的菜单项，就会发现文档窗口大小相应发生变化。

例如，如果从窗口大小弹出菜单中选择“760 x 420  800 x 600, Maximized”（760 x 420  800 x 600, 最大化）项，则表明在分辨率为800×600的显示器上，将浏览器窗口最大化即可完全观看当前文档窗口大小范围内所制作的网页。在这里Dreamweaver计算了浏览器边框的尺寸，并将它从显示器尺寸中剔除，所以文档窗口的大小总是比设置的屏幕分辨率要小一些。

图 1‑22  窗口大小弹出菜单

如果您希望定制自己需要的文档窗口大小，可以从菜单中选中“Edit Sizes”（编辑大小）项，打开一个对话框，自行编辑需要的尺寸，该对话框实际上就是Dreamweaver 3的参数设置对话框，请参看1.3.4.5一节。

  文档大小和下载速度

在状态行上“文档大小和下载速度”区域显示当前编辑文档的大小，和该文档在Internet上被完全下载的时间，针对不同的下载速率，下载时间当然也不相同，默认状态下，系统假设用户使用28.8K的调制解调器下载该网页。

随着科技发展，现在可能很少有人使用28.8K的调制解调器了，您可以重新设置下载速率，让Dreamweaver重新计算下载时间，请参看1.3.4.5一节。

  微型启动栏

微型启动栏就是启动面板的一个缩小板，在启动面板被关闭的情况下，也能帮助用户快速使用其上的功能。

如果您始终将启动面板显示在桌面上，则状态行上的微型启动栏显得很多余，则您也可以将之从状态行上移去，请参看1.3.4.5一节。

  设置状态条属性

打开“Edit”（编辑）菜单，选择“Preferences”（参数设置）命令，会打开Dreamweaver 3的参数选择设置对话框，从左边的列表中选择“Status Bar”（状态行），即可得到如图 1‑23所示的对话框，允许您设置状态行参数。

用鼠标在“Windows Sizes”（窗口大小）区域相应位置单击，激活编辑状态，然后输入需要的数字和描述信息，即可定制窗口大小弹出菜单。

打开“Connection”（连接）后面的下拉列表，选择相应的选项，即可设置下载速度，Dreamweaver 3会根据这里假设的下载速度重新计算当前文档的下载时间。

如果选中“Launcher”（启动）后面的复选框，即可在状态行上显示微型启动栏；清除该复选框，则不在状态行上显示微型启动栏。

图 1‑23  设置状态行属性

  标尺和网格

在网页排版的过程中，如果希望对元素精确定位，则标尺和网格是非常有用的工具，在文档窗口中，默认状态下不显示标尺和网格，您可以将之显示出来，以便排版，方法如下：

打开“View”（查看）菜单，选择“Rulers”（标尺）菜单项，再选择“Show”（显示）命令，即可在文档窗口中显示标尺。

打开“View”（查看）菜单，选择“Grid”（网格）菜单项，再选择“Show”（显示）命令，即可在文档窗口中显示网格。

一个显示了标尺和网格的文档窗口如图 1‑24所示。

图 1‑24  一个带有标尺和网格的文档窗口

从相应的菜单中，还可以设置标尺的单位，网格的单位，以及网格的间距等信息，我们会在有关章节进行介绍。

这里要指出的是，在本书中的插图里，如非必要，一般不显示标尺和网格，以免干扰插图内容。

  设置中文环境

在网页中，不同的语言文字，应该有不同的文字编码方式，特别是对于采用双字节文本的国家，不同的文字内码，显示出来的内容也绝不相同。例如，对于中国大陆使用的简体汉字，采用GB2312内码（通称国标码），对于港、澳、台使用的繁体汉字，则采用BIG5内码（通称大五码）。如果网页的编码方式没有设置正确，则在浏览器中不能正确显示这些文字。

Dreamweaver 3至今尚未有中文版本，但是它可以在中文的操作系统下正确使用，也完全支持中文双字节的环境，Dreamweaver 3甚至会自动检测您操作系统的语言，自动设置正确的文字编码方式，在默认情况下，您无需任何设置，即可进行正确的中文网页创作。

您也可以指定其他的编码方式，打开“Edit”（编辑）菜单，选择“Preferences”（参数设置）命令，即可打开Dreamweaver 3的属性对话框。从对话框左边列表选择Fonts/Encoding（字体/编码）项，在右边即可设置网页的编码方式，如图 1‑25所示。

确保“Default Encoding”（默认编码）下拉列表中选中的是“Simplified Chinese（gb2312）”（简体中文（gb2312）），则创建的网页就可以在大陆环境下的浏览器中正确浏览。

图 1‑25  设置字体和编码方式

  查找帮助信息

如果希望更详细地了解Dreamweaver的使用方法，最好的方法是查看帮助信息，并仔细阅读。Dreamweaver 3提供了一套完整的基于HTML的帮助系统，帮助您及时获取任何方面的使用指导。

由于帮助系统是基于HTML的，因此要求计算机中必须已经安装了一套浏览器，如果您使用的是Windows操作系统，必须安装有如下浏览器之一：

l         Netscape Navigator 4.0或更高版本

l         Microsoft Internet Explorer 4.0或更高版本。

如果您使用的是3.0版本的浏览器，则仍然可以看到帮助信息的内容，但是某些特性（例如搜索功能）不能正常工作。

在Dreamweaver 3的帮助系统中，使用JavaScript来实现搜索功能，因此必须将浏览器的JavaScript特性激活，如果您已经可以使用搜索功能，就表明浏览器的JavaScript特性已经被激活了。

  启动帮助系统

有多种方法启动Dreamweaver 3的帮助系统。

  直接启动帮助

Dreamweaver 3有两套帮助，一个是基本帮助，一个是高级帮助。基本帮助主要介绍Dreamweaver 3的操作，而高级帮助主要介绍如何使用API扩展Dreamweaver 3。这两套帮助都是基于HTML的，采用相同的浏览和查看方法，只是内容不同而已。

您可以直接启动帮助，然后自行浏览搜索需要的帮助信息，方法如下：

启动Dreamweaver 3后，在任何时刻，按下F1键，或是打开“Help”（帮助）菜单，选择“Using Dreamweaver”（使用Dreamweaver）命令，即可启动浏览器，载入基本帮助信息内容，如图 1‑26所示。

图 1‑26  Dreamweaver 3的帮助系统

打开“Help”（帮助）菜单，选择“Extending Dreamweaver”（扩展Dreamweaver）命令，可以启动浏览器，载入Dreamweaver 3的高级帮助内容。

在“Help”（帮助）菜单中，还有其他一些选项，允许您直接启动帮助，并跳转到相应的信息页上，例如，选择“What’s new in Dreamweaver 3”（Dreamweaver 3的新特性）菜单项，则会在帮助系统中直接跳转的显示Dreamweaver 3最新特性的页面上。

  查看操作相关帮助

在编辑过程中，可能临时需要查看当前操作的帮助信息，这时可以按照如下方法操作：

如果是在对话框中，要查看当前对话框的信息，可以单击对话框上的“Help”（帮助）按钮，如图 1‑27所示，会启动帮助系统，并直接跳转到同当前操作有关的帮助页上。

图 1‑27  对话框上的“Help”按钮

如果是在使用浮动面板（包括属性面板和可停靠浮动面板）进行编辑的过程中，要查看帮助信息，可以单击浮动面板上相应的帮助按钮，如图 1‑28所示，也同样会启动帮助系统，并直接跳转到同当前操作有关的帮助页上，

图 1‑28  查看操作相关帮助

  查询帮助信息

Dreamweaver 3的帮助系统是基于HTML的，熟悉网页浏览的人很容易掌握它。

  浏览信息

有过HTML浏览或编辑经验的人可以看出，Dreamweaver 3的帮助采用了框架的构成形式，浏览器窗口被分割为两个窗格，左边是目录窗格，右边则显示具体的帮助信息。通过在左方目录窗格中单击相关选项，即可在右方帮助窗格中显示帮助内容。

目录窗格中的帮助项是可折叠/展开的，单击某个帮助项的根部，即可展开该帮助项中的所有子项，再次单击根部，又可以折叠帮助项，将所有帮助子项隐藏起来。

在Dreamweaver 3帮助页面的顶端，带有如图 1‑29所示的导航条，利用导航条，可以帮助用户更方便地查看帮助。

图 1‑29  Dreamweaver 3帮助系统的导航条

单击“CONTENTS”（目录）按钮，可以在浏览器左方窗格显示帮助目录项。

单击“INDEX”（索引）按钮，可以在浏览器左方窗格显示索引，索引按字母排序。

单击“上一项”或“下一项”按钮，可以按页浏览帮助。

  搜索帮助

单击导航条上的“SEARCH”（搜索）按钮，可以打开如图 1‑30所示的对话框，允许您在帮助内容中进行文本搜索。

图 1‑30  搜索帮助

在第一个文本框中输入要查询的关键字，单击“List Topics”（列出主题）按钮，即可在下方的列表框中显示包含该关键字的帮助主题。选中一条主题，单击“Display”（显示）按钮，即可在浏览器窗口中显示相应的帮助信息。

注意：如果希望一次查询多个关键字，可以在这些关键字之间用“加号”（+）连起，再进行搜索。