Operation Manual

462
USING DREAMWEAVER
Designing for multiple screens and devices
Last updated 3/28/2012
More Help topics
Packaging web applications tutorial
Preview pages using the Multiscreen Preview panel
Multiscreen preview in Dreamweaver provides a preview of the page that you are currently editing as it would appear
on devices supporting different screen resolutions.
To open the Multiscreen Preview panel,select File > Multiscreen preview.
Multiscreen preview supports the following screen types:
• Phone (default screen size: 320x300 pixels)
• Tablet (default screen size: 768x300 pixels)
• Desktop (default screen width: 1126 pixels)
Note: If you know the dimensions of any other devices that you want to target, you can specify different styles for different
devices. For example, you can create a screen dimension of 480x272 pixels for a Sony PSP device.
The phone, tablet, and desktop dimensions used for previewing are set to default sizes. However, you can change the
default sizes by clicking the Viewport Sizes button in the Multiscreen Preview panel.
Note: Do not use the Multiscreen Preview panel as a browser. It is not intended to display dynamic media such as movies
and audio clips.
Change the Viewport sizes
1 Select File > Multiscreen Preview to open the Multiscreen Preview panel.
2 In the Multiscreen panel, click Viewport Sizes.
3 Specify viewport sizes and click OK. For example, specify 480 as the width and 272 as the height to target a Sony
PSP device.
4 (Optional) Reset settings to their default values by clicking Reset to defaults.
Add media queries
See “Creating media queries (CS5.5 and later)” on page 454.
Navigate links
The Multiscreen Preview panel does not sync automatically with Design View or Live View. If you edit in one of these
views, click the Refresh button in the Multiscreen Preview panel.
Note: If you navigate away from the original file in Live View, the Multiscreen Preview panel does not display the file that
you navigated to. even if you click the Refresh button.