适用于java初学者的软件_适用于初学者的10个有用的Dreamweaver技巧和窍门

Dreamweaver用户肯定会认为它是一个强大的工具。 包含了众多功能，选项，并且无疑是当今市场上最著名的IDE（集成开发环境）之一。 它可能无法满足某些开发人员的要求，但是Dreamweaver不可否认地提供了不错的开发，协作和编码工具。 这些选项和工具隐藏在令人遗憾的不太直观的菜单下，这就是我们在今天的帖子中提供教程的原因。

我们将向您展示Dreamweaver的一些最强大的功能，以帮助您快速访问它们，以及许多其他有用的技巧，这些技巧可以帮助您节省开发时间并显着提高代码质量。 跳转后的完整列表。

1.具有“实时显示”的动态视图

我们已经知道DW提供了打开文件的静态视图，但是WordPress等应用程序的“动态视图”呢？

首先，我们需要告诉 DW使用哪些设置才能正确显示“动态视图” 。 为此， 请从“ 视图”>“实时视图选项”菜单中选择“ HTTP请求设置” ，然后输入正确查看应用程序所需的GET或POST参数。

然后，通过切换到DW中的实时视图 ，它将页面的实时，完美像素的WebKit渲染替换为旧的“ 设计视图”窗格； 包含实时Javascript，DOM操作，数据库查询，服务器端代码和呈现CSS，而不是您在Design View中看到的占位符图标。

2.“代码导航器”是DW的Firebug

更进一步，它涉及到代码浏览器，并且在“ 实时显示”窗口中，在窗口的任意位置单击ALT（在Mac中为Command-Option，同时单击），都将立即呈现呈现该项目的代码。 与您目前在Firefox / Firebug中看到的类似。

3.冻结JavaScript

由于Ajax的动态特性，很多时候我们需要与页面交互，而某些页面在首次加载时就无法呈现或可用。 这些是在页面加载后一段时间注入页面的项目。 这是一个例子：

您可能想要更改完全在JavaScript中实现的工具提示的样式。 在今天之前，您必须有条不紊地在脚本中进行搜索，以查找所创建的内容和位置。

相反，请尝试以下操作：

在Live View中渲染页面，然后随时按F6键冻结JavaScript，从而可以定位和分解与页面中任何动态项目有关的代码。

4. Live View的下一个好朋友–“ Live Code”

使用Live View时 ，还可以打开Live Code 。 当您悬停，单击实时视图窗口中的元素和项目并与之交互时， 实时代码将更新您的代码！

5.自动完成JavaScript

Dreamweaver具有智能且完整HTML和CSS代码完成功能， 但是Javascripts呢？ 如果您在Dreamweaver中编写jQuery或Prototype的代码，那么您应该知道有些API扩展提供了Java代码的完成。 它减少了所需的输入，对于快速编码人员来说非常方便。

• 用于Dreamweaver的jQuery API扩展
• Dreamweaver的原型API扩展

6.美化代码飞

您的代码页看起来像是乱七八糟的代码行吗？ 使用“ 应用源格式”功能并将其重新格式化为您的首选项。 要快速清除它们，请单击“ 编码”工具栏底部的“ 格式源代码”图标（“编辑”>“工具栏”>“编码”），然后选择“代码格式设置”以设置您的首选格式。

您也可以从“ 命令”>“应用源格式”中访问格式选项，或者通过选择“ 将源格式应用于”选项将其仅应用于选定的代码块。

7.获取微件

只需在应用程序栏中单击“ 扩展Dreamweaver”图标 （看起来像一个齿轮），然后选择“ 浏览Web窗口小部件” 。 这将带您到Adobe Exchange，您可以在其中找到Yahoo！，JQuery等供应商提供的其他小部件。

8. Subversion和Dreamweaver

是的，Dreamweaver确实支持Subversion（SVN）。 对于使用SVN维护其项目的版本控制的开发人员来说，这可能是个好消息。 Dreamweaver开发人员Andrew Voltmer讨论了如何在Dreamweaver中使用Subversion 。

9.不再有多余的样式

许多人都使用Dreamweaver作为一种可视化更新内容的方式，例如文字处理程序。 在Dreamweaver CS4之前，这可能会导致多余CSS规则，例如.class1 ， .class2等。 在Dreamweaver CS4中，只需将属性检查器切换到HTML模式（单击检查器左侧HTML图标），您将告别所有多余CSS，仅插入适当HTML标记。

10.表单验证变得容易

是否想验证表单字段，但担心您必须从头开始重建？ 别担心。 只需选择一个现有表单元素（例如文本字段），然后从“ 插入”>“ Spry”菜单中应用“ Spry Validation”小部件 。 然后直接从属性检查器控制验证要求，例如最小或最大字符。

奖励：另外3个

11.轻松访问相关文件

当您打开HTML或PHP文件时，现在会在文档窗口顶部看到一行相关的文件名，例如CSS，Javascript以及PHP附带的文件。 您可以轻松切换到这些文件，进行更改并保存它们，而无需打开它们。 当您单击“相关文件”栏中的任何文件时，您将在“代码”视图中看到其源，在“设计”视图中看到其父页面。 或使用Code Navigator快速访问影响您当前选择CSS源代码。

12.检查浏览器的兼容性

打开要检查兼容性的文档； 从访问“代码” /“拆分” /“设计”视图的同一菜单栏中，在最右边查找“ 检查页面 ”按钮。

点击它会展开一个下拉菜单，选择' Check Browser Compatibility '。 浏览器兼容性结果窗口将显示在窗口底部，其中包含您需要解决的所有问题。

注意：这不会检查Mac上IE的新版本！ 要选择用于测试的浏览器， 请从菜单中选择“ 检查页面” > “设置” 。

13.预览PHP页面

Dreamweaver允许您在软件中运行和预览PHP代码。 这是设置方法。

1. 首先，从顶部导航中选择站点 -> 新站点 。
2. 您将同时看到“ 基本”和“ 高级站点定义”选项卡。 让我们选择“ 高级站点定义”选项卡 。
3. 在相应的框中输入网站的文件夹名称（在本示例中，我们将使用“ myphp”作为文件夹名称）。
4. 通过在“默认图像文件夹”字段中输入其名称，创建另一个名为“图像”的文件夹。
5. 在“ 本地信息 ”下，在字段中输入以下值：
   • 网站名称 ： 网站名称 。 仅在Dreamweaver中使用
   • 本地根文件夹 ：这是您将要使用的站点的名称。请确保以最小的方式为站点命名，以免发生冲突或混淆名称。
   • Default Images文件夹 ：这是可选的，但由于大多数站点都会在一定程度上使用图像，因此建议立即创建它。 在编码阶段，DW将在这里“看上去”在文档中插入图像。
   • 相对于的链接 ：定义如何处理Dreamweaver中的文档链接。 您可以选择文档或根目录。 两者之间的区别是：
     • 相对文档–将插入相对于您正在处理的文件以及要链接到的项目的相对路径。
     • 相对根目录–使用/可使文档/文件相对于ROOT文件夹进行链接。
     • 另一种选择是向服务器配置文件中添加一些配置。 作为一项更高级的任务，我们现在仅坚持使用相对文档。
   • HTTP地址 ：输入项目的站点根文件夹
   • 区分大小写的链接 ：Dreamweaver将在上载到服务器时检查项目中的任何文件是否存在区分大小写的问题。 使用时将显示通知：网站->检查整个站点的链接。 您可以根据需要选中它。 我个人不会将其选中，因为我总是以小写字母命名文件。 不建议使用大写字母。
   • 缓存 ：选中启用缓存。
6. 在“ 远程信息”页面中，设置您的FTP或对远程服务器的其他访问权限，或者将“访问权限”保留为“无”。
7. 在“ 测试服务器”页面中，选择与要测试的文件类型/系统相关的选项。
8. 版本控制将不会用于此示例，因此除非熟悉它，否则可以将其留空。
9. 伪装允许您将.psd，.fla和其他源文件放置在您的站点文件夹中，并且DW在上载/更新站点时会忽略它们。
10. 设计说明非常适合Web设计团队，因为它保留有关文件更改的说明。 默认情况下已选中该复选框，对于我们来说可以使用这种方式。
11. 将File View Column ， Contribute和Templates保留为默认值。
12. Spry页面仅指向Dreamweaver自动包含的Spry资产文件夹。 无需更改此设置。 每种设置完成后，点击OK 。

现在打开一个PHP文件，并对其进行必要的更改。 要在Dreamweaver中查看此文件，只需按F12键 ，结果将显示在默认浏览器中。 您可以在“ 编辑” -> “首选项” ->“ 在浏览器中预览”中更改使用哪个浏览器。 这样可以缩短预览编辑时间，而无需在浏览器栏中键入长URL或使用其他服务器软件来渲染PHP文件，所有这些都可以节省时间！

就这样。 快乐的Dreamweaver'ing :-)

编者注：这篇文章是由Jesse Matlock为Hongkiat.com撰写的。 在过去的6年中，Jesse一直致力于UI设计，应用程序开发和网络趋势。 他是一个小型但非常有才华的开发团队的创始人和设计负责人，该团队专注于定制应用程序开发。

翻译自: https://www.hongkiat.com/blog/10-useful-dreamweaver-tips-for-beginners/