用户指南 取消(C)

预览页面

 

 

在 Dreamweaver 中、浏览器中预览您的网页。

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

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

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

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

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

在浏览器中实时预览

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

在浏览器中实时预览更改
在浏览器中实时预览更改

  1. 在 Dreamweaver 状态栏中单击“实时预览”。

    实时预览
    实时预览

    有多个选项可在浏览器中实时预览网页。

  2. 要在浏览器中预览网页,请单击任意可用的浏览器选项。

    可编辑在此列表中显示的浏览器。要将浏览器添加到此列表或从中删除浏览器,请参阅设置浏览器首选项

    如果有测试服务器,请务必在设置该测试服务器时启用“将文件自动推送到测试服务器”。 

    实时预览将文件推送到测试服务器中。启用“自动推送到测试服务器”确保您可实时看到更改。 

  3. 如果出现提示,请保存该网页及其相关文档。

    随后将打开一个浏览器,其中显示该网页。

  4. 继续编写页面,并在编写时查看浏览器中的变化。

设置浏览器预览首选项

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

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

  1. 选择“文件”>“实时预览”>“编辑浏览器列表”

    实时预览
    默认为静态浏览器中预览

    如果取消选中“默认为静态浏览器中预览”选项,则将禁用实时预览。可使用主浏览器和辅助浏览器的快捷键在浏览器中打开预览。或者,还可使用“文件”菜单或单击状态栏上的“设备预览”图标。

  2. 要将浏览器添加到列表,请单击加号 (+) 按钮,完成“添加浏览器”对话框,然后单击“确定”。
  3. 要从列表中删除浏览器,请选择该浏览器,然后单击减号 (-) 按钮。
  4. 要更改所选浏览器的设置,请单击“编辑”按钮,在“编辑浏览器”对话框中作出更改,然后单击“确定”。
  5. 选择“主浏览器”或“辅助浏览器”选项以指定所选浏览器是主浏览器还是辅助浏览器。

    按 F12 (Windows) 或 Option+F12 (Macintosh) 将打开主浏览器,按 Ctrl+F12 (Windows) 或 Command+F12 (Macintosh) 将打开辅助浏览器。

  6. 选择“使用临时文件预览”选项以创建一个临时副本,供预览和服务器调试。(如果要直接更新文档,可取消选择此选项。)

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

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

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

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

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

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

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

  1. 确保在“设计”视图(“视图”>“设计”)或“代码和设计”视图(“视图”>“代码和设计”)中。

  2. 单击“实时”视图按钮。

  3. (可选)在“代码”视图、“CSS 样式”面板、外部 CSS 样式表或另一相关文件中作出更改。

    虽然无法在“实时”视图中进行编辑,但随着在“实时”视图中单击,用于在其他区域中(例如在“CSS 样式”面板或在“代码”视图中)进行编辑的选项发生变化。

    在保持“实时”视图具有焦点的同时,通过从文档顶部的“相关文件”工具栏中打开相关文件(例如 CSS 样式表),您可以使用这些相关文件。

  4. 如果已在“代码”视图或相关文件中作出了更改,请通过单击“文档”工具栏中的“刷新”按钮或通过按 F5 而刷新“实时”视图。

  5. 要返回可编辑的“设计”视图,请再次单击“实时”视图按钮。

预览实时代码

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

  1. 确保您位于“实时”视图中。

  2. 单击“实时代码”按钮。

    Dreamweaver 显示浏览器用于执行该页面的实时代码。此代码以黄色突出显示并且是不可编辑的。

    当您与页面上的交互元素进行交互时,实时代码高亮显示代码中的动态更改。

  3. 要取消高亮显示实时“代码”视图中的更改,请选择“视图”>““实时”视图选项”>“高亮显示实时代码中的更改”。

  4. 若要返回到可编辑的“代码”视图,请再次单击“实时代码”按钮。

要更改实时代码偏好设置,请选择“编辑”>“偏好设置”(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 控件。

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

  1. 右键单击“文档”工具栏中的文件名,并单击“在浏览器中打开”。

    注意:

    如果未列出任何浏览器,请选择“编辑”>“偏好设置”或“Dreamweaver”>“偏好设置”(Macintosh),然后选择左侧的“在浏览器中预览”类别以选择一个浏览器。有关详细信息,请参阅设置浏览器预览偏好设置。

  2. 单击链接然后测试页面内容。
    注意:

    使用本地浏览器预览文档时,除非指定了测试服务器,或在“编辑”>“偏好设置”>“在浏览器中预览”中选择“使用临时文件预览”选项,否则文档中用站点根目录相对路径链接的内容将不会显示。这是因为浏览器不能识别站点根目录,而服务器能够识别。

    注意:

    若要预览用根目录相对路径链接的内容,请将文件上传到远程服务器,然后选择“文件”>“在浏览器中预览”进行查看。

  3. 完成测试后请在浏览器中关闭该页面。

更快、更轻松地获得帮助

新用户?