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:
If your page changes dynamically (because of scripts) or has metarefresh enabled, then the edits that you do in Live View may be lost.
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.
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.
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.
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.
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 appears right above the selected elements in Live View. Using this Property Inspector, you can edit attributes, or format text in Live View.
To show or hide Quick Property Inspector, press Ctrl+Alt+H (Win)/CMD+Ctrl+H (Mac).
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 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.
In Bootstrap documents, the Quick Property Inspector for text also lets you align and transform the text elements.
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.
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:
jQuery UI and template-related properties are not available for editing in the Live View Property Inspector.
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.
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:
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.
You can now edit text elements directly in Live View. You can simply click the text element to edit it. If you are in Element Display mode press Enter to edit the text.
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.
The insertion point is placed where you 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.
Auto-sync feature allows any edits made in live view automatically synchronize with code view.
The following table lists the supported and unsupported scenarios during text editing in Live View:
All HTML elements that can contain text and semantic tags
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:
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
Text containing entities
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.
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.
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:
Switch to Live View.
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.
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 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.
Marquee selection in live view is restricted to browser-supported operations.
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.
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).
With your document open in the document window, click View > Inspect.
If you’re not already in Live view, Inspect mode automatically enables it.
Hover over elements on the page to see the CSS box model. Inspect mode highlights different colors for the border, margin, padding, and content.
(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.
(Optional) Click an element to lock a highlight selection.
Clicking an element to lock a highlight selection turns off Inspect mode.
You can traverse page elements or selectors in Element Display using your keyboard to quicken the editing process.
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.
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:
If you press the Tab key after the last applied selector, the add selector text box appears.
You can use Ctrl+[ or Cmd+[ to select the parent element and Ctrl+] or Cmd+] to select the child element.
Switch to Live View and click View > Live View Options.
Select Hide Live View Displays.