Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

  • Print
  • + Share This
This chapter is from the book

Adding Hyperlinks

The page has several hyperlinks that need to be created. Dreamweaver makes this task easy and convenient, offering three ways to add hyperlinks to existing text.

  1. Drag to select all of the text in the ORB paragraph.

    Whenever you wish to add a hyperlink, drag to make a selection. This selection can encompass an entire paragraph or only one word within it.

    Figure 12

  2. In the Property inspector Link field, enter the following URL: encyclop/culture/lit/Italian/Danindex.html

    Once you enter the URL in this field and then leave the field (by clicking elsewhere or pressing Return, Enter, or Tab), Dreamweaver automatically adds the link to the selection.

    If you click away from the paragraph, you will see that this link is now underlined and blue. Blue doesn't really go well with the infernal color scheme—you'll fix that in the next lesson.


    n ot e URLs are case-sensitive. If a URL has an uppercase I, like the I in Italian in the URL above, and you enter i, your link will be broken and your user will get an error.

    Figure 13

  3. In the same manner, add the following link to Digital Dante Project:

    Now your students have a couple of off-site Dante resources to turn to. How about some on-site resources, like that quiz and learning interaction?

  4. Select the word Circlefinder at the beginning of the body paragraph under the Interactions heading.

    You'll add a link to a word within a paragraph to a page on your local site.

  5. In the Property inspector, click and drag the Point to File icon off the page until it is hovering over the Site panel; then point the arrow over the circlefinder.html file.

    This point-to-the-file feature is convenient because you know that Dreamweaver will never make a mistake in creating the relative URL.

    Relative URLs are partial URLs that point to files relative to the file that is pointing to them. If you look at the Link field when you return to the page window, you will see that instead of some long URL, it only says, circlefinder.html. This directs the browser to look for the file in the same folder that the source file is in. In contrast, with the ORB and Digital Dante sites, you were using absolute URLs, which began with http://. But for local files, you don't need these long URLs, and they are not desirable, since your local machine and the server are likely to have different directory structures.

    Figure 14

  6. Return to the page window.

    It's time to add the last link.

  7. Select the words "online quiz" from the body paragraph in the Quiz section, and click the Browse for File folder icon beside the Point to File icon in the Property inspector.

    This is a more traditional approach to specifying files, but as with the Point to File method, you can be confident that Dreamweaver will get your relative link right regardless of where the file is.

    Figure 15

  8. Navigate to quiz.html and choose Select.

    This step is self-explanatory. When you are finished, the link will appear as you would expect in the Link field of the Property inspector.

    Figure 16

  9. Select the words "Email the instructor" in the Contact section, and in the Link text field of the Property inspector, type mailto:

    To create a link that automatically opens an email editor, simply preface the email address with the "mailto:" prefix. It looks just like a link, but when clicked, it opens the default email editor, rather than a new Web page.

    Figure 17

  • + Share This
  • 🔖 Save To Your Account