Organising Your Website Folder Structure is simple …
Organising your website folder structure correctly can increase visitors and enhance your on site categorisation of pages.
For the purpose of this mini tutorial you may find it useful to download the following template, as this has a similar folder structure. Download HERE
Note: Click on the images to enlarge if you need to
1. If you have successfully downloaded a template you will see the following (or something similar) when you have unzipped: -
2.Ok, so you have an index.html file, this is your homepage. When website visitors access your website through the homepage this is the first page they will see, this is the first file web browsers (typically Internet Explorer) look for when loading your website.
3.Next you will see there is a folder called ‘images’ and if you look inside this folder, there should be a collection of images and a file called style.css. Depending on which template you download the style.css file will either be in the root (main) folder above or in the folder below (images folder): -
4.Websites are basically a collection of folders organise on a web server. A lot like how you manage your word or excel documents you should organise your website files in a similar way, you should organise your files into logical sub folders.
5. So first step is to obviously unzip your template and then move this newly unzipped folder somewhere on your computer where it safe, i normally save mine into ‘My Documents’.
Currently you will have just one page but once you have learnt how to create multiple pages (see above tutorial) your site will begin to expand in size.
6. To make this easier to understand i am now going to explain how you would organise and structure a website about ‘Fashion’. So i start out with my basic folder: -
So i have my homepage (index.html) and my folder of images.
7. Next i am going to create numerous folders because my website is going to contain information on fashion in general so jeans, shirts, jumpers, shoes and jewellery (ignore the male and female genders for this example).
So now i am going to create 5 separate folders for each category: -
8. To create these separate folders i simply right-clicked on a white space within the folder and selected ‘New Folder’ and renamed the folder to the desired category name e.g. shirts.
9. So now you have your folder structure you can now produce pages for each category, for example in shirts you may have separate landing pages for sweatshirts, long sleeve shirts, short sleeve shirts, t-shirts and polo shirts etc as shown below: -
Notice the folder structure Fashion Website\shirts
Asos.com – an online fashion store organises their content in a similar way, this is the structure of their navigation: -
http://www.asos.com/Men/Long-Sleeve-T-Shirts
In conclusion to effectively organise your website folder structure all you had to do is logically categorise your content, this helps you during development, helps visitors determine where they are on your website and also helps the search engines categorise your content.
Technorati Tags: Website Architecture, Website, Web File Management
















