在Dreamweaver中编写HTML代码

你不必只使用所见即所得

Dreamweaver是一个很棒的所见即所得的编辑器 ,但如果你对“你看到的是什么”环境编写网页不感兴趣,你仍然可以使用Dreamweaver,因为它也是一个出色的文本编辑器。 但是有许多功能在Dreamweaver代码编辑器中滑落,因为主要关注点是产品的“设计视图”或所见即所得编辑器部分。

如何进入Dreamweaver代码视图

如果您从未使用Dreamweaver作为HTML编辑器,则可能从未注意到页面顶部的三个按钮:“代码”,“分割”和“设计”。 Dreamweaver默认在“设计视图”或所见即所得模式下启动。 但切换到查看和编辑HTML代码很容易。 只需点击“代码”按钮。 或者,进入视图菜单并选择“代码”。

如果您只是在学习如何编写HTML,或者想了解您的更改如何影响文档,则可以同时打开代码视图和设计视图。 这种方法的优点是你可以在两个窗口中编辑。 因此,您可以在HTML中为图像标记编写代码,然后使用设计视图通过拖放操作将其移动到页面上的其他位置。

要同时查看两者,可以:

一旦您习惯使用Dreamweaver编辑您的HTML代码,您可以更改您的首选项以默认在代码视图中打开Dreamweaver。 最简单的方法是将代码视图保存为工作区。 Dreamweaver将在您使用的最后一个工作区中打开。 如果没有,只需转到Window菜单,然后选择你想要的工作区。

代码视图选项

Dreamweaver非常灵活,因为它有很多方法来定制它并使其按照您希望的方式工作。 在选项窗口中,您可以调整代码着色,代码格式,代码提示和代码重写选项。 但是你也可以在代码视图中改变一些特殊的选项。

进入代码视图后,工具栏中会出现一个“查看选项”按钮。 您也可以通过进入视图菜单并选择“代码视图选项”来查看选项。 选项是:

在Dreamweaver代码视图中编辑HTML代码

在Dreamweaver的代码视图中编辑HTML代码很容易。 只需输入您的HTML。 但是Dreamweaver为您提供了一些额外功能,可以将其扩展到基本的HTML编辑器之外。 当你开始写一个HTML标签时,你输入<。 如果在该字符之后暂停,Dreamweaver将向您显示HTML标签的列表。 这些被称为代码提示。 为了缩小选择范围,请开始输入字母 - Dreamweaver会将下拉列表缩小到符合您输入内容的标签。

如果您不熟悉HTML,则可以滚动浏览HTML标签列表并选择不同的HTML标签来查看它们的功能。 一旦您输入标签,Dreamweaver将继续提示您输入属性。 例如,如果输入“ HTML标记,其他标记以我跟随开头。 如果继续输入字母“m”,Dreamweaver将缩小到标签。

但是代码提示并没有以标签结束。 您可以使用代码提示插入:

如果代码提示没有出现,您可以按Ctrl空格键(Windows)或Cmd空格键(Macintosh)以显示它们。 代码提示可能不会出现的最常见原因是如果您在完成代码之前切换到其他窗口。 由于Dreamweaver正在键入字符<,因此如果您离开窗口并返回,则必须重新启动代码提示。

您可以通过点击转义键来关闭代码提示菜单。

一旦你输入你的HTML标签,你需要关闭它。 Dreamweaver以自然的方式做到这一点。 如果您输入最适合您需要的“关闭标签”选项。

如果您还没有准备好切换到使用HTML编辑页面,但是您希望在编写代码时观看代码,则应该尝试使用代码检查器。 这将在单独的窗口中打开HTML代码。 它就像代码视图一样工作,实际上,它基本上是当前文档的可拆卸代码视图窗口。 要打开代码检查器,请转到窗口菜单,然后选择“代码检查器”或按键盘上的F10键。

Dreamweaver将格式化HTML代码,但您希望显示它。 例如,如果使用3个空格缩进,但不缩进IMG标记,则可以在代码重写选项中指定该格式化信息。 然后转到命令菜单并选择“应用源格式”。 这是将别人编写的代码转换为您熟悉的格式的好方法。

许多HTML编码器不知道或不使用的功能是能够折叠HTML代码。 这不会从文档中移除标签,而只是将其从视图中移除,以免它们干扰您正在处理的内容。 要折叠您的代码:

  1. 选择您想要隐藏的代码部分
  2. 在编辑菜单中,从“代码折叠”子菜单中选择“折叠选择”

更简单的方法是选择代码,然后单击出现在装订线中的代码折叠图标。 您也可以右键单击所选代码并选择“折叠选择”。

如果要隐藏突出显示的内容以外的所有内容,请在上述任一方法中选择“折叠外部选择”。

要展开折叠代码,只需双击它即可。 这将打开代码并选择它。 然后,您可以移动该选择或删除它或在其周围添加其他标记。

您可以在不想编辑外部模板的页面上始终使用折叠和展开功能。 您只需选择要编辑的内容区域并在外部折叠即可。 然后编写你的HTML。 您仍然可以在设计视图中查看该页面或在浏览器中预览该页面。 折叠后的代码不会从文档中删除,只是隐藏在视图中。 您也可以在处理一系列物品时使用它。 完成之后,将其折叠。 当没有代码显示时,你知道你已经完成了。