 |
 |
|
Maintain Your Web Site with Page Include Files
We
all know how web sites seem to take on a life of their own. As the number
of pages increases maintaining the site can be a time consuming task...!
The use of "Page Include" files makes the task of editing
web pages a lot easier and faster. An additional benefit is that it
reduces the size of a page, thus improving page load time. This article
takes a brief look at three forms of "Page Include" files. CSS
Includes, SSI Includes, and JavaScript Includes.
1.
(CSS) Cascading Style Sheet Includes
CSS can be used to format the page margins, font, link colors, and much
more. Create a file in your text editor, and include all the common
stylesheet declarations for your pages, now save the page with a .css file
extension.
Note: the <style type="text/css"> and </style>
declaration tags are not included in an external style sheet. This
reference is in the Link Relevant tag used to call up the stylesheet.
For this example we will call the stylesheet page "main.css".
h1 {color: #ff0000; font-family: arial; font-size:
14px;
text-decoration : underline; } p {font-family: verdana;
font-size: 10pt; color: #ffffff; } td {font-family: verdana;
font-size: 10pt; color: #ffffff; } a {font-family: arial;
font-size: 10pt; font-weight: bold; } a:link {color: #0000ff;
text-decoration: none; } a:visited {color: #800080;
text-decoration: none; } a.menu:link {color: #ffffff;
text-decoration: none; } a:hover {color: gold; text-decoration:
underline; }
In the <HEAD> tag area of the page the "main.css"
stylesheet is called up using the LINK REL tag.
<link rel="stylesheet" type="text/css"
href="main.css">
Now when you want to add or change your page format, just edit this one
file. The changes will appear on any page where the stylesheet is called
up.
2.
(SSI) Server Side Includes
SSI is a great way of controlling site content that appears on
multiple pages across a web site.
Requirements:
1. Your web site server must have SSI enabled.
2. Most web hosts require the SSI pages to have a file extension of .shtml
in place of .html or .htm
3. The file extension used for the code you insert will depend on the
operating system and web server software used on the web hosts server.
When you are using standard html in the code that is inserted the
extension will be either .html or .htm
Windows IIS servers use .htm file extension. Windows script:
<!--#include file="./file.htm"-->
Unix/Linux servers running Apache can use a .html file extension.
Unix/Linux script:
<!--#include file="./file.html"-->
This example will build a navigation bar for the bottom of a page. My web
host server is Linux Apache so we will use the .html file extension for
the nav bar html code file.
Create a file in your text editor and include the HTML code for the
navigation bar. Now save the SSI page with a .html file extension. Any
HTML coding can be used in a SSI file, but the file should only include
the code for the specific item. We will name this file "bot_nav.html"
and place it in a sub-directory called "ssi".
<div align="center">
<a href="html/index.html">HTML</a> ~
<a href="css/index.html">CSS</a> ~
<a href="webtools/index.html">Web Tools</a> ~
<a href="tutorials/index.html">Tutorials</a> ~
<a href="design/index.html">Design Tips</a> ~
<a href="downloads/index.html">Downloads</a>
</div>
Now place the following script code on the page in the location you want
the navigation bar to be rendered and save it as a .shtml file so your
webserver will know to process it for SSI's.
<!--#include file="./ssi/bot_nav.html"-->
Now when you add a new page or section to your site and want to add it to
the navigation bar you only have one page to edit. The changes will appear
where ever the SSI include page is called up.
Note: when viewing the source code of the page where the script is called
up, the include page coding will appear just as written in the SSI Include
file.
3.
JavaScript Includes
The JavaScript Include is very similar to the SSI Include in
the example above. The differences are in the way the code on our
JavaScript include page is written. For this example we will use the same
navigation bar code as used above.
Create a file in your text editor and include the HTML code for the
navigation bar. We then add some JavaScript coding to each line of the
HTML code as well as opening and closing JavaScript tags. The code for the
JavaScript include page will look like this:
<!-- document.writeln('<div
align="center">');
document.writeln('<a href="html/index.html">HTML</a>
~');
document.writeln('<a href="css/index.html">CSS</a>
~');
document.writeln('<a href="webtools/index.html">Web
Tools</a> ~');
document.writeln('<a href="tutorials/index.html">Tutorials</a>
~');
document.writeln('<a href="design/index.html">Design
Tips</a>~');
document.writeln('<a href="downloads/index.html">Downloads</a>');
document.writeln('</div>'); //-->
Note: The page must begin with <!-- and end with //-->.
Each page line must begin with document.writeln('. Each page
line must end with ');
Now save the page with a .js file extension, "bot_nav.js".
Now place the following code on the page in the location you want the
navigation bar to be rendered.
<script src="bot_nav.js"
language="javascript"
type="text/javascript"> </script>
JavaScript is a very sensitive language, but you can include most HTML or
JavaScript coding on the page. Here are some things to watch for:
1. You cannot include JavaScript that has to access another file to run.
DO NOT include the <script> and </script> tags in the .js
file. They are included in the location script code.
2. If your content contains a backslash "\" it must be preceded
by another backslash "\\".
3. If your content contains an apostrophe (') it must be preceded by a
backslash (\').
4. The most common reasons for script error messages are extra space at
the end of a line, or missing characters.
This is the same type of script used to syndicate content for use on other
sites. But to code a long article or web design tip by hand would take
some time. I used a CGI script called 'Master
Syndicator' that codes the content for me.
Note: whether using CSS, SSI, or JavaScript Include pages be sure
to upload them to your site in ASCII mode.
Implementing one or all three of these "Page Include" methods
will make maintaining and adding to your site a lot quicker and easier.
|
