Problem: You have uploaded all your files to the internet, but your photos or images are not showing up. :-(

NOTE: For this explanation, I'll use the index page (home page) of my personal website as an example.

On the right is a screen capture of what my home page should look like if I put up a simple index page with one photo. --->>

BUT - if I don't store the image in the right place when I upload the website, you won't be able to see the photo.

Instead, you'll see an empty box where the photo was supposed to be.

That empty box could have either a red "X" in one corner, or a small square with coloured shapes in one corner. (What you see depends on which browser you are using.)

What does this mean? Simply that the PATH from your web page to the image is not what the browser was expecting.

A "path" is exactly what it sounds like. To put this in everyday terms: Suppose you want to visit your Aunt Jane. You know that she lives in a certain house on a certain street. You follow a set path to her house.

If Aunt Jane has moved without telling you, she will no longer be tucked away inside that house. Your path to find Aunt Jane has changed. Unless you know her new address, you won't be able to find her. 

Your website pages work exactly the same way. When you create a website on your computer, you keep your image files (photos, clipart, etc) in a certain folder.

When you upload all your files to the internet, you have to keep your pages and image files in exactly the same places as you did on your computer. Then everything will work as it is supposed to.

When You Build Your Web Page on Your Computer

I'm using Microsoft FrontPage for this, so what you will see here is a screen capture from within that program. However, it doesn't matter which program you use - you STILL have to order your folders logically.

Once you understand the need for the SAME PATH on your computer and at your web host (in cyberspace) then you should find the problems go away.

Let's look at the folders in FrontPage on my computer. I keep all my websites in a folder on C drive. The folder is called ! Marg's Websites. (I put the ! in front of the name because this sends it to the top of the C Drive files - it's easy to find.) To the right, you'll see my FrontPage workspace. It shows the folders on the left and the page I'm working on (the home page or index page) on the right.

If we take a closer look at the folders, you'll see how they are organized.

1. The folder I keep all my websites in is called ! Marg's Websites. I have a lot of websites for various purposes and products. Each one has its own folder inside my websites folder.

The MAIN folder for this website is called MargMcAlister (because that's the name of this particular website... www.margmcalister.com. ) In the image above, you can see the folder completely closed.
The PATH is shown as: C:\! Marg's Websites\MargMcAlister.

2. When I double-click on the MargMcAlister folder, this is what I see:

• a folder called "_private"
• a folder called images, and
• the index (home) page.

I don't worry about the 'private' folder; that's something that FrontPage adds. The two things that are important are the home page and the images folder.

The little cross in the box next to a folder tells you that there are files inside that folder. If you open up the 'images' folder, you'll see all your image files. Let's have a look...

3. When I double-click on the images folder to open it, I see the file name for the photo of myself: marg1.jpg. (In this screen shot it has the 'SnagIt' icon next to it because I use SnagIt as the default image editor.)

Let's go over this again.

1. On the computer, I have a websites folder which I store on C drive.
    
2. Inside the websites folder I have another folder for my MargMcAlister website.
3. Inside THAT folder I keep all the page files (which end in .htm or .html) and a separate folder for my images.
4. Inside the image folder are all the images I'll use on the site.

Here is a graphical representation of this: you'll see that the images folder and the web pages are both kept inside the main website folder.

The main thing you have to remember is that you need to use the same file structure on your website.

CLICK HERE to view the next step...
the folder structure when you upload your files.