CBT Cafe > Dreamweaver > Links, HTML & JavaScript

Dreamweaver: Linking: Relative and Absolute

If you're new to web design then this can be a bit confusing at first. Basically, Relative Links refer to files that are "relative" to your site. This means that they are located somewhere in your web site folder. They can be in the root directory, or several folders down, but they are still relative to that particular site.

Absolute Links refer to external files on someone else's site, outside of your site.

Absolute Link: http://www.cbtcafe.com

Relative Link: index.htm or ../tutorials/dreamweaver.html (where the two (2) dots refer to the Root Directory.

This exercise should help explain things a bit.

Step 1. I'm going to begin with a page I created for this lesson. It has a simple nav bar on it.

Step 2. I'm going to begin by selecting the "Tutorial" button. We want to link the button "Tutorial" to the html page, "tutorials.html".

Step 3. Next, I'll go up to the Properties Inspector and click on the folder next to the Link option. The folder is also referred to as the Browse For File button.

Step 4. And here I'll select "Tutorials.html" and click OK.

Step 5. Now, in the Properties Inspector I'll verify that this link is correct. It is and it's an example of a "Relative Link".

Step 6. Now, let's pretend this page is really a banner I've had placed on someone else's site. I would need to have this banner link to my site and to the specific file.

Step 7. Let's go back to the "Tutorial" button and select it again. Remember, the link is currently pointing to "tutorials.html" on my local site. Well, if this is now placed on someone else's site, I'm going to need to make this link an absolute link.

This means that no matter where this banner ends up, the link will always link to my site correctly.

Step 8. So, going back to the Properties Inspector again and in the Link area, I'm going to type in the absolute URL: http://www.cbtcafe.com/tutorials.html.

Step 9. Check out the Properties Inspector. You won't be able to see the entire absolute address but you can see the "http://www..." part and that is what we're concerned with here. Because the http://www... is there, it is telling the browser to look on the web for the file, not the local site.

Copyright © 1999-2011 CBT Cafe, All rights reserved

Flash®, Fireworks™, and Dreamweaver® are registered trademarks of Macromedia, Inc. in the United States and/or other countries
Photoshop®, Photoshop Elements® and Illustrator® are registered trademarks of Adobe Systems, Inc.
QuickTime® is a registered trademark of Apple Computer, Inc.
Ebay® is a registered trademark

CBT Cafe | Multimedia Learning | Interactive Graphics