• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 12. Editing the Code > Making Use of Code Hints

Making Use of Code Hints

While you are working in Code View, you can make use of Code Hints to speed up the process of writing code. As you begin to type tags, the Code Hints list appears. This list is a scrolling menu with a large number of tags that you can use to complete the tag or tag attribute. This exercise is an example of how to use the Code Hints for inserting an email link. You have inserted email links in the Design View in previous lessons.

In the Design View pane of the lighthouse_history.html document, place the insertion point in front of the word “Contact” at the bottom of the document, located just after the copyright information.

The Code View pane will display that portion of the code. You will see a static cursor located right in front of the word “Contact” in the code.

Click in the Code View pane in front of the word “Contact.”

The Code View pane is now active, as indicated by the heavy line around the border of the pane.

Type < in front of “Contact.”

The < character indicates a tag. The Code Hints menu will appear with a list of tags that you can choose from.


You can access the Code Hints preferences by choosing Edit > Preferences and selecting the Code Hints category. The options allow you to turn off Auto Tag Completion (enabled by default) and turn off Code Hints (also enabled by default). The Delay slide allows you to set how long Code Hints waits before displaying a list of options. The Menus list box lets you specify the tags to include in the list of tags that appear in the Code Hints list.

Double-click a, the first tag in the list, to insert the tag, and then press the space bar.

The a tag is inserted into the Code View and the Code Hints list pops up again.

Scroll down in the list until you find href, the fourth item in the list, and double-click to insert it in the document.

Dreamweaver has inserted href= "" into the code, which indicates a link. The cursor is automatically placed between the quotes, and the Code Hints list pops up again.

Find and double-click mailto:, the seventh item in the list.

The cursor now appears just outside the ending quote after mailto: in the code.

Use the left arrow key to move to the left once, so the insertion point is between the colon and the quote. Type your email address. Use the right arrow key to move to the right once so the insertion point is back to the outside of the quote. Then type the > character.

Your email address now appears in the code defining the email link, and Dreamweaver has inserted a closing </a> tag.

Double click the word “Contact” in the Code View; click and drag it between the open and end tags.

Your code should look like this:

							<a href="mailto:info@mysite.com">Contact</a>


Dreamweaver MX includes many new tools for code editing that give users precise control over the development of code. You can store information on standard and custom tags using the Tag Library Editor. This new tool gives you the ability to modify current tags and import new tags into the already extensive database of tags that is integrated in Dreamweaver. Tags are set up in a system of libraries; each library is specific to a different type of code (HTML, CFML, ASP, etc.). You can add or delete libraries. The individual libraries each contain a number of tags for which you can edit the Tag Format: Line Breaks, Contents, and Case. The Preview text field displays the tag according to the options you set. Each tag contains a number of attributes that can be customized as well. Choose Edit > Tag Libraries to open the Tag Library Editor. Use caution when adding, modifying, or deleting tag libraries, tags, and tag attributes. This dialog box is best for advanced Dreamweaver users who have a thorough understanding of the code they wish to alter.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint