Preview HTML Documents on a Cellphone, Tablet, or Laptop in Dreamweaver - dummies

Preview HTML Documents on a Cellphone, Tablet, or Laptop in Dreamweaver

By David Karlins, Doug Sahlin

One of the celebrated new features in Dreamweaver (first introduced in CS5.5) is the Multiscreen Preview, which works in tandem with the interactive Media Query tools in Dreamweaver. Those Media Query tools create different style sheets that apply depending on the media in which a visitor uses to view the site.

Designing pages that work well in media, ranging from large projections to tiny screens, is one of the big challenges in the world of modern web design. Multiscreen Previews allow you to see how an open HTML document looks in different media, such as on a cellphone, a tablet, a desktop, or laptop.

With an HTML document open, you can view an open page in Multiscreen Preview by following these steps:

1Click the Multiscreen Preview button in the document toolbar, or choose Window→Multiscreen Preview from the document window.

If the document toolbar isn’t active, choose View→Toolbars→Document.

The Multiscreen Preview window opens, with three views.

2To adjust the viewport sizes, click the Viewport Sizes button in the Multiscreen Preview window.

The Viewport Sizes dialog box opens. You can edit the values (in pixels) for the width and height at which each of the three preview windows displays. The figure shows the Phone view being adjusted to 480 pixels to match the size of popular smartphones.

3Click OK in the Viewport Sizes dialog box.

You return to the Multiscreen Preview.

4Exit Multiscreen Preview by deselecting that option in the Dreamweaver document Window menu.

Don’t try to edit content in Multiscreen Preview. This mode, like Dreamweaver’s Live view, does not allow editing.