Skip to main content

如何在Dreamweaver中编写HTML代码 - 超越所见即所得

体验网页制作全过程,这是html5学习案例,是前端开发程序员良心干货!#编程创造城市 (六月 2025)

体验网页制作全过程,这是html5学习案例,是前端开发程序员良心干货!#编程创造城市 (六月 2025)
Anonim

Dreamweaver是一个很棒的WYSIWYG编辑器,但是如果你不想用“你看到的是什么”环境来编写网页,你仍然可以使用Dreamweaver,因为它也是一个很棒的文本编辑器。但是有很多功能在Dreamweaver代码编辑器中被忽略了,因为主要关注的是产品的“设计视图”或WYSIWYG编辑器部分。

如何进入Dreamweaver代码视图

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

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

要同时查看两者,请:

  • 点击 分裂 按钮(之间 设计).
  • 在里面 视图 菜单,选择 代码和设计。

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

代码视图选项

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

一旦进入代码视图,就会有一个 查看选项 工具栏中的按钮。您也可以通过进入查看选项 视图 菜单和选择 代码视图选项。 选项是:

  • 自动换行 - 包装HTML代码,以便您可以在不水平滚动的情况下查看它。请注意,此选项不会在代码中插入任何回车符,它只显示代码,以便更容易阅读。
  • 行号 - 在代码侧面显示行号。它为换行长于视图窗口的行显示换行符号。
  • 隐藏的角色 - 显示特殊字符,而不是显示在网页上的空格。例如点替换空格,双V形替换每个标签,并且一个pilcrow或段落标记替换每个换行符。
  • 突出显示无效代码 - 突出显示黄色不正确的HTML。如果选择黄色标记,Property Inspector将为您提供有关如何修复它的提示。
  • 语法着色 - 打开或关闭代码的颜色编码。您可以在首选项的代码着色部分更改颜色编码的颜色。
  • 自动缩进 - 如果上面的代码缩进,则在回车后自动缩进代码。您可以通过更改首选项的代码格式设置部分中的选项卡大小来更改缩进的大小。

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

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

如果您不熟悉HTML,可以滚动HTML标记列表并选择各种标记以查看它们的作用。一旦键入标签,Dreamweaver将继续提示您输入属性。例如,如果您键入 <>,Dreamweaver将下降到 HTML标记,其他标记以I开头。如果您继续键入该字母 ,Dreamweaver将它缩小到了 标签。

但代码提示不会以标签结束。您可以使用代码提示来插入:

  • HTML属性
  • 类和ID名称
  • CSS属性

如果没有出现代码提示,则可以点击 按Ctrl-空格键 (Windows)或 CMD-空格键 (Macintosh)让它们显示。代码提示可能不会出现的最常见原因是在完成标记之前切换到不同的窗口。因为Dreamweaver正在键入字符的输入 <,如果你离开窗口并返回,你将不得不重新启动代码提示。

您可以通过按退出键关闭代码提示菜单。

输入打开的HTML标记后,您需要将其关闭。 Dreamweaver以自然的方式做到这一点。如果你键入 关闭标签 最适合您需求的选项。

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

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

许多HTML编码器不知道或不使用的功能是折叠HTML代码的功能。这不会从文档中删除标记,只是将它们从视图中删除,这样它们就不会分散您正在处理的内容。要折叠您的代码:

  1. 选择要隐藏的代码部分。
  2. 在里面 编辑 菜单,选择 折叠选择 来自 代码崩溃 子菜单

更简单的方法是选择代码,然后单击排水沟中显示的代码折叠图标。您也可以右键单击所选代码并选择 折叠选择.

如果你想隐藏一切 除了 什么是突出显示,选择 折叠外部选择 在任何上述方法中。

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

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