Website Folder Structure

Website Folder Structure – Before you start building your website template it’s important that you set up your folder structure correctly if you haven’t done so already for your new website. You can start doing this by creating a folder. Create this folder anywhere on your PC or Mac.

Once you create this folder open the folder by either clicking once on the folder or double clicking the folder (depending how your operating  system is configured)

and create a folder by the name of images inside this folder you created. The purpose of this is that the main folder will be where you save your webpage’s and you will place or save your images in the images folder.

So if you created a webpage and placed an image in your webpage the path would be /images/myimage.jpg

It is very important you setup your website folder structure correctly and there are important reasons for this. The main one is that when you design and build your website on your computer your website webpage’s will use the same image path that you will use on your webhosting account when you upload your website.

When you have finished building your website you will need to login to your hosting account and create a folder in your main directory and give it a name identically to your images folder you created on your computer in this case being images.

Below is an example of an actual website I designed and how I setup my folders on my pc and how I used the same folder setup on my webhosting account so all my links will work for my webpage’s and images.

Computer Folder Setup

Below is a screen shot of a folder setup on my PC. The main folder name is called www.affacademy.com and high
lighted in light blue is the images folder I have created to store the images for the website.

PC Folder Setup

Webhosting Account Website Folder Structure Setup

Below is a screen shot of a folder setup on the webhosting account for affacademy.com. On the left hand side you can
see I am in the www folder which is the main directory for this webhosting account setup type which may vary. In this folder I have created the images folder.

Website Webhosting Server Folder Setup

The Idea behind this is that your image path will be identical so it will work on your website once everything has been uploaded and created. If you use a folder mapping path for example like c:\mysite\images if this is the path being saved in the webpage’s the site will work on your PC but no one will be able to view the images even though you have uploaded them into the images