Preview HTML Documents on a Cellphone, Tablet, or Laptop in Dreamweaver
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:
Click 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.
To 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.
Click OK in the Viewport Sizes dialog box.
You return to the Multiscreen Preview.
Exit 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.
Web Design & Development Glossary
