logo for building-a-web-site.com
leftimage for building-a-web-site.com

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

Your website won't get traffic or make sales for you unless you know more than just how to make a website. It'll just sit there in cyberspace looking pretty and doing nothing, and that is reality for 95% of websites. To learn how to build your website right and use it right get my free e-course "The Insider Secrets To Web Success". These are well proven methods that are used by every website that does get traffic and make sales, but it seems they're not that well known. Get it now.

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 <!--#include virtual="support-files/filename.html" --> 

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
<!--#include virtual="../support-files/filename.html" --> 

Subfolder Example

An example will probably make things a lot clearer.
Subfolder example
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
<!--#include virtual="../support-files/navbar.html" --> 

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 <!--#include virtual="../navbar.html" -->

With no subfolders at all the virtual include link would be
<!--#include virtual="navbar.html" -->

Next Page: Troubleshooting your website template

Return from Using Subfolders to Creating A Website Template

Have you subscribed to the Insider Secrets To Web Success minicourse yet? You'll learn what you must do to have a website that gets visitors and makes sales. Subscribe Now!

Privacy | Disclaimer | Links