Dreamweaver是Macromedia公司推出的主页编辑工具。它是一个所见即所得网页编辑器，支持最新的DHTML和CSS标准。它采用了多种先进技术，能够快速高效地创建极具表现力和动感效果的网页，使网页创作过程变得简单无比。值得称道的是，Dw不仅提供了强大的网页编辑功能，而且提供了完善的站点管理机制，可以说，它是一个集网页创作和站点管理两大利器于一身的超重量级的创作工具。Dw提供了强大的设计工具，在不用书写一行代码的情况下，就能够快速创建各种极具动态HTML特性的网页，例如动画和分层等；利用Dw的目标浏览器检查特性，可以创建兼容性极好的网页，以适用于各种平台和各种浏览器；利用Dw的RHTML技术，用户可以精确控制Dw生产的网页源代码，例如，在可视编辑器中进行编辑时，可以在HTML检视器中同步地看到Dw到底为您生成了什么样的源代码，从而杜绝了盲人摸象的弊病。 从Dreamweaver 2开始，它就已经成为专业网页创作者事实上的标准工具。
为了方便查阅，列出所有新功能如下。
◎ 快速标记编辑器
◎ “ HTML styles ”面板
◎ 改进的“ HTML Source inspector ”
◎ 增强的第三方标记支持
◎ 添加、删除 Netscape Resize Fix
◎ 同步文件
◎ 显示和编辑 Flash 影片中的链接
◎ 字符类对象
◎ 框架类对象
◎ 其他新增对象
◎ 直接编辑图像地图
◎ 设计说明
◎ 输入和清理 word HTML
◎ 历史面板
◎ 自动输入表格数据
◎ 与 Fireworks 进一步集成
◎ 与外部编辑工具更好结合
◎ 增强的 MAC 兼容与跨平台能力
◎ 可定制的选单和快捷键
◎ javascript API 其他问题
◎ “旧”网站的问题
◎ 内置脚本的变化
◎ 第三方插件的问题
◎ 页面边距
快速标记编辑器
增加了快速标记编辑器，在 Dreamweaver 的文档窗口就能迅速修改、增加、删除 HTML 代码，不必开关“ HTML Source inspector ”，这是 3.0 版提供的一种轻松高效的编辑和检查代码的方式。 按“ Ctrl+T ”键，或者用鼠标按属性面板右上角的按钮，打开这个编辑器，如图。
快速标记编辑器有三种模式，决定于所选择的内容。
1）插入代码，如果没在文档中选择任何内容，将以插入模式打开，在当前位置插入代码。 2）编辑标记，用来编辑已有标记的属性，或改变标记。如果选择的内容包含完整的 HTML 标记，将以该模式打开，编辑时按“ Tab ”和“ Shift+Tab ”键在不同的属性间移动。如果将光标放到最后并输入标记，会出现错误信息，所有输入的内容将被忽视。 3）包围标记，给选定的内容添加新的标记。如果当前选择没有包含完整的标记，则以包围标记模式打开。 在使用快速标记编辑器的时候，当停止击键片刻，就会出现一个提示选单，列出当前位置能够使用的所有合法标记。如果用户只输入开始标记的话，对应的结束标记会自动加入。
用鼠标按住快速标记编辑器左边的标题栏，可改变它在文档窗口的位置。
编辑完毕，按“ Enter ”键或者在快速标记编辑器外按鼠标，编辑结果即刻生效，同时关闭编辑器。按“Esc”，则不改变原来的代码。但对于编辑标记模式，稍有不同，参考下面的定制快速标记编辑器段落。 连续按“ Ctrl+T ”键在三种模式间切换。 在快速标记编辑器也可以使用同样的方法，选择当前标记的父标记和子标记。
按“ Ctrl+Shift+<”，或者主选单“ Edit|Select Parent Tag ”，选择父标记；
“ Ctrl+Shift+> ”，或者主选单“ Edit|Select Child ”，选择子标记，如果当前标记不包含任何别的标记，则选择其中的内容。 用户可以根据自己的需要定制快速标记编辑器，打开主选单“ Edit|Preferences ”，在类别中选择“ Quick Tag Editor ”。对于编辑标记模式，修改后按“ Tab ”或者“ Shift+Tab ”，改变将立刻生效，如果不想这样，而是在离开快速标记编辑器后再生效，关闭“ Apply Changes Immediately While Editing ”即可；不选“Enable Tag Hints”，关闭提示。还可以设定提示出现的时间。
“ HTML styles ”面板
原来的 Styles 面板现在称“ CSS Styles ”面板，新增“ HTML styles ”面板，与前者不同，它使用标准的 HTML 标记设定文本的格式。虽然 CSS 不错，但低版本的浏览器不支持。想要网页具有更好的兼容性，用这个面板可快速设定文本格式，有利于统一网站的外观和风格。建议同时用“ CSS Styles ”和“ HTML styles ”，前者充分利用了 CSS 和高版本浏览器的功能，后者保证使用 3.0 版本以下的浏览器时，尽可能地显示想要表现的外观。 与“ CSS Styles ”不同，如果修改了“ HTML styles ”中的样式，已经使用该样式的网页不会自动更新。 “ HTML styles ”面板的使用很容易。 查看、编辑已有的样式：选择一个样式，在上下文选单选择“ Edit ”，或者双击该样式。在“ Define HTML Style ”对话框，查看或者修改该样式的设定，包括名称、作用对象、作用方式、字体、对齐方式等，作用对象不同的样式，它们的图标也不同； 使用样式：首先选择文本，然后在“ HTML styles ”面板选择样式，如果面板上的“ Auto Apply ”复选项已选，该样式会自动作用于选定的文本，否则，按“ Apply ”按钮； 如果样式太多，用“ HTML Style ”面板右下角的垃圾桶删除； 清除网页中的文本格式：面板里有二个命令分别用来清除段和选定文本的格式，不管文本的格式是不是用“ HTML styles ”面板建立的，或者你很少使用 HTML 样式，这二个命令对于编辑修改文本的格式仍是很有用的。 建立新的 HTML 样式的方法有多种： 1）直接建立 在“ HTML styles ”面板右下角，按“ New Style ”图标，或者按主选单“ Text|HTML Styles|New Style ”。弹出“ Define HTML Style ”对话框，输入名称，调整设置； 2）基于已有文本 在网页里选定文本并设定格式。再按“ HTML styles ”面板右下角的“ New Style ”图标，然后在“ Define HTML Style ”对话框输入新的 HTML 样式的名称。需要的话，调整它的设置； 3）基于已有样式 选择一个样式作为模板，在上下文选单按复制命令，这时弹出“ Define HTML Style ”对话框。修改名称和设置； 共享 HTML 样式。 网站根目录的“ Library ”文件夹的文件“ styles.XML ”包括当前网站所有的 HTML 样式的信息，可以 put、get、check in、check out 甚至复制到其他网站的“ Library ”文件夹。还可以为这个文件建立“设计说明”。改进的“ HTML Source inspector ” 往返式编辑一直是 Dreamweaver 的重要特性之一，这一特性使得 Dreamweaver 不象 FrontPage 之类的所见所得编辑器重新格式化代码，因而更加灵活有力，“ HTML Source inspector ”就是这一特征的表现，在 Dreamweaver 文档窗口对网页所作的任何改变立刻在“ HTML Source inspector ”反映出来，反之亦然。 现在至少有三种编辑代码的方法，各有特点：快速标记编辑器，轻松、针对性强；外部代码编辑器，可以充分利用第三方编辑器的强大功能，但是要离开 Dreamweaver 的文档窗口，而且无法用历史面板记录它的所作所为；另外一个就是“ HTML Source inspector ”，虽然占用资源较多，但不必离开文档窗口，非常直观。 3.0 版增强了它的功能：显示行号，便于定位和查错，点击行号就可以选择一整行，可用鼠标拖动选择的代码，还可以把“ HTML Source inspector ”与其他浮动面板放在一起。
增强的第三方标记支持
让用户指定 Dreamweaver 忽视某些标记，编辑 ASP、ColdFusion、PHP、JSP 等更加方便。 打开设置窗口（主选单“ Edit|Preferences ”），在“ HTML Rewriting ”设置。 这一功能是可以扩展的，通过与第三方标记数据库中对比来辨别。标记文件在 Dreamweaver 安装路径下的“ Configuration/ThirdPartyTags ”文件夹。
添加、删除 Netscape Resize Fix
当 Netscape Navigator 4.x 的某些版本浏览使用层和 CSS 的网页时，如果调整窗口的大小，会错误显示，以前需要第三方插件来解决这个问题。现在可以自动加入 javascript 脚本来修正。 单击主选单“ Edit|Preferences ”，在类别中选择“ layers ”，确定“ Add Resize Fix when Inserting Layer ”已经选上。如果不愿自动添加，可关闭该选项，通过主选单的“ Commands|Add/Remove Netscape Resize Fix ”来完成。
同步文件
新增同步功能。同步不仅仅是自动更新网站文件，它自动比较本地和远程服务器上的文件，上传修改过的文件，下载服务器上更新的文件，保证本地和远程服务器上的每个文件都是最新的版本。还可通过它来删除网站中孤立的文件。
使用方法：
按“ Site ”窗口的主选单“ Site|Synchronize ”，在“ Synchronize Files ”对话框内的“ Synchronize ”下拉列表选择同步内容，通常只要同步部分文件和文件夹，选择“ Selected Local Files _disibledevent=>
对话框下部有个“ Delete remote files not _disibledevent=>
同步完成后， Dreamweaver 还会提交一个报告，告诉用户哪些文件更新了。
要查看本地或者远程服务器上更新的文件，在“ Site ”窗口主选单“ Edit ”中按“ Select Newer Local ”或者“ Select Newer Remote ”。
如果正在编辑网页，尚未存盘，在传送该页前 Dreamweaver 会提醒用户保存文件。
在实际使用中发现，虽然 Dreamweaver 的内置 FTP 具有续传功能，但对于拨号连接，它的一些站点管理功能和内置 FTP 并不实用，频繁的 check in/check out 带来的是冗长的等待，与远程服务器的连接也很容易断开，让人难以忍受。
显示和编辑 Flash 影片中的链接
Flash 影片中的 URL 现在可以在 Dreamweaver 中查看、验证、修改。
对象面板是使用最多的面板之一， 3.0 版增加了字符和框架二个类型，在原有的“ Common ”等类型里加入了许多新的对象。
字符类对象
提供一系列经常使用的字符和符号。对于网页，有些字符，比如空格，如果直接在代码中输入，不会显示成用户想要的；有些字符，如半角的大于号、小于号等，在有的浏览器上正确显示，在另外的浏览器却显示成一些奇怪的东西；还有许多符号，如版权符号、欧元等，必须输入对应的代码。对于前二种， Dreamweaver 能自动转换成对应的代码再插入 HTML 文件，对于后者，用“ Characters ”面板，不必再费神背代码。
框架类对象
让用户快速建立八种常用的框架。
其他新增对象
重新组织了 Common 类型对象面板，将媒体对象更新，把 Line Break 、 SSI 对象移了进来，另外加入 Tabular Data 、 Navigation Bar 、 E-mail Link 、 Date 、 Generator 、 Fireworks HTML 六种新的对象。
Tabular Data
输入表格数据，使用方法见下面的“自动输入表格数据”部分。
Navigation Bar
建立类似 Frontpage 中的那种导航条，但在 Dreamweaver 3 里，每个网页只能有一个导航条。导航条包括一个或多个按钮，每个按钮由一系列大小相同的图片组成，从而通过 javascript 脚本产生交互效果。
通过 Navigation Bar 对象可任意增删导航按钮，改变按钮的排列顺序、排列方向；导航条按钮的交互效果比换图按钮要丰富，多达4种状态。
导航条可以在网页之间复制。
E-mail Link
Date
在网页加入日期和时间。有多种格式，需要的话，还能让它自动更新。
Generator
用来在网页插入动态内容。
Fireworks HTML
输入用 Fireworks 创建的 HTML 和图片，见下面的“与 Fireworks 进一步集成”部分。
Forms 类型增加了一个“ Jump Menu ”对象。可插入一种常见的跳转选单。
跳转选单可以设定为下拉式或列表式，也可以为它加上按钮、设定缺省项目。如果添加了按钮，记得在“Behaviors”面板将下拉选单或列表的那个多余的“Jump Menu”行为删除。
直接编辑图像地图
原来编辑图像地图，要按图像属性面板的“ Map ”按钮，在弹出的“ Image Map Editor ”窗口编辑， 3.0 版直接在图像属性面板创建和编辑，如图。
设计说明
“ Design Notes ”是一项很有创意的设计，为网页和图片及其他页面对象如 Java applet 、 ActiveX 、 Flash 影片、 HTML 样式、模板等加入注释，这些注释在网页上是看不到的，也不会在网页加入任何代码。
可以通过“ Design Notes ”提醒自己。比如，某个文件是从一个网站拷贝到另外的网站的，在这个文件的设计说明里注明这一点，当更新一个网站中的文件时，就不会忘记更新另一个网站的那个文件。还可以注明图片来源、设计思路，以便管理文件和页面对象，与同事沟通和合作。
在 Dreamweaver 3 里，设计说明是网站的可选功能，打开的方法：
按主选单“ Site|Define Sites ”，弹出“ Define Sites ”窗口，选择相应的网站，按“ Edit ”按钮；
在该网站定义窗口的类别栏，按“ Design Notes ”；
打开“ Maintain Design Notes ”，就可以为网站里面的文件和页面对象建立设计说明；
“ Upload Design Notes for Sharing ”选项指是否将设计说明连同所说明的文件一起上传到服务器，与别人共享。要是与同事合作开发和管理网站，使用这一功能是很不错的。
当一个文件移动、复制、改名、或者删除时，相应的设计说明同时移动、复制、改名、和删除。
可以通过多种方式创建和编辑设计说明：在文档窗口，按主选单“ File|Design Notes ”；或者在文档窗口选择一个页面对象，以及在“ Site ”窗口选择一个文件，在上下文选单选择相应的“ Design Notes ”命令，都会打开“ Design Notes ”窗口。如图。
窗口有二个标签，“ Basic Info ”标签左上角显示所说明的文件的路径，在“ Status ”栏选择状态，在“ Notes ”栏加入说明。“ Notes ”栏右上角还有个按钮，用来加入撰写日期。打开标签底部的“ Show When File Is Open ”，每次打开该文件时设计说明都会出现。
在“ All Info ”标签可查看和编辑所有说明。
设计说明保存在扩展名为“ .mno ”的文本文件里，它放在与所说明的网页文件或者页面对象文件同路径的“ _notes ”文件夹，文件名就是所说明的对象的文件名（连同其扩展名）。但在 Dreamweaver 中，看不到这些文件和文件夹，可用 Windows 的资源管理器来查看。
对于远程服务器的文件，必须先“ check out ”并 get ，然后在本地栏选择该文件再添加设计说明。
在网站定义窗口，按“ Clean Up ”按钮，删除那些不与文件关联的设计说明。这种情况比较少见，因为在 Dreamweaver 里，如果删除文件，其设计说明会一并删除。因此，只有当用户在 Dreamweaver 外删除网站文件时，这种情况才会出现。
如果在按“ Clean Up ”按钮之前关闭“ Maintain Design Notes ”选项，可以让 Dreamweaver 删除该网站所有的设计说明。
Fireworks 3 也支持设计说明这一新功能，用 Fireworks 3 编辑图片输出到网站后， Fireworks 自动在网站为输出图片建立设计说明文件，将原始文件名和路径保存到里面。如果用户在 Dreamweaver 的文档窗口选择这个图片，并使用 Fireworks 编辑， Fireworks 能打开原始的 PNG 图片，因为 PNG 文件包括原始的图层、矢量、色彩、特效等，在它的基础上编辑能够保证图片的质量和一致的处理方式。
Fireworks 3 与 Dreamweaver 共用设计说明文件，在 Dreamweaver 里可以查看和编辑原始 PNG 文件的注释。
注意，对于模板文件，它的设计说明不会传送到基于该模板建立的网页。另外，笔者发现在中文平台使用时，“ Design Notes ”对中文兼容不好，如果输入中文，很可能无法打开设计说明。
输入和清理 Word HTML
MS Word 是用户最多的字处理软件，它提供保存为网页的功能，不过 Word 作的网页是有史以来最臃肿的。 Dreamweaver 的输入和清理 Word HTML 功能很不错，可以删除不相关的 XML 代码和 Word 自己的标记，修复残缺的 HTML ，并依照用户的设定来格式化。
打开网页后，按主选单“ Commands|Clean Up Word HTML ”，打开“ Clean Up Word HTML ”对话窗口，首先选择 Word 版本。
如图，在“ Basic ”标签有多个清理选项，用户根据自己的需要取舍，并设定清理后的网页背景颜色。“ Detailed ”标签还有更加详细的设定。
也可用在主选单“ File|Import|Import Word HTML ”输入Word HTML。
历史面板
新增历史面板，这个东西跟 Adobe 的一样，记录每个操作步骤，注意无法记录外部编辑器的操作步骤。通过面板上的步骤列表，能取消、重复、传递某些操作步骤，以及自定义命令。
通过历史面板定义命令：
在面板选定一个或者一组连续或不连续的步骤；
点击右下角的“ Save as Command ”按钮，输入命令名。
这个新的命令将出现在 Commands 选单，使用时跟别的命令一样，对应的 javascript 文件在文件夹“ Dreamweaver/Configuration/Commands ”。
按主选单“ Commands|Edit Command List ”，编辑自定义命令列表。
按历史面板右上角的小三角形，在弹出选单选“ Clear History ”，清除当前文档的操作记录，释放占用的内存。这个操作步骤是无法撤销的。
如果要限制历史面板保留的步骤数量，单击主选单“ Edit|Preferences ”，选择“ General ”类别，在最下方一行的框中输入历史面板记录的操作步骤的最大数量。记录的步骤越多，耗费的内存也越多。
自动输入表格数据
有了这一功能，以静态网页形式发布数据库的工作变得非常轻松。
首先将 Ms Excel 、 Access 、 Foxpro 等数据库输出为文本文件，然后按主选单“ File|Import|Import Table Data ”，或者在“ Common ”面板按“ Tabular Data ”对象，弹出“ Insert Tabular Data ”对话框。如图。
依次确定数据文件，分隔符，以及表格宽度等外观参数，按“ OK ”，就会自动插入已经填入数据的 HTML 表格。
与 Fireworks 进一步集成
Fireworks 3 是非常优秀的网页图形编辑工具，紧凑简洁， Dreamweaver 3 与它高度集成，完美地结合在一起，为 Dreamweaver 增加了一个往返式图像编辑的特性。这是 Dreamweaver 3 的一个突出特点。
不但可在 Dreamweaver 中启动 Fireworks 编辑图形，而且可以不离开 Dreamweaver 的文档窗口，启动 Fireworks 来优化图形。如前所述，借助设计说明文件， Fireworks 能自动找到原始的图形文件，保证图片的质量，保持图像地图和翻转的原样。
另外，在 Fireworks 3 能直接复制 HTML 到剪贴板，然后粘贴到 Dreamweaver 文档。也能将在 Fireworks 创建的 HTML ，输入到 Dreamweaver ，相关文件会自动加入。
复制 Fireworks HTML 的方法：
在 Fireworks ，选择“ File|Export ”；
在“ Export ”窗口的顶部，指定图形文件的存放路径。在窗口的底部，按“ Style ”下拉选单选择 Dreamweaver 3 ，下拉“ Location ”选单选择“Copy to Clipboard”；
按“ Export ”窗口的“ Save ”按钮；
回到 Dreamweaver 的文档窗口，将鼠标指针放在合适的位置，按主选单“ Edit|Paste ”，将图片和相关的 HTML 代码（包括 javascript ）加入网页。
输入 Fireworks HTML 的方法：
将光标放在合适的位置，按“ Common ”面板的“ Insert Fireworks HTML ”对象；
在对话框选定 Fireworks HTML 文件，打开选项“ Delete File After Insertion ” ，在输入后将删除原来的 Fireworks HTML 文件。如果输入的 HTML 文件中有图形，会提示用户指定存放路径，把图形复制到网站里。
使用 Fireworks 优化图形方法：
在 Dreamweaver 的文档窗口选定图片，然后按主选单“ Commands|Optimize Image in Fireworks ”；
这时打开 Fireworks 的图片优化窗口，优化完毕，按“ Update ”，自动替换网站里原有的图片文件。如果修改了图片的格式，会自动检查和修改所有的相关链接，并提示更新服务器上的内容。
只有在 Dreamweaver 的文档窗口才能使用以上与 Fireworks 的集成功能，如果在“ Site ”窗口打开图片无效。
与外部编辑工具更好结合
能详细定义不同格式的文件使用的一个或者多个外部编辑器，如图。
增强的 MAC 兼容与跨平台能力
Dreamweaver 3 增强了对MAC平台和跨平台交换文件的支持。
优秀的可扩展性是 Dreamweaver 的一大特色。 3.0 版更进一步，加强的可定制与扩展特性让用户根据自己的使用习惯和需要创造一个熟悉的工作环境，提高效率。
可定制的选单和快捷键
所有选单和快捷键的信息存放在一个“ menus.xml ”文件里面，这个文件在 Dreamweaver 的安装目录的“ Configuration/Menus ”文件夹。用户可以直接访问这个文件，修改该文件后重新启动 Dreamweaver 即可改变选单。
有必要修改快捷键，如默认的插入书签（ Anchor ）、图片、 Director 和 Flash 影片等的快捷键是 Ctrl+Alt 组合，而它是 Windows 系统的快捷键。
修改前记得备份，文件夹里面有个缺省选单系统的备份文件： menus.bak ，如果在定制过程中出现错误，用它替换 menus.xml 。
javascript API
Dreamweaver 3 提供 300 多个 javascript API 功能，具有强大的扩展能力和灵活性。熟悉 javascript 的用户通过它们建立自己的 javascript 扩展，包括浮动面板、脚本和数据转换等。一般用户也可以在历史面板定制命令， Dreamweaver 自动加入注释到 javascript 代码的每一行，便于用户理解和修改代码。
这些扩展是通用的，可以预料，新的功能实用的扩展将不断会在网上发布。
“旧”网站的问题
升级到 Dreamweaver 3.0 版后，可立即在原来使用 2.0 版开发的网站上工作，原来的模板、元件库、 javascript 、样式等不会受升级的干扰。
内置脚本的变化
3.0 版改进了原来的许多 behavior ，另外还增加了几个。
原来的“ Control Sound ”能打开和关闭声音，但关闭声音的功能在一些 Navigator4.x 的版本无效，新版本改为“ Play Sound ”，取消了关闭声音的脚本；
2.0 版本的“ Display Status Message ”改名为“ Set Text of Status Bar ”。
增加的behavior：
Jump Menu/Jump Menu go ，见前面的“其他新增对象”。
Set Nav Bar Image ，修改导航条按钮，参考前面的“其他新增对象”。增加一个“ Advanced ”标签，用来改变按钮的外观。
Set Text of Frame ，替换框架里面的内容。当然首先要建立框架才能使用这个脚本，如图。
在“Frame ”栏下拉选单选择目标框架；
在“ New HTML ”栏输入替换内容，按“ Get Current HTML ”按钮复制当前框架的 HTML 代码。打开“ Preserve Background Color ”选项保持原来的背景和文字颜色。
“ New HTML ”中可以加入 javascript 语句，把它们放在大括号里面即可。便于发布动态信息。
这个 behavior 还可以用来保证框架的外观，如果页面不是放在框架中，将不会显示“ New HTML ”中的内容。
但是中文兼容不好，如果使用中文，要直接编辑代码才行。
Set text of layer ，替换层中的内容，与“ Set Text of Frame ”类似，如果使用中文，也要直接编辑代码。
Set text of text field ，替换表单文本域的内容，与前者类似。
第三方插件的问题
按 Macromedia 的说法，在 2.0 版中能够使用的插件都可以在 3.0 版正常使用。不过实际上对于许多第三方插件并非如此， Macromedia 自己的 Attain Object 也变成了 CourseBuilder 。对于原有的第三方插件，最好看看开发者的公告。
页面边距
以前在 2.0 版没有设置页面边距的方法，只能编辑代码。现在可以通过主选单“ Modify|Page Properties ”来设定，二组值分别用于 IE 和 Navigator 。对于 Navigator ，要使其页面边距符合要求，有时还要使用别的技巧。
总的看来， Dreamweaver 3 在操作上作了许多改进。但是对于一个偶尔作作网页的人，可能觉得跟原先的 2.0 版相比，没有什么区别，因为没有什么革命性的进步，许多改进在原先的 2.0 版可以借助第三方插件来实现。不过 3.0 版的许多改进颇具新意，能提高效率，减少重复工作，多用几次就会喜欢。 Dreamweaver 3 不愧为一个优秀的网页编辑工具。
最新评论