Creating Relative Image Links In Dreamweaver


1. Be sure you have properly mapped to the IS275 project space. If you are not sure how to do this, be sure to see the other handout regarding how to connect.

2. If your document has not already been saved, save it now (to the "Photoessays" folder within the IS275 space). This step is required in order to create relative links, which is the point of this assignment.

3. Have your property box open (if you do not see the following box, select Window -> Properties)

Dreamweaver Property Box (changes depending on what you are working on)

4. Position cursor where you want the photo to go in your document.

5. Click on Insert->Image, and navigate to the thumbnails, and select the image you want for the thumbnail.

Be sure that the URL appears in a format similar to that shown above. Specifically, it must not start with "http:" or "file:" but instead just have the relative format. Also, make sure the "Relative To:" dropdown is correct, showing "Relative To: Document" with the name of the file you are working on.

6. Once inserted, click on image to cause property box to show image options.


7. In property box, click the file folder icon next to Link area, and navigate to the hi-res images to select the corresponding image.

Again, be sure the URL appears to be a relative link and the document is correct, as in Step 5.


8. You're done! The property bar should now appear similar to the following:

Note the (different!) filenames in both the Src and Link boxes.