Designing with templates is the most efficient way to establish the theme or look you want on-line. I will explain how you can use JavaScript to display a common template on all of your pages.
But First A Couple Of Definitions
A TEMPLATE is a starter page. It should contain the graphics and navigation links common to all the pages in your website. It's used to establish a look and feel and to make navigation easier. A template can display common headers and footers.
JAVASCRIPT is a server-side scripting language. It can be used to display common elements (headers & Footers) by generating your most current template on your web pages on the fly.
In this article I will use explain how you can use JavaScript to display your template on all your pages. This will allow you to make a change in your master template to instantly update all your pages.
I have never been a programmer and don't know anything about it. Never the less I was able to successfully build JavaScript templates to apply my template to all my pages establishing a common look and feel to the website. You can change all the pages on your website instantly by using JavaScript templates. You just change the template.
LOOK AT YOUR PAGE IN 4 SECTIONS TOP TO BOTTOM
1. Meta Code
Everything above the head tag is not visible to your visitors, yet it's the most important part of each page. The search engines to display your title and description in the search results use this section.
Meta Tags are important because the search engines are the easiest way to earn free traffic from the search engines. A tutorial on search engines secrets is available at the following URL.
Search Engine Secrets
http://www.smithfam.com/news/engines.html
The following is an example of the most common Meta Tags. Include your information in between the quotation marks of each tag. Remember, it won't show up on your pages but it will show up in search results.
Sample Meta Code
<HTML>
<HEAD>
<TITLE> Your Title Here </TITLE>
<META NAME="description" CONTENT="Your description here">
<META NAME="keywords" CONTENT=" your keywords and phrases here">
</HEAD>
2. The JavaScript Header
The header appears at the top of the page starting after the tag. It is actually the top of the body of the web page. It usually consists of a logo or graphic and some links to other important pages. It can also include page navigation links. The header will usually will appear on all the pages of the website.
3. The Body Of The Pages
This is the actual visible content of the pages on your website. The header and footer can usually be used "as is" on all pages while the content of each page will be unique.
Most people can manage the HTML required for the pages if the header and footer are common to all pages.
You can prepare new pages that link to all your main pages easily and with very limited experience by using templates .
4. The JavaScript Footer
The footer is the section of the web page that delivers your contact information and should include text links to all your major web pages. It should appear on the bottom of your pages.
CREATING YOUR JAVASCRIPT HEADERS & FOOTERS
Your template should contain a header and the footer section common to all pages. Your header and footer establish a common look.
The Meta section is common to all pages. The title, description, and keywords and will be different for each page. The body of the each page will also be unique.
Whenever you create new pages, they will need to contain only the Meta section and the unique body text. The JavaScript template will insert everything else automatically.
This method makes design faster and easier and gives your entire website a common look and feel.
If you decide to market something new, or add an important new page, you may modify your template to include links in the header and/or footer. If you have a lot of pages, adding something new to your template updates all the pages instantly.
JAVASCRIPT TEMPLATES
The process of editing every page on your website every time you add something new can be time consuming, but it doesn't have to be.
JavaScript templates can save you time. You can use JavaScript to display one common header and footer on all your pages. Whenever you need to make a change in your header and footer the change will automatically appear on all your pages.
With JavaScript, you can display your template, (common headers and footers) on every page by using three lines of code. I'll give you the code. JavaScript can change all your pages instantly by making the change to only one page (your template).
Start using a text editor by pasting the sample Meta Code above on a blank page above the
</HEAD>tag.
Add a line that refers to your template file. Name the file it with a .JS extension instead of an .HTML extension.
All version 3.x and above browsers can display JavaScript. Browsers, by default, have JavaScript display turned on. 99% of your visitors can display JavaScript with no problems. About 1% will either have Java turned off or are not capable of displaying Java.
The on-line version of my e-zine uses JavaScript templates. I use them because I generate at least one new page a day and have been doing so for 46 months. That's a total of over 1200 pages. Can you imagine how much work would be required to make a simple change to 1200+ pages?
I can change the template (one Page) in minutes and it will display the changes to all 1200 pages instantly. I don't have to edit any of the files - just the template. If I have a hot product I can change a banner or ad and have it show up on all 1200 pages in a instantly. In addition, I use a CGI script to randomly display banners on each page.
The following URL an example of a JavaScript template. Notice it uses a .JS file extension rather than the normal .HTML file extension.
java.js
You can see the actual text of this file by choosing VIEW - SOURCE in Internet Explorer or VIEW - PAGE SOURCE in Netscape.
1. SETTING UP YOUR JAVASCRIPT TEMPLATE
Add the following command to create the header section.
function writeHeader()
{
document.write(' your header code goes here ')
}
Your actual code for the header is regular HTML code from your HTML template. It must appear the way the browser reads it as one long line of code. Only use the return key after each complete HTML section. Each section of HTML code must not have hard returns or more than one extra space from line to line.
Do this by starting with a completed and tested HTML template with only the headers and footer.
Next remove all hard returns and remove all but one blank space within the code. If you do this correctly, you will have one long line for each section of HTML code (automatic line wrapping is OK).
You can test it in Notepad (the raw text editor that comes with Windows). By default, word-wrap is turned off in notepad. Each HTML section will display in notepad as one long line.
Start Each section of HTML code with a document.write(' tag followed by one line of HTML and ending with ') The header ends with }
Sample
document.write(' your HTML code goes here ')
Your footer is very much like the header except the start of the footer section uses the command. function writeFooter() { and ends with }
function writeFooter()
{
document.write(' your header code goes here')
}
The most common errors are using a line break (hard return) in the HTML code or not having an end tag after any HTML code. You can create your HTML code in any page design software program. You can add the JavaScript commands using a simple text editor (I use Notepad).
You can use my template as a working example.
java.js
The actual HTML code sections start with (' and end with ') all
on one line if word-wrap is turned off.
Here is an example of the Javascript needed for your template.
function writeHeader()
{
document.write(' your header code goes here ')
}
function writeFooter()
{
document.write(' your header code goes here')
}
2. PREPARING A WEB PAGE FOR A JAVASCRIPT TEMPLATE
Here is an example of a working page using a JavaScript template.
http://www.smithfam.com/news/aug99aa.html
Remember, view the source code using VIEW SOURCE or VIEW PAGE SOURCE in your browser.
Add the following to any web page.
<HTML>
<HEAD>
<TITLE> Your Title Here </TITLE>
<META NAME="description" CONTENT="Your description here">
<META NAME="keywords" CONTENT=" your keywords and phrases here">
</HEAD>
<BODY>
<script language ="JavaScript ">writeHeader()</script>
Unique body goes here
<script language ="JavaScript ">writeFooter()</script>
</BODY>
</HTML>
You can change the name of your JavaScript.js file but make sure the JavaScript code is placed both before and after the </HEAD> tag in the sample.
Your footer code will appear at the bottom of the body of the page. Just place the command.
<script language ="JavaScript ">writeFooter()<script>
Where you want your footer to appear.
Next upload a sample page with the modifications and upload the template file using the .JS file extension instead of the .HTML extension. When you open the sample file, the header and footer from your JavaScript template are displayed where your JavaScript commands appear. Both files must be loaded on your server.
Remember to use the { at the beginning of your header and footer and to include the } at the end of both the complete header and footer.
JavaScript code used in the JavaScript template must not contain hard returns or extra spaces between commands.
Use my sample template as needed
java.js
SUMMARY
Templates are great time savers. JavaScript templates take your design one step further. JavaScript templates provide a fast & simple method to update every page on your website almost instantly.
Templates provide a common look and feel to your website. They help encourage visitors to bookmark your site. They provide simple navigation to all your important sales pages. If you use a common template, you can create many pages over time to lead your visitors to your sales pages and to your order page.
Best Wishes
Bob
Click Here to Email Bob Smith
Easy-To-Use Attracts Customers Cash Flow & Traffic
