TechNote (Archived)

Site Root Relative - Why?

Issue

The manual says that site-root-relative links are more professional and easier to use, and necessary if one hopes to use the Library facility of Dreamweaver. Unfortunately, images then placed in this manner are not previewing correctly in my browser. What gives?

Reason

Site-root-relative links do indeed work the way that the Dreamweaver documentation says they do. The fact that you cannot see images with site-root reference when you preview locally has nothing at all to do with Dreamweaver -- it has to do with what '/' at the beginning of a SRC or HREF means to a browser. Namely, '/' means "start at the document root of the Web server and go down the directory path from there." Because there is no server when you are viewing locally, the browser cannot display the information. Again, this has nothing to do with Dreamweaver. Dreamweaver can display root-relative URLs because it understands the concept of a local root folder. Browsers do not have a similar concept, so they cannot display root-relative URLs. It has always been like this, even before there were visual tools for coding HTML.

As for the Library, site-root relative URLs were necessary for library items in Dreamweaver 1.0 because the very idea is to repeat content throughout the site. The document-relative reference to an image or link will not be the same from rootfolder/sales/index.html as it will be from rootfolder/marketing/index.html. But since the image is in the same place relative to the root, both marketing/index.html and sales/index.html can refer to /images/myimage.gif, and the image will appear properly when the page is viewed on the server. If you referred to just images/myimage.gif in each file, there would have to be an images/ subdirectory inside sales/ AND inside marketing/, and myimage.gif would have to be in both of those images/ directories. This may seem a bit convoluted -- but this is all part of standard Web development.

In Dreamweaver 1.2 and later, it is not necessary to use root-relative URLs in library items because Dreamweaver now automatically "fixes up" the link and image paths to make them document-relative when the library item is inserted into a document.

Solution

It is not necessary to use site-root-relative links. Document-relative links will work just fine. It may seem like the manual recommends that you use site-root-relative links because they're "more professional", however, that's not technically correct.

Another way to describe the situation might be "a site-root-relative path is usually the best way to link files in a professional Web development environment where content must be moved frequently. Using site-root-relative paths, links continue to work even if the document is moved within the site."

Site-root-relative links are an excellent solution for large sites on which content changes frequently. For example, if a site has news items that live in the breakingnews/ directory for the first 24 hours and then get archived to 1998/oldnews/, it's much more convenient to use site-root-relative links for any navigation buttons, copyright notices, and other items on the page that point elsewhere in the site. Otherwise, the site manager will have to update every reference as soon as the file moves to 1998/oldnews/. If this kind of scenario doesn't apply to a given site or site developer, it doesn't indicate a lack of professionalism - it just means that the site and or developer are probably not CNN or Netscape or ESPN (or one of the other 20 highest-traffic, large content sites in the world).

Another related issue is setting up the Host Directory. The references Dreamweaver creates will work 100% correctly if you set up your site correctly. The secret is to put the proper information in the Host Directory field in the Site Information dialog box (to open this dialog box, choose File > Open Site > Edit Sites). The Host Directory is the first directory on the server that is visible to the outside world. When you log onto a site, you're popped into the default login directory, which may not be the root of the Web server. For example, when Jane logs into her server, she's in the /u4/vip/jane/ directory. But in order for any files to be visible from her Web server, they must be in the u4/vip/jane/public_html/htdoc/ directory. So Jane enters public_html/htdoc/ in the Host Directory field. If Jane didn't put public_html/htdoc/ in the Host Directory field, all her files would be uploaded into the /u4/vip/jane/ directory. Jane could see them when she logged into her server via Telnet, but none of the files would be visible from her Web server.