Adobe Creative Cloud

Use Resizable Live View to Lay Out a Responsive Website

Learn how to use Dreamweaver’s Resizable Live View to arrange and edit content

Dreamweaver’s Live View does double duty as both a live preview of an open page and a live edit mode. It is no longer necessary to switch between Design and Live Views to edit and preview page elements. This tutorial will explore a few of the Live View tools: the Visual Media Queries bar, the Live View Scrubber, the DOM panel, and Device preview.

What do I need?

Download the following files: botswana.zip

 

STEP 1 OF 7

Show and hide New Feature Guides

Download the botswana folder, then extract the files.

Create a new website in Dreamweaver called Botswana with your new botswana folder set as the local site folder.

Open the file index.html from your botswana folder. This file is a page created with a Dreamweaver starter template. One new image was added to the header. The rest of the content is the original placeholder text.

Dreamweaver 15 introduces many exciting new tools available with the revamped Live View, including the Visual Media Queries Bar, the Live View Scrubber, and Device Preview. When you first open Dreamweaver after a new install, then open or create a new page, several Live View displays called New Feature Guides appear. Select one of the displays to read more information about that feature.

Select the Close button (X) in the top right corner of the display to close the window after you read the information. After you close a New Feature Display, it will not appear again unless you select Help > Reset New Feature Guides on the Menu bar, close Dreamweaver, then re-launch it.

botswana 1

STEP 2 OF 7

Preview a page with the Visual Media Queries (VMQ) bar

The Visual Media Queries bar is a tool for checking your page design against multiple media sizes. The Visual Media Queries bar is under the Document toolbar. It visually represents the media sizes defined in the styles used to format the page. Colored bars placed in three horizontal rows show the maximum and/or minimum widths of each media query. A green bar represents a media query with a max-width condition. A blue bar represents a media query with both max-width and min-width conditions. A purple bar represents a media query with a min-width condition. Each size uses breakpoints, referring to the position a page content will “break” or be forced to realign content to a different page width. You can chose to hide or show the Visual Media Queries bar by selecting the Hide/Show button on the right side of the Document toolbar.

botswana 2

Select one of the media queries on the Visual Media Queries bar and note how the page resizes to fit the width of the selected size.

botswana 3

botswana 4

 

STEP 3 OF 7

Use the Live View Scrubber to view a page in Live View using several page widths

The Live View Scrubber is a tool used to view an open page in graduated widths. As you slowly drag the Scrubber from the right edge of the page to the center of the page, you see the page width decrease. An indicator on the Visual Media Queries bar shows you the relationship between the position of the Scrubber and the pixel width of the page. As you slide across a breakpoint, the page elements reposition themselves responsive to that page width. You can also simply select a Media Query on the Visual Media Queries bar to quickly change the page width with the selected Media Query.

botswana 5

botswana 6

 

STEP 4 OF 7

Modify the default breakpoint settings in the Visual Media Queries Bar

The default minimum and maximum widths for the media queries on the Visual Media Queries bar can be easily adjusted to fit a particular page design. To adjust a media query, use the handles on the right or left side of a media query. If a media query only has a maximum width setting, you will only see one handle on the right side of the media query. If a media query only has a minimum width setting, you will only see one handle on the left side of a media query. A media query with both a minimum and maximum width setting will have a handle on each side.

botswana 7

To change a breakpoint for a media query, slide the corresponding handle toward the center of the media query, then release the handle when you reach the desired setting.

botswana 8

After a brief pause, you will see a message that all media queries with the same breakpoint were updated. The open page in Live View will adjust to the new setting.

botswana 9

 

STEP 5 OF 7

Hide an HTML element

It is common during the design process to experiment with your page layout by adding, modifying, or deleting HTML page elements. One non-destructive way to see how a page will look without an HTML element is to temporarily hide the element, then view the page without it.

Scroll to the top of the index page if necessary, then select the banner image. Right-click the image, then select Hide element in the shortcut menu.

botswana 10

The banner image will then be removed from the index page in Live View. To show the banner image again, right-click the page, then select Mange Hidden Elements from the shortcut menu.

botswana 11

When you select Manage Hidden elements, the hidden HTML element will be displayed again, but with a checked overlay, indicating that it is hidden. When an HTML element is hidden, it will not appear when previewed in Mozilla Firefox or Internet Explorer, but will still appear in Google Chrome and Safari.

botswana 12

Right-click the hidden element, then select Unhide Element to display the HTML element again on the page. You can also unhide the hidden element by selecting the Unhide Element icon under the bottom-right corner of the element.

botswana 13

 

botswana 14

 

STEP 6 OF 7

Use the DOM panel to position page elements

bodyThe DOM panel contains a tree-structure representation of an open page’s DOM (Document Object Model) structure. Each HTML tag is represented by a symbol labeled with the tag name, such as body.

Nested tags are represented with stacked symbols.head

You can rearrange page content directly from the DOM panel by dragging a tag symbol into a different position in the tree structure. You can also copy, paste, paste as child, duplicate, and delete page elements in the DOM panel.

Select the DOM panel to expand or float it.

Select a stacked symbol to expand it and note the nested tags inside it.

Select an HTML element on the page, then note that the corresponding element tag is selected in the DOM panel.

botswana 15

Select the header tag, then expand all of its nested tags so your screen looks like the panel below:

botswana 16

Drag the img element down until it is under the stacked p element, then drop it when you see the green line.

botswana 17

Dragging the banner image tag in the DOM panel rearranged it on the page to change places with the div tag that was previously under the banner image. Now the banner is under the text in the div tag.

botswana 18

STEP 7 OF 7

Preview a page on a mobile device with Device Preview

Device Preview is a new feature with Dreamweaver 15. Device Preview is an easy way to preview a page on the actual device you are testing, rather than using a simulated size within Dreamweaver or manipulating the page size in a browser window. This is an extremely cool feature! All devices you are testing must be on the same network that Dreamweaver is using for the feature to work correctly.

Select Device Preview on the right side of the Status bar, then after the QR code displays for the index page, scan the QR code with your mobile device with an app such as Microsoft Tag. The index page will scan into your mobile device so you can see how it looks live on a mobile device.

botswana 19

The page below was previewed on an iPhone6 Plus. Give the display a few seconds to completely download, then scroll down to see how the rest of the page elements fit in the display size.

botswana 20.jpg

 

Wrap up

This tutorial introduced some of the new Live View options New Feature Guides. We began by learning about how to view their information, turn them off, and turn them on again. Next, we explored the power of the new Visual Media Queries (VMQ) bar. We learned how to view a page using different media queries, modify a media query’s breakpoint settings, and use the Live View Scrubber to view a page as it crosses breakpoints in media queries.

Next, we learned how to hide and unhide an HTML element on a page, used the DOM panel to rearrange page elements, then we previewed the modified page with Device Preview.

As you work, it is important to view the work in progress using tools as the Window size menu, the Visual Queries bar, and the Device Preview.

Dreamweaver Interface