Multiscreen Preview - Dreamweaver CS5

Dreamweaver's multiscreen preview feature allows users to preview web pages for mobile phone, tablet and desktop resolutions directly in Dreamweaver.

To activate multiscreen preview, Click the Multiscreen button (listed in the same menu bar as the various Views). The Multiscreen Preview pop-up will appear.

Feature Functions

Media Queries

The Media Queries button allows users to manage, create and control media queries directly from the multiscreen media panel.

Viewport Sizes

The Viewport Sizes button allows users to edit the size of the viewing ports for each previewer in the multiscreen media panel.

Browser Navigation

Browser navigation buttons at the top of the previewer act the same as a general browser bar with the exception of the home button. The home button will not always resolve back to the index.html page; it can also resolve back to the page that is actively open and in use.

How it Works

While using the multiscreen preview, the pages viewed utilize the Webkit capabilities of CS5, rendering the entire site and its numerous pages completely accessible through the previewer. This allows links and widgets to function without having to test through another means of multimedia, such as with a phone or tablet.

Note: Clicking the window size in the bottom panel outside of the multiscreen preview will allow you to view your site in the various multimedia platform-sized screens.

Dreamweaver is a popular Adobe program for creating websites and applications.  It supports HTML5, CSS3, PHP, FTP, jQuery and more; and it works with HostGator web hosting.

You can learn more about Dreamweaver by visiting Adobe's website or the video learning portal, Adobe TV.  The video in this article is courtesy of Adobe TV.