Page Templates

Using JavaScript/CSS page templates makes it easier to create an entire web site that has consistent features that are "site-wide" such as toolbars and default styles.

By linking each of your pages to external stylesheets (.css files) and using external JavaScript files (.js files) to write out your layers you can assemble your pages on the fly and have a central location for changing parts of your pages throughout your website. This is similar to what Server-Side Includes (SSI) do but when you use JavaScript files you have a lot more control over what gets written to the browser. For example you can determine what browser is being used and change the look of the page accordingly, or you can do other things like center all the layers (as in the previous lesson).

Also page templates, if used properly, can render the use of frames almost totally obsolete. When you use frames in unison with layers, you are limited in that your layers cannot cross over the frame borders. But by dynamically writing layers throughout your site you can do anything that you can in a single layers page.

Your CSS can be linked from one source file by using the LINK tag:

<LINK REL=STYLESHEET HREF="filename.css" TYPE="text/css">

That file can contain any stylesheet information that needs to be implemented across any number of html files (each of which must contain that LINK tag).

And similarly you can assign the source file for your JavaScript by using the SRC attribute:

<SCRIPT LANGUAGE="JavaScript" SRC="filename.js"></SCRIPT>

When you're developing page templates, I'd suggest you develop them as normal (all in one file) and then once you've got everything working, cut and paste the pieces into separate files. The following page is setup so that it's easy to extract the styles and the JavaScript which writes out the standard links for the page:

<HTML>
<HEAD>
<TITLE>The Dynamic Duo - Page Templates Demo 1</TITLE>
<STYLE TYPE="text/css">
<!--
#title {position:absolute; left:100; top:10; width:300; font-size:18pt; font-weight:bold;}
#links {position:absolute; left:10; top:40; width:100; font-size:12pt;}
#content {position:absolute; left:100; top:55; width:400; font-size:10pt;}

BODY {font-family:"Arial";}
-->
</STYLE>
</HEAD>

<BODY>

<DIV ID="title">This is the Title</DIV>

<SCRIPT LANGUAGE="JavaScript">
document.writeln('<DIV ID="links">');
document.writeln('<B>Links:</B>');
document.writeln('<BR><A HREF="#">Page 1</A>');
document.writeln('<BR><A HREF="#">Page 2</A>');
document.writeln('<BR><A HREF="#">Page 3</A>');
document.writeln('</DIV>');
</SCRIPT>

<DIV ID="content">
<P>This is the body content....
</DIV>

</BODY>
</HTML>

View templates1.html

Once that works, you can then make the CSS and JavaScript separate files that you link to:

<HTML>
<HEAD>
<TITLE>The Dynamic Duo - Page Templates Demo 2 [External Files]</TITLE>
<LINK REL=STYLESHEET HREF="mystyles.css" TYPE="text/css">
</HEAD>

<BODY>

<DIV ID="title">This is the Title</DIV>

<SCRIPT LANGUAGE="JavaScript" SRC="mylinks.js"></SCRIPT>

<DIV ID="content">
<P>This is the body content...
</DIV>

</BODY>
</HTML>

View templates2.html

An easy concept to understand. However your pages will certainly be more complicated than this, so be carefull!

Home Next Lesson: Creating New Objects
copyright 1998 Dan Steinman


Casa de Bender