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.
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.
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.
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.
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.
Use the Quick Tag Editor ( Edit > Quick Tag Editor) to quickly insert and edit HTML tags without leaving 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.
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.
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.
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.
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.
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.