在Dreamweaver中进行代码编辑
出自9RIA.com WIKI
(英文原文: Code editing in Dreamweaver )
原作者：Mark Fletcher 翻译者：：guagua
现如今，极大多数的网页设计和开发人员花费了大量的时间进行代码编写。从Dreamweaver刚刚发布时起，它就照顾到了代码编写的方式，Dreamweaver团队经常引入更好的技术，保证了编辑器足够强大和灵活，并能应对多种编程语言。
到了Dreamweaver CS4, Adobe更加照顾了网页开发人员的工作方式。Dreamweaver CS4提供了大量的工具，不仅简化了编写代码的过程，同时也使得不需要离开Dreamweaver工作环境就可以渲染浏览器成为可能。
目录 |
要求
为了从这篇文章中学到最多，你需要下列软件和代码
Dreamweaver CS4
实例代码:
code_exercise_files.zip (ZIP, 2.3MB)
假设读者具有的知识
对Dreamweaver工作环境有一定了解并且知道如何在Dreamweaver中建立一个网站。
设置你的工作环境
使用Adobe Dreamweaver CS4，你可以根据你的工作流程来设置编码环境 。 你可以改变你查看代码的方式，配置不同的键盘快捷键，也可以导入你最喜欢的或者本地标记库。
使用工作环境切换器（位于你的应用程序菜单），你可以选择四个工作环境，从而给你提供丰富的编码经验（看图1）：
应用程序开发人员（Application Developer） 应用程序开发人员（高级）（Application Developer Plus） 编码器（Coder） 编码人员（高级）（Coder Plus ）
图 1. Dreamweaver CS4 工作环境
上面列出的所有的工作环境会显示Dreamweaver的默认代码查看方式和悬浮在左手边屏幕上的面板。另外，应用程序开发人员（Application Developer），编码器（Coder）和编码人员（高级）（Coder Plus ）工作环境会将属性查看器从默认视图中删除。
如果没有一种默认的工作环境满足你的要求，那也别担心。通过Dreamweaver CS4你可以创建自己的布局，你可以通过打开和悬浮面板到你希望的位置，然后将它们保存为一个本地工作环境。
选择一个编码环境：
启动Dreamweaver。 下载code_exercise_files.zip文件，将在本文中使用。 解压缩并将其放在你的本地目录中。 创建一个新的站点，定义DWCS4工作环境。(如果需要帮助请到Working with Dreamweaver sites.) 选择窗口（Window） > 工作区布局（Workspace Layout）。 选择你希望的工作环境 (Application Developer, Application Developer Plus, Coder, 或者 Coder Plus). 创建一个自定义工作区：
安排Dreamweaver的面板，使得它满足你的需求。 选择窗口（Window） >工作区布局（ Workspace Layout）。 选择新建工作区（New Workspace）。 输入新工作区的名字，然后点击“OK”。
查看代码
Dreamweaver提供了很多方式供你查看源代码。选择代码查看方式，选择代码可以在文档窗口中查看代码，选择拆分可以在文档窗口中同时显示页面和相关代码。使用代码查看器可以在单独的窗口中显示代码。
如果，你和我一样使用Dreamweaver很多年了，你就会知道在一个文档窗口中同时显示页面和代码是我们熟悉的方式。这方面没出现什么变化。然而，很多Dreamweaver用户(包括我自己)现在有了多个工作站，可以让他们在多个浏览器之间切换。 但是将设计和代码水平分开的选择，使得我们不能完全享受到双屏幕的优势。为了应对这个局限，Adobe Dreamweaver CS4使得我们不仅能水平的拆分设计和代码（或者只是代码）(看图2),同时也能左右的拆分设计和代码，你可以将设计放在屏幕的左边代码放在右边，或者反过来。
图 2. Dreamweaver垂直切分视图
这个看上去很小的功能非常有用，特别是在你使用大型文档过程中查看代码。
为了垂直拆分文档，选择查看（View） > 垂直拆分（Split Vertically）。 为了将设计放在屏幕的左手边选择左侧的设计视图（Design View on Left）。 为了垂直拆分代码，选择视图（View） > 拆分代码（Split code）。
使用文件相关工具栏
让我们想想，使用只有一个文件的网页的记忆已经模糊了。为了跟上现代的标准，创建一个网站会使用CSS, JavaScript,和许多其它的文件。过去仅仅是了解这些就是一个艰苦的工作（更不要说编辑它们了）。为了简化你修改与你的网页相关的所有文件，Dreamweaver提供了文件相关工具栏（看图3）。
图 3. 文件相关工具栏
为了从文件相关工具栏打开一个相关文件，定位到文档的顶部。
点击你希望打开的文件的文件名。 右键点击你希望打开的相关文件的文件名，然后从弹出菜单里选择作为单独文件打开（Open as Separate File）。 (注意： 当你选择这个选项时，主文档就变成不可见了。） 当在代码视图下工作时，点击源代码（Source Code）按钮会从文件相关工具栏返回到你的源代码中。 注意:如果看不到文件相关工具栏（Related Files toolbar），选择编辑（Edit） > 首选项（Preferences） > 常规（General），选择启用相关文件（Enable Releated Files），然后点击OK。
代码导航（Code Navigator）
你是否曾经期待有一种方法，它能够很轻松的找到和编辑所有与你当前文档相关的代码，比如CSS，服务器端规则和外部JavaScript函数?如果答案是强烈的“是！”，那么你肯定会喜欢Dreamweaver的代码导航的，见图4.
图 4.代码导航
在Dreamweaver CS4中，如果你将插入点放在一行或者一块区域中，你知道它们被相关文件影响。你将注意到出现了一个船轮的图标。这就是代码导航的指示器，相信我，你将会发现它是不可或缺的。代码导航器(也可以点击Ctrl+Alt+N [Windows中]或者Cmd+Option+N [Mac OS X中]替代上下文菜单)可以让你看到更多的信息，也可以修改和当前文档相关的CSS属性，这些属性可以是在当前打开的网页中，也可以在其它外部文件中。
使用代码导航器坚持CSS属性：
在页面中点击Alt-Click (Windows)或者Command+Option-Click (Mac OS X)。代码导航器会显示一个链接，链接到影响你点击的区域的代码。 点击你希望查看的CSS属性，服务器端规则或者JavaScript函数。 代码导航器将相关代码汇集在一起，按照字母顺序进行排列。
注意:如果你点击了链接查看CSS规则，代码导航器会显示属性中的规则提示。当你想从很多同名的规则中区分出来时，这些提示相当有用。
在代码导航器中点击一个CSS规则，Dreamweaver会拆分的显示这个规则。如果点击一个外部文件的规则，则Dreamweaver会打开这个文件，然后显示在文件相关工具栏中。
使用实时视图（Live view）
当你开始编辑所有和网页相关的文件时，你肯定希望看到当所有的相关文件执行后，网页显示的效果。你可以通过Dreamweaver的实时视图（Live view）来做到这一点。和传统的Dreamweaver设计视图不一样，使用实时视图，你可以在不离开Dreamweaver工作区的情况下，看到网页在浏览器中显示的真实效果，并且是不可修改的。这是一个很好的特性，保证了一旦进入了实时视图，Dreamweaver就不能以任何方式再改动你的代码了。
为了使用实时视图：
确保你在设计视图或者代码和设计视图。 点击实时视图（Live View）按钮。 如果你在代码视图或一个相关文件上做了改动，在文档工具栏上点击刷新按钮或者点击键盘上的F6。 要回到可编辑的设计视图请再点击实时视图。
使用实时代码视图（Live Code view）
以前，很多编码者都经历过这样一件痛苦的事，那就是Dreamweaver没有提供任何方式来查看代码会在浏览器中显示成什么样子。一般来说开发者只能先在浏览器中预览，然后查看一下代码（使用查看源代码），最后将看到的代码拷回到Dreamweaver，这样就能看到代码的作用了。
当你激活了实时代码视图（Live Code view），你就能够实时地看到你的代码中的JavaScript造成的页面变化。当你使用Spry或者其它JavaScript框架时，你的CSS样式会随着用户和元素之间的交互，通过JavaScript来改变，比如移过它。使用实时代码视图，你可以定位到任何应用了CSS样式名的元素上，这样就能准确的找到代码上。点击F6，你可以将代码固定在当前的状态。一旦进入固定状态，你就可以使用CSS样式面板，选择具体的CSS样式来编辑。使用代码导航器，你也可以通过文档对象模型DOM (Document Object Model)查看代码的完整的路径.。
配合使用实时代码视图和代码导航器，你会发现它们提供了不可思议的功能，使得你能高效的定位和修改代码。
外置代码
开发你的网站时，你可能希望将所有的代码(CSS, JavaScript, Spry等等) 都放在你工作区中。当构建网站时将代码时刻放在你的手边，可以更好的进行管理，使得调试更加容易。然而，当你完成开发时，你可能又想按照最佳实践的原则将你的CSS, JavaScript和其它东西(比如Spry属性) 放到外部并将其外置。
将行为 (JavaScript和Spry)和表现(CSS)从页面结构中分离出来有很多好处。比如，在页面中包含大量的JavaScript 会影响在搜索引擎中进行排名。第二，(和CSS有关)在多页面的环境中使得代码难以被重用。总而言之，将你的CSS和行为代码分离被认为是最佳实践，应该尽可能这样做。
在设计或者代码视图中移动CSS代码是很直观的。
在CSS样式面板中选择你希望移动的规则。 右键点击选择的规则，然后从上下文菜单中选择移动CSS规则。对于多条规则，Control-Click (Windows) 或者Command-Click (Mac OS X) 选择你想要的规则。
在代码视图中，选择你需要移动的规则，右键点击选择的规则，然后选择CSS Styles > Move CSS Rules from the context menu。
在Move To External Style Sheet对话框中，选择新的样式表，然后点击OK 在Save Style Sheet File As对话框中，输入新的样式表的名字，然后点击Save. 注意:如果你在代码视图中，也可以使用代码工具栏来移动CSS规则。
提取JavaScript
Adobe Dreamweaver使你能够从Dreamweaver文档中提取大部分JavaScript，然后导出到一个外部文件，最后将这个文件与你的文档链接。
使用JavaScript 提取器（Extractor）：
打开包含JavaScript的文档。 选择命令（Commands） > 外置（Externalize） JavaScript. 外置JavaScript对话框提供了两个选择(看图 5): 仅将JavaScript（Only externalize JavaScript）: 如果你想Dreamweaver将所有的JavaScript都移动外部文件，然后与当前文档进行链接，就选这个选项。这个选项保留了文档中的事件处理代码，比如onclick和onload，也保留的行为面板中可见的行为。 将JavaScript外置并以非干扰方式进行附加（ Externalize JavaScript and attach unobtrusively）: 如果选择这个选项，Dreamweaver会将JavaScript移到一个外部文件，并且与当前文档建立链接，然后从HTML中删除事件处理代码，使用JavaScript在运行时再插入。(注意: 当你选择这个选项时，你就不能在行为面板中编辑行为了。)
Figure 5.外置JavaScript对话框
在编辑行中取消选择你不需要的编辑，或者选择Dreamweaver默认不提供的。 点击OK。 摘要对话框提供了摘要，回顾下提取，然后点击OK。
保存页面。 注意:如果需要更多提取JavaScript的知识请参考Dreamweaver帮助文档中的Extract JavaScript 和Understanding unobtrusive JavaScript in Dreamweaver CS4.
得到代码提示（code hints）
Dreamweaver的代码提示（code hints）提供了一种快速无错的方式来编辑你的代码。在代码视图或者代码查看器下，会自动为你打的代码显示一列合适的标记，有属性，函数参数或者对象方法。Dreamweaver支持以下语言和技术的代码提示：
HTML CSS DOM (Document Object Model) JavaScript (includes custom class hinting) Ajax Spry Adobe ColdFusion JSP PHP MySQL ASP JavaScript ASP VBScript ASP.NET C# ASP.NET VB
代码提示是完全自定义和而且对自定义标记和对象是可扩展的。代码提示可以用于几种代码。为了使用代码提示：
为HTML标记名输入一个尖括号(<)。如果你编写JavaScript你可以打入一个点（点操作符），用来显示函数和对象的列表。 下拉这个列表，双击你希望插入的条目。 如果这个条目支持属性或者额外的对象，点击空格键，以显示可用属性的列表。选择一个属性，然后点击Enter.。 输入属性的值；如果属性只有一下固定的值，则从列表中选择一个允许的值。 你现在可以重复步骤3和4，来添加更多的属性，参数值，对象和方法。当以上述方式工作时要确保在一个值和它的引号（“）之间不要有空格。点击Escape关闭列表。
在代码视图下通过放置插入点来使用代码提示编辑代码，比如，在标记的结束括号的左边点击空格键。这会显示这个标记支持的属性的列表。为了使用代码提示和CSS类来格式化一个页面：
首先将自定义的样式添加到外部样式表或者网页的头部。 插入标记的第一部分（比如，段落标记），然后点击空格键，从菜单中选择类。 点击Enter (或者Return)显示你之前创建的所有的类，如图6所示。
图6. JavaScript代码提示
选择了需要的类之后，只要点击Enter（或者Return）。 为了插入额外的JavaScript对象或者方法，只要输入点（.）。Dreamweaver会自动从包含到这个页面的库中，查到所有和那个对象相关的类，然后显示它们。
补齐标记和括号
Dreamweaver提供了很好的方法，能够为你坚持你的标记是否正确补齐--补齐是指开始和结束标记是否匹配--有两个命令：选择父标记（Select Parent Tag）和选择子标记（Select Child Tag）。在多层次处理时这些命令是很有用的，比如一个嵌套的表格式。为了选择一个父标记：
在嵌套代码中定位到你希望插入的点。 选择编辑（Edit） >选择父标记（ Select Parent Tag.） 在代码视图中，匹配的标记会高亮显示。如果你继续选择这个命令，你的标记会补齐，Dreamweaver CS4最终会高亮显示代码中最外层的<html> 和 </html> 。
使用参考面板
Dreamweaver CS4内置了很多参考信息，包含了以下书本：
Adobe CF Function Reference Adobe ColdFusion Markup Language reference O'REILLY ASP Reference O'REILLY ASP.NET Reference O'REILLY CSS Reference O'REILLY HTML Reference O'REILLY JavaScript Reference O'REILLY JSP Reference O'REILLY PHP Pocket Reference O'REILLY SQL Language Reference O'REILLY XML in a Nutshell O'REILLY XSLT Reference UsableNet Accessibility Reference
你可以在设计或者代码视图中访问参考面板，也可以在代码查看器中。
在设计视图中，点击标记选择器中的一个标记，然后点击参考按钮打开面板，就会显示你选择的标记的信息。当你在代码视图或者代码查看器下工作时，这样做：
选择一个标记，属性或者关键字。 Right-click (Windows)或者Control-click (Mac OS X)，然后从上下文菜单中选择参考(也可以按住Shift+F1). 点击右上角的小箭头可以调整引用面板的文字大小（看图7）。参考面板也连接了可访问性报告。从结果面板中选择一个条目，然后点击info按钮，就会自动显示当前选择问题的WAI (Web Accessibility Guideline)指导。
图 7.参考面板
检查标记
在窗口菜单中的标签检查器提供了一种又快又容易的方法来查看和修改标记的属性。使用这个工具，可以不用直接在文档窗口中修改代码。
选择一个和这个条目相关的标记，列出所有的属性。Dreamweaver CS4经常会将属性加到标记的最后。
图 8.标签检查器
插入标签到标签选择器
标签选择器可以让你插入Dreamweaver tag libraries中所有的标签。为了插入新标签：
在代码视图下，right-click (or Control-click) ，从菜单中选择插入标签 (你也可以点击文档工具栏的标签选择器图标来显示面板) 。
面板的左边是支持标签库的列表，右边显示了选择的标签库中的单个标签。
你也可以点击目录，显示一些分类，比如选择Page Composition, Page Elements, Formatting和Layout, Lists等等。选择页面元素，比如，显示三个图标：General, Browser-specific和Deprecated。点击三个之中任何一个，右边面板都会显示相关的标签，如图9所示：
图9. 相关标签在右边的标签选择器
选择合适的标签，点击标签信息（Tag Info）按钮，会显示关于使用这个标签的信息。同样，点击参考按钮会打开参考面板，也可以查看到所有相关属性。 点击插入（Insert）按钮，将标签插入你的代码。如果你需要额外的信息，它将显示一个标签编辑器。
编辑，添加和导入标签库
标签库，在编辑菜单下，Dreamweaver CS4用它来管理下面的标签库：
HTML tags CFML tags ASP.NET tags JSP tags JRun custom library ASP tags PHP tags Template tags WML tags XSLT tags 标签库是程序的核心，被所有的标签编辑器参考。标签库编辑器让你可以添加和删除标签，标签库和属性；为一个标签库设置属性；编辑标签属性。T
标签库的一个重要的特性是它可以决定你的代码在文档窗口中显示的方式。第一次使用时，开发者可以可视的设置换行符，内容格式和大小写选择。图10显示了调节table标记的外观。
图10. 标记库编辑器
假如你希望使你单元格标签(td)，将每个表格的行都显示在同一行中。可以这么做：
找到标记库编辑器（Tag Library Editor） (Edit > Tag Libraries)。 点击HTML标签目录的节点。 选择td目录。 从换行符弹出菜单中 选择No Line Breaks。 从上下文弹出菜单中选择Not Formatted。 点击OK保存修改。 现在当你插入一个表格，所有的<td>都会出现在同一行，而不是单独的行，如图11所示。
图 11.td标签出现在同一行
标签库编辑器给你添加标签库，标签和属性上提供了很大的灵活性。
添加新的标签库：
在标签库编辑器中点击加 (+)按钮，选择新建标签库（New Tag Library）。会弹出一个新建标签库（New Tag Library）对话框。 给新的库输入一个名称，点击OK。现在新的库的目录出现在下拉框的底部。 With the new folder still selected, choose the types of documents the new library will be available in. 点击加(+)按钮，选择新建标签（New Tags）。 在新建标签对话框中，确保新建的库被选中了，然后输入新的标签名，如图12所示。
图 12. 新建标签对话框
选择新建标签目录，点击加(+)按钮，选择新建属性。 在新建属性对话框，输入和该标签相关的所有属性（图13）。
图 13. 新建属性对话框
选择一个属性，然后选择合适的属性类型和例子，如图14.
图 14. 选择属性类
当所有的标签和属性添加好了以后，点击OK保存你对标签库进行的修改。 现在要使用这些元素时，可以通过标签选择器，标签查看器或者代码提示（图15）。
图 15. 使用代码提示
当Dreamweaver CS4开发时，Adobe就认识到会有许多网页开发者需要使用自定义标签，比如XML标签。为了满足这些用户，标签库编辑器可以导入自定义的标签，然后让它成为作者环境的一部分。这样就保证了，当你输入一个自定义标签（在代码视图），代码提示会自动列出所有的自定义标签的属性。
Dreamweaver CS4可以导入下列的标签：
XML DTD or Schema files ASP.NET custom tags JSP tag libraries (*.tld, *.jar, *.zip) JSP server tags (web.xml) JRun server tags 为了导入自定义标签，并将它们集成到你的工作环境中：
打开标签库编辑器（Tag Library Editor） (Edit > Tag Libraries)。 点击加(+) 按钮。 选择ASPNet, DTDSchema或者 JSP (图16)。
图 16.标签库编辑器
为了从一个XML DTD文件或者格式中导入标签：
打开标签库编辑器（Tag Library Editor） (Edit > Tag Libraries). 点击加 (+)按钮，选择DTD Schema > Import XML DTD or Schema File. 输入DTD或者格式文件的URL。 输入标签使用的前缀。前缀指明了标签是那个库的一部分。 点击OK。 注意:为了学习如何从一个文件或者服务器端（web.xml）导入自定义ASP.NET标签, JSP标签， 参考Dreamweaver帮助中的Managing tag libraries。
检查你的代码
当你编写网页的时候，经常会检查标签，语法错误或者CSS的浏览器兼容性。Dreamweaver包含了一个内置的验证器和一个CSS浏览器兼容性检查器。
为了进行代码验证，Dreamweaver会验证许多常用的标记语言，比如HTML, XHTML, ColdFusion Markup Language (CFML), JavaServer Pages (JSP), Wireless Markup Language (WML)和XML。
验证你的标记
你可以设置验证器的首选项，比如指定验证器应该检查的标记语言，指定验证器应该报告的错误。为了验证你的文档：
对于XML或XHTML文件，选择File > Validate > As XML. 对于其它文件，选择File > Markup.
验证标签的结果面板里显示“没有错误或警告“（"No errors or warnings"），会列出发现的语法错误。
双击错误信息会高亮显示代码视图中的代码。 为了将报告保存为XML文件，点击 Save Report按钮。 为了在你的默认浏览器中查看报告（使你可以打印出报告），点击Browse Report 按钮。
检查浏览器兼容性
Dreamweaver的浏览器兼容性检查器（ browser compatiblity checker） (BCC) 可以让你在HTML和CSS中定位到会引起浏览器显示错误的地方。当你运行时，Dreamweaver会同时检测你的文档中是否有CSS属性或值不被你的目标浏览器所支持。
为了启动一个浏览器兼容性检查器：
点击File > Check Page > Browser compatibility. 完成后，Dreamweaver会在结果面板中列出所有的问题(图 17)。
图 17.浏览器兼容性检查器
双击一个错误或者警告信息会在代码视图下高亮显示错误。 一旦Dreamweaver产生了报告，你可能想要改变浏览器的最低版本。
为了做到这些你可以：
点击Check Page > Settings in the Document toolbar. 点击结果面板左上角的绿色箭头，然后选择设置。 在目标浏览器对话框中，选择你希望检测的浏览器最低版本。 点击OK保存设置。 除了内置的浏览器兼容性检查器，Dreamweaver还包含了一个在线 CSS建议器。这个强大的资源可以让你找到最新的CSS和浏览器兼容性问题的解决方法。你可以评论，改进现存的解决方案，也可以与社区分享你的解决方案。
正如你所看到的，Dreamweaver CS4包含了满足现代网页专家需求的有用的工具。 使得设计师，开发者和程序员都可以在一个环境中方便的进行创建，编辑和管理任何任何标准网站和网页应用程序。