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).
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).
- Click Save.
- In the Files panel, double-click the dw_example.html file to open it.
- Select Close Tab Group in the Extract Panel Options menu (see Figure 3).
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.
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.
- In the Structure section of the Insert panel, select the Div element and drag it to the page.
- Release the mouse button when the green Live Guide is below the center hero text (see Figure 4).
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.
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).
- 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.
- Choose the linked file: dw_example.css (see Figure 6).
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.
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).
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).
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.
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.
- Triple-click the placeholder content to select all the words. Type: To learn more, contact email@example.com.
- Select the email address and click the Link button in the Element Display. Type: mailto:firstname.lastname@example.org in the link field (see Figure 9).
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.
- Click outside of the orange boundary, or press Ctrl (Cmd) + Enter/Return, to commit the changes and deselect the text.
- 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).
Tip: If you change your mind before you commit editing changes, you can press the Escape key to cancel them.
- Click the center hero text. The .hero style is highlighted in CSS Designer.
- Update the margin-top property to 50px (see Figure 11).
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.
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.
- Click the Before option (see Figure 12).
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.
- 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.
- 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).
The placeholder text updates to display the .hero style formatting.
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).
- 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).
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.
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.
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).
- Right-click the element name in Element Quick View and choose Duplicate from the context menu (see Figure 18).
- Drag the duplicate H2 above the P tag and release the mouse button.
- Double-click the lower H2 text and update it: Sign Up Now! (see Figure 19).
- In Element Quick View, click the div #tile7 again to collapse the section 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).
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.
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.
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.
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).
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).
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).
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.
- Click the Colors button in the Assets panel to see the list of site colors.
- Select the white color from the list. Right-click and choose Copy Color Value (see Figure 25).
- Select the .grid class in the Tag Selector.
- In the Background section of CSS Designer, right-click the color value field for background-color, choose Paste, and then press Enter/Return to apply the change (see Figure 26).
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).
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).
- 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).
- 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).
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).
- 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).
Tip: Toggle through the three editing modes by repeated pressing Ctrl (Cmd) + T.
- 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.
- Review the completed page design in Live View (see Figure 34).
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).
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.
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.
To learn how this sample project was developed, read How to code HTML5 and CSS faster.
And to discover new ways to work with CSS Designer and Live View, see How to style a web page with Dreamweaver CSS Designer.
Also visit the Dreamweaver Learn Page to find articles, video tutorials, and sample projects to help you get up to speed quickly with the new features in Dreamweaver CC.
That's it! You're done. Please provide feedback in our survey so that we can make sure this tutorial is as useful as possible.
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.