Linking files on the Web

This page is here to describe the differences between relative and absolute linking to files on the web.

Relative Linking

Relative links specify the location of a file (image, html file, etc) with respect to where you are currently on the web.

(Relative)	<img src="image.jpeg" />
(Relative)	<img src="./image.jpeg" />
(Relative)	<img src="../image.jpeg" />

Examples:

When viewing http://www.unl.edu/barkley/spath/index.shtml
<img src="image.jpeg" />       http://www.unl.edu/barkley/spath/image.jpeg
<img src="./image.jpeg" />     http://www.unl.edu/barkley/spath/image.jpeg
<img src="../image.jpeg" />    http://www.unl.edu/barkley/image.jpeg
<img src="../../image.jpeg" /> http://www.unl.edu/image.jpeg

Absolute and Site Root Linking

(Site root)	<img src="/barkley/spath/image.jpeg" />
(Absolute)	<img src="http://www.unl.edu/barkley/spath/image.jpeg" />  (Not to be used within SSI <!--#include virtual="" --> statements)

So sometimes it's easier to always use absolute addressing. That way, there is no confusion.

General Rule of Thumb:

Use Absolute or Site Root linking in

• JavaScripts (.js)
• Inside server side included files (sharedcode navigation files etc).

And.. that gives you a little introduction as to the many ways you can specify addresses on the web. Confusing isn't it? good luck!

Dreamweaver Settings

There are Site Settings within Dreamweaver which will change how it generates the links for files:

Open site preferences for the site. (Site>Manage Sites) then choose the Advanced tab if you aren't there already. And select the option 'Links relative to: Site Root'