Learn how to design, edit, and preview your web pages in Live View. Rearrange or insert elements, apply selectors, edit image attributes, insert, edit, and format text without switching to Code View.

Live View uses a chromium-based rendering engine so that your content looks the same in Dreamweaver as it looks in your favourite web browsers. During development, you can switch to Live View to quickly preview your page. And, to save time switching between different views (code and design view), you can edit HTML elements directly within Live View.

Live View refreshes instantly to show the changes on the page.

You can use the following components to edit your page in Live View:

  • DOM panel: (Window > DOM) Shows the HTML structure of your document and lets you copy-paste, duplicate, delete, and rearrange the elements within the view. See DOM panel for more information.
  • Element Display: Appears above the selected HTML element in Live View. Element Display lets you associate HTML elements with classes and IDs. See Associate HTML elements with classes and IDs for more information.
  • Quick Property Inspector: Appears when you click the Sandwich icon in Element Display or select text. Quick Property Inspector lets you edit image attributes and format text in Live View. See Quick Property Inspector for more information.
  • Live View Property Inspector: Appears below the Document window and lets you edit various HTML and CSS properties in Live View. See Live View Property Inspector for more information.
  • Insert panel: (Window > Insert) Lets you drag elements from the panel directly into Live View. See Insert elements directly in Live View for more information.

Note:

If your page changes dynamically (because of scripts) or has metarefresh enabled, then the edits that you do in Live View may be lost.

Tips:

  • If Live View goes blank when you are editing the page, switch off Live View and switch it on again.
  • If you do not see the edits reflected on the page, click the refresh button in Live View.

Content that is rendered dynamically through databases or JavaScript, and non-editable regions in templates cannot be edited in Live View. When you click such elements in Live View, a grey border appears around them to indicate that the elements cannot be edited.

An element with a gray border in Live View cannot be edited
An element with a gray border in Live View cannot be edited

Note:

In Live View, only those options that are applicable for the selected element are made available in the main menu. Options that are not applicable are greyed out when the element is selected.

Element Display

Using Element Display, you can associate HTML elements with classes and IDs directly in Live View. The Element Display hints you with the available classes and IDs to help you quickly view and choose the required option. 

You can also format tables using Element Display. For more information, see link.

Associate HTML elements with classes and IDs

Click the required element in Live View. The Element Display appears and displays the currently associated class and ID.

While in Live View, you can also click the HTML element in the DOM panel to see the Element Display for the element.

The Element Display for the element
The Element Display for the element

  • To dissociate the HTML element from a class or ID, click ‘x’ adjacent to the class or ID.
  • To change the class or ID associated with the HTML element, click in the box. A list of available classes and IDs appears. Click the required option.
  • To add a class or an ID and apply it to the element, click ‘+’, and type in the name. To save the changes, click '+' or press Enter.

You can then use the CSS Designer to define a selector that includes this class or ID. For more information, see Laying out pages using CSS Designer.

Note:

Element Display of transitional elements does not move along with the elements when the transition is triggered. However, the changes that you make using the Element Display take effect even though it is not at the same location as the transitional element. 

Quick Property Inspector

Quick Property Inspector for images

Quick Property Inspector appears right above the selected elements in Live View. Using this Property Inspector, you can edit attributes, or format text in Live View.

Quick Property Inspector that appears right above the page elements in Live view
Quick Property Inspector that appears right above the page elements in Live view

To show or hide Quick Property Inspector, press Ctrl+Alt+H (Win)/CMD+Ctrl+H (Mac).

Note:

Code navigator icon is not displayed in Live View when you use Quick Property Inspector.

In Bootstrap documents, the Quick Property Inspector also includes options to customize images.

Quick Property Inspector for images in Bootstrap documents
Quick Property Inspector for images in Bootstrap documents

  • Clip to Shape: Click to clip the corners of images to circular or rounded corners, or as a thumbnail image.
  • Make image responsive: Click to make images responsive and adapt to various screen sizes.

Quick Property Inspector for text

Quick Property Inspector for text in Live view lets you quickly format, indent, and hyperlink text. The Quick Property Inspector for text appears when you click the sandwich icon for text elements: h1-h6, pre, and p.

Quick Property Inspector for text
Quick Property Inspector for text

  • The format option allows you to quickly change the element tag to one of these tags: h1-h6, p, and pre. 
  • The link option helps you hyperlink the text element. 
  • The icons for Bold and Italic help you add <strong> and <em> tags to the text element.
  • The indentation icons help you add or remove text indentation. <blockquote> tag is added or removed from the code accordingly.

In Bootstrap documents, the Quick Property Inspector for text also lets you align and transform the text elements.

  • Align: Aligns Bootstrap text elements to left, center, right, or justify by applying the corresponding classes.
  • Transform: Changes the text casing of an element by applying classes for lowercase, uppercase, or sentence case.

Live View Property Inspector

Live View Property Inspector is the traditional Property Inspector that is available below the Document window.

The Live View Property Inspector lets you examine and edit the most common properties for the currently selected page element, such as text or an inserted object. The contents of the Live View Property Inspector vary depending on the element selected.

Note:

Live View Property Inspector is not available in Fluid Grid pages.

To access Help for a particular Property Inspector, click the Help button in the upper right corner of the Property Inspector. Or, select Help from a Property Inspector’s Options menu. 

The following are the elements that you can edit using Live View Property Inspector:

  • HTML
  • CSS
  • Image
  • Table
  • Media - only HTML5 Audio and HTML5 Video
  • Anchor
  • Form
  • FormButton
  • FormTextArea
  • FormSubmitButton
  • FormRange
  • FormRadioButton
  • FormList
  • FormImage
  • FormFile
  • FormCheckBox
  • FormColor
  • FormDate
  • FormDateTime
  • FormDateTimeLocal
  • FormMonth
  • FormTime
  • FormWeek
  • FormNumber
  • FormLabel
  • FormHidden
  • FormGeneric

Note:

jQuery UI and template-related properties are not available for editing in the Live View Property Inspector.

Edit HTML attributes

You can quickly add, edit, or remove HTML attributes of images directly in Live View using the Quick Property Inspector.

The Quick Property Inspector for images appears when you click the sandwich icon . Depending on the space available, the Property Inspector appears on the right, left, top, bottom, or above the image. You can move around the Property Inspector and place it at any convenient position. 

Quick Property Inspector for editing attributes
Quick Property Inspector for editing attributes

To edit the attributes, click the sandwich icon in the Quick Property Inspector. You can change the source of the image along with other attributes such as “title” and ”alt”, and the changes are reflected instantaneously. Similarly you can also adjust the Width and Height of the image in Live View.

The changes that you make are saved when you do any of the following:

  • Click anywhere outside the Property Inspector
  • Press Enter
  • Press Tab to edit another attribute in the Property Inspector
  • Save the file

When images are loaded dynamically, you can use the Quick Property Inspector of the image to quickly inspect the attributes that are set for the image. 

Edit text directly in Live View

You can now edit text elements directly in Live View. You can simply double-click the text element to edit it. Or, you can click the text element to see the Element Display and then press Enter.

Note:

When you press Enter after entering into the edit mode, the results vary depending on where the insertion point was before you pressed Enter. The changes are similar to what happens when you press Enter while editing text in Design View.

The orange border around the text element indicates that the mode is changed to edit mode. 

An orange border indicates edit mode
An orange border indicates edit mode

The insertion point is positioned at the position of double-click. To select all the text in the text element, triple-click the text element.

Cut, copy-paste, and undo-redo are supported while you edit text in Live View. When you paste text, it is pasted as plain text.

The following table lists the supported and unsupported scenarios during text editing in Live View:

Supported Not supported
All HTML elements that can contain text

Editing of invalid or broken tags. If the HTML contains broken or invalid tags, then editing of such tags is governed by the way browsers perceive these tags:

  • If browsers fix your HTML for you such that it closes the broken tag, then you may be allowed to edit the tags in Live View.
  • If browsers add a new tag while rendering, then you cannot edit the broken or invalid tags.

 

HTML files derived from templates in Live View
Editing of jQuery Pages
Structural tags containing inline elements. They are presented together in a single box for editing.
Editing of tags that have both static and dynamic content. While you can edit the selectors for such tags, you cannot edit text directly in Live View. If you double-click such elements in Live View, a grey border appears around them, indicating that text editing is not supported.
Static text in dynamic pages
 
Fluid Grid pages in Live View without grids
 
Text containing entities  

Format text

You can now change the formatting of text and hyperlink text directly in Live View. To see the text formatting options, select a word or a phrase. The Quick Property Inspector with formatting options appears just above the selected text.

Quick Property Inspector for formatting text
Quick Property Inspector for formatting text

Insert elements directly in Live View

Using the Insert panel, you can directly drag elements into the required position in the document in Live View. Visual aids in Live View such as Live Guides and DOM icons help you position the dragged elements with respect to a hovered element.

Live Guides (in green) appear as you hover the mouse over different elements on the page before dropping the element. These guides indicate the positions where the element can be inserted. They can appear above, below, left, or to the right of the element that is hovered over.

  • Above and Below - Appears while hovering over all types of elements/tags, except inline tags. When you hover the mouse in the first (top) 50% of the element, guides appear above the hovered element. When you hover the mouse in the last (bottom) 50% of the element, guides appear below the hovered element.
Live Guides at top and bottom
Live Guides at top and bottom of hovered elements

  • Left and Right - Appears while hovering over inline tags, for example, <a>, <span>, or over tags that have the 'float property' set.
Live Guides on right and left of hovered elements
Live Guides on right and left of hovered elements

When you pause for a while before dropping the element, the DOM icon (</>) appears. When you hover your mouse over this icon, the DOM panel opens and you can drop the element inside the DOM structure of the document.

To insert elements directly in Live View, perform the following steps:

  1. Switch to Live View.

  2. From the Insert panel, click the required element and drag it into the document. Alternatively, you can just click the required element in the Insert panel.

    Tip: If you are unable to drag an element from the Insert panel on to the page, restart your computer and try again.

  3. Drop the element at the top, bottom, right or left of an element based on Live Guides. Or, drop the element at a precise place in the document structure by clicking </> and using the DOM panel.

    The element gets inserted into the page and is highlighted.

Marquee selection

Marquee selection allows you to easily select a block of text by clicking and dragging inside the tag in Live View. When you click and drag a block of text in Dreamweaver releases prior to 2014.1, the element used to move as a whole. 

Note:

Marquee selection in live view is restricted to browser-supported operations. 

Selection and dragging-and-dropping of elements

In Live View, you can move an element by clicking on the tag name and then dragging to the desired location. When you click on a tag name, a hand cursor icon appears indicating that you can drag the tag from the point. When you start dragging the tag, guides help you place it in the precise location.  

By clicking on the tag name in Live View, you can select the full contents of that tag in Code View.

Click the tag name in Live View to select the full contents of that tag in Code View
Click the tag name in Live View to select the full contents of that tag in Code View

Inspect code in Live view

Inspect mode works together with Live View to help you quickly identify HTML elements and their associated CSS styles. With Inspect mode turned on, you can hover over elements on your page to see the CSS box model attributes for any block-level element.

In addition to seeing a visual representation of the box model in Inspect mode, you can also use the CSS Designer as you hover over elements in Live view.

When you have the CSS Designer open in Current mode and hover over an element on the page, the rules and properties in the CSS Designer automatically update to show you the rules and properties for that element.

Additionally, any view or panel related to the element you’re hovering over updates as well (for example, Code view, the Tag selector, the Property inspector, and so on).

  1. With your document open in the document window, click View > Inspect.

    Note:

    If you’re not already in Live view, Inspect mode automatically enables it.

  2. Hover over elements on the page to see the CSS box model. Inspect mode highlights different colors for the border, margin, padding, and content.

  3. (Optional) Press the left arrow on your computer keyboard to highlight the parent of the currently highlighted element. Press the right arrow to return to highlighting for the child element.

  4. (Optional) Click an element to lock a highlight selection.

    Note:

    Clicking an element to lock a highlight selection turns off Inspect mode.

Keyboard navigation in Live View

You can traverse page elements or selectors in Element Display using your keyboard to quicken the editing process. 

Traverse page elements

Up and Down arrow keys help you traverse page elements in Live View. The traversal is based on the DOM structure of the document.

Keyboard navigation in Live View facilitates easy access to nested and wrapped elements.

When you access an element using the up or down arrow key, the Element Display for that element appears. You can then navigate to the selectors in the Element Display or press Enter to edit the text directly in Live View.

Image is in focus first
Here the image is in focus first. When the down arrow key is pressed, the paragraph below the image is selected as shown in the next image.

Text in bold format is selected
The text in bold format is selected.

Paragraph is selected here
The paragraph is selected here. When you press the down arrow key again, the next element in the DOM structure, the text in bold format, is selected as shown in the next image.


Traverse selectors

Press the Tab key to traverse through the selectors in Element Display. The selector in focus is displayed with an amber border as shown below: 

Selector in focus is highlighted
The selector in focus is highlighted with an amber border.

If you press the Tab key after the last applied selector, the add selector text box appears. 

Note:

You can use Ctrl+[ or Cmd+[ to select the parent element and Ctrl+] or Cmd+] to select the child element.

Disable editing in Live View

If you prefer not to use Element Display and Quick Property Inspector in Live View, you can disable these editing features.

Keyboard shortcuts:

  • (Win) Ctrl+Alt+H
  • (Mac) Cmd+Ctrl+H

  1. Switch to Live View and click View > Live View Options.

  2. Select Hide Live View Displays.

Unsupported scenarios

  • Dreaweaver template files cannot be edited in Live View.
  • Tags that have both static and dynamic content. While you can edit the selectors for such tags, you cannot edit text in Live View. If you double-click such elements in Live View, a grey border appears around them, indicating that text editing is not supported.
  • Tags that have pseudo selectors applied to them. You may encounter unexpected results when you try to edit such elements in Live View.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy