跳到主要内容

在 Dreamweaver CS5 中使用 Adobe BrowserLab

  • Dreamweaver CS5 & CS5.5

BrowserLab 是 Adobe 提供的一个附加的在线服务，现已集成到 Dreamweaver CS5 中，允许用户在多个平台的多个浏览器中预览任何页面。BrowserLab 确保跨浏览器网站兼容性，并使用户能够单独或以浏览器集合的形式预览和比较页面设计截图。
如果在 Dreamweaver 实时视图中打开 Adobe BrowserLab，BrowserLab 将使用 WebKit 渲染引擎生成截图。它渲染的是 Dreamweaver 中的页面，而非像 Chrome 或 Safari 这样的实际浏览器。

打开 BrowserLab​

打开 Adobe BrowserLab 的步骤如下：

  1. 点击 窗口 菜单。
  2. 选择 扩展 选项。
  3. 点击 Adobe BrowserLab。
  4. 在 BrowserLab 面板点击 预览，将打开浏览器并跳转到 BrowserLab 网站。

或者，您也可以选择以下方式：

  1. 进入文档工具栏。
  2. 点击 地球仪 图标。
  3. 选择 在 Adobe BrowserLab 中预览，页面将跳转到 BrowserLab 网站。

首次访问 BrowserLab 时，系统会提示您使用 Adobe ID 和密码登录。登录后，Dreamweaver 会将打开的页面上传到 BrowserLab 的临时服务器，然后在指定的浏览器中生成截图。
注意：使用 BrowserLab 需要 Adobe ID。如果您还没有 Adobe ID，可以在登录页面或 Adobe 网站上注册。

自定义浏览器​

BrowserLab 窗口左上角会显示当前查看的浏览器名称。您可以点击浏览器名称旁边的下拉三角形预览其他浏览器。
选择不同浏览器集合的方法：

  1. 进入 浏览器集合。
  2. 选择 添加新浏览器。
  3. 为新浏览器集合命名。
  4. 勾选您想用于测试的浏览器。

浏览器集合中可添加的浏览器数量和种类没有限制。

在新浏览器集合中预览​

在 BrowserLab 中使用新浏览器集合预览页面的步骤：

  1. 点击 Test。
  2. 点击 BrowserLab 内的小 刷新 按钮。

Dreamweaver 会重新发送站点信息到 BrowserLab，然后进行新的截图。

延迟截图​

在 BrowserLab 窗口右上角有一个延迟选项，允许用户延长 BrowserLab 截图前的等待时间，确保 AJAX 小部件或复杂 CSS 有足够时间加载。

其他功能​

Adobe BrowserLab 的其他重要功能包括：

  • 标尺指南 (Ruler Guide) — 允许用户查看网页元素在指定浏览器中的对齐和尺寸。用户可通过 视图 > 显示标尺 激活此功能。
  • 双屏预览 (2Up) — 允许用户同时预览网站在多个浏览器中的显示。此视图支持使用标尺指南和洋葱皮等工具。
  • 洋葱皮 (Onion Skin) — 允许用户将 2Up 中指定浏览器的预览叠加显示，突出两者之间的细微差异，便于微调对象位置和文本。

Dreamweaver 是 Adobe 推出的流行网站和应用程序创建软件。它支持 HTML5、CSS3、PHP、FTP、jQuery 等技术，并兼容 HostGator 网站托管。

您可以访问 Adobe 网站或 Dreamweaver 教程学习门户，了解更多关于 Dreamweaver 的信息。