How to design, edit, and preview web pages with new Live View features

Live View has been upgraded so that you can create web content visually. Drag and drop HTML elements and assets directly into a live surface. Then drag items within the live surface to move your markup and assets around on the fly. Manage and rearrange the page structure by dragging elements in Element Quick View.

Live View is an interactive preview that accurately renders HTML5 projects and updates in real time to show your changes as you make them.

New Live Guides give you precision control as you insert elements. Efficiently edit web content with the new context menu in Live View. Add, delete, and create selectors using the enhanced Element Display features. Your selections are synched throughout the interface — streamlining the process of finding and updating CSS styles.

In this article, you’ll take a tour of the new Live View features as you edit an existing sample project.

The sample project includes a single page that displays a grid of div containers filled with image and text content, designed to promote a fictitious local music center named Play (see Figure 1).

Figure 1. Review the sample project displayed in the Chrome browser

Dragging HTML elements into Live View

Begin by uncompressing the ZIP file and saving it to your desktop. The sample files folder contains the HTML page and related site files.

Launch Dreamweaver CC 2014.

Click the Site Setup icon in the Welcome Screen to open the Site Setup dialog box. Enter the Site name: Live Design. Click the folder icon and browse to select the live_design folder on your desktop (see Figure 2).

Figure 2. Set the Local Root Folder path to the sample files folder

Click Save.

In the Files panel, double-click the dw_example.html file to open it.

Tip: You’ll be working with an existing sample project to follow along with the steps in this tutorial. However, you could also choose File > New and select one of the new Starter Templates to create a new HTML5 page from scratch.

As you can see in the Document toolbar, Live View is enabled and the Extract workspace is displayed.

Select Close Tab Group in the Extract Panel Options menu (see Figure 3).

Figure 3. Close the Extract panel

The Extract panel makes it easy to bring in web graphics from a PSD file created in Photoshop. The sample file assets for this project are already provided, so closing the Extract panel frees up more screen real estate. You can also drag the top edge of Code View down a bit, to see more of the page design. Check out How to work with Extract in Dreamweaver for a detailed tutorial on this feature.

Right away you’ll notice that Live View has changed. In older versions of Dreamweaver, you couldn’t accurately preview your designs while editing them. In the newest release of Dreamweaver CC 2014 you can preview rendered HTML5 pages as you update them, and Live View reflects your changes automatically. It’s like editing your pages in a browser.

Dragging HTML elements from the Insert panel

In the Structure section of the Insert panel, select the Div element and drag it to the page.

As you drag the new div around the layout, a green Live Guide indicates where the element will be inserted. Notice how you can drag the HTML element to any location in the layout.

Note: Top and bottom Live Guides display when inserting block elements. Left and right Live Guides display for inline elements.

Release the mouse button when the green Live Guide is below the center hero text (see Figure 4).

You can drag any HTML element from the Insert panel to add it to the page.

Adding new selectors, applying existing selectors, and editing styles

Quickly update pages by creating new selectors in the Element Display in Live View and then style page elements with CSS Designer. Enter the name of the new class or ID to add it to the HTML page and then choose the CSS source location to save the new rule. CSS Designer highlights selected styles, so you can add properties and update values without hunting for selector names.

While the new div is selected, click the plus (+) button in the Element Display and type the letter A. Press the down arrow twice and then press Enter/Return to apply the existing .action-title class and style the text (see Figure 5).

Figure 5. The menu displays existing classes that match the characters you type

While the .action-title class is selected, press the plus (+) sign again or press Tab to name the new div. Enter the div ID name: #contact and press Enter/Return.

Since the #contact ID is not yet defined in the CSS code, a window appears to let you choose the source location to add the new selector.

Choose the linked file: dw_example.css (see Figure 6).

Figure 6. Choose dw_example.css in the Select a Source menu

Notice that you could also choose to define the style in the current HTML page, select a media query, or create a new CSS file or media query in this window.

The new #contact selector is highlighted in CSS Designer. In the Layout section, set the left margin to 40px and watch the div move into position (see Figure 7).

Figure 7. Update the left margin property to 40px

Whenever you select an element that has multiple selectors in the Element Display, you can press Tab to switch between them. You can also press Ctrl (Cmd) + C to copy the selected page element.

Tip: Right-click on the selector in the Element Display and choose Go To Code to see the CSS style displayed in Code View (see Figure 8).

Figure 8. See the code changes you just applied using CSS Designer

Editing pages in Live View makes it easy to isolate specific selectors and update properties of a selected element, even when you’re working on projects created by someone else.

Adding text content in Live View

Editing text, formatting text blocks, and applying styles has never been easier. Live View renders the page as you make changes, so you don’t need to repeatedly preview pages in a browser to check how text content wraps and displays.

Double-click the content inside the #contact div to see an orange boundary appear.

The orange boundary indicates that the text is editable.

Tip: Double-click a word to select it or triple-click to select the entire paragraph. Press Enter/Return to create a new paragraph and press Shift-Enter/Return to add a <br> tag.

Triple-click the placeholder content to select all the words. Type: To learn more, contact play@adobe.com.

Select the email address and click the Link button in the Element Display. Type: mailto:play@adobe.com in the link field (see Figure 9).

Figure 9. Enter the link or click the folder icon to select a site file

Click outside of the orange boundary, or press Ctrl (Cmd) + Enter/Return, to commit the changes and deselect the text.

Tip: If you change your mind before you commit editing changes, you can press the Escape key to cancel them.

Click the email address and press Tab. In the Element Display, enter a new class name: .email and choose dw_example.css as the source for the new selector. In the Text section of CSS Designer, click the Color property and use the Eyedropper tool to select the purple color from the keyboard image (see Figure 10).

Figure 10. Create a new style to set the color of the linked text to purple

Click the center hero text. The .hero style is highlighted in CSS Designer.

Update the margin-top property to 50px (see Figure 11).

Figure 11. Edit the top margin of the hero class

Editing text, formatting text block layouts, and applying styles has never been easier. Live View renders the page as you make changes, so you don’t need to repeatedly preview pages in a browser to check how text content wraps and displays when rendered with CSS styles and Edge Web Fonts.

Clicking HTML elements in the Insert panel

In addition to dragging elements, you can also click any HTML item in the Insert panel to add it to the page. A dialog box lets you choose how the element is inserted. The new Live View interface offers the flexibility to update pages whichever way you prefer.

Click the center hero text. In the Structure section of the Insert panel, click the Header element.

A dialog box shows four insert positions based on the current selection. Choose from the options: Before, After, Wrap, or Nest to insert the new element.

Click the Before option (see Figure 12).

Figure 12. Click Before to insert the new header element before the selected hero text

While the new Header element is selected, click the plus (+) sign and type H. Press the Down arrow to choose the .hero class. Press Enter/Return to apply it.

The placeholder text updates to display the .hero style formatting.

Press Tab and create a new style: #header. Set the source to dw_example.css.

In the Text section of CSS Designer, click the Color property and use the Eyedropper tool to select the turquoise color from the headphone image.

Double-click the placeholder text to make it editable, and then triple-click the text to select the entire line. Type: Welcome to PLAY! (see Figure 13).

Figure 13. Update the text content to add the header message

Click anywhere else on the page to commit the text changes.

Duplicating elements with the new Live View context menu

Right-click in Live View to make content changes using new menu options and then move page content by dragging it on the live surface.

Scroll down to select the p tag element below the Call to Action! subheader.

Right-click the paragraph to open the context menu and choose Duplicate (see Figure 14).

Figure 14. Duplicate the selected element in Live View

Drag the duplicated paragraph up until the green Live Guide displays above the Call to Action! subheader.

Right-click on the duplicated paragraph and choose Delete to remove it (see Figure 15).

Figure 15. Quickly delete items using the context menu

The context menu also makes it easy to select parent or child tags, inspect the page, and launch the Code Navigator. Edit projects intuitively in Live View by dragging elements around the page to reposition them.

Controlling page structure with Element Quick View

Element Quick View lets you navigate your page layouts using an interactive list that displays the document HTML structure. Click, drag, and right-click items to select, rearrange, delete, copy, paste, and duplicate HTML elements. Make high-level changes to the page structure and use the context menu to manipulate page elements as you work.

The interactive list makes it easy to select elements while also providing a top-level view of your page. To use Element Quick View to structure the elements on your page:

Select the H2 .action-title element: Call to Action!

Click the </> icon in the bottom left corner of the Document window to open Element Quick View (see Figure 16).

Tip: You can also press Ctrl (Cmd) + / to open Element Quick View.

Figure 16. Select a sub-element in the document HTML structure

As you look around the workspace, you’ll see that the same element is displayed in the Element Display in Live View, in Code View, in the Tag Selector, and in Element Quick View. If you open CSS Designer, the same class is selected.

However you prefer to work, and whichever way you select an element, all other parts of the Dreamweaver interface display your selection.

In Live View, drag the H2 element to the desired location and hold until you see the </> tooltip appear. Hover over it.

Element Quick View opens to show you a list of the site elements. Drag the H2 element down until the green Live Guide displays below the P tag. Release your mouse button (see Figure 17).

Figure 17. The green Live Guide indicates the element’s position in the site hierarchy

Right-click the element name in Element Quick View and choose Duplicate from the context menu (see Figure 18).

Figure 19. Duplicate a text element and edit the content, and then add or edit CSS styles

In Element Quick View, click the div #tile7 again to collapse the section of the page structure.

In the newest release of Dreamweaver CC 2014, Live View performance has improved. As you drag elements around the live surface, you’ll notice that Live View is faster and more responsive. You can also drag items within the Element Quick View to move them into a different part of the page structure.

Select the logo image in the top left corner of the grid. Hover over the </> to open Element Quick View and hover over div #tile8 before releasing the mouse button. The PLAY logo image moves from the top left corner to the bottom right corner of the page, obscuring its existing background image (see Figure 20).

Figure 20. Move sub-elements to a different section of the page

In earlier versions of Dreamweaver, rearranging and moving blocks of code was messy business. Not anymore. With Live Guides, drag and drop HTML elements, and Element Quick View, you don’t have to worry about missing a closing tag or nesting content incorrectly. Element Quick View takes the guesswork out of repositioning elements because you see precisely where items are inserted in the site’s hierarchy.

Dragging new assets to the page from the Assets panel

Add new artwork to your layouts by dragging design elements directly from the Assets panel.

Choose Window > Assets to open the Assets panel.

Select the logo-new.jpg file.

Drag either the image preview or the logo-new.jpg file name to the #tile1 div in Live View (see Figure 21). Quick Element View shows that the image is nested.

Figure 21. Drag the new logo image onto the page

You can use the same workflow to drag media elements from the Media section of the Assets panel.

Note: Alternatively, click the Insert button at the bottom of the Assets panel to insert a selected asset. When you use this method, a window lets you choose where to insert it: Before, After, Wrap, and Nest as you saw in the previous section (see Figure 22).

Figure 22. Click the Insert button in the Assets panel (or the Insert panel) and choose the desired insert option

Updating image attributes

You can modify attributes of inserted images in the Live PI without using the Property inspector or editing the code in Code View. Make changes quickly to edit the image’s source, add titles and Alt text, add links, and improve SEO.

Click the logo tile in the top left corner. The Attribute Live Display shows that an image file is selected.

Click the sandwich icon to see the Live PI (see Figure 23).

Figure 23. Access image attributes with a single click

Tip: To update the image source, you can click the folder icon next to the SRC attribute and browse to select a file. Alternatively, type the source path directly.

Type PLAY Logo for the Title and Alt attributes (see Figure 24).

Figure 24. Update the attributes of the selected image element

Tip: If desired, you can type a URL to add a link or click the folder icon and browse to select another page in the site. Use the Target option to specify where to open the linked document.

Click the updated logo image to close the Live PI.

Notice that you can also reset the image’s width and height values in the Live PI. This feature, combined with CSS Designer and Inspect Mode, makes it easier to manipulate image dimensions as you refine your designs.

Copying and pasting colors from the Assets panel

Click the Colors button in the Assets panel to see the list of site colors.

Editing page content using Element Display

As you click page elements in Live View, the Element Display "heads-up" dialog boxes show the classes and IDs applied to the selection. Using Element Display features to reconfigure layouts is another way to update pages visually.

Click the headphones image in the top right corner. The Element Live Display shows that the div tag has a class named .tile and an ID named #tile4 applied.

Press the Down arrow once to select the tile that contains a keyboard (below the headphones). Notice that all of the tiles have the .tile class applied.

Hover over the ID #tile5 and click the Remove Class/ID button to delete it (see Figure 28).

Figure 28. Hover over a selector and click the Remove Class/ID button with the X icon

The ID is removed and the keyboard image disappears from the layout.

Tip: Alternatively, you can right-click the element to open the Live View context menu and choose Cut (see Figure 29).

Figure 29. Choose cut to remove the div element from the page

Right-click anywhere on the page and choose Inspect from the context menu. Hover over the headphones to see a tooltip that displays the #tile4 div tag’s dimensions: 270px by 270px. Exit Inspect mode by clicking the headphones.

In the Layout section of CSS Designer, update the Height value to 560px to make the #tile4 div twice as tall, with an extra 20 pixels for padding (see Figure 30).

Figure 30. The #tile4 expands to its new height and the background image is tiled

In the Background section of the Properties panel, click the URL once to select it and then click the folder icon to the right. Browse to select the tile4-new.jpg file in the images folder of the sample files or simply type tile4-new.jpg in the field (see Figure 31).

Figure 31. Update the background image URL to point to the new image file

Updating code in Live View using the Quick Tag Editor

The Quick Tag Editor gives you access to the source code without leaving Live View. Make updates to HTML tags with three different editing modes.

Click the logo image in #tile8 in the bottom right corner of the page.

Press Ctrl (Cmd) + T to open the Quick Tag Editor with the Edit Tag mode displayed. In the img src tag, select the logo.jpg image name and update it. Type: tile8.jpg and then press Enter/Return to see the new image appear (see Figure 32).

Figure 32. Update attributes of HTML tags while working in Live View

Wrapping a new tag around an existing HTML element

Select the logo image in #tile1 in the top left corner.

Press Ctrl (Cmd) + T once to open the Quick Tag Editor. Press Ctrl (Cmd) + T again to switch to the Wrap Tag mode.

Type a hr and then press Enter/Return to select a href in the list. The code auto completes the <a href=""> tag (see Figure 33).

Figure 33. Add and edit HTML code with the Quick Tag Editor

In between the quotes, type: http://www.adobe.com to add a link and press Enter/Return.

Click anywhere else on the page and then choose File > Save All.

The Quick Tag Editor is handy whenever you want to make changes to the HTML code without switching to Code View. The three edit modes: Edit Tag, Wrap Tag, and Insert HTML make it easy to update, wrap, and add new HTML content to a page.

Compare Live View with the page rendered in Chrome to see how accurately the layouts match (see Figure 35).

Figure 35. Preview the page in a browser to see the finished layout

When you return to Dreamweaver, switch to Code View. You’ll see that Dreamweaver generates clean HTML code and CSS styles that follow the latest web standards.

Where to go from here

Explore the new Live View workflow to see how the new tools speed your production process. Try dragging elements and assets to the page, restructuring page elements in the Element Quick View, adding new selectors with Element Live Display, and defining new styles in CSS Designer.

More on this topic

Tommi is a freelance web designer and creative director at tommiland.com. Prior to starting her own business in 2004, she worked at Macromedia for six years as a technical writer, editor, and web producer. Tommi is an Adobe Community Professional.