dreamweaver training courses - Template problems

Hi Peter,

Firstly, I assume you have uploaded the images to your server, or you're previewing the html page on your local machine.

An image on a web page is simply a pointer to an image file on a the disk. There are a couple of different ways to do this. Let's say you keep all your images in a folder called /image, which is relative to your main (or "root") web site folder. In the /image folder is an image file called picture.jpg.

Now let's say you have a /product folder, also attached to the root, with a lot of product HTML pages. The source of the image file, relative to a file (document) in the product folder can be defined as:
../image/picture.jpg

The first two dots indicate you are going back out of the /product folder. Then into the /image folder, then finding picture.jpg.
So the full <img> tag may look like this:

<img src="../image/picture.jpg" width="100" height="100">

But another way to reference this image is relative to the site root, like this:
/image/picture.jpg

If you start with a slash as part of your image source, the browser assumes you want to go back to the root folder and start looking from there.

This is very different to:
image/picture.jpg because THIS way assumes the image folder is in the same location as the current file. But there is no /image folder in the /product folder. So the image would appear broken.

Templates usually refer to images using relative paths, and so need to have ../ at the front to go back out of the built-in "template" folder of your site. Your HTML pages based on the template are supposed to automatically remove this initial ../ part of the path, but in doing so be left with image/picture.jpg instead of /image/picture.jpg

My recommendation is to always "relative to site root" referencing for image locations. To find this, when you insert an image, look at the bottom of the dialogue box. It says 'Relative to:' and then there is a drop down with options "Document" or "Site Root". Dreamweaver tends to have this as Document by default. Change it to Site Root.

Also ensure your Site that you've set up in Dreamweaver really does point to the root folder, otherwise you will have problems again with the relativeness.

Once you've got a grasp on this, go back and update all the images locations on your template and all HTML files. It may just be a case of replacing ../ with / at the front of each source.

I hope this helps and answers your question.

Regards, Rich