How Subfolders Affect Your Web Template

Using subfolders to organize the pages in your website can affect how your navbar and virtual includes work. It's not hard to work with subfolders, you just have to be aware of the differences.

This page is part of a tutorial on how to make a website template

Why Use Subfolders?

If you have a small website it is easy to find the web pages that you want to work with. But if you have a large site with dozens or hundreds of pages it can be hard to find the page you want to create a link to, or it can be hard remembering exactly which page has the information you need to update.

If you organise your web pages into subfolders it can be a lot easier to manage your web site.

Another reason to use subfolders in your website organization is to keep images and support files separate from all the content pages you've made. I have all my virtual include files and my CSS file in a subfolder called support-files.

For example, I could put this web site template tutorial into a subfolder called template-tutorial, in which case the url of this page would have been http://www.building-a-web-site.com/template-tutorial/using-folders.html.

Making A Navbar Work With Subfolders

I've found the main thing with the navigation bar is to make all the links absolute links. That means you must use the complete URL for the link such as http://www.building-a-web-site.com/template-tutorial/using-folders.html.

You'll have to choose and register a domain name, get hosting and upload everything to the webhost before your navbar links will work.

Making Virtual Includes Work With Subfolders

Normally you would link to a virtual include file by writing the link like 

In this example the virtual include file is called filename.html and it is in a folder called support files, but the web page itself is not in a subfolder.

If you used a subfolder, the link would be written as

Subfolder Example

An example will probably make things a lot clearer.

Example of website organization using subfolders

You can see the organization of an imaginary website www.classy-car-stuff.com above. There are four subfolders, one each for support files and images, one for pages about Ford cars, and one for pages about Porsche cars.

If the Ford Mustang page was included in the navbar, the navbar link would have to give the full URL http://www.classy-car-stuff.com/ford/mustang.shtml

The link to the navbar virtual include would be


Without the ../ the program would look for a subfolder called support-files inside the folder of the page you were currently on. If you were on the Ford Mustang page and clicked on a navbar link, the program would look in the ford folder for the support files folder.

With the ../ the program goes up one folder to the classy-car-stuff.com folder, and looks for the support-files subfolder there.

With the virtual include placed in the subfolder support-files you need to have that in the path to the link i.e. support-files/navbar.html

If navbar.html was not in a subfolder but the car pages were, the virtual include link would be 

With no subfolders at all the virtual include link would be

Next Page: Troubleshooting your template

Return from Using Subfolders to Creating A Website Template

Can't find what you're looking for? Try Google search

Custom Search

About Us | Privacy | Disclaimer | Links