User Guide Cancel

Edit code in Design 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

 

 

Use this topic to learn how to use the Property Inspector to edit code in Design view in Adobe Dreamweaver.

Dreamweaver lets you visually create and edit web pages without worrying about the underlying source code, but there are times when you might need to edit the code for greater control or to troubleshoot your web page. Dreamweaver lets you edit some code while working in Design view.

This section is designed for people who prefer to work in Design view, but who also want quick access to the code.

Select child tags in Design view

If you select an object in Design view that contains child tags—for example, an HTML table—you can quickly select the first child tag of that object by selecting Edit > Select Child.

Note:

This command is only enabled in Design view.

For example, the <table> tag normally has <tr> child tags. If you select a <table> tag in the tag selector, you can select the first row in the table by selecting Edit > Select Child. Dreamweaver selects the first <tr> tag in the tag selector. Since the <tr> tag itself has child tags, namely <td> tags, selecting Edit > Select Child again selects the first cell in the table.

Edit code with the Property inspector

You can use the Property inspector to inspect and edit the attributes of text or of objects on your page. The properties shown in the Property inspector generally correspond to attributes of tags; changing a property in the Property inspector generally has the same effect as changing the corresponding attribute in Code view.

Note:

The Tag inspector and the Property inspector both let you view and edit a tag’s attributes. The Tag inspector lets you to view and edit every attribute associated with a given tag. The Property inspector shows only the most common attributes, but provides a richer set of controls for changing those attributes’ values, and lets you edit certain objects (such as table columns) that don’t correspond to specific tags.

  1. Click in the text or select an object on the page.

    The Property inspector for the text or object appears below the Document window. If the Property inspector is not visible, select Window > Properties.

  2. Make changes to the attributes in the Property inspector.

Edit CFML with the Property inspector

Use the Property inspector to inspect and modify ColdFusion markup in Design view.

  1. In the Property inspector, click the Attributes button to edit the tag’s attributes or to add new ones.
  2. If the tag holds content between its opening and closing tags, click the Content button to edit the content.

    The Content button appears only if the selected tag is not an empty tag (that is, if it has both an opening and a closing tag).

  3. If the tag contains a conditional expression, make changes to it in the Expression box.

Quick Tag Editor overview

You use the Quick Tag Editor to quickly inspect, insert, and edit HTML tags without leaving Design view.

If you type invalid HTML in the Quick Tag Editor, Dreamweaver attempts to correct it for you by inserting closing quotation marks and closing angle brackets where needed.

To set the Quick Tag Editor options, open the Quick Tag Editor by pressing Control-T (Windows) or Command-T (Macintosh).

The Quick Tag Editor has three modes:

  • Insert HTML mode is used to insert new HTML code.
  • Edit Tag mode is used to edit an existing tag.

  • Insert HTML mode is used to insert new HTML code.

  • Edit Tag mode is used to edit an existing tag.

  • Wrap Tag mode is to wrap a new tag around the current selection.

Note:

The mode in which the Quick Tag Editor opens depends on the current selection in Design view.

In all three modes, the basic procedure for using the Quick Tag Editor is the same: open the editor, enter or edit tags and attributes, and then close the editor.

You can cycle through the modes by pressing Control+T (Windows) or Command+T (Macintosh) while the Quick Tag Editor is active.  

Edit code with the Quick Tag Editor

Use the Quick Tag Editor ( Edit > Quick Tag Editor) to quickly insert and edit HTML tags without leaving Design view.

Insert an HTML tag

  1. In Design view, click in the page to place the insertion point where you want to insert code.
  2. Press Control+T (Windows) or Command+T (Macintosh).

    The Quick Tag Editor opens in Insert HTML mode.

    Quick Tag Editor in Insert HTML mode
    Quick Tag Editor in Insert HTML mode

  3. Enter the HTML tag and press Enter.

    The tag is inserted into your code, along with a matching closing tag if applicable.

  4. Press Escape to exit without making any changes.

Edit an HTML tag

  1. Select an object in Design view.

    You can also select the tag you want to edit from the tag selector at the bottom of the Document window. For more information, see Edit code with the tag selector.

  2. Press Control+T (Windows) or Command+T (Macintosh).

    The Quick Tag Editor opens in Edit Tag mode.

  3. Enter new attributes, edit existing attributes, or edit the tag’s name.
  4. Press Tab to move forward from one attribute to the next; press Shift+Tab to move back.
    Note:

    By default, changes are applied to the document when you press Tab or Shift+Tab.

  5. To close the Quick Tag Editor and apply all the changes, press Enter.
  6. To exit without making any further changes, press Escape.

Wrap the current selection with HTML tags

  1. Select unformatted text or an object in Design view.
    Note:

    If you select text or an object that includes an opening or closing HTML tag, the Quick Tag Editor opens in Edit Tag mode instead of Wrap Tag mode.

  2. Press Control+T (Windows) or Command+T (Macintosh), or click the Quick Tag Editor button in the Property inspector.

    The Quick Tag Editor opens in Wrap Tag mode.

  3. Enter a single opening tag, such as strong, and press Enter (Windows) or Return (Macintosh).

    The tag is inserted at the beginning of the current selection, and a matching closing tag is inserted at the end.

  4. To exit without making any changes, press Escape.

Use the hints menu in the Quick Tag Editor

The Quick Tag Editor includes an attributes hint menu that lists all the valid attributes of the tag you are editing or inserting.

You can also disable the hints menu or adjust the delay before the menu pops up in the Quick Tag Editor.

To see a hints menu that lists valid attributes for a tag, pause briefly while editing an attribute name in the Quick Tag Editor. A hints menu appears, listing all the valid attributes for the tag you’re editing.

Similarly, to see a hints menu listing valid tag names, pause briefly while entering or editing a tag name in the Quick Tag Editor.

Note:

The Quick Tag Editor code hints preferences are controlled by the normal code hints preferences. For more information, see Set code hints preferences.

  1. Do one of the following:

    • Begin to type a tag or attribute name. The selection in the Code Hints menu jumps to the first item that starts with the letters you typed.

    • Use the Up and Down Arrow keys to select an item.

    • Use the scroll bar to find an item.

  2. Press Enter to insert the selected item, or double-click an item to insert it.
  3. To close the hints menu without inserting an item, press Escape or continue typing.

Disable the hints menu or change the delay before it appears

  1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh) and select Code Hints.

    The Code Hints Preferences dialog box appears.

  2. To disable the hints menu, deselect the Enable Code Hints option.

Edit code with the tag selector

You can use the tag selector to select, edit, or remove tags without leaving Design view. The tag selector is located in the status bar at the bottom of the Document window and shows a series of tags.

Edit or delete a tag

  1. Click in the document.

    The tags that apply at the insertion point appear in the tag selector.

  2. Right-click (Windows) or Control-click (Macintosh) a tag in the tag selector.
  3. To edit a tag, select Edit Tag from the menu. Make your changes in the Quick Tag Editor. For more information, see Edit code with the Quick Tag Editor.
  4. To delete a tag, select Remove Tag from the menu.

Select an object corresponding to a tag

  1. Click in the document.

    The tags that apply at the insertion point appear in the tag selector.

  2. Click a tag in the tag selector.

    The object represented by the tag is selected on the page.

    Note:

    Use this technique to select individual table rows (tr tags) or cells (td tags).

Write and edit scripts in Design view

You can work with client-side JavaScripts and VBScripts in both Code and Design views, in the following ways:

  • Write a JavaScript or VBScript script for your page without leaving Design view.

  • Create a link in your document to an external script file without leaving Design view.

  • Edit a script without leaving Design view.

    Before starting, select View > Visual Aids > Invisible Elements to ensure that script markers appear on the page.

Write a client-side script

  1. Place the insertion point where you want the script.

  2. Select Insert > HTML > Script.

  3. Select the script in the file selection window.

    Note:

    You don’t have to include the opening and closing script tags.

The script tag for the selected file is inserted in the document.

Edit a script

  1. Select the script marker.
  2. In the Property inspector, click the Edit button.

    The script appears in the Script Properties dialog box.

    If you linked to an external script file, the file opens in Code view, where you can make your edits.

    Note:

    If there is code between the script tags, the Script Properties dialog box opens even if there is also a link to an external script file.

  3. In the Language box, specify either JavaScript or VBScript as the language of the script.
  4. In the Type pop‑up menu, specify the type of script, either client-side or server-side.
  5. (Optional) In the Source box, specify an externally linked script file.

    Click the folder icon or the Browse button to select a file, or type the path.

  6. Edit the script, and click OK.

Edit ASP server-side scripts in Design view

Use the ASP script Property inspector to inspect and modify ASP server-side scripts in Design view.

  1. In Design view, select the server-language tag visual icon.
  2. In the ASP script Property inspector, click the Edit button.
  3. Edit the ASP server-side script, and click OK.

Edit scripts on the page by using the Property inspector

  1. In the Property inspector, select the scripting language from the Language pop‑up menu, or type a language name in the Language box.
    Note:

    If you are using JavaScript and are unsure of the version, select JavaScript rather than JavaScript1.1 or JavaScript1.2.

  2. In the Type pop‑up menu, specify the type of script, either client-side or server-side.

  3. (Optional) In the Source box, specify an externally linked script file. Click the folder icon to select the file, or type the path.

  4. Click Edit to modify the script.

Use JavaScript behaviors

You can easily attach JavaScript (client-side) behaviors to page elements by using the Behaviors tab of the Tag inspector. For more information, see Applying built‑in JavaScript behaviors Dreamweaver.

More like this

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