- Dreamweaver User Guide
- Introduction
- Dreamweaver and Creative Cloud
- Dreamweaver workspaces and views
- Set up sites
- About Dreamweaver sites
- Set up a local version of your site
- Connect to a publishing server
- Set up a testing server
- Import and export Dreamweaver site settings
- Bring existing websites from a remote server to your local site root
- Accessibility features in Dreamweaver
- Advanced settings
- Set site preferences for transferring files
- Specify proxy server settings in Dreamweaver
- Synchronize Dreamweaver settings with Creative Cloud
- Using Git in Dreamweaver
- Manage files
- Create and open files
- Manage files and folders
- Getting and putting files to and from your server
- Check in and check out files
- Synchronize files
- Compare files for differences
- Cloak files and folders in your Dreamweaver site
- Enable Design Notes for Dreamweaver sites
- Preventing potential Gatekeeper exploit
- Layout and design
- CSS
- Understand Cascading Style Sheets
- Laying out pages using CSS Designer
- Using CSS preprocessors in Dreamweaver
- How to set CSS Style preferences in Dreamweaver
- Move CSS rules in Dreamweaver
- Convert inline CSS to a CSS rule in Dreamweaver
- Work with div tags
- Apply gradients to background
- Create and edit CSS3 transition effects in Dreamweaver
- Format code
- Page content and assets
- Set page properties
- Set CSS heading properties and CSS link properties
- Work with text
- Find and replace text, tags, and attributes
- DOM panel
- Edit in Live View
- Encoding documents in Dreamweaver
- Select and view elements in the Document window
- Set text properties in the Property inspector
- Spell check a web page
- Using horizontal rules in Dreamweaver
- Add and modify font combinations in Dreamweaver
- Work with assets
- Insert and update dates in Dreamweaver
- Create and manage favorite assets in Dreamweaver
- Insert and edit images in Dreamweaver
- Add media objects
- Adding videos in Dreamweaver
- Insert HTML5 video
- Insert SWF files
- Add audio effects
- Insert HTML5 audio in Dreamweaver
- Work with library items
- Using Arabic and Hebrew text in Dreamweaver
- Linking and navigation
- jQuery widgets and effects
- Coding websites
- About coding in Dreamweaver
- Coding environment in Dreamweaver
- Set coding preferences
- Customize code coloring
- Write and edit code
- Code hinting and code completion
- Collapse and expand code
- Reuse code with snippets
- Lint code
- Optimize code
- Edit code in Design view
- Work with head content for pages
- Insert server-side includes in Dreamweaver
- Using tag libraries in Dreamweaver
- Importing custom tags into Dreamweaver
- Use JavaScript behaviors (general instructions)
- Apply built-in JavaScript behaviors
- About XML and XSLT
- Perform server-side XSL transformations in Dreamweaver
- Performing client-side XSL transformations in Dreamweaver
- Add character entities for XSLT in Dreamweaver
- Format code
- Cross-product workflows
- Installing and using extensions to Dreamweaver
- In-App updates in Dreamweaver
- Insert Microsoft Office documents in Dreamweaver (Windows only)
- Working with Fireworks and Dreamweaver
- Edit content in Dreamweaver sites using Contribute
- Dreamweaver-Business Catalyst integration
- Create personalized email campaigns
- Templates
- About Dreamweaver templates
- Recognizing templates and template-based documents
- Create a Dreamweaver template
- Create editable regions in templates
- Create repeating regions and tables in Dreamweaver
- Use optional regions in templates
- Define editable tag attributes in Dreamweaver
- How to create nested templates in Dreamweaver
- Edit, update, and delete templates
- Export and import xml content in Dreamweaver
- Apply or remove a template from an existing document
- Edit content in Dreamweaver templates
- Syntax rules for template tags in Dreamweaver
- Set highlighting preferences for template regions
- Benefits of using templates in Dreamweaver
- Mobile and multiscreen
- Dynamic sites, pages and web forms
- Understand web applications
- Set up your computer for application development
- Troubleshoot database connections
- Removing connection scripts in Dreamweaver
- Design dynamic pages
- Dynamic content sources overview
- Define sources of dynamic content
- Add dynamic content to pages
- Changing dynamic content in Dreamweaver
- Display database records
- Provide and troubleshoot live data in Dreamweaver
- Add custom server behaviors in Dreamweaver
- Building forms using Dreamweaver
- Use forms to collect information from users
- Create and enable ColdFusion forms in Dreamweaver
- Create web forms
- Enhanced HTML5 support for form elements
- Develop a form using Dreamweaver
- Building applications visually
- Build master and detail pages in Dreamweaver
- Build search and results pages
- Build a record insert page
- Build an update record page in Dreamweaver
- Building record delete pages in Dreamweaver
- Use ASP commands to modify database in Dreamweaver
- Build a registration page
- Build a login page
- Build a page that only authorized users can access
- Securing folders in Coldfusion using Dreamweaver
- Using ColdFusion components in Dreamweaver
- Test, preview, and publish websites
- Troubleshooting
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.
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.
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.
-
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.
-
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.
-
In the Property inspector, click the Attributes button to edit the tag’s attributes or to add new ones.
-
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).
-
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.
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
-
In Design view, click in the page to place the insertion point where you want to insert code.
-
Press Control+T (Windows) or Command+T (Macintosh).
The Quick Tag Editor opens in Insert HTML mode.
-
Enter the HTML tag and press Enter.
The tag is inserted into your code, along with a matching closing tag if applicable.
-
Press Escape to exit without making any changes.
Edit an HTML tag
-
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.
-
Press Control+T (Windows) or Command+T (Macintosh).
The Quick Tag Editor opens in Edit Tag mode.
-
Enter new attributes, edit existing attributes, or edit the tag’s name.
-
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.
-
To close the Quick Tag Editor and apply all the changes, press Enter.
-
To exit without making any further changes, press Escape.
Wrap the current selection with HTML tags
-
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.
-
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.
-
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.
-
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.
The Quick Tag Editor code hints preferences are controlled by the normal code hints preferences. For more information, see Set code hints preferences.
-
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.
-
Press Enter to insert the selected item, or double-click an item to insert it.
-
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
-
Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh) and select Code Hints.
The Code Hints Preferences dialog box appears.
-
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
-
Click in the document.
The tags that apply at the insertion point appear in the tag selector.
-
Right-click (Windows) or Control-click (Macintosh) a tag in the tag selector.
-
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.
-
To delete a tag, select Remove Tag from the menu.
Select an object corresponding to a tag
-
Click in the document.
The tags that apply at the insertion point appear in the tag selector.
-
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
-
Place the insertion point where you want the script.
-
Select Insert > HTML > Script.
-
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
-
Select the script marker.
-
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.
-
In the Language box, specify either JavaScript or VBScript as the language of the script.
-
In the Type pop‑up menu, specify the type of script, either client-side or server-side.
-
(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.
-
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.
-
In Design view, select the server-language tag visual icon.
-
In the ASP script Property inspector, click the Edit button.
-
Edit the ASP server-side script, and click OK.
Edit scripts on the page by using the Property inspector
-
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.
-
In the Type pop‑up menu, specify the type of script, either client-side or server-side.
-
(Optional) In the Source box, specify an externally linked script file. Click the folder icon to select the file, or type the path.
-
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.