随着互联网(Internet) 的家喻户晓，HTML技术的不断发展和完善，随之而产生了众多网页编辑器。从网页编辑器基本性质上可以分为所见即所得网页编辑器和非所见即所得网页编辑器（即源代码编辑器），两者各有千秋。所见即所得网页编辑器的优点就是直观、使用方便、容易上手，在所见即所得网页编辑器中进行网页制作和在Word中进行文本编辑不会感到有什么区别，但它同时也存在难以精确达到与浏览器完全一致的显示效果的缺点。也就是说在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到真正想要的效果，这一点在结构复杂一些的网页（如分帧结构、动态网页结构及精确定位）中便可体现出来。非所见即所得的网页编辑器，就不存在这个问题，因为所有的HTML代码都在用户的监控下产生，但是，非所见即所得编辑器的先天条件注定了它的工作效率太低。
如何实现两者的完美结合，既能产生干净、准确的HTML代码，又具备所见即所得的高效率、直观性，这一直是网页设计师的梦想。Dreamweaver基本上解决了以上的问题，是一个非常优秀的所见即所得网页编辑器。
Dreamweaver 4可以满足Web开发人员的各种需要。使用Dreamweaver 4，在大大提高网页设计人员的生产效率的同时，还可以保持对源代码的完全控制。对于网页设计的新手，也可以快速提高他们的工作效率，因为使用Dreamweaver 4，可以轻松地可视化编辑加入网页的相关对象。
Dreamweaver 4提供了友好的用户界面和强大功能的快捷工具，支持多种浏览器，可建立跨平台的网页，同时还可以制作不需要编写任何代码的动态网页。它具有强大的网页排版及制作功能，如可通过层叠样式表格式化文本、通过层定位网页元素、通过时间链制作动画，以及使用库项目实现代码的重复使用等。

1.1? Dreamweaver 4新增功能简介

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

1．独特的往返HTML功能

这个功能可以同步访问设计视图（Design View）和HTML源代码，可以打开用其他编辑器编辑的文档，但它不会改写手工输入的HTML标记或第三方标记。这就使得Dreamweaver 4自动生成的代码与手工输入的代码融为一体。

2．整合文本编辑器

现在Dreamweaver 4增加了以代码为中心的新特性。手工编写代码就如设计视图环境一样方便，可以自动缩排、标点平衡、选择多行后一次缩进。可以在使用代码视图工具栏（Code View Toolbar）的下拉列表定义的JavaScript函数之间轻松导航。对于使用JavaScript编程的专业人员来说，这种代码导航无疑是一种高效的导航帮助。输入代码时Dreamweaver 4自动对HTML和JavaScript 代码使用不同的颜色显示。

3．把主窗口分割为代码视图和设计试图

可以把Dreamweaver的主窗口分割为代码视图和设计试图。能够查看整页代码而无需离开文档窗口。这样，就可以在同一个窗口同时查看代码视图和设计视图，同时编辑多个文档的代码。

4．JavaScript调试器

使用新增的JavaScript调试器，可以直接在浏览器中调试客户端JavaScript脚本，观察JavaScript的执行，就像它在Netscape或IE浏览器中一样，因而能够更好地了解每种浏览器是怎样执行JavaScript的。可以设置断点调试代码，然后在逐步执行代码的过程中观察变量的变化，及时发现编程错误。

5．编辑非HTML文档

可以把Dreamweaver 4当作文本编辑器编辑非HTML文档，直接在代码视图（Code View）中编辑JavaScript，XML和其他文本文件。

6．自定义标记数据库

使用自定义标记数据库可随时定义新的标记或编辑默认标记。Dreamweaver 4的可配置自定义数据库让你能够定制翻译引擎来支持属性代码。

7．超强页面排版功能

网页对象的排版一般有表格和图层两种方式，这两种方式各有优缺点，Dreamweaver 4的Layout View技术可以轻松地把两者的优点结合起来，用此功能编写的网页，任何浏览器都兼容，解决了后顾之忧。Dreamweaver 4中提供了两种可视化编辑方式，一种是大家再也熟悉不过的老版面，另一种是全新的版面排版方式。它提出了一个全新页面排版概念，它可以使你轻松地拖曳出复杂的透明表格，而且绝无冗余代码。

8．Macromedia Flash 文字和按钮

Flash动画向来让人津津乐道的是文件小、效果棒，而且可以随着视窗大小做不失真的缩放，这些都要归功于使用矢量图的优点。使用Dreamweaver 4的这个新功能，就算你不会使用Flash也可以在Dreamweaver 4中直接插入Flash 动画格式的文字或按钮，只要简简单单输入文字就可以了，比起传统的点阵图文字或按钮，文件更小、效果更漂亮。不过很可惜的是，目前Flash文字和按钮还不支持中文。

9．双向绘图编辑

大家都知道在Fireworks中分割图形保存后，可以利用Dreamweaver 4的Insert|Interactive Images|Fireworks html命令，将Html，JavaScript一并插入，然后，在Dreamweaver 4中右击图像，从弹出的菜单中选择Edit with Firework 4命令，就可以马上启动Fireworks并把原PNG文件打开并开始编辑，这是非常方便的，而且Dreamweaver 4把Fireworks与Dreamweaver结合的更紧密了，在Fireworks中编辑完图片不用保存，只需单击Return Dreamweaver按钮，就可以立刻切换到Dreamweaver 4中去，而且所有的修改都已经保存好了，当然也可以在Dreamweaver中方便地切换到Fireworks。

1.2? Dreamweaver 4的工作环境

所有的工作环境（包括工具栏、浮动面板等），都是通过XML加以控制，可根据需求进行调整。另外Dreamweaver 4提供完整的快捷键，大大提高了网页设计的效率，还可以自行定义快捷键对应的功能。
本章主要介绍Dreamweaver 4的工作环境，以引导用户快速了解Dreamweaver强大无比的创作能力。

1.2.1? 认识Dreamweaver 4的窗口结构

Dreamweaver由两大部分组成，即页面编辑器和站点管理器。其中，页面编辑器是一个可视化的网页编辑器，网页制作都是在页面编辑器中完成的；站点管理器用于管理网站内的文件和目录，检验链接情况，并控制站内文件的上传。一般来说，在做站点时应先建立好站点，再开始网页的制作，这样可以保证页面内文件链接的正确性。
启动Dreamweaver 4后，会看到如图1.1所示的窗口和浮动面板。

图1.1? Dreamweaver 4界面组成
第一次看到如图1.1所示的窗口和浮动面板，对于一个用惯了微软应用程序的人来说，可能一时会感到手足无措。事实上，Dreamweaver更像是一个从Macintosh计算机上移植而来的产品，而不像一个纯粹的Windows应用程序，它的使用方法与PageMaker之类的排版软件类似，而同微软建议的Windows应用程序的外观标准有一定的差别，Dreamweaver应用程序的外观同其异常灵活的功能特性分割不开，对于不同级别和经验的用户，都能够从这种应用程序外观上获得显著的工作效率。Dreamweaver的用户界面令人耳目一新，这也使得有些人认为它不太适于初学者使用，其实对于网络这样的新生事物，谁又不是初学者呢？只要下一点功夫，每一个人都可以很快从一名初学者成为高手。Dreamweaver的开发者已经充分地为用户着想了，它的用户界面非常友好，下面就简单介绍一下，使大家对Dreamweaver有一个整体的了解。
一般来说，一个典型的Dreamweaver应用程序操作环境包括以下几个部分：

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

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

• 菜单栏：几乎所有的工作都可以通过菜单来完成，尽管利用浮动面板可以加快操作速度，但是有时为了节省屏幕空间，会将浮动面板关闭，这时利用菜单就显得尤为重要。利用Window菜单，可以控制各种浮动窗口和面板的开启和关闭。
• 工具栏：工具栏包含了可以让你快速往返于不同显示之间的按钮：代码显示、分离显示和设计显示。工具栏也包含了一些在每个显示里共同的指令。当你在代码显示下工作时，选项菜单包含特殊的文本编辑操作。
• 文档窗口：文档窗口显示当前所创建和编辑的HTML文档内容。
• 启动面板（Launcher）：启动面板上包含了用户最常使用的控制按钮，通过这些按钮，可以快速启动或关闭最常用的面板（Inspectors）和浮动面板（Palettes）。在文档窗口下方的状态栏上也出现和启动面板相同的按钮，称作微型启动栏（Mini-Launcher），使得即使启动面板被关闭，用户也能够很容易地使用启动面板上的功能。启动面板上的按钮类型是可以定制的。
• 对象面板：在对象面板上包含了多种不同类型的按钮，用于在文档中创建不同类型的对象，例如图像、表格、框架等。默认情况下，对象面板中显示的是常用工具组中的工具。对象面板中第一行的对象组名称按钮，可切换对象面板。例如，可切换到Frames，Characters，Forms等对象组。
• 属性设置面板：该面板是页面编辑中较重要的面板。它主要用于设置页面元素的属性，比如文字的大小、图片的高宽、表格的对齐方式、链接地址等。值得一提的是，对于不同的元素，面板中的参数是不同的。此外，单击属性设置面板右下角的按钮，可展开属性设置面板，此时可查看和设置更多参数。
• 可停靠浮动面板：可停靠浮动面板是一个工具集合的控制框架，它仿佛一个船坞，可以将各种浮动窗口、面板放置在其中，组合成为选项卡的形式，以节省屏幕空间，必要时还可以将这些浮动窗口、面板从中剥离，成为独立的浮动面板。
• 状态行：Dreamweaver 4的状态行很有特色，它包括几个功能区，分别用于显示和控制文档源代码、显示页面大小、查看传输时间。其最右方包含了和启动栏一样的按钮组合，称作“微型启动栏”，可以完成启动栏同样的功能。系统从左至右显示了页面尺寸设置区、页面容量及传送时间，以及默认的导航条。其中，单击页面设置区可打开屏幕分辨率设置列表，用户可从中进行选择。例如，如果希望网页的最佳显示分辨率为800×600，则可单击该位置，然后从弹出的列表中选择760×420（800×600 Maximized）。至于页面容量及预计传送时间，由于其中未考虑图像尺寸、网络的繁忙程度等因素，因此，该数值仅供参考。

1.2.2? 工具栏

工具栏包含了可以让你快速往返于不同显示之间的按钮：代码显示、分离显示和设计显示。工具栏也包含了一些在每个显示里共同的指令。当你在代码显示下工作时，选项菜单包含特殊的文本编辑操作。
要显示工具栏，选择View|Toolbar命令，打开如图1.2所示的工具栏。

图1.2? 工具栏
该工具栏的功能分别如下：

• 工具栏左边的3个按钮，分别表示：选择只显示代码按钮 ，选择显示代码和文档按钮，选择只显示文档按钮。
• （Title）：用来设置或修改文档的标题。
• （File Management）：单击该按钮，通过这里可以实现Turn off Read Only，Get，Check Out，Put，Check In，Undo Check Out，Design Notes以及Locate in Site功能。
• （Preview/Debug in Browser）：单击该按钮在定义好的浏览器中预览或调试。
• （Refresh）：单击该更新设计显示按钮，刷新设计显示中通过代码显示更改的部分。
• （Reference）：单击该按钮来启动代码属性设置面板。
• （Code Navigation）：单击代码导航按钮来移动文档里定义的JavaScript 函数，设置或删除代码里的断点。
• （View Options）：单击代码显示模式下的选项菜单按钮，可以选择Word Wrap（自动换行）、 Line Numbers（行数）、 Highlight Invalid HTML（高亮HTML中的错误）、 Syntax Coloring（显示语法的颜色）、 Auto Indent（自动缩进）和顶端的Design View（设计显示）。单击设计显示模式下的选项菜单按钮，可以隐藏所有的可视化帮助或锁定可视化帮助，如表格边框、层边框、帧框架边框、图片映射、不可见元素、表头、标尺、网格以及图片的轨迹。

1.2.3? 控制浮动面板

启动面板、属性设置面板、对象面板和可停靠浮动面板通常总称作“浮动面板”，它们浮动于文档窗口之上，用户可以将输入焦点在文档和面板之间来回切换。
利用浮动面板来控制对页面的编写，而不是利用烦琐的对话框，这是Dreamweaver编辑网页中最令人称道的特性。在Dreamweaver中通过在浮动面板中进行设置，直接就可以在文档窗口中看到结果，避免了中间过程，从而提高了工作效率。

1．启动面板

选择Windows|Launcher命令，打开启动面板，启动面板主要用于快速启动相应的任务，或显示/隐藏相应的浮动面板，在状态行的右方有一个微型启动栏，它同启动面板上的按钮是一样的，如图1.3所示。

图1.3 ?启动面板和微型启动栏的对应关系
启动面板上的按钮都是按下/弹起类型的按钮，也被称作切换按钮，单击启动面板上的按钮，使之被按下，会激活相应的浮动面板窗口；再次单击其上的按钮，可以使之弹起，这会将相应的浮动面板窗口隐藏起来。
在可停靠浮动面板中，可以将多个浮动面板组合成选项卡的形式。如果在启动面板上单击这些选项卡对应的按钮，则会将相应的选项卡激活到文档窗口的顶端，而在启动面板上弹起任何一个可停靠浮动面板选项卡对应的按钮，都会将整个可停靠浮动面板隐藏起来。例如，在默认状态下，HTML源代码面板是一个单独形式的窗口，单击启动面板上的HTML Source（HTML源代码）按钮，可以激活HTML源代码面板，显示当前编辑文档的源代码，如图1.4所示。再次单击该按钮，则可以重新隐藏HTML源代码面板。

图1.4? 使用启动面板

2．属性设置面板

选择Windows|Properties命令，打开属性设置面板，属性设置面板主要用于显示在文档窗口中所选中元素的属性，并允许用户在属性设置面板中对元素属性直接进行修改。根据选中元素的不同，属性设置面板上的内容也不同。例如，当在文档窗口中选择文本时，属性设置面板会显示如图1.5所示的外观，而在文档窗口中选择图像时，属性设置面板会显示如图1.6所示的外观。

图1.5? 选中文本时的属性设置面板

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

3．对象面板

选择Windows|Object命令，打开对象面板，它的作用是在光标位置插入对象。单击对象面板上的向下箭头，会打开一个下拉菜单，显示对象面板上所包含对象的类型，默认状态下显示的是Common类型，如果从该下拉菜单中选择其他类型，则在对象面板上会显示相应类型的按钮，如图1.9所示。

图1.9? 在对象面板上选择对象类型
对象面板共有Characters（字符）、Common（普通）、Forms（表单）、Frames（框架）、Head（头部）、Invisibles（不可见）和Special（特殊）7组，每组中有不同类型的对象，如图1.10所示。使用Insert（插入）菜单中的命令也可以实现插入各种对象的目的，与使用对象面板是一样的，使用菜单还是使用对象面板，完全根据用户的习惯来决定。

图1.10? 7组对象面板
对象面板上包含一些按钮，在网页编辑过程中，通过单击这些按钮，可以往网页中添加相应的对象，如图像、表格、框架和各种其他媒体等。
对象面板的空间是有限的，为了能够充分利用有限的面板空间，针对不同类型的对象，对象面板采用了多层结构，将不同类型的对象按钮放置在不同的浮动面板层中。

• Characters（符号）：该面板的用途是向网页中增添特殊符号。
• Common（基本对象）：该面板中包括了最常用的一些对象，该面板用于在网页中插入一些最常用的对象。
• 表单（Forms）：该面板中的对象都是为了制作表单用的，例如在文档中插入一个表单、一个文字输入框、一个按钮等。表单面板包含表单和表单元素的按钮。在插入表单元素之前，要把插入点置于表单边界之内；在表单之外的表单元素在浏览器中不显示。如果试图在表单以外插入一个表单元素，就会出现一个对话框，询问是否要在该表单元素周围添加表单标记。 单击Yes，建立一个包含该表单元素的新表单；单击No，插入没有表单的表单元素。
• Frames（框架）：该面板中的对象用于在网页中插入各种框架，主框架（Main Frame）用醒目的颜色显示，它一般用于显示网页的内容。
• Head（HTML文件头）：该面板用于在网页的HTML源代码中插入文件头，为搜索引擎提供关键字等内容。
• Invisibles（不可见）：在系统默认状态下，该面板中的对象在插入到文档窗口中是不可见的。
• Special（特殊）：该面板用于在网页中插入一些特殊的插件。

只有熟悉对象面板中各个按钮的作用和操作方法，才能在设计网页时应用自如，得心应手，效率倍增。
注意：如果屏幕上浮动面板的位置变得过于混乱，甚至超出了桌面范围，不便操作，这时选择Window| Arrange Floating Palettes命令，Dreamweaver会将所有显示的浮动面板在桌面上重新排列，便于用户调整和使用。

4．停靠浮动面板

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

图1.11? 带有多个选项卡的可停靠浮动面板
如果要将某个以选项卡（如History面板）形式出现的浮动面板从组合中拆分出来，那么在该浮动面板的标签（不是标题栏）上按住鼠标左键不放，然后拖拉到可停靠浮动面板之外再释放鼠标，如图1.12所示。这时可停靠浮动面板中的一个浮动面板就被拆分出来，如图1.13所示。

图1.12? 拆分可停靠浮动面板
不但原来的浮动面板可停靠浮动面板，而且被拆分出的浮动面板仍然是可停靠浮动面板。换句话说，可以以选项卡形式出现的所有浮动面板，其本身都是可停靠浮动面板。在图1.13中，被拆分出的History浮动面板虽然是单独的窗口，但它带有一个选项卡（就是它本身），这表明它仍然是可停靠的。也就是说，它也可以接纳其他的浮动面板，组合多个选项卡的形式。例如，可以从原先的可停靠浮动面板中再次拆分出CSS Styles面板，然后将它与History面板组合成为一个带有两个选项卡的可停靠浮动面板。

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

图1.14? 合并可停靠面板
如果窗口中同时显示了两个可停靠浮动面板，而希望将某个面板中的选项卡移动到另一个面板中，在某个浮动面板的标签上（不是标题栏）按住鼠标左键不放，然后拖拉到目标面板上，这样就可以合并可停靠浮动面板。
如果不希望显示某个浮动面板，那么可以通过单击面板窗口上的“关闭”按钮来关闭它，如图1.15所示。需要注意的是，不同的浮动面板，关闭按钮的位置或许也不同，通常它出现在浮动面板标题栏的右端或上端。

1.2.4? 状态行

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

1．标记选择器

标记选择器主要有两个用途：显示当前插入点位置的HTML源代码标记和选中标记在文档中对应的内容。
每当用户在文档窗口中对文档内容进行格式化时，标记选择器中都会显示相应的标记。例如，如果在文档窗口中将一段文字加粗，这实际上是将该段文字的两端分别放上<b>和</b>标记，当将插入点放置到该段文字中时，标记选择器上就会显示<b>标记。
如果希望选中某个标记在文档中对应的内容，可以直接在标记选择器上单击该标记按钮。例如，文档主体通常包含在<body>和</body>标记中，单击标记选择器上的<body>按钮，即可选中文档所有位于<body>和</body>标记中的内容。
在标记选择器上右击鼠标，会出现如图1.18所示的菜单，允许对标记进一步处理。

图1.18? “标记选择器”上的右键快捷菜单

2．窗口大小弹出菜单

在窗口大小弹出菜单区域显示当前文档窗口的大小尺寸，以象素作为单位。当拖动文档窗口边框改变窗口大小时，会看到状态行上窗口大小弹出菜单区域中显示的数值也会发生变化。
窗口大小弹出菜单主要用于设置文档窗口和显示器屏幕之间的对应关系，单击该菜单区域任意位置，即可打开该菜单，如图1.19所示。该菜单项左方是文档窗口的大小，右面是显示器窗口的大小，根据显示器屏幕大小选择相应的菜单项，就会发现文档窗口大小相应发生变化。

图1.19? 窗口大小弹出菜单
例如，如果从窗口大小弹出菜单中选择760×420? 800×600, Maximized（760×420? 800×600, 最大化）项，则表明在分辨率为800×600的显示器上，将浏览器窗口最大化即可完全观看当前文档窗口大小范围内所制作的网页。在这里Dreamweaver计算了浏览器边框的尺寸，并将它从显示器尺寸中剔除，所以文档窗口的大小总是比设置的屏幕分辨率要小一些。
如果希望定制自己需要的文档窗口大小，可以从选择Edit Sizes菜单命令，打开一个对话框，自行编辑需要的尺寸，该对话框实际上就是Dreamweaver 4的参数设置对话框，将在以后的章节中介绍到。

3．文档大小和下载速度

在状态行上“文档大小和下载速度”区域显示当前编辑文档的大小和该文档在Internet上被完全下载的时间，针对不同的下载速率，下载时间当然也不相同，默认状态下，系统假设用户使用28.8K的调制解调器下载该网页。
随着科技发展，现在可能很少有人使用28.8K的调制解调器了，可以重新设置下载速率，让Dreamweaver重新计算下载时间，这将在以后的章节中介绍到。

4．微型启动栏

微型启动栏就是启动面板的一个缩小板，在启动面板被关闭的情况下，也能帮助用户快速使用其上的功能。
如果始终将启动面板显示在桌面上，则状态行上的微型启动栏显得很多余，也可以将其从状态行上移去，将在以后的章节中介绍到。

5．设置状态条属性

选择Edit|Preferences命令，打开Dreamweaver 4的参数选择设置对话框，从左边的列表中选择Status Bar（状态行），即可得到如图1.20所示的对话框，可以设置状态行参数。
用鼠标在Windows Sizes区域相应位置单击鼠标，激活编辑状态，被激活编辑状态会显示一个长方形的编辑框，然后在该编辑框中输入需要的数字和描述信息，即可定制窗口大小弹出菜单。假设输入800×600作为文档窗口的大小，单击“确定”按钮进行确认，并关闭该对话框返回到文档窗口，单击文档窗口右下角状态栏中的按钮，从弹出的快捷菜单中可以看到在该快捷菜单中增加了一个刚才定义文档窗口的尺寸。

图1.20? 设置状态行属性
如果选中Launcher后面的复选框，即可在状态行上显示微型启动栏；取消选中该复选框，则不在状态行上显示微型启动栏。

1.2.5? 标尺和网格

在网页排版的过程中，如果希望对元素精确定位，则标尺和网格是非常有用的工具。

1．显示标尺

在文档窗口中，默认状态下不显示标尺，如果需要显示标尺，以便排版，可使用以下方法。在文档窗口中，选择View|Rulers|Show命令，在页面中显示标尺来精确定位文档窗口中的元素。显示标尺之后的文档窗口如图1.21所示。还可以选择View|Rulers命令，从打开的子菜单选择以Pixels（象素）、Inches（英寸）或者Centimeters（厘米）为单位来显示标尺。

2．显示网格

在文档窗口中，默认状态下不显示网格，如果需要显示网格，可使用以下方法。在文档窗口中，选择View|Grid|Show Grid命令，则在文档窗口中显示网格。如果在编辑页面的时候需要对齐层的时候，还应该选择View|Grid|Snap To Grid命令，选择了这个命令之后，当层移动到和网格中的某一个节点相差几个象素的时候，层就会自动捕捉到这个网格的节点上。显示标尺之后的文档窗口如图1.22所示。

图1.21? 显示标尺之后的文档窗口

图1.22? 显示了网格之后的文档窗口
选择View|Grid|Edit Grid命令，打开网格设置对话框，如图1.23所示。在网格设置对话框中，可以设置网格的密度、网格线的颜色、网格的显示方式和捕捉方式。

图1.23? Grid Settings对话框
在网格设置对话框中，选择网格的显示方式为Dots，然后单击OK按钮回到文档窗口中。网格线没有了，取而代之的是一个个小节点。当不想让过多的线条在设计的时候遮住视线时，可以选择以这种方式显示网格。
1.3? Dreamweaver 4默认值设置
Dreamweaver的参数设置用于控制Dreamweaver界面的全部外观，包括一些细节特征。下面介绍几种常用的参数设置。在文档窗口单击Edit|Preferences命令，打开参数设置面板，如图1.24所示。
Preferences（参数设置）面板的作用是设置Dreamweaver 4的界面外观和它的一些默认值，界面外观设置如面板的颜色、大小等，默认值设置如<P>、<PRE>标记所包含文本的默认的字大小等。

图1.24? Preferences（参数设置）面板
从图1.24中可以看到Preferences面板分左右两部分，左边为一个列表框，包括Status Bar、Fonts/Encoding等；右边是左边当前选取的列表条目的具体选项，它根据左边选定的列表条目切换，如图1.24所示，左边选定General选项，右边显示对于General这个条目所能作的选择。本节就按照左边的列表条目分别介绍它们的选项。因为这个列表条目及它们的所有选项内容众多，在本章仅说明与Dreamweaver 4总体功能有关的列表条目，部分与具体功能有关的列表条目将在介绍具体功能时说明，这里读者知道Preferences面板的用途和使用方法就可以了。

1．General

General对话框包括对文档窗口、对象面板、属性面板、站点管理方式等的设置。
该对话框各个选项的作用如下：

• Show Only Site Window on Starup（启动时只显示站点管理窗口）：如果选择该项，在启动Dreamweaver时，只打开站点管理窗口，而不会显示一个新文档窗口。
• Open Files in New Window（在新窗口中打开文件）：若选择该项，则在新窗口中打开一个文件；否则，会在原来窗口中打开新文件。
• Warn when Opening Read-Only File（打开只读文件时警告）：若选择该项，在打开一个本地站点的只读文件时，会弹出一个警告框。
• Add Extension when Saving（保存文件时加扩展名）：若选择此项，保存网页文件时自动增加文件扩展名，如“.HTM”或“.HTML”等，具体用哪一个扩展名可在此选项末尾的输入框内指定。若不选择此项，则自动增加默认的扩展名“.HTM”。
• Update Links when Moving（当文件移动时更新链接）：此选项选择当站点中的文件被移动、删除、重命名时，站点中文件的链接关系如何改变，打开该选项的下拉列表，将列出Always，Never，Prompt三个选项，Always表示自动修改链接，Never表示不修改，Prompt表示显示修改提示，提醒网页制作者去修改。
• Show Dialog when Inserting Objects（插入对象时显示对话框）：若选择该项，在文档窗口中插入对象时会显示该对象的设置对话框，可以设置一些必要的属性。
• Faster Table Editing（Deferred Update）[快速编辑表格（延迟更新）]：该选项在表格中输入内容时，通过延迟列宽及行高的调整，加快表格的录入速度。只有在表格外单击鼠标后，才对表格进行更新。
• Rename Form Items when Paste（当粘贴表单时重新命名）：若选择该项，在使用复制、粘贴功能时创建新表单时，新表单重新命名。
• Enable Double-Byte Inline Input（允许双字节字符的输入）：若选择该项，则可以直接在文档窗口中输入汉字的双字节字符。
• Maximum Number of History Steps（历史面板记录操作的最多步骤）：该选项用于设置历史面板中记录操作的最多步骤，步骤越多，则占用的内存越多。
• Object：在此可以定义对象面板的外观，此下拉列表有三个选项：Icons Only，Icons and Text，Text Only，分别表示对象面板仅用图标、图标文本同用、仅用文本，如图1.25就是选中Icons and Text（图标和文本同用）的状态。

图1.25? 显示图标和文本的对象面板

2．Code Colors

Code Colors（设置代码颜色）对话框用于设置HTML代码编辑器不同部分的颜色，各个选项的默认颜色可以重新设置。设置代码颜色的方法如下：
打开Edit菜单，选择Preferences命令，出现Preferences对话框，在该对话框的种类列表框中选择Code Colors，出现如图1.26所示的设置一般参数对话框。
该对话框中各个选项的作用如下：

• Background（背景）：用于设置HTML代码编辑器背景的颜色。
• Text（文本）：用于设置文档窗口插入的文本在HTML代码编辑器中的颜色。
• Comments（注释）：用于设置HTML代码编辑器中注释的颜色。
• Tags Default（默认标记）：用于设置HTML代码编辑器中默认标记的颜色。
• Reserved（保留字）：用于设置脚本语言中保留字的颜色。
• Other Keywords（其他关键字）：用于设置脚本语言中其他关键字的颜色。
• Strings（Str函数）：用于设置脚本语言中Str函数的颜色。
• Tag（标识符）：用于设置一种特定的标识符显示的颜色。右边的列表项中共有三列：其中Tag列显示了所有可用的HTML标识符；Color列显示了前面的标识符使用的颜色；Contents列显示是否将设置的颜色应用于一对标识符包括的内容。如果选择下面的Apply Color to Tag Contents复选框，则该项会显示一个Yes，表示应用于一对标识符包括的内容。

图1.26? Preferences对话框的Code Colors选项

3．Code Format

Code Format对话框用于控制HTML内置代码编辑器中HTML代码的格式。该选项板的设置只有在文档窗口中的输入有效。

4．Code Rewriting

有时为了实现一些特定的功能，很多设计人员更喜欢通过直接编辑文档的HTML代码来实现这些功能。因为HTML标识符基本上是成对出现的，使用一个标识符开始，则相应地有一个该标识符的结束符，手工编辑的HTML代码难免会出现标识符遗漏等问题，Dreamweaver 4提供的Code Rewriting功能就是用来纠正错误的。

5．CSS Style

CSS Style对话框用于设置在建立及编辑一个层叠样式表时如何编写代码，它可以提供一种速记表格的形式，以利于设计人员使用。在一般情况下，不要改变该面板的默认设置值，除非要使用速记形式。

6．File Type/Editors

File Type/Editors对话框用于设置一些外部的编辑器。在设计网页时，在文档窗口中插入的一些对象或内容，如图像等，经常需要重新编辑，可以根据不同文件的扩展名，设置不同的外部编辑器；整个文档的HTML源代码，也可用外部的文本编辑器或其他的编辑器进行编辑。

7．Fonts/Encoding

Fonts/Encoding对话框用于设置Dreamweaver 4打开一个新文件时使用的字体及在浏览器中使用的字体。所以在设计时一定要弄清楚这两者的区别，这是初学者常常感到困惑的一点，也是文档窗口与浏览器中的网页显示效果不同的原因。

8．Highlighting

Highlighting对话框用于设置模板的可编辑区域、锁定区域、历史项目、第三方标识符等内容的显示颜色，各个选项的默认颜色可以重新设置。

9．Invisible Elements

Invisible Elements对话框设置的内容是：当选择View|Invisible Elements命令时，哪些元素或对象的图标显示在网页上。这些元素或对象的图标显示在网页上有利于编辑文档，这些元素或对象的图标不会在浏览器中显示。

10．Layer

Layer对话框用于设置插入到文档窗口中所有层的一些默认属性，这些选项都可以在属性设置面板中重新进行设置。

11．Layout View

Layout View对话框用于设置在布局视图窗口中的表格边框或表单元格边框的显示颜色，各个选项的默认颜色可以重新设置。

12．Panels

Panels对话框用于设置Window菜单下对应面板有关的内容，如图1.27所示。

图1.27? Preferences对话框中的Panels选项
该面板共包括两部分，其作用如下：

• Always on Top（总是在上面）：该部分用于设置各种窗口、浮动面板及属性设置面板是否浮动在Dreamweaver 4文档窗口上面，被选中的浮动在Dreamweaver 4文档窗口上面。默认情况下，所有选项都被选中。
• Show in Launcher（显示在启动挡）：该部分用于设置显示在启动面板及文档窗口状态栏上的浮动面板，可以通过加号按钮添加一个面板到列表中，单击该按钮会打开一个菜单，如图1.28所示。其中颜色变暗的菜单项，表示已经加入到列表中；黑色菜单项，则表示还没有添加到列表中，可以继续选择这些菜单，将它们添加到列表中。

单击列表框上面的减号按钮，则会删除列表框中当前选择项。
通过、两个按钮，可以将列表的选项上下移动，在对应的启动面板及文档窗口状态栏上的浮动面板中会改变它们的排列顺序。

13．Preview in Browser对话框

Preview in Browser对话框用于设置用户进行网页预览时使用的浏览器，可以同时设置多个浏览器用于预览，其中一个为默认的浏览器。

14．Quick Tag Editor对话框

Quick Tag Editor对话框决定用户在使用Quick Tag Editor（快速标识符编辑器）对某一标识符进行编辑时，是否自动对文档中的相应内容进行更新，以及是否在插入标识符时自动显示标识符列表，以及自动显示标识符列表的速度。

15．Site对话框

Site对话框主要用于设置站点进行FTP（文件传输协议）操作的有关内容，如：站点管理器的显示方式、相关文件传输、防火墙等有关选项。

16．Status Bar对话框

Status Bar对话框用于设置文档窗口底部状态条的显示内容。
1.4? 快 捷 键
任何高级设计软件都拥有辅助设计用的“快捷键”，快捷键的最大功能是简化操作步骤，熟练运用快捷键，往往可以使我们工作的效率得到提高。例如，网页上的一段文字，如果要做复制与粘贴操作，最基本的操作步骤首先选取欲作处理的文字，选择Edit|Copy命令，然后将光标移动到欲粘贴这段文字的位置再选择Edit|Paste命令，即可完成操作。同样的动作也可以利用快捷菜单来完成。首先也是选取文字，然后按下Ctrl+C键，最后将光标移动到欲粘贴这段文字的位置按下Ctrl+V键，即可完成操作。快捷菜单的作用除了简化步骤之外，也减少了使用者频繁移动鼠标时所产生的疲倦感。
Dreamweaver 4给了我们自己修改的权限。不仅可以把Dreamweaver 4的快捷键设为Dreamweaver 3方案，还可以根据自己的习惯来定义快捷键。下面介绍如何改变Dreamweaver 4的快捷键方案，希望大家看完以后，可以制作自己的一套快捷键方案。以下是具体的操作步骤：
（1）选择Edit|Keyboard shortcuts命令，打开快捷键编辑窗口，进入快捷键管理器。如图1.29所示。

图1.29? 快捷键管理器
快捷键管理器各个选项的功能如下：

• Current Set（通用设置）：它提供四种固化的快捷键方案。分别是：BBEdit，Dreamweaver 3，HomeSite，Macromedia Standard。
• （Duplicate Set）：拷贝一份已选择的快捷键方案。
• （Rename Set）：重命名，更改方案的名称，它只能修改自定义方案的名称。
• （Export Set as HTML）：把已设定的快捷键方案输出到文件，可以是.txt文件，也可以是.html文件。
• （Delete Set）：删除自定义方案，被删除的方案一定不能是当前系统正在使用的方案，同样它只能删除自定义的方案。
• Command（命令）：可以选择要更改或设置快捷键的命令。任何命令都可以为它设置快捷键。这个选项有五个子菜单，它们的各个功能分别如下：

Menu Commands（编辑窗口菜单命令）：包括了所有Dreamweaver 4编辑窗口的命令。
Site Menu Commands（站点管理菜单命令）：包括了所有Dreamweaver 4站点管理窗口的编辑命令。
Code Editing（代码编辑）：包括了对代码，文本的处理的所有命令，如：Ctrl+C（复制），Ctrl+V（粘贴）等。
Document Editing（文档编辑）：主要是一些与窗口相关的命令，它和Site Editing（站点编辑）中的大部分命令相同。
Shortcuts（快捷键）：显示当前命令的快捷键。可以用其右边的加号来增加当前命令的快捷键，可以用其右边的减号来删除当前命令的快捷键。可以为一个命令设置多个快捷键。比如：复制命令的快捷键是Ctrl+C，也可以还为它设置一个Shift+C的快捷键，但是要确保Shift+C没有指向其他命令。

• Press Key：输入键值。

Dreamweaver 4中自带有原来的标准设置。在此只设置一个快捷键，只要知道了方法，就可以如法炮制。下面的步骤就是如何把F7键设为打开New form Template编辑窗口的快捷键。
（2）单击Duplicate Set按钮，弹出对话框，如图1.30所示，在窗口中输入名称，需要注意的是：不支持中文。由于Dreamweaver 4把原始选项固化了，不能修改，若要修改就必须先复制一个方案，再在这个方案的基础上作修改。

图1.30? 拷贝快捷方案
（3）由于要修改的快捷键在Menu Commands中，所以先选择Menu Commands，从Commands列表中选择一个菜单命令，使用树状控制查看相应的菜单分类。再选择File，把New from Template选中。单击加号按钮，或激活快捷键列表框中某条目，然后移动焦点到Press Key框。按下你所希望的键盘组合（在这里按下F7键），这些组合键将出现在Press Key框中，单击Change按钮，新的组合键被用于该命令。
（4）单击OK按钮进行确认，并关闭快捷键管理器面板返回到文档窗口。打开File菜单，从打开的下拉菜单中可以看到刚才定义的快捷键显示在该下拉菜单中的New form Template选项的后面。
（5）一个快捷键的修改很简单，如果还想修改就重复（4）、（5）两个步骤。
（6）Dreamweaver 4还提供把您的方案输出为文件的功能，单击Export Set as HTML按钮，系统会弹保存文件窗口，在该窗口中选择保存文件的路径，再输入文件名，可以是.txt文件，也可以是.html文件，就可以把自定义的方案输出为一个文件。
不但可以编辑Dreamweaver 4编辑窗口的命令，而且还可以编辑Dreamweaver 4站点管理窗口的编辑命令，对代码、文本的处理的所有命令。它们的编辑方式与编辑Dreamweaver 4编辑窗口的命令相似，大家只要知道编辑Dreamweaver 4编辑窗口的命令的方法可以如法炮制。