User Guide Cancel

Edit in Live View

Search
Dreamweaver

Dreamweaver

Open app
  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

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 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. Also, you can select two or more elements to edit the text.

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 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 across text elements 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:

Supported

Not supported

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:

  • 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

 

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 merge texts across elements in live view. Now, select and merge text across elements with the cut option. You can merge elements using the Delete or Backspace key, as well. 
You can 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.

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.

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.

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.
  • CSS Grids are supported in Live View only in Dreamweaver 2019 and later versions.

More like this

 Adobe

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links

Legal Notices    |    Online Privacy Policy