|
JavaScript Tip:
Page Headers And Footers
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
Web sites often include the exact same information on every page: the company logo, navigation text or icons, copyright information, etc. Even so, coding it takes time and updates can take even longer. Save time and effort with JavaScript. You can easily include the same header and footer information on every page with just one line of code.
Create Text Files To Link To Your Web Pages
First, you'll have to create a new text file that contains the HTML code you want to reuse. Then, you'll use JavaScript to call the information in that external file. The text and images in the external file will load just as if they were part of the Web page.
Step 1: Open Notepad or any text editor.
Step 2: Type in the HTML code you want to include in the file, with proper formatting. You may already have existing code that you can just cut and paste into the text editor.
<center>
<p>
Copyright 2001, NetMechanic Inc.<br>
All Rights Reserved
</p>
</center>
|
Step 3: Remove all the line breaks in the code. It must all be on one line or you'll get a JavaScript error on your page instead of copyright information.
<center><p>Copyright 2001, NetMechanic Inc.
<br>All Rights Reserved</p></center>
|
This code may display on multiple lines in this newsletter story. Since the line is relatively long, your browser wraps the text just like it does in the rest of the story text. Just be absolutely sure it shows on a single line in your Notepad file.
Step 4: Enclose the HTML code inside a document.write statement. Be sure to place the HTML text inside single quotes
document.write('<center><p>Copyright 2001,
NetMechanic Inc.<br>All Rights
Reserved</p></center>')
|
You don't need to change any of the HTML code, just place it inside the JavaScript statement.
Careful using single quotes inside your text string. Always place a "\" in front of the single quotation mark. Otherwise, JavaScript will think you're trying to close the string prematurely and give you an error message.
Step 5: Save the file as a .txt file. We used "footer_no9.txt" as our file name.
If you wanted to insert a page header too, you'd just follow the same steps and insert the text and graphics you want as your page header. We used the following code and saved the file as "header.txt"
document.write('<center><img src="NetMechanic-logo_no9.gif"
align="middle"><br><h1><font color="navy">Get HTML Code Help
At NetMechanic!</font></h1></center>')
|
Now, you're ready to place them on your Web pages with JavaScript.
Call External Files With JavaScript
Although you can use this technique to insert code anywhere on your page, you'll probably want to insert the page header directly at the top of your page right after your opening BODY tag like this:
<BODY>
<script language="javascript" type="text/javascript"
src="header_no9.txt"></script>
|
The footer goes at the bottom of the page, right before the closing BODY tag:
<script language="javascript" type="text/javascript"
src="footer_no9.txt"></script>
</BODY>
|
View a sample page with the header and footer information. We kept it simple so you can easily look at the source code and see where the external files link to the page.
Be very careful when you're entering the file names and paths. If the path is incorrect, you may not get a JavaScript error - but you won't see the file content either! Netscape is particularly strict about file paths so always be sure to test your page in Netscape.
Although your JavaScript options are limited in WebTV, you can use this technique to insert blocks of code.
What About SSIs?
Experienced webmasters and large Web sites regularly include reusable blocks of HTML code on their pages using Server Side Includes (SSI). This is a powerful way to simplify site maintenance using server-side technology. SSI's require some special server configuration before they'll work, but that's not difficult - just ask your Web host to set it up.
Sometimes it isn't that easy though. You often can't use SSI's on sites hosted by free hosting companies. Not all paid hosting sites give you access either: check before you sign up.
For more about using SSI's on your site, check out our previous newsletter stories:
Using Server Side Includes
Hiding Your SSI's
SSI's are secure and easy to use: check out your options there first. But if you don't have access to SSI's, then try using JavaScript to simplify site maintenance and reduce coding errors.
|
