Edit code in Design view in Dreamweaver

Edit code in Design view

Išči
Adobe Dreamweaver Navodila za uporabo

Na tej strani

Velja za: Adobe Dreamweaver

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

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.

Opomba:

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.

Opomba:

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.

Opomba:

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.

    Opomba:

    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.

    Opomba:

    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.

Opomba:

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.

    Opomba:

    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.

    Opomba:

    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.

    Opomba:

    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.

    Opomba:

    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.