关于 Dreamweaver 的 10 个小技巧——Web 开发人员的最佳代码编辑器

Dreamweaver 是 Internet 上所有基于 Web 的活动之母。 对于大多数人来说，Dreamweaver 只是一个创建网站的工具，但只有专业人士知道 Dreamweaver 才是强大的。

Dreamweaver 具有许多功能和选项，使其成为 Web 开发人员最喜欢的工具。 毫无疑问，该软件拥有目前市场上任何其他 Web 开发软件所没有的最知名的 IDE（集成开发环境）。 无论是开发、协作和编码工具，Dreamweaver 都为 Web 开发人员提供了一个不错的范围。 这就是为什么对于初学者 Web 开发人员来说，了解如何最大限度地利用 Dreamweaver 非常重要。

区分专家 Web 开发人员和普通 Web 开发人员的所有方面都隐藏在令人遗憾的直观菜单层下，这就是为什么新 Web 开发人员难以提高他们的技能的原因。 但是，在本文中，我将向您展示 Dreamweaver 的那些隐藏而强大的功能，这些功能对于满足当今市场的需求非常重要。 本文将帮助您快速访问这些功能，并将为您提供十大有用的技巧，这将提高您的工作质量并显着改进您的编码。

1.动态视图和实时视图：

每个人都知道 Dreamweaver 提供静态视图或我们打开的文件。 但是，关于 WordPress 等应用程序的动态视图的问题仍未得到解答。 为了设置动态视图，我们需要告诉 Dreamweaver 用于动态视图的设置。 要进行设置，请通过单击视图 > 实时视图 > 选项菜单进入 HTTP 请求设置，然后输入正确查看应用程序所需的 GET 或 POST。

之后，将 Dreamweaver 中的实时视图切换到页面的实时、像素完美呈现的 WebKit 中，这将替换设计视图面板。 然后使用实时 Javascript、DOM 操作、数据库查询、服务器端代码和呈现的 CSS 来完成它，而不是设计视图界面中的占位符图标。

2. 用于加强导航的引导程序：

导航是响应式网站中的单页组件，它应该具有自适应能力来满足小屏幕的需求，Bootstrap 可以提供很大帮助。 Bootstrap 允许您轻松设置导航栏并从水平条切换到垂直面板。 背后的原因是 Dreamweaver 支持 Bootstrap 的所有导航灵活性，并且在开发有效的响应式网站时，它是一个易于使用的功能。

为了让您快速了解它，以下是如何在开发中使用 Bootstrap 的快速演示。

使用 Bootstrap 加强导航从 Dreamweaver 的新文档对话框开始。 只需单击新文档对话框中的 Bootstrap Framework 按钮，并选中预构建布局选项复选框即可使用功能齐全的导航选项，例如；

• 标准、无序且语义正确的链接列表。
• 用于放置品牌形象的标志区域。
• 准备激活提交按钮和搜索字段。
• 预设子导航项的下拉菜单并使用分隔线完成。
• 需要时可以对齐的左右部分。
• 内置响应能力。

如果你觉得很难，还有另一种选择。 Dreamweaver 允许您制作自定义的导航栏。 如果您喜欢深色调色板，只需将 .navbar-inverse 类添加到您的 <nav> 标记。 你甚至可以玩它。 如果您想始终在页面上方显示导航，请键入 .navbar-fixe-top。 如果要在下面显示，请键入 .navbar-fixed-bottom。 所有这些 Bootstrap 类都是标准的，Dreamweaver 代码提示也支持这些编码，因此您不必记住整个编码。 您只需在元素显示中键入 .navbar，您将获得弹出列表，您可以在其中选择所需的选项。

3. 冻结 JavaScript：

Ajax 具有非常动态的特性。 这就是为什么很多时候我们需要在首页加载时与不可用或未呈现项目的页面进行交互。 这些项目可能会在加载一段时间后注入页面，这就是它在第一次加载时不显示的原因。 例如，当您可能想要更改完全在 JavaScript 上实现的工具提示的样式时，您曾经有条不紊地在脚本中搜索以查找在何处创建了哪个项目。 不要搜索脚本，请尝试以下操作。

将您的 Dreamweaver 放入实时视图并呈现您的页面。 然后随时按 F6 冻结 JavaScript，这将允许您剖析和定位页面中任何动态项目的任何代码。 这不仅可以帮助您定位动态项目的确切代码，还可以通过减少在动态网站中搜索任何代码的时间来加快您的开发速度。

4、代码高亮：

如果您不习惯每天晚上都看到复杂的编码，那么编码脚本可能会非常混乱。 这是代码的突出显示帮助您在整个脚本中创建分离的地方。 Dreamweaver 具有突出显示有助于阅读的编码的功能，而不是用最前沿的方式移动您的眼睛。 为此，请打开 Dreamweaver 首选项并打开技术预览部分。 然后单击启用代码突出显示选项并让 Dreamweaver 完成它的工作。 但是，您可能需要更新 Dreamweaver 版本，因为此功能仅在最新版本中可用。

启用突出显示选项后，只需双击任何标签，它就会突出显示当前页面上该标签的所有实例。 但是，应该定义参数。 该工具非常适合快速识别和查找相似元素。 突出显示任何元素后，在 PC 上使用键盘快捷键 f3，在 Mac 上使用 CMD-G）从一个突出显示的元素跳转到下一个元素。 此外，shift 修饰符可以返回到上一节。 此外，代码突出显示还适用于 HTML 标记属性和值，因此您可以轻松发现特定类。

5. 自动 JavaScript 补全：

Dreamweaver 是一个出色的平台，其中包含智能且完整的 HTML 和 CSS 代码。 不过，有些人认为 JavaScript 并不完整。 对于 jQuery 或 Prototype，在 Dreamweaver 中，您应该知道有提供 Javascript 完成代码的 API 扩展。 这些代码加快了开发过程，因为通过使用这些代码，无需键入整个脚本，并且对于快速编码人员来说非常方便。

Dreamweaver 是唯一一款允许您使用此类 jQuery 和 Prototype 完成代码的 Web 开发软件，可帮助每个 Web 开发人员加快他们的任务并以最少的努力生产出最好的产品。

6. 轻松访问相关文件：

CSS 和 JavaScript 是您打开 HTML 和 PHP 文件时看到的独立文件的名称。 打开 PHP 文件时，您可以在窗口顶部看到它。 因为这些所有选项都放在前面，您可以轻松切换到这些文件并进行更改，甚至无需打开它们即可保存。 单击相关文件栏中的任何文件，它将在代码视图中显示其源代码，在设计视图中显示父页面。

此外，您还可以使用任何代码导航器工具来快速访问将影响您当前解决方案的 CSS 源代码。 这种对 CSS 源代码的快速访问减少了编码时间，并允许 Web 开发人员专注于他们开发过程的不同方面。

7. 即时美化代码：

杂乱无章的代码行表明这种编码的开发人员不够专业和熟练，无法按顺序编写代码。 这在网站的搜索引擎优化中也很重要。 然而，组织和美化你的代码并不像人们想象的那么困难。 通过正确了解 Dreamweaver 选项，您可以即时组织代码。 只需使用“应用源格式”选项并完全根据您的喜好进行修改。 为了使您的编码干净整洁，请单击编码工具栏底部的“格式源代码”，然后转到“编辑>工具栏>编码”，然后选择“代码格式设置”进行设置。

另一种组织脚本的方法是从“命令”>“应用源格式”访问格式选项，或者通过选择“将源格式应用于选择”选项仅将其应用于编码块。

8. 无绒编码：

无论 Adob​​e 为 Dreamweaver 配备了多少强大的工具和功能，您在网站上工作的越多，您在编码方面的工作就越多。 这件事可以提高你的技能，但它也会打开无穷无尽的错误之门，因为编写过多的代码并不是一件容易的事。 Dreamweaver 知道这一点，这就是为什么在最新版本的 Dreamweaver（即 Creative Cloud (CC)）中有一项称为 Linting 支持的功能。 Linting 是一种基本的编程语法检查工具，可用于 CSS、HTML 和 JavaScript。 通过这种方式，每当 Dreamweaver 发现任何问题或错误时，它都会发出一些一般性和特定性的信号。

要运行测试，请在 Dreamweaver 中打开一个充满代码的页面，您将在状态栏右侧看到一个圆圈中的绿色小复选标记。 如果只有一个小的绿色复选标记被圈起来，那么您的代码一切正常。 如果有一个红叉标记，那么您的编码存在一些问题，您需要对其进行修改以正常运行您的网站。 此外，通过单击错误标记，它可以将您带到错误描述的错误所在的列和行。 最好的一点是这个功能没有限制，你可以使用它直到你没有得到绿色标记。

9.检查浏览器兼容性：

浏览能力是每个 Web 开发过程中最基本的东西之一。 这就是 Dreamweaver 让您更轻松的原因，因此您在开始 Web 开发之前永远不会错过这些基本内容。 在 Dreamweaver 中打开要检查其兼容性的文档。 在放置代码、拆分和设计视图选项图标的菜单栏中，还有另一个选项，称为“检查页面”按钮。

单击时，它将打开一个下拉菜单，在其中选择检查浏览器兼容性，然后在单独的窗口中查看兼容性结果。

10. 代码最小化：

在为大型网站编码时，经常会出现一大段代码开始在屏幕上激怒您。 很少有人知道他们可以通过按键盘上的一个按钮来最小化这段代码。 当您确定不需要对代码块进行任何更改时，只需选择该块并单击代码行号旁边的“-”。 该块将最小​​化并且在您扩展它之前不会打扰您。