TJKDesign: Home Page

ez-css Putting the 'less' in table-less layouts. css-101 logo
Bookmark this article at these sites:

CSS, SS-Includes and JavaScript files...

If you link many documents to a single file, it makes sense that a single change within that file is instantly brought to the ones linked to it.

Let's start from scratch...

Plain old default.html file...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title>Easy Maintenance</title>
<style type="text/css">
< !--
img{border:0;}
.myclass {color:red;background-color:yellow;font-size:120%;}
-->
</style>
<script type="text/javascript">
<!--
// triggers an annoying alert box when the page loads
function TJK(){alert("Hello World!");}
//-->
</script>
</head>
<body onload="TJK()">
<div id="header">
<ul><li><a href="default.html">home</a></li><li><a href="aboutus.html">About Us </a></li>...</ul>
</div><!-- /header -->
<div id="main">
<p class="myclass">The content here is specific to this document...</p>
</div><!-- /main-->
<div id="footer">
<p>This is the content for the bottom of evey single page in the site...</p>
</div><!-- /footer -->
</body>
</html>

Go back to the top of the page

The content that is common to many documents in the site is highlighted below

...
<title>Easy Maintenance</title>
<style type="text/css">
<!--
img{border:0;}
.myclass {color:red;background-color:yellow;font-size:120%;}
-->
</style>

<script type="text/javascript">
<!--
// triggers an annoying alert box when the page loads
function TJK(){alert("Hello World!");}
//-->
</script>

</head><body onload="TJK()">
<div id="header">
<ul><li><a href="default.html">home</a></li><li><a href="aboutus.html">About Us</a></li>...</ul>
</div><!-- /header -->
<div id="main">
<p class="myclass">The content here is specific to this document...</p>
</div><!-- /main-->
<div id="footer">
<p>This is the content for the bottom of every single page in the site...</p>
</div><!-- /footer -->
</body>
</html>

Actually, I didn't really highlight everything that was common to the files across the site. I limited myself to the "obvious", but there is no real limit to how much a file can be stripped.

Go back to the top of the page

The "Tools"

To import these 4 different sections into our document, we'll use 4 different files.
We need to create:

  •   1 Style Sheet
  •   1 JavaScript file
  •   2 Includes.

Go back to the top of the page

Files' content

mystyle.css

<!--
img{border:0;}
.myclass {color:red;background-color:yellow;font-size:120%;}
-->

myjavascript.js

<!--
// triggers an annoying alert box when the page loads
function TJK(){alert("Hello World!");}
//-->

The call to the function is still embedded inside the document itself - in the event handler [onload]. You need to leave it there. You may include a function call inside the external file if it doesn't rely on an event handler to be "fired" [for example functions declared and called inside the head tags of a document].

myinclude_header.inc

<ul><li><a href="default.html">home</a></li><li><a href="aboutus.html">About Us</a></li>...</ul>

myinclude_footer.inc

<p>This is the content for the bottom of evey single page in the site...</p>

File extensions are - in theory - not really important to make things work, but it is good practice to use ".css" for CSS files, .js for JavaScript files and .inc for Includes (if the information contained in your includes is sensitive, it is then better to use an .asp extension to protect its content).
Note that some browsers won't recognize a CSS file as containing a style sheet unless it actually ends in '.css'. This is because some web servers won't hand over such CSS files unless the correct MIME type is sent to the client. If you are not on an Apache web server, you'll have to ask your WHC to take care of that for you, if you are on an Apache web server, you can either edit "mime.types" and add the MIME type you want or use an ".htaccess" file. The latter would include:

AddType text/css .myOwnExtension

Go back to the top of the page

Linking the Style Sheet to the Documents [the file sits in the same directory]

This file may be "imported" in different ways:

Using link:

<link rel="stylesheet" href="mystyle.css" type="text/css" />

Using @import:

<style type="text/css">
<!--
@import url("mystyle.css");
-->
</style>

Using IE/Win [Internet Explorer] Conditional Comment:

<!--[if gte IE 5]>
<style>
@import url("mystyle.css");
</style>
<![endif]-->

Using JavaScript:

<script type="text/javascript">
<!--
document.write('<link rel="stylesheet" href="mystyle.css" type="text/css" />')
//-->
</script>

These techniques allow a designer/developer to serve a different style sheet depending on the visitor's browser. This is called "branching". For more on this, read Eric Meyer's article.

Go back to the top of the page

Linking the JavaScript file to the Documents [the file sits in the same directory]

<script type="text/javascript" src="myjavascript.js"></script>

Remember the previous note about the call to the function that must stay inside the document.

Go back to the top of the page

Linking the Includes files to the Documents [the file sits in the root directory]

This line is for the content of the <div id="header">:
<!--#include virtual="/myinclude_header.inc" -->
This line is for the content of the <div id="footer">:
<!--#include virtual="/myinclude_footer.inc" -->

By default, the server does not parse a document with an .htm or .html extension. To make sure the server "processes" these files inside your pages, give your documents an .shtml or .asp extension [check with your Web Hosting Company first].

The #include directive accepts another keyword: file. Use "file" to indicate a relative path and "virtual" to declare a root relative path. You should not use the file directive to link your pages to includes that sit in higher directories.

The above example is proper syntax for ASP and .NET. Below are examples for other Server Languages:

ColdFusion
<cfinclude template="include_footer.inc">
JSP
<%@ include file="myinclude_footer.inc" %>
PHP
<? include('myinclude_footer.inc'); ?>

Go back to the top of the page

Default.html becomes default.shtml [new "plugs" in red].

...
<title>Easy Maintenance</title>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
<script type="text/css" src="myjavascript.js"></script>

</head><body onload="TJK()">
<div id="header">
<!--#include virtual="/myinclude_header.inc" -->
</div><!-- /header -->
<div id="main">
<p class="myclass">The content here is specific to this document...</p>
</div><!-- /main-->
<div id="footer">
<!--#include virtual="/myinclude_footer.inc" -->
</div><!-- /footer -->
</body>
</html>

Doing this, we've killed two birds at once [managing common data across multiple pages is a snap and reading the structure of a document is much easier].

Go back to the top of the page

What's next? [new "plugs" in red].

Using external files is supposed to save a lot of headaches. Unfortunately, reading a document that includes a lot of them can be "tricky". If the content of a JavaScript file can help one to understand what it does, most often, the name of the file itself doesn't shed much light. The same goes for includes...

So let's pick another tool in the box: the HTML comment! That's an easy fix to prevent "meaningless" lines of code:

...
<title>Easy Maintenance</title>
<!-- Basic Style Sheet -->
<link rel="stylesheet" href="mystyle.css" type="text/css" />
<!-- Hello World! Alert Box -->
<script type="text/css" src="myjavascript.js"></script>
</head><body onload="TJK()">
<div id="header">
<!-- navigation links: unordered list -->
<!--#include file="myinclude_header.inc" -->
</div><!-- /header -->
<div id="main">
<p class="myclass">The content here is specific to this document...</p>
</div><!-- /main-->
<div id="footer">
<!-- links for the footer -->
<!--#include file="myinclude_footer.inc" -->
</div><!-- /footer -->
</body>
</html>

Your file will not validate if you have 2 following "-" in an HTML comment (within the string between the opening and closing tags).

"Hank" like a Pro!

Maintaining navigation state when using external files is made easy with CSS. The trick is to give a unique "ID" to each one of your links inside your navigation menu (e.g. nav1, nav2, nav3, nav4). Then, you wrap the SS-Include into a DIV to which you assign a different ID depending on the link you want to be "selected". It works like this:
Markup:

<!-- We want to have the second link of our navigation menu "highlighted" -->
<div id="link2"><!--#include virtual="/inc/menu.asp" --></div><!--/link# -->

Actually, any parent element will do, so you may as well use the BODY tag instead of this extra container. But before using BODY, you should think of the possible implementation of a CSS Signature for your site.

If you're using a list, you can also give an ID to the list itself and leave it out of the Include file, like in the example below:

<ul id="link2"><!--#include virtual="/inc/menu.asp" --></ul>

CSS:

/* Keeping current state */
#link1 #nav1,#link2 #nav2,#link3 #nav3,#link4 #nav4 {background-color:yellow;cursor:text}

You would have as many pairs as you have links in your menu. Each time there is a match, the browser applies the rule.

Note that we're changing the cursor for the current navigation link.

Important things to keep in mind

Be aware that most of the time, browsers don't return any error if they cannot load an external CSS or JavaScript file.

You should favor absolute paths in Styles Sheets for NN4 since this browser has its own way to interpret relative paths.

Et voilà!