Smith's Family Enterprises Logo
_

_
| Archives | CD ROMs | Site Map | HOME | Phone Support | Search | Newsletter

Ads by Smithfam.com
WebMaster's & Marketing CDs Information, software, graphics, and design tools are critical to success. Free Search Engine Traffic
A good search engine position is highly targeted advertising that is 100% free.

Using Javascript Templates & In Website Design
           By Robert Smith   ©1999 All Rights Reserved

I have been in the graphic arts for over thirty years. It's commonplace for businesses use common design elements to establish a corporate look and feel.

On-Line, your graphics define your identify. You want your site to look good, load fast and you want people to notice and remember your identify.

Two years ago you could get away with a minimal effort at design. Now people just won't do business with you if they are not impressed with your website. Content is still king, but attracting customers is getting to be more of a challenge all the time.

Design issues seem mostly old fashioned common sense but it occurred to me to share some of the principals I use in my websites. Designing with templates is the most efficient way I know to establish the theme or look you want on-line.

It all starts with your home page. Establish the look for the whole website from your home page.

Your first consideration is choosing the screen resolution for your pages. The resolution is the number of pixels displayed on your screen. The more pixels displayed on your screen, the smaller graphics appear. The higher the resolution, the more information can be displayed on a page.

The resolution that is the most universal is standard VGA 640 X 480, Most computers come from the computer store configured to run in standard VGA mode (640 x 480). However most computers today, especially in North America are capable of higher resolutions.

The following example shows what percentage of my users are running in each common video resolution. Although all monitors are capable of running in standard 640 x 480 you see that over one half of my visitors are running in 800 x 600 display.

  640 x 480         18.69%
  800 x 600         52.04%
1024 x 768         21.16%
1152 x 864         2.01%
1280 x 1024       1.96%
1600 x 1200       0.26%

My solution to suit the largest number of visitors is to design for 800 x 600 display, while at the same time I design the template using percentages rather than pixels so it will also work in a standard VGA display. I do this because I don't want to reject 18.69% of my visitors by providing a unusable display.

The result, 100% of my visitors can get an acceptable display for both 800 x 600 and standard 640 x 480. If this sounds confusing set your computer into standard VGA mode when you prepare your graphics and build your template and everything will work out fine.


LETS LOOK AT YOUR HOME PAGE IN 4 SECTIONS TOP TO BOTTOM

1 ) META CODE
Everything above the head tag will not be visible to your visitors yet it's the most important part of each page. The search engines use this section to display your title and description.

You can use the following example of the most common Meta tags. Just 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, so it's very important.

The reason this part is so important is because it's the easiest and cheapest 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/website.html

Ads by Smithfam.com
WebMaster's & Marketing CDs Information, software, graphics, and design tools are critical to success. Free Search Engine Traffic
A good search engine position is highly targeted advertising that is 100% free.


<HTML>
<HEAD>
<TITLE> Your Title Here </TITLE>
<META NAME="Description" CONTENT="Your description here">
<META HTTP-EQUIV="KeyWords" CONTENT=" your keywords and phrases here">
<META HTTP-EQUIV="rating" content="General">
<META HTTP-EQUIV="resource-type" content="document">
<META HTTP-EQUIV="revisit-after" content="30 days">
<META HTTP-EQUIV="ROBOTS" content="ALL">
</HEAD>

THE HEADER.
This section appears at the top of the page, It usually contains a logo or graphic, and usually will appear on all pages of the website. The graphic can also provide page navigation links (may be combined into the logo) or you can include text links. If you have experience you can create the graphic using Photoshop or Paint Shop Pro which is available as shareware.

Download it free
     http://www.jasc.com/

If you go into the project planning to make one or two good graphics rather than too many not so good graphics you will have better success. Many of the best sites use very few small graphics.

THE BODY OF THE PAGE
This is the actual visable content of the page. 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. Using templates you can prepare new pages that link to all your main pages easily and with very limited experience.

THE FOOTER
The footer is the section of the webpage that delivers your contact information and should include text links to all your major web-pages. It should appear on all your pages and link to all your other important pages in the site.

THE TEMPLATE
Your template should contain the header and the footer code that are common to each page. It will contain different title and description for the search engines as well as a few Keywords to describe the content of the page. The body of the page will also be unique.

Starting every page from a copy of the template instead of a blank page not only makes design faster and easier it also gives your entire website a common look and feel.

If you decide to market something new, or add an important new page, you may add a link to your template. In theory it's good to have every important page have a link to every other important page on your site.

You can add pages of targeted content that lead your visitor to your main selling pages. You can add hundreds of pages over time, each containing useful content and introducing your main pages.

A good lead page will deliver useful and interesting information and usually focuses on a single benefit your visitors will receive. The search engines will index them. You can focus on optimizing one or two keywords or key phrases per page. This technique will help you develop top listings, leading visitors to your product, opportunity or service.

The key is to make sure that the title, description, and keywords are not misleading, you don't want to get the search engines mad at you. You want to design pages that deliver the content exactly as you describe in your Meta tags.

JAVASCRIPT TEMPLATES
The biggest problem I have found about using templates in site design, is that every time you make changes to your header or footer of your template you would need to manually make the change to every page on your website. This process can be very time consuming.

Don't worry I have a solution. Don't get discouraged. It's easier than you think.

Using JavaScript you can create a template that uses standard HTML code that is common to all your pages. You only need to add three lines of code to your pages to display your template. Using this method you can change all your pages instantly by making the change to only one page (your template).

To create a JavaScript template start by creating a page using only the Meta code without the title, description, and keywords and, the header, and the footer sections common to all pages.

In the Meta section right before the tag. add a line that refers to your template file. Name it with a JS extension instead of a .HTML extension.

Browsers by default have java turned on. All browsers version 3 and above can display a .JS file extension as long as the browser is JavaScript enabled. If someone has an older browser that doesn't display JavaScript , it will still display the Meta and body sections which contain the important content. My stats show that less than 1% of all visitors use an older version 2 or older browser. 99% of your visitors can display JavaScript with no problems.

The on-line version of my ezine uses JavaScript templates. I use them because I generate at least one new page a day and have been doing so for about 30 months, that's over 900 pages. Can you imagine how much work would be required to make a simple change to 900+ pages.

I use a JavaScript template for all my pages. I can change the template (one Page) in minutes and it will display the changes to all 900 pages instantly. I don't have to edit any of the files, only the template. If I have a hot product I can change a banner or place an ad and have it show up on all 900 pages in a couple of minutes

The following URL is my JavaScript template page. Note the .JS file extension rather than the normal .HTML file extension. When it's called out from your webpage it will not display the JavaScript commands you see on the actual template. java.js

You can see the code by choosing VIEW SOURCE in Internet Explorer or VIEW PAGE SOURCE in Netscape.


SETTING UP THE JAVASCRIPT TEMPLATE
At the top of this page add the command where you want the header section to appear.

</HEAD>
      function writeHeader() {

Your actual code for the header is regular HTML code from your template. It must appear the way the browser reads it as one long line of code. Each section of HTML code must not have hard returns or more than one extra space from line to line. I do this by creating a HTML file with just the header and footer. Next I test to see that it displays correctly.

Next I manually 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. You can test it in Notepad (the raw text editor that comes with Windows) by default wordwrap turned off. Each section will display in notepad as one long line.

Each section will start with
document.write(' { and followed by one line of HTML. and ending with     ')
The header ends with    }

Your footer is very much like the header except the start of the footer section uses the command.
function writeFooter() { and ends with }

The most common error is either having a line break (hard return) or not having an end tag after any HTML code. You can create your 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 wordwrap is off.


PREPARING THE WEBPAGE FOR A JavaScript TEMPLATE

Here is a 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.

1) Add the following to your sample webpage.
<SCRIPT LANGUAGE ="JavaScript " src="java.js" ></SCRIPT> </HEAD> <script language ="JavaScript ">writeHeader()</script>

You can change the name of your JavaScript file but make sure the JavaScript code is placed both before and after the the 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.

Remember to use the { at the beginning of your header and footer and to include the } at the end of both the header and the footer.

Also remember to terminate your HTML code with the proper tags</TAG> (most website design software will do this automatically but most programs will not remove the extra spaces and hard returns automatically.

Also remember that all HTML code appears to your browser as one long continuous line of code. Your actual HTML page can contain hard returns but the JavaScript code used in the template must not contain hard returns of extra spaces between commands.


SUMMARY
Templates are great time savers. Templates provide a common look and feel to your website. They help encourage visitors to bookmark your site. They also provide simple navigation to all your main sales pages. In addition if you use a common template you can create many pages over time leading your visitors to your sales pages and to your order page.

JavaScript templates take your design one step further. JavaScript templates provide a fast & simple method to update every page on your website almost instantly.

Best Wishes

Bob


ROBERT SMITH helps thousands successfully market their Internet based home business.
You'll find tons of free marketing tools & resources on his Internet Marketing web site at:
     http://www.smithfam.com/

You can reach him by phone at: (541) 689-1847 PST, and by email at:
     mailto:bob@smithfam.com

The Best Programable Follow-up System Available Today
      http://www.smithfam.com/autoresponder.html


FREE Work At Home GUIDE for our visitors!

| Archives | CD ROMs | Site Map | HOME | Phone Support | Search | Newsletter |
_

_
_

Smith's Family Enterprises
_
Bob's Marketing Phone Support
Home Business CD ROMs
Internet Marketing Tutorials
The eBook Wholesaler Site
The Internet Marketing Center
Good e-Books & Courses
Wholesale Info Publishing CD
Your Own Associate Program
Can´t find it Here? - Ask Bob
Downloadable Business Packages
Search Engine Submission Software
Find A Business Hosting Company
Low Cost Smart Autoresponder Script
Free Web Based Autoresponders
Credit Card Processing - Free Setup
Smithfam's Affiliate Program

_
Truly Automate Your Website Submissions to Over 800,000 Places
Generate Free Web Site Traffic
Click HereTo Get More Information Via Email

| MoreTraffic | Support | Site Map | HOME | Ask Bob | CDs |
| Articles | Search Site | Newsletter | Archives | Packages | About Bob |
| Half-Price Today | Good eBooks | Affiliate Program | eBook Wholesaler | Archives |
| Credit Cards | Script Archives | Webmaster's Tools | Autoresponders | Business Opps |
| Hosting | Getting Started | Free Hosting | Free Software | Free Graphics | Site Promotion |
_
_
A Seed Gives Birth to Fruit of its Own Kind
Smith's Family Enterprises
Home-Based Business Support Services
2606 Summer Lane, Eugene OR, 97404
(541) 689-1847
 Click Here to Email Bob Smith
Smith's Family Enterprises
_
Proudly Hosted By
ICDSoft Hosting

SF