预览页面

通过实时预览，可在浏览器中预览您的页面，并随着您编码在浏览器中实时查看更改。

可通过“实时”视图了解页面在 Web 上的显示效果，还可在“代码”视图中编辑各项。

也可通过“设计”视图了解页面在 Web 上的显示效果，但该视图呈现页面的方式并非与浏览器完全相同。

通过“在浏览器中打开”功能，可了解页面在浏览器中的显示效果。 此功能最适合从数据库使用动态数据的页面，因为这并非实时。

请继续阅读以详细了解 Dreamweaver 中不同类型的预览选项。

在浏览器中实时预览

在 Dreamweaver 中编写或设计网页时即可实时预览这些网页。 通过此功能，可在多个浏览器上同时编写和预览网页。 

设置浏览器预览首选项

可在实时预览与在浏览器中预览之间切换。 请设置在预览网站时浏览器要使用的首选项，并定义默认的主浏览器和辅助浏览器。

随后，无论是用实时预览功能实时预览您的网站，还是在浏览器中打开页面，都将使用这些浏览器首选项。

默认为静态浏览器中预览：通过此项，用户可选择在浏览器中预览其文件的模式。 选中该复选框后，用户可使用菜单中的“在浏览器中打开”和使用快捷键预览文件。 未选中此项时，将使用“实时预览”在浏览器中预览文件。 默认不选中该复选框，并将使用“实时预览”在浏览器中预览文件。

在“实时”视图中预览页面

“实时”视图与传统 Dreamweaver“设计”视图的区别在于前者更真实地呈现页面在浏览器中的显示效果，而该效果也是可以编辑的。 

在“设计”视图中随时可以切换到“实时”视图。 但切换到“实时”视图与在 Dreamweaver 中的任何其他传统视图（代码/拆分/设计）之间进行切换无关。 在从“设计”视图切换到“实时”视图时，只是在可编辑和“实时”之间切换“设计”视图。

进入“实时”视图后“设计”视图保持冻结的同时，“代码”视图保持可编辑状态，因此您可以更改代码，然后刷新“实时”视图以查看所进行的更改是否生效。 在处于“实时”视图时，可以使用其他用于查看实时代码的选项。 “实时代码”视图类似于“实时”视图，前者显示浏览器为呈现页面而执行的代码版本。 与“实时”视图类似，“实时代码”视图是非可编辑视图。

“实时”视图的另一优势是能够冻结 JavaScript。 例如，您可以切换到“实时”视图并悬停在由于用户交互而更改颜色的基于 jQuery 的表格行上。 冻结 JavaScript 时，“实时”视图会将页面冻结在其当前状态。 然后，您可以编辑 CSS 或 JavaScript 并刷新页面以查看更改是否生效。 如果要查看并更改无法在传统“设计”视图中看到的弹出菜单或其他交互元素的不同状态，则在“实时”视图中冻结 JavaScript 很有用。

要在“实时”视图中预览页面，请执行以下操作：

预览实时代码

“实时代码”视图中显示的代码类似于从浏览器中查看页面源代码时看到的代码。 虽然此类页面的源代码是静态的，仅提供该页面在浏览器中的源代码，但“实时代码”视图是动态的，随着您在“实时”视图中与页面交互而更新。

要更改实时代码偏好设置，请选择“编辑”>“偏好设置”(Windows) 或“Dreamweaver”>“偏好设置”(Macintosh OS)，然后选择“代码颜色”类别。

冻结 JavaScript

执行下列操作之一：

• 按 F6

• 从““实时”视图”按钮的弹出菜单中选择“冻结 JavaScript”。

文档顶部的信息栏会告诉您 JavaScript 已冻结。 若要关闭信息栏，请单击关闭链接。

“实时”视图选项

除了“冻结 JavaScript”选项外，“实时”视图按钮的弹出菜单或“视图”>“实时视图选项”菜单项中还有其他一些可用选项。

冻结 JavaScript 将受 JavaScript 影响的元素冻结在其当前状态。

禁用 JavaScript 禁用 JavaScript 并重新呈现页面，就像浏览器未启用 JavaScript 一样。

禁用插件 禁用插件并重新呈现页面，就像浏览器未启用插件一样。

高亮显示实时代码中的更改 关闭或开启高亮显示实时代码中的更改。

在新选项卡中编辑“实时”视图页面 让您可以使用“浏览器导航”工具栏或“跟踪链接”功能为您浏览到的站点文档打开新选项卡。 首先必须浏览到该文档，然后选择“在新选项卡中编辑“实时”视图页面”为其创建新的选项卡。

跟踪链接 使您单击的下一个链接在“实时”视图中变为活动状态。 或者，可以按住 Ctrl 单击“实时”视图中的链接以使其变为活动状态。

持续跟踪链接 使链接在“实时”视图中持续处于活动状态，直到再次将其禁用或关闭页面为止。

自动同步远程文件 单击“浏览器导航”工具栏中的“刷新”图标时自动同步本地和远程文件。 Dreamweaver 将这些文件放置在服务器上，然后刷新，以使这两个文件保持同步。

将测试服务器用于文档源 主要由动态页面（例如 ColdFusion 页面）使用，并在默认情况下为动态页面进行选择。 选择此选项后，Dreamweaver 将使用站点的测试服务器上的文件版本作为“实时”视图显示的源。

将本地文件用于文档链接 非动态站点的默认设置。 为使用测试服务器的动态站点选择此选项后，Dreamweaver 将使用链接到文档的本地文件版本（例如 CSS 和 JavaScript 文件），而不使用测试服务器上的文件。 然后，您可以对相关文件进行本地更改，以便可以在将这些文件放到测试服务器之前查看它们的外观。 如果取消选择此选项，Dreamweaver 将使用相关文件的测试服务器版本。

HTTP 请求设置 进入高级设置对话框，您可以在此处输入用于显示动态数据的值。 有关详细信息，请单击对话框中的“帮助”按钮。

在浏览器中打开

您可以随时在浏览器中打开页面；您无需首先将其上载至网页服务器。 当您预览页面时，所有浏览器相关的功能都会运行，包括 JavaScript 活动、文件‑相关和绝对链接、ActiveX® 控件、浏览器插件，只要您在浏览器中安装了所需的插件‑或 ActiveX 控件。

在浏览器中打开文件之前，保存文件；否则，浏览器不会展示您的最近变更。

更多相似内容

• 使用“实时预览”解决问题
• 在“实时”视图中编辑
• “浏览器导航”工具栏概述
• 打开相关文件
• 查看动态数据
• 站点根目录相对路径