These pages use Javascript to provide a stylesheet appropriate to your browser. The pages are functional without javascript but not aesthetically pleasing.

DreamweaverMX Tutorials

5. Links & Images

Dreamweaver Tutorials

5.2 Links to other Web pages

We can create links to other Web pages within our site several different ways.
  1. Menu Driven
    In Design View or Code View, highlight a word, words, or image. Choose Modify > Make Link (or Cmd/Ctr-L). Browse to the file you'd like to link to. Click OK (win) or Choose (mac).
  2. Properties Inspector
    In Design View or Code View, highlight a word, words, or image. In Properties Inspector (F3), click the Browse for File icon, which is next to the Link option. Browse to the file you'd like to link to. Click OK (win) or Choose (mac).
  3. Insert Bar
    In Design or Code View, place the cursor where you'd like to add a link. From the Insert Bar (F2), click Hyperlink. You'll notice from the screenshot that there are more options than we have discussed to this point; one of the options is typing the URL rather than browsing to a local file.

    insert hyperlink

    insert hyperlink - complete

    properties inspector

exercise

  1. Download lesson_5a.html to your hard drive.
  2. Using the Dreamweaver Site Panel, drag the file into the workshop lesson folder. (Note - we will relocate the site so that we have access to all of Dreamweaver's automated tools.)
  3. There is navigation at the top (images) and bottom (text). Practice using the first and second processes for adding links to only the images.

    Link each image to the index.html file in each corresponding folder (for example, the Art of Bonsai image will link to art_of_bonsai/index.html).
  4. When you are ready to test, press F12 to preview in browser. See if the links work.
  5. We will now try to use the Link History feature to add links to the text at the bottom of the page.

    Highlight the words Art of Bonsai; in the Property Inspector, click the Link History pop-up menu. What do you see? You should see links to any files created in the prior step using Property Inspector; if the link to art_of_bonsai/index.html is present, choose it. Otherwise, use the Browse to File feature to create the link.

    Complete for the other links.
  6. When you are ready to test, press F12 to preview in browser. See if the links work.
  7. We'll use the last method to insert a link for the text link treebay.com.

    Place your cursor at the end of the bottom navigation line (to the right of Contact Information). Press return. Click Insert Hyperlink. Complete the box like like the bottom image at the left. Click OK. Now compare your Property Inspector with the one at the left. Again preview in browser. Why do you think this link looks different from the others?
next previous PDF print home