DW4入门教程-综合文本编辑

增加的HTML Inspector, 引进了往返控制HTML的概念，你可以从代码显示切换到新的，综合的手工编码环境。新的代码显示提供了中央代码的功能就如自动缩进，Html和JavaScript的语法高亮显示，一个中央代码工具栏，可以随时平衡标点，多行选择并缩进他们。现在手动编码也和设计显示一样舒服。

　　工具条

　　工具条包含了可以让你快速往返于不同显示之间的按钮：代码显示，分离显示和设计显示。工具条也包含了一些在每个显示里共同的指令。当你在代码显示下工作时，选项菜单包含特殊的文本编辑操作。

　　如何使用工具条:

  1. 打开01_Toolbar.html文件在01_Code_TextEditor文件夹中。要显示工具条，选择菜单View/Toolbar。
  2. 选择只显示代码按钮。

    使用工具条快速切换与文档显示工具栏说明 Options菜单下从左到右的说明：


  1. 点击File菜单按钮，通过这里来关闭只读，Get, Check Out, Put, Check In, Undo Check Out, Design Notes以及定位站点：

  2. 点击Preview/Debug in Browser菜单按钮在定义好的浏览器中预览或是调试：

  3. 点击更新设计显示按钮刷新设计显示中通过代码显示更改的部分：

  4. 点击Reference(参数)按钮来启动代码属性面板。

  5. 点击代码导航按钮来移动文档里定义的JavaScript 函数，设置或删除代码里的断点。

  6. 点击代码显示模式下的选项菜单按钮，可以选择Word Wrap（自动换行）, Line Numbers（行数）, Highlight Invalid HTML（高亮HTML中的错误）, Syntax Coloring（显示语法的颜色）, Auto Indent（自动缩进）和顶端的Design View（设计显示）。

  7. 点击设计显示模式下的选项菜单按钮，可以隐藏所有的可视化帮助或锁定可视化帮助，如表格边框，层边框，帧框架边框，图片映射，不可见元素，表头，标尺，网格，以及图片的轨迹。

　

　

自动缩进

　　代码显示显示并格式化代码，使之成为整洁易读的代码。所有的HTML和Javasript代码将会自动缩进。当你添加一行新的代码，Dreamweaver 将会使其自动于前一行的第一个字母对齐。这样不仅提供了一个舒适的编辑环境，而且保持了与Dreamweaver内部提供的behavior（行为脚本）的书写格式一致。

　　使用自动缩进

  1. 在01_Code_TextEditor 文件夹中打开02_AutoIndenting.html 文件。
  2. 确认你是在代码显示模式下。
  3. 定位文档窗口中的指针在第40行的末尾。
  4. 按下回车键。注意指针现在跳转到信的一行（41行），并且与第40行代码的首字对齐。

    自动缩进提供整洁，易读的代码

　

　

活动语法颜色显示

　　你输入的HTML标签和JavaScript关键字将会在代码显示模式下以不同的颜色显示。默认的颜色可以在属性设置中被调整。当你在文档窗口中添加或改变代码时，Dreamweaver会马上显示代码的颜色。如果你还不了解HTML的话，这使得代码显示模式成为很有帮助的学习HTML的工具，或是提醒你正确的语法和各种标签的属性。

　　使用活动语法颜色

  1. 打开01_Code_TextEditor 文件夹中的03_LiveSyntaxColoring.html文件。
  2. 确认你是在代码显示模式下
  3. 将鼠标指针定为在文档窗口的第24行。
  4. 输入以下JavaScript: function test().注意再你输入完这个函数时，Dreamweaver立刻显示关键字的颜色。
  5. 将鼠标指针定为在文档窗口的第52行结束。
  6. 输入以下HTML:

    注意当你一输入"<"的时候，Dreamweaver就将文本的颜色改变成HTML标签的颜色。

    视觉上的活动语法显示加强了正确的HTML和JavaScript语法识别

　

　

标点符号的平衡

　　手动编码依靠快速掌握和选择区域代码的能力。一个加强明显并使之有效的方法是通过标点符号来平衡HTML的标签和JavaScript braces.

　　使用Html标签和JavaScript Brace平衡：

  1. 打开01_Code_TextEditor 文件夹下的04_PunctuationBalancing.html文件。
  2. 确定你是在代码显示模式下
  3. 将鼠标指针定位在任何一个<TD>标签里。
  4. 按Control+" (Windows?) 或者 Command+" (Macintosh?). 注意完整的<TD>标签部分现已被先遣。再次按下键盘上的快捷键这时选中区域会变成完整的<Table>标签。
  5. 将鼠标的指针定位在第19行JavaScrip关键字Substring 里。
  6. 按下Control Shift+" (Windows) 或 Command Shift+" (Macintosh).注意整个在braces[]里的代码现在高亮显示。再一次按下快捷键选中的高亮显示将包括第一个设置的braces{}里的代码。若再一次按下快捷键整个函数变为高亮显示。


符号平衡提供了一个简单的方法来选去代码中完整的区域

　

　

块缩进

　　另一项非常手欢迎的技术是手动编码HTML和JavaScript时是块缩进。这个功能允许我们高亮显示一个代码的区域，并用Tab键对高亮象使得代码区域进行缩进。块缩进功能格式化代码使之更加易于阅读。当你进行嵌套式的HTML表格，或Javascript的块工作时这是非常有用的。

　　使用块缩进：

  1. 打开01_Code_TextEditor 文件夹下的05_BlockIndenting.html文件。
  2. 确认你是在代码显示模式下。
  3. 选择37-41行间的内容，如下图所示。
  4. 按几次Tab键并且注意整个选择区域缩进。
  5. 按Shift-Tab返回原先的位置。

    块缩进可以快速格式化代码

　

查找并替换

　　查找和替换窗口现在被综合在代码显示模式中并能够强大的在源代码中搜索。用这个功能可以在当前文档或整个站点中查找词。你甚至可以通过高稽查找来查找表达式或替换函数。

　　使用查找和替换：

  1. 打开01_Code_TextEditor 文件夹下的06_FindReplace.html文件。
  2. 确认你是在代码显示模式下。
  3. 要启动查找替换窗口，选择Edit（编辑） /Find and Replace… （查找和替换）。
  4. 在当前选者文档的选项菜单下得查找编辑框中输入MM_preloadImages 。
  5. 按下Find All（查找全部）按钮。
  6. 双击结果列中的一项跳转到那个部分。




用强大的查找和替换面板查找

　

　　HTML和JavaScript代码导航

　　JavaScripts是时一个对象化向导语言，并且在页面上连续的排列着。这和传统的脚本语言以及HTML不同，他们按照常规的程序排列，所以他们可以象普通的文本那样被阅读。当你阅读Javascript的时候经常会从一个函数跳到另一个函数，然而这些函数的先后顺序却不重要。代码导航菜单提供一个有效方法在两个函数间往返。这个菜单也提供简单的在代码中设置断点的方法。断点是Dreamweaver用来在浏览器中调试代码时设置的运行到此处的停止点。

　　如何开始：

  1. 打开01_Code_TextEditor文件夹中的07_CodeNavigation.html文件
  2. 确认你是在代码显示模式下。

　　在两段代码间往返：

  1. 点击代工具条里的导航按钮来显示文档中的函数列表。
  2. 选择MM_FindObj 函数来跳转到这个函数。

　　设置断点：

  1. 将鼠标指针放置第25行，函数MM_swapImage 的内部。
  2. 点击代码工具条里的代码导航按钮来显示菜单选项。
  3. 选择设置断点并注意有一个红色的小原点添加与代码显示窗口中。

    代码导航使得我们易于往返于JavaScript

    　

    编辑非HTML文档

    　　Dreamweaver 4 会自动在CODE状态下打开非HTML文档。里面包括了JS，XML或者没有任何以HTML结构显示的文字。这样允许DREAMWEAVER在没有SOURCE CODE的警告下打开任何文档。

    编辑非HTML文档:

    1. 在01_Code_TextEditor文件夹里打开 08_EditNonHTML.js。
    2. 文件自动在文档窗口打开。

      Dreamweaver 能够安全地编辑任何类型的文档