How Subfolders Affect Your Web Template
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?
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.
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
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
Making A Navbar Work With Subfolders
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
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
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
If you used a subfolder, the link would be written as
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
The link to the navbar virtual include would be
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.
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
If navbar.html was not in a subfolder but the car pages were, the
virtual include link would be <!--#include
With no subfolders at all the virtual include link would be
Next Page: Troubleshooting your website template
from Using Subfolders
to Creating A Website