Using Virtual Includes For Easy Website Updates
Using virtual includes in your CSS
HTML web site template means that
you can easily update many pages (or every page) on your website at
once. It is essential to be able to easily update your navbar, and
highly desirable for your footer and header.
A
virtual include is a separate file that you can link to from your
web pages. The content in the file is then used on the
web page just as though it is part of the web page. If you link to it
from every page, then every page is updated when you update the include.
It is very powerful, and it can save you an immense amount of time and
bother.
Virtual includes do take a small amount of effort to make, but
nothing like
having to change dozens of pages one at a time.
How Virtual Includes Work
The concept is simple. You create a file, save it and link to it from
your web pages. The virtual include is then included in the web page as
though it is an integral part of the page.
When you create the file, it should only contain what you want on the
page. It doesn't have a header section, it doesn't have meta
tags, it doesn't even have <body>
</body> tags.
Creating An Include
You can code the include directly in HTML if you want to, but it's
easier to use your web page design program. I'm using KompoZer for this
tutorial.
Fire up KompoZer or your favorite web page design program and build
your include file as though it was a normal HTML web page. For example
it could
be a footer like this one from another of my web sites.
Then go into the source code to delete all the tags that
KompoZer automatically puts into the web page. To get into the source
code click on the Source
button at the bottom left of your monitor. The HTML source code for
the footer shown above will look like this:
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
<div align="center"><a
href="about-us.shtml">About
Us</a> | <a
href="disclaimer.shtml">Disclaimer</a> | <a
href="sitemap.shtml">Site Map</a> |
<a
href="privacy.shtml">Privacy</a>
</div>
</body>
</html>
All you want to keep is the text between the <body> and
</body> tags, i.e.
<div align="center"><a
href="about-us.shtml">About
Us</a> | <a
href="disclaimer.shtml">Disclaimer</a> | <a
href="sitemap.shtml">Site Map</a> |
<a
href="privacy.shtml">Privacy</a>
</div>
Copy that section of the HTML and paste it into a text editor such as
Wordpad. Save it with an HTML extension e.g. include-footer.html . I
normally save it as test first to make sure there is no hidden
formatting that will cause me problems, then I save it with the .html
extension since I use HTML webpages.
Don't save it in KompoZer afterwards.
Just
deleting the part of the file you don't want and resaving it in
KompoZer won't work because KompoZer will put all those tags back
in the page again.
Linking To Virtual Includes
On
the web page you'll need to put a link where you want the
include to be. If the virtual include file is in the same folder as the
page
you're linking from the code will look like
<!--#include
virtual="filename.html" -->
For example <!--#include
virtual="include-footer.html" --> where
the name of the file is include-footer.html
I often put the includes in another folder I call support-files, just
to keep things tidy. Then the link would be
<!--#include
virtual="support-files/include-footer.html" -->
An
easy way to get the include in the right spot on your web page is to
put a row of
letters like
XXXXXXXXXXX where you want the virtual include to go, then go into the
HTML
source code, look for XXXXXXXXXXX and paste the virtual
include link over the top.
The link to the header's virtual include is shown in green
Making More Virtual Includes
Do
exactly the same for other virtual includes that you want. I usually
put the header, footer and navbar in in their own virtual includes,
plus I have another one at the top of the page in case I want to put a
site-wide ad or notice on the website.
Next Page: How to make
a navigation bar
Return
from Adding Virtual
Includes To A Template to Creating A Web Template
|
