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. |
